1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| <template>
| <div class="departmentChoose">
| <treeselect v-model="departmentId"
| :multiple="multiple"
| :options="menuOptions"
| :normalizer="normalizer"
| :show-count="true"
| :placeholder=placeholder
| @input="handleTreeSelect"
| :flat="flat"
|
| />
| </div>
| </template>
|
| <script>
| import {fetchTree} from '@/api/admin/dept'
| import { initDepartment } from "@/api/admin/dept";
| import Treeselect from "@riophae/vue-treeselect"
| import "@riophae/vue-treeselect/dist/vue-treeselect.css"
| export default {
| name: "departmentTreeChoose",
| components:{Treeselect},
| props:{
| multiple:{ //是否是多选
| type:Boolean,
| default:false,
| },
| flat: {
| type:Boolean,
| default:false,
| },
| placeholder: {
| type: String,
| default: "点击选择部门",
| }
| },
| data() {
| return {
| menuOptions:[], //treeselect数据回显
| departmentId: null,
| dataDep: [],
| }
| },
| mounted() {
| this.getTreeselect()
| // this.initDepartmentData()
| },
| methods: {
| // initDepartmentData() {
| // initDepartment().then((res) => {
| // if (res.data.code==0) {
| // res.data.data.forEach(function (e) {
| // if (e.isParent) {
| // e.loading = false;
| // e.children = [];
| // }
| // if (e.status == -1) {
| // e.title = "[已禁用] " + e.title;
| // e.disabled = true;
| // }
| // e.isParent = true;
| // // e.loading = true;
| // e.title = e.name;
| // e.id = e.deptId;
| // });
| // this.dataDep = res.data.data;
| // console.log(this.dataDep)
| // }
| // });
| // },
| handleTreeSelect(node) { //选择一个选项后发出。
| this.$emit('on-change',this.departmentId)
| },
| getTreeselect() {
| fetchTree().then(res => {
| this.menuOptions = res.data.data
| })
| },
| initData(val) { //重置
| this.searchKey = val
| },
| setData(ids, title) {
| if (this.multiple) {
| this.departmentId = ids;
| } else {
| this.departmentId = [];
| this.departmentId.push(ids);
| }
| this.departmentId = ids
| this.$emit("on-change", this.departmentId);
| },
| /** 转换菜单数据结构 */
| normalizer(node) {
| if (node.children && !node.children.length) {
| delete node.children;
| }
| return {
| id: node.id,
| label: node.name,
| children: node.children
| };
| },
| }
| }
| </script>
|
| <style scoped>
| </style>
|
|
