TreeData.vue
2.65 KB
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
<template>
<div class="treeBox">
<span class="text">数据范围：</span>
<el-tabs v-model="active" type="card" @tab-click="handleClick">
<el-tab-pane label="全部" name="ALL">
<div class="blankBox">暂时还没有数据哦～</div>
</el-tab-pane>
<el-tab-pane label="本级" name="THIS_LEVEL">
<div class="blankBox">暂时还没有数据哦～</div>
</el-tab-pane>
<el-tab-pane label="本级及子级" name="THIS_LEVEL_CHILDREN">
<div class="blankBox">暂时还没有数据哦～</div>
</el-tab-pane>
<el-tab-pane label="自定义" name="CUSTOMIZE">
<div v-if="treeData.length > 0">
<span class="text">组织：</span>
<el-tree
ref="rightsTree"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="orgdata"
:props="defaultProps"
@check="handleNodeClick"
/>
<div v-if="tipshow" class="colRed">请至少选择一个单位</div>
</div>
<div v-else class="blankBox">暂时还没有数据哦～</div>
</el-tab-pane>
<el-tab-pane label="个人" name="SELF">
<div class="blankBox">暂时还没有数据哦～</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { getAllTree } from '@/api/api'
@Component({
name: 'tree-data'
})
export default class extends Vue {
@Prop() private tipshow!: string
@Prop() private orgdata!: []
@Prop() private activeNames!: string
private treeData = []
private active = ''
private orgList = []
private defaultProps = {
children: 'children',
name: 'name',
id: 'id'
}
@Watch('activeNames', { immediate: true })
getActive(val: any) {
this.active = val
}
@Watch('orgdata')
getOrg(val: any) {
if (val !== null && val !== undefined) {
this.$nextTick(() => {
(this.$refs as any).rightsTree.setCheckedKeys(val)
})
} else {
if (this.$refs.rightsTree !== undefined) {
(this.$refs as any).rightsTree.setCheckedKeys([])
}
}
}
created() {
this.getList()
}
// 功能
// 获取数据
private async getList() {
const { data } = await getAllTree({})
this.treeData = data.data
}
// ui
handleNodeClick(node: any, data: any, value: any) {
this.$emit('getOrgList', data.checkedKeys)
}
handleClick(item: any) {
const parent = {
code: item.name,
val: Number(item.index) + 1
}
this.$emit('gettype', parent)
}
}
</script>
<style lang="scss"></style>