65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
|
<treeselect
|
|
v-model="deptId"
|
|
:options="deptOptions"
|
|
:show-count="true"
|
|
sise="small"
|
|
ref="treeselect"
|
|
placeholder="请选择归属部门"
|
|
@input="setId"
|
|
:normalizer="normalizer" />
|
|
</template>
|
|
|
|
<script>
|
|
import Treeselect from '@riophae/vue-treeselect';
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
|
|
import { listSimpleDepts } from '@/api/system/dept';
|
|
|
|
export default {
|
|
components: { Treeselect },
|
|
data() {
|
|
return {
|
|
deptId: undefined,
|
|
deptOptions: undefined,
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name',
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getTreeselect();
|
|
},
|
|
methods: {
|
|
/** 查询部门下拉树结构 */
|
|
getTreeselect() {
|
|
listSimpleDepts().then((response) => {
|
|
// 处理 deptOptions 参数
|
|
this.deptOptions = [];
|
|
this.deptOptions.push(...this.handleTree(response.data, 'id'));
|
|
});
|
|
},
|
|
// 子组件返回id
|
|
setId(val) {
|
|
this.$emit('DeptId', val);
|
|
},
|
|
// 父组件赋值id
|
|
setID(id) {
|
|
this.deptId = id;
|
|
},
|
|
clear() {
|
|
console.log(this.$refs.treeselect);
|
|
this.$refs.treeselect.clear();
|
|
},
|
|
// 格式化部门的下拉框
|
|
normalizer(node) {
|
|
return {
|
|
id: node.id,
|
|
label: node.name,
|
|
children: node.children,
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|