<template>
|
<div class="inner">
|
<a-table
|
:columns="columns"
|
:data-source="tableData"
|
:expanded-row-keys.sync="expandedRowKeys"
|
:rowKey="record=>record.id"
|
:pagination="false"
|
>
|
<template #name="name">
|
<span style="color:#40a9ff;font-weight: bolder">{{name}}</span>
|
</template>
|
<template #action="action,row">
|
<a-button type="link" @click="editData(row)">编辑</a-button>
|
<a-button type="primary" @click="openAdd('add',row)">增加本级单位</a-button>
|
</template>
|
<template #expandedRowRender="text">
|
<a-table
|
:columns="innerColumns"
|
:data-source="text.orgStructures"
|
:rowKey="record=>record.id"
|
:pagination="false"
|
v-if="text.orgStructures && text.orgStructures.length>0"
|
:showHeader="false"
|
>
|
<template #action="action,row">
|
<a-button type="link" @click="openAdd('edit',row)">编辑</a-button>
|
<a-button type="link" class="delBtn" @click="delData(row)">删除</a-button>
|
</template>
|
</a-table>
|
</template>
|
</a-table>
|
<a-modal v-model="showDialog" :title="editTitle" :ok-text="editTitle" cancel-text="取消" @ok="addData" centered :afterClose="clearMod">
|
<a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<a-form-model-item label="单位名称" prop="orgName">
|
<a-input v-model="form.orgName"/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal v-model="showAreaDialog" title="修改" ok-text="确认" cancel-text="取消" @ok="confirmUpdate" centered>
|
<a-form-model ref="areaRuleForm" :rules="areaRules" :model="areaForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<a-form-model-item label="区划名称" prop="name">
|
<a-input v-model="areaForm.name"/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import {getUserInfo} from "@/util/storage";
|
import {getStructure, addDep, editDep, delStructure, editArea} from "@/api/contactBook";
|
export default {
|
name: 'structure',
|
components: {
|
|
},
|
data () {
|
return {
|
areaVal: [],
|
unittype: null,
|
districtId: null,
|
columns:[
|
{
|
title: '名称',
|
dataIndex: 'name',
|
key: 'name',
|
scopedSlots: {
|
customRender: 'name'
|
},
|
},
|
{
|
title: '操作',
|
width: '12%',
|
key: 'action',
|
scopedSlots: { customRender: 'action' }
|
},
|
],
|
innerColumns: [
|
{
|
title: '名称',
|
dataIndex: 'orgName',
|
key: 'orgName',
|
},
|
{
|
title: '操作',
|
width: '12%',
|
key: 'action',
|
scopedSlots: { customRender: 'action' }
|
},
|
],
|
form: {
|
orgName: '',
|
districtId: null,
|
districtCode: ''
|
},
|
areaForm: {
|
id: null,
|
name: ''
|
},
|
labelCol: { span: 4 },
|
wrapperCol: { span: 14 },
|
rules: {
|
orgName: [{ required: true, message: '请输入单位名称', trigger: 'blur'}],
|
},
|
areaRules: {
|
name: [{ required: true, message: '请输入区划名称', trigger: 'blur'}],
|
},
|
innerData: [],
|
tableData: [],
|
editTitle: '新增',
|
expandedRowKeys: [],
|
showDialog: false,
|
showAreaDialog: false
|
}
|
},
|
created() {
|
const t = this
|
t.unittype = getUserInfo().unittype
|
t.districtId = getUserInfo().districtId
|
t.getStructure()
|
},
|
methods:{
|
async getStructure(){
|
const t = this
|
const res = await getStructure();
|
if(res.data.code == 100){
|
t.tableData = t.filterBranches(res.data.data,['自治区直辖县级行政区划'])
|
}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; // 保留当前分支
|
});
|
},
|
|
openAdd(type,row){
|
if(type == 'add'){
|
this.editTitle = '新增'
|
this.form.districtCode = row.code
|
}else{
|
this.editTitle = '修改'
|
this.form.orgName = row.orgName
|
}
|
this.form.districtId = row.id
|
this.showDialog = true
|
},
|
|
addData(){
|
this.$refs.ruleForm.validate(async valid => {
|
if (valid) {
|
if(this.editTitle == '新增'){
|
const res = await addDep(this.form);
|
if(res.data.code == 100){
|
this.$message.success('新增成功');
|
this.showDialog = false
|
await this.getStructure()
|
}else{
|
this.$message.warning(res.data.msg);
|
}
|
}else{
|
const data = {
|
id: this.form.districtId,
|
orgName: this.form.orgName
|
}
|
const res = await editDep(data);
|
if(res.data.code == 100){
|
this.$message.success('修改成功');
|
this.showDialog = false
|
await this.getStructure()
|
}else{
|
this.$message.warning(res.data.msg);
|
}
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
|
clearMod(){
|
this.form = {
|
orgName: '',
|
districtId: null,
|
districtCode: ''
|
}
|
},
|
|
editData(row){
|
const t = this
|
t.areaForm.id = row.id
|
t.areaForm.name = row.name
|
t.showAreaDialog = true
|
},
|
|
confirmUpdate(){
|
this.$refs.areaRuleForm.validate(async valid => {
|
if (valid) {
|
const res = await editArea(this.areaForm);
|
if(res.data.code == 100){
|
this.$message.success('修改成功');
|
this.showAreaDialog = false
|
await this.getStructure()
|
}else{
|
this.$message.warning(res.data.msg);
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
})
|
},
|
|
async delData(row){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否删除该条信息？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
delStructure(row.id).then(res=>{
|
if(res.data.code == 100){
|
t.$message.success('删除成功');
|
t.getStructure()
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
})
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.delBtn{
|
color: @danger
|
}
|
</style>
|
