<template>
|
<div>
|
<b-modal
|
:title="isEdit ? '编辑' : '添加'"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
button-size="sm"
|
>
|
<!-- <b-card> -->
|
<b-form>
|
<b-form-group
|
horizontal
|
label="组织名称"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.name"
|
required
|
placeholder="请输入组织名称"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="组织类型"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-select
|
:disabled="isEdit"
|
v-model="form.type"
|
:options="typeListAll"
|
value-field="value"
|
text-field="lable"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="上级机构"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<div id="treeselect">
|
<treeselect
|
v-if="!isTop"
|
disabled
|
style="height: 26px;"
|
noChildrenText="暂无"
|
placeholder="请选择上级机构"
|
v-model="form.areaId"
|
:options="treeList"
|
:normalizer="normalizer"
|
/>
|
<b-form-input v-if="isTop" :value="parentName" disabled />
|
</div>
|
</b-form-group>
|
<b-form-group
|
v-show="isUserName && !isEdit"
|
horizontal
|
label="用户名"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.username"
|
required
|
placeholder="请输入用户名"
|
/>
|
</b-form-group>
|
<b-form-group
|
v-show="isUserName && !isEdit"
|
horizontal
|
label="密码"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="password"
|
v-model="form.password"
|
required
|
placeholder="请输入密码"
|
/>
|
</b-form-group>
|
<b-form-group
|
v-show="isUserName"
|
horizontal
|
label="经度"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
v-model="form.lng"
|
placeholder="请输入经度"
|
/>
|
</b-form-group>
|
<b-form-group
|
v-show="isUserName"
|
horizontal
|
label="纬度"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
v-model="form.lat"
|
placeholder="请输入纬度"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="负责人"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.master"
|
required
|
placeholder="请输入负责人"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="联系地址"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.address"
|
required
|
placeholder="请输入联系地址"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="联系方式"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.phone"
|
required
|
placeholder="请输入联系方式"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="网址"
|
label-class="text-sm-right"
|
:label-cols="2"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.webUrl"
|
required
|
placeholder="请输入网址"
|
/>
|
</b-form-group>
|
</b-form>
|
<!-- </b-card> -->
|
</b-modal>
|
</div>
|
</template>
|
|
<script>
|
// import the component
|
import Treeselect from '@riophae/vue-treeselect'
|
// import the styles
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
import {
|
getUpOrg,
|
getOrgAdd,
|
getOrgTypeAll,
|
editOrgUpdate,
|
getOrgfindById
|
} from '../../../server/project.js'
|
import { getGloDicts } from '../../../server/common.js'
|
import { isOrg } from '../../../components/common/util.js'
|
export default {
|
props: {
|
treeList: {
|
type: Array,
|
default: () => []
|
},
|
id: {
|
type: Object,
|
default: () => ({})
|
},
|
isEdit: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
isTop: false,
|
parentName: '',
|
normalizer(node) {
|
return {
|
id: node.id,
|
label: node.name,
|
children: node.child
|
}
|
},
|
typeListAll: [],
|
form: {
|
name: '',
|
areaId: null,
|
headquartersId: '',
|
type: '请选择组织类型',
|
address: '',
|
master: '',
|
lat: '',
|
lng: '',
|
phone: '',
|
webUrl: ''
|
}
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
isUserName() {
|
let bool = false
|
let item = this.typeListAll.find(item => item.value === this.form.type)
|
bool = item && item.isAdmin
|
return !!bool
|
}
|
},
|
methods: {
|
// * 显示模态框
|
async showModel() {
|
await this.$refs.myModalRef.show()
|
this.$nextTick(async () => {
|
this.form = {
|
name: '',
|
areaId: null,
|
headquartersId: '',
|
type: '请选择组织类型',
|
address: '',
|
master: '',
|
phone: '',
|
webUrl: '',
|
lat: '',
|
lng: ''
|
}
|
this.isTop = false
|
// * 判断是否是机构
|
let currentValue = ''
|
if (this.id.partack - 0 === 0) {
|
const { id, type } = await this.fetchUpOrg(this.id.type)
|
this.form.areaId = id
|
currentValue = type
|
} else {
|
const isOrgResult = isOrg(this.id.type)
|
if (isOrgResult) {
|
currentValue = this.id.type
|
this.form.areaId = this.id.id
|
} else {
|
currentValue = this.id.type
|
this.form.areaId = this.id.orgId
|
}
|
}
|
await this._getOrgTypeAll(currentValue)
|
// * 编辑回显
|
if (this.isEdit) {
|
await this.getGloDicts()
|
Object.keys(this.form).map(k => {
|
this.form[k] = this.id[k]
|
})
|
// this.form.areaId = this.id.parentId
|
const isTop = this.treeList.find(item => item.id === this.id.id)
|
// * 如果找到了，说明是顶级节点
|
isTop && (this.isTop = true)
|
if (isTop) {
|
this.fetchOrgfindById(this.id.parentId)
|
}
|
}
|
})
|
},
|
// * 根据id获取组织机构数
|
async fetchOrgfindById(id) {
|
const res = await getOrgfindById({ id })
|
if (res) {
|
this.parentName = res.name
|
}
|
},
|
// * 获取机构类型数据
|
async _getOrgTypeAll(value) {
|
let res = await getOrgTypeAll({
|
orgId: this.orgId,
|
type: 'ORG_TYPE',
|
value
|
})
|
if (res && res.code - 0 === 0) {
|
this.typeListAll = [{ lable: '请选择组织类型' }, ...res.data]
|
}
|
},
|
// * 获取全部机构类型数据
|
async getGloDicts() {
|
const res = await getGloDicts({ type: 'ORG_TYPE' })
|
if (res && res.code - 0 === 0) {
|
this.typeListAll = [...res.data]
|
}
|
},
|
// * 查询组织机构org
|
async fetchUpOrg() {
|
let res = await getUpOrg({
|
orgId: this.id.orgId,
|
currentId: this.id.id
|
})
|
if (res) {
|
const obj = res
|
return obj
|
}
|
},
|
// * 表单提交
|
async handleOk(e) {
|
e.preventDefault()
|
// * 校验数据
|
if (this.form.type === '请选择组织类型') {
|
this.$toast({
|
type: 'warning',
|
message: '请选择组织类型'
|
})
|
return
|
}
|
if (!this.form.name) {
|
this.$toast({
|
type: 'warning',
|
message: '请填写组织名称'
|
})
|
return
|
}
|
if (this.isEdit) {
|
// * 编辑
|
const { lat, lng, ...param } = this.form
|
const res = await editOrgUpdate({
|
orgId: this.id.orgId,
|
id: this.id.id,
|
parentId: this.id.parentId,
|
...param
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '编辑成功'
|
})
|
this.$emit('update')
|
this.$refs.myModalRef.hide()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
} else {
|
// * 添加
|
const { type } = this.form
|
let str = this.typeListAll.find(item => item.value === type)
|
this.form.partack = str ? str.scope : ''
|
let res = await getOrgAdd({
|
orgId: this.form.areaId,
|
parentId: this.id.id,
|
parentValue: this.id.type,
|
...this.form
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '添加成功'
|
})
|
this.$emit('update')
|
this.$refs.myModalRef.hide()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
}
|
},
|
clearName() {
|
this.form = {
|
name: '',
|
areaId: null,
|
headquartersId: '',
|
type: '请选择组织类型',
|
address: '',
|
master: '',
|
lat: '',
|
lng: '',
|
phone: '',
|
webUrl: ''
|
}
|
}
|
},
|
components: {
|
Treeselect
|
}
|
}
|
</script>
|
|
<style>
|
#treeselect .vue-treeselect--disabled .vue-treeselect__control {
|
background-color: #f1f1f2;
|
}
|
</style>
|
