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
| <!-- 部门筛选选择器 -->
| <template>
| <div>
| <div>
| <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
| style="margin-bottom: 20px" />
| </div>
| <div>
| <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
| ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
| </div>
| </div>
| </template>
|
| <script>
| import { deptTreeSelect } from "@/api/system/user";
|
| export default {
| name: "deptSearchComponent",
| data() {
| return {
| defaultProps: {
| children: "children",
| label: "label"
| },
| // 部门树选项
| deptOptions: undefined,
| // 部门名称
| deptName: undefined,
| };
| },
| watch: {
| // 根据名称筛选部门树
| deptName(val) {
| this.$refs.tree.filter(val);
| }
| },
| mounted() {
| this.getDeptTree();
| },
| // 解绑事件
| beforeDestroy() {
| this.$bus.$off('on-getDeptTree');
| },
| methods: {
| /** 查询部门下拉树结构 */
| getDeptTree() {
| deptTreeSelect().then(response => {
| this.deptOptions = response.data;
| this.$bus.$emit('on-getDeptTreeData', response.data)
| this.$emit('on-getDeptTree', response.data)
| });
| },
| // 筛选节点
| filterNode(value, data) {
| if (!value) return true;
| return data.label.indexOf(value) !== -1;
| },
| // 节点单击事件
| handleNodeClick(data) {
| this.$emit('on-selectDept', data.id)
| }
| },
| };
| </script>
|
| <style scoped></style>
|
|
