image.png
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<div slot="header" class="clearfix model-header">
<span>部门列表</span>
<i class="el-icon-circle-plus-outline" @click='addDepart(1)' title="添加部门"></i>
</div>
<el-tree :data="departData" :props="defaultProps" v-loading="pictLoading" element-loading-text="加载中" :node-key='defaultProps.value' :default-expanded-keys="modelShow" accordion @node-click="handleNodeClick">
<div class='edit-node-tree' slot-scope="{ node, data }">
<!-- 部门展示 -->
<span :class='data.Tid==tid?"active depart-fl":" depart-fl"'>{{ node.label }}</span>
<!-- 增删改操作 -->
<span class='depart-fr' v-if='data.Tid!=departData[0].Tid'>
<el-button type="text" @click.stop @click="() => appendDepart(data)">
<i class="el-icon-plus" title="添加"></i>
</el-button>
<el-button type="text" @click.stop @click="() => changeDepart(data)">
<i class="el-icon-edit theme-green" title="修改"></i>
</el-button>
<el-button type="text" @click.stop @click="() => removeDepart(data)">
<i class="el-icon-close theme-red" title="删除"></i>
</el-button>
</span>
</div>
</el-tree>
</el-card>
</el-col>
<el-col :span="18">
<user :tree='departData' :tid='tid'> </user>
</el-col>
</el-row>
<!--操作弹窗 S -->
<el-dialog :title="operationTitle" :close-on-click-modal="false" :append-to-body="true" class="dialog-pop"
:visible.sync="operationDialogVisible" width="450px">
<div class="dialog-body">
<el-form ref="addCoup" label-position="right" :model="addCoup" label-width="100px">
<template>
<el-form-item label="父级部门">
<el-cascader clearable :disabled='changeType==2' class='set-width' :options="options"
@active-item-change="handleItemChange" :change-on-select='true' :show-all-levels='true'
:props="{value:'Tid',label:'TName',children:'Items',checkStrictly:true}" v-model="addCoup.parentTid">
</el-cascader>
</el-form-item>
<el-form-item label="部门名称">
<el-input v-model="addCoup.departTid" type="text" placeholder="请输入部门名称">
</el-input>
</el-form-item>
</template>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="preserve()" size='small'>确 定</el-button>
<el-button @click="operationDialogVisible = false" size='small'>取 消</el-button>
</div>
</el-dialog>
<!-- 操作弹窗 E -->
</div>
</template>
<script>
import api from "@/api";
import user from "./user";
import Tools from '@/utils/tools.js';
export default {
data() {
return {
departData: [],
tid: undefined,
gid: undefined,
TName: undefined,
defaultProps: {
children: 'Items',
label: 'TName',
value: 'Tid'
},
operationTitle: '提示',
operationDialogVisible: false,
addCoup: {
departTid: '',
parentTid: [],
},
options: [],
cascaChangeData: [],//存放路径数据
pid: undefined,
value: [],
modelShow: [0],//默认展开节点tid
changeType: 1,
activated: undefined,
pictLoading: false,//树状图加载
defTid: undefined,
};
},
//组件
components: {
user
},
//在实例创建完成后被立即调用
created: function () {
this.gid = this.$route.params.id
this.getLists()
},
//计算属性 将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
computed: {
},
//dom 加载完后执行
mounted: function () { },
//方法
methods: {
// 获取树状图
getLists() {
var par = { "GId": this.gid, }
this.pictLoading = true;
api.org.getdeparTree(par).then(json => {
if (!json.error) {
this.departData = [].concat(json.result);
this.options = [].concat(json.result);
this.pictLoading = false;
} else {
this.departData = [];
this.options = [];
}
})
.catch(r => {
console.log(r);
let errTips = r.error ? r.error.msg : r.message;
this.$message.error(errTips || '出错了');
});
},
//树状操作
handleNodeClick(data) {
this.tid = data.Tid;
this.TName = data.TName;
console.log(this.tid, 6767);
},
//cascader的选择参数
handleItemChange(val) {
this.addCoup.cascasele = val;
this.activated = val[val.length - 1];
},
//添加部门
addDepart: function (i) {
this.modelShow = [];
this.defTid = [].concat(this.options[0].Tid);
this.operationTitle = '添加部门'
this.operationDialogVisible = true;
this.changeType = i;//1添加
this.addCoup.parentTid = [].concat(this.options[0].Tid);
this.addCoup.departTid = '';
},
//保存添加
preserve: function () {
console.log(this.activated, 136)
if (!this.addCoup.parentTid.length) {
this.$message({
message: '请选择父级部门',
type: 'warning'
});
return
}
if (!this.addCoup.departTid) {
this.$message({
message: '请输入部门名称',
type: 'warning'
});
return
}
console.log(this.changeType, 162)
if (this.changeType == 1) {//添加
var par = { "GId": this.gid, "ParTId": this.activated, "TName": this.addCoup.departTid };
api.org.getAddTree(par).then(json => {
console.log(json, 165)
if (!json.error) {
this.operationDialogVisible = false
this.getLists();
this.modelShow = this.defTid;
this.$message({
message: '添加成功',
type: 'success'
});
} else {
this.$message({
message: json.error.msg,
type: 'error'
});
}
})
.catch(r => {
console.log(r)
let errTips = r.error ? r.error.msg : r.message
this.$message.error(errTips || '出错了');
});
};
if (this.changeType == 2) {//编辑
var par = { "TId": this.tid, "ParTId": this.activated, "TName": this.addCoup.departTid };
api.org.getEditTree(par).then(json => {
if (!json.error) {
this.operationDialogVisible = false
this.getLists();
this.modelShow = this.defTid;
this.$message({
message: '编辑成功',
type: 'success'
});
} else {
this.$message({
message: json.error.msg,
type: 'error'
});
}
})
.catch(r => {
console.log(r)
let errTips = r.error ? r.error.msg : r.message
this.$message.error(errTips || '出错了');
});
}
},
//弹窗父级展示路径
showDeparParent: function (data, i) {
this.modelShow = [];
this.defTid = [].concat(data.Tid);
this.operationDialogVisible = true;
let tree = Tools.getTreeDeepArr(data.Tid, this.options);
this.addCoup.parentTid = tree.iGroup;
this.activated = tree.iGroup[tree.iGroup.length - 1];
this.addCoup.departTid = '';
console.log(this.addCoup.parentTid, i, 219)
if (i == 2) {
this.addCoup.departTid = data.TName;
this.addCoup.parentTid.splice(-1)
this.activated = this.addCoup.parentTid[this.addCoup.parentTid.length - 1]
}
console.log(this.addCoup.parentTid, this.activated, 22555);
},
//添加部门
appendDepart: function (data) {
this.changeType = 1;
this.operationTitle = '添加部门'
this.showDeparParent(data);
},
//修改部门名称
changeDepart: function (data) {
this.operationTitle = '修改部门名称'
this.showDeparParent(data, 2);
this.changeType = 2;
this.tid = data.Tid;
console.log(this.changeType, 211)
},
//删除部门提示框
removeDepart: function (data) {
this.defTid = [].concat(data.Tid);
this.$confirm('确定删除该部门?', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//成
this.delNode(data);
})
},
//删除该部门
delNode: function (data) {
console.log(this.tid, 256)
var par = { "Tid": data.Tid };
api.org.getDelTree(par).then(json => {
if (!json.error) {
this.operationDialogVisible = false
this.getLists();
console.log(this.modelShow, 273)
this.$message({
message: '删除成功',
type: 'success'
});
} else {
this.$message({
message: json.error.msg,
type: 'error'
});
}
})
.catch(r => {
console.log(r)
let errTips = r.error ? r.error.msg : r.message
this.$message.error(errTips || '出错了');
});
}
},
watch: {}
};
</script>
<style scoped>
.active {
color: dodgerblue;
}
.depart-fl {
float: left;
height: 40px;
line-height: 40px;
}
.depart-fr {
float: right;
height: 40px;
line-height: 40px;
display: none
}
.edit-node-tree {
width: 100%;
;
}
.edit-node-tree:hover .depart-fr {
display: block;
margin-right: 14px;
}
.theme-green {
color: #2eca56;
}
.theme-red {
color: #ff6c87;
}
</style>
