<template>
|
<a-modal
|
:title="title"
|
:visible="visible"
|
centered
|
:confirm-loading="confirmLoading"
|
width="50%"
|
cancelText="取消"
|
okText="确认"
|
@ok="onSubmit"
|
@cancel="handleCancel"
|
:afterClose="clearMod"
|
>
|
<a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="姓名" prop="name">
|
<a-input v-model.trim="form.name" :disabled="isView"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="手机号码" prop="phone">
|
<a-input v-model.trim="form.phone" :disabled="isView"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="所属单位" prop="company">
|
<a-input v-model.trim="form.company" :disabled="isView"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="职务" prop="post">
|
<a-input v-model.trim="form.post" :disabled="isView"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="行政区划">
|
<a-tree-select
|
v-model="areaId"
|
style="width: 100%"
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
:tree-data="areaData"
|
placeholder="行政区划"
|
:replaceFields="replaceFields"
|
@change="changeArea"
|
/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="组织架构">
|
<a-select
|
v-model.trim="form.orgStructureId"
|
placeholder="选择组织架构"
|
style="width: 100%"
|
allowClear
|
show-search
|
>
|
<a-select-option v-for="item in orgData" :value="item.id" :key="item.id">{{item.orgName}}</a-select-option>
|
</a-select>
|
<!-- <a-input v-model="orgName" />-->
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="排位顺序">
|
<a-input type="number" v-model.number="form.orderNum" :disabled="isView"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span="24">
|
<!-- <template v-for="(item,index) in options">-->
|
<a-form-model-item label="责任类别" :label-col="{span: 3}" :wrapper-col="{span: 14}" prop="typeList">
|
<a-checkbox-group
|
v-model="form.typeList"
|
:options="options"
|
@change="onTypeChange"
|
:disabled="isView"
|
style="width: 100%;"
|
/>
|
</a-form-model-item>
|
<!-- </template>-->
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span="24" v-for="(item,index) in options">
|
<a-form-model-item v-if="item.children && item.children.length>0 && form.typeList.find(i=>i == item.label)" :label="item.label" :label-col="{span: 3}" :wrapper-col="{span: 14}" :prop="'tagList.' + item.label">
|
<a-checkbox-group
|
v-model="form.tagList[item.label]"
|
:options="item.children"
|
@change="onTagChange"
|
:disabled="isView"
|
/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-modal>
|
</template>
|
|
<script>
|
import {addContactors, getStructure, updateContactors} from '@/api/contactBook'
|
import {verifySimplePhone} from "@/util/validate";
|
import {getDistrictInfo} from "@/api/login";
|
import subMenu from "@/views/Admin/contactBook/subMenu.vue";
|
import {getOrgData} from "@/api/user";
|
export default {
|
name: 'addressUserMod',
|
components: {subMenu},
|
props: ['groupList'],
|
data () {
|
let validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifySimplePhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
|
return {
|
title: '新增责任人',
|
visible: false,
|
isView: false,
|
confirmLoading: false,
|
areaData: [],
|
labelCol: { span: 6 },
|
wrapperCol: { span: 14 },
|
areaId: null,
|
orgName: '',
|
areaVal: [],
|
orgData: [],
|
fieldNames:{
|
label: 'name',
|
value: 'id',
|
children: 'children'
|
},
|
form: {
|
id: null,
|
name: '',
|
phone: '',
|
company: '',
|
post: '',
|
orgStructureId: null,
|
districtId: null,
|
districtCode: '',
|
orderNum: 0,
|
typeList: [],
|
tagList: {}
|
},
|
tagList: [],
|
rules: {
|
name: [{ required: true, message: '请输入姓名', trigger: 'blur'}],
|
phone: [{ required: true, validator: validatePhone, trigger: 'blur'}],
|
company: [{ required: true, message: '请输入单位名称', trigger: 'blur'}],
|
post: [{ required: true, message: '请输入职务', trigger: 'change'}],
|
typeList: [{ required: true, message: '请选择责任类别', trigger: 'change'}],
|
tagList: []
|
},
|
options: [
|
{
|
value: '党委政府',
|
label: '党委政府',
|
children: [
|
{
|
value: '主要领导',
|
label: '主要领导',
|
},
|
{
|
value: '分管领导',
|
label: '分管领导',
|
}
|
]
|
},
|
{
|
value: '两委三部',
|
label: '两委三部',
|
children: [
|
{
|
value: '安委会成员单位',
|
label: '安委会成员单位'
|
},
|
{
|
value: '减灾委成员单位',
|
label: '减灾委成员单位'
|
},
|
{
|
value: '防汛抗旱指挥部',
|
label: '防汛抗旱指挥部'
|
},
|
{
|
value: '抗震救灾指挥部',
|
label: '抗震救灾指挥部'
|
},
|
{
|
value: '森林草原防灭火指挥部',
|
label: '森林草原防灭火指挥部'
|
}
|
]
|
},
|
{
|
value: '应急部门',
|
label: '应急部门',
|
children: [
|
{
|
value: '应急部门',
|
label: '应急部门'
|
}
|
]
|
},
|
{
|
value: '救援队伍',
|
label: '救援队伍',
|
children: [
|
{
|
value: '救援队伍',
|
label: '救援队伍'
|
}
|
]
|
},
|
{
|
value: '灾害信息员',
|
label: '灾害信息员',
|
children: [
|
{
|
value: '灾害信息员',
|
label: '灾害信息员'
|
}
|
]
|
},
|
{
|
value: '企业',
|
label: '企业',
|
children: [
|
{
|
value: '企业',
|
label: '企业'
|
}
|
]
|
}
|
],
|
replaceFields: {
|
children:'children',
|
title:'name',
|
key:'id',
|
value: 'id'
|
},
|
currentKey: [],
|
openKeys: [],
|
|
}
|
},
|
created() {
|
const t = this
|
// t.getDistrictInfo()
|
t.getStructure()
|
},
|
|
|
methods:{
|
openDialog(type,data,areaId,orgName,orgId) {
|
const t = this
|
t.changeArea(areaId)
|
t.createRules()
|
t.areaId = Number(areaId)
|
t.orgName = orgName
|
|
if(type == 'add'){
|
t.title = '新增责任人'
|
t.isView = false
|
t.form = {
|
id: null,
|
name: '',
|
phone: '',
|
company: '',
|
post: '',
|
orgStructureId: Number(orgId),
|
districtId: t.areaId,
|
districtCode: t.findCodeById(t.areaData,t.areaId),
|
orderNum: 0,
|
typeList: [],
|
tagList: {}
|
}
|
}else{
|
for(let i in data){
|
if(t.isValidKey(i,t.form)){
|
t.form[i] = data[i]
|
}
|
}
|
t.form.typeList = []
|
t.form.tagList = {}
|
t.form.typeList = data.orgUserTypes.map(i=>i.typeName)
|
// for(let i of data.orgUserTypes){
|
// t.form.tagList[i.typeName] = i.orgUserTags.map(j=>j.tagName)
|
// }
|
// Vue.set方法添加新属性确保响应式
|
for (let i of data.orgUserTypes) {
|
t.$set(t.form.tagList, i.typeName, i.orgUserTags.map(j => j.tagName));
|
}
|
if(type == 'edit'){
|
t.title = '编辑责任人'
|
t.isView = false
|
}else{
|
t.title = '责任人详情'
|
t.isView = true
|
}
|
}
|
t.visible = true
|
},
|
onChange(value) {
|
const t = this
|
|
},
|
isValidKey(key, object){
|
return key in object;
|
},
|
createRules(){
|
for(let i of this.options){
|
this.rules.tagList[i.label] = (
|
{
|
required: true,
|
validator: (rule, value, callback) => {
|
if (!value || value.length === 0) {
|
callback(new Error('请选择标签类别'));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'change'
|
}
|
)
|
}
|
},
|
onTypeChange(checkedValue) {
|
console.log(checkedValue,this.form.typeList,666);
|
},
|
|
onTagChange(checkedValue) {
|
console.log(checkedValue,this.form.tagList,777);
|
},
|
|
clearMod(){
|
this.$refs.ruleForm.clearValidate()
|
this.$refs.ruleForm.resetFields()
|
this.rules.tagList = []
|
},
|
|
onSubmit() {
|
this.$refs.ruleForm.validate(valid => {
|
if (valid) {
|
if(this.title == '新增责任人'){
|
const {id,tagList,...data} = this.form
|
data.typeList = this.form.typeList.map(item=>{
|
const newTagList = this.form.tagList[item].map(i=>{
|
return {
|
tagName: i
|
}
|
})
|
return {
|
typeName: item,
|
tagList: newTagList
|
}
|
})
|
addContactors(data).then((res)=>{
|
if(res.data.code == 100){
|
this.$message.success('新增责任人成功')
|
this.$emit('refresh')
|
this.visible = false
|
}else{
|
this.$message.error(res.data.msg)
|
}
|
})
|
}else if(this.title == '编辑责任人'){
|
const {tagList,...data} = this.form
|
data.typeList = this.form.typeList.map(item=>{
|
const newTagList = this.form.tagList[item].map(i=>{
|
return {
|
tagName: i
|
}
|
})
|
return {
|
typeName: item,
|
tagList: newTagList
|
}
|
})
|
updateContactors(data).then((res)=>{
|
if(res.data.code == 100){
|
this.$message.success('修改责任人成功')
|
this.$emit('refresh')
|
this.visible = false
|
}else{
|
this.$message.error(res.data.msg)
|
}
|
})
|
}else{
|
this.visible = false
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
|
async getStructure(){
|
const t = this
|
const res = await getStructure()
|
if(res.data.code == 100){
|
t.areaData = t.filterBranches(res.data.data,['自治区直辖县级行政区划'])
|
// const firstItem = this.firstIdWithOrgStructures(res.data.data[0])
|
// if(firstItem){
|
// t.openKeys = [firstItem.id +'-'+ firstItem.name]
|
// t.currentId = firstItem.id
|
// t.currentKey = [firstItem.orgStructures[0].id +'-'+ firstItem.orgStructures[0].orgName]
|
// }else{
|
// t.$message.warning('暂无可操作的单位，请先进入“组织架构维护页面”新建相应的本级单位')
|
// }
|
}else{
|
t.$message.warning(res.data.msg)
|
}
|
},
|
filterBranches(branches, targetNames) {
|
return branches.filter(branch => {
|
if (targetNames.includes(branch.name)) {
|
return false; // 过滤掉当前分支
|
}
|
if (branch.children && branch.children.length > 0) {
|
branch.children = this.filterBranches(branch.children, targetNames);
|
}
|
return true; // 保留当前分支
|
});
|
},
|
async getDistrictInfo(){
|
let res = await getStructure()
|
if(res.data.code == 100){
|
this.areaData = res.data.data
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
},
|
|
findCodeById(data, id) {
|
for (let item of data) {
|
if (item.id === id) {
|
return item.code;
|
}
|
if (item.children && item.children.length > 0) {
|
const code = this.findCodeById(item.children, id);
|
if (code) {
|
return code;
|
}
|
}
|
}
|
return null; // 如果未找到，返回 null
|
},
|
|
handleCancel(e) {
|
const t = this
|
t.visible = false;
|
},
|
changeArea(val){
|
const t = this
|
t.form.districtId = val;
|
t.form.districtCode = t.findCodeById(t.areaData,val)
|
t.form.orgStructureId = null;
|
getOrgData(val).then(res => {
|
if(res.data.code === 100) {
|
console.log("res",res)
|
t.orgData = res.data.data
|
}else {
|
t.$message.warning(res.data.msg)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
