4424f41c
 monkeyhouyi
网信执法、清单管理静态页面
|
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<template>
<div class="transfer__body" v-loading="loading" :element-loading-text="$t('common.loadingText')"
:style="{height}">
<div class="transfer-pane">
<div class="transfer-pane__tools">
<el-input placeholder="输入关键词进行搜索" v-model="filterText" />
</div>
<div class="transfer-pane__body">
<el-tree :data="treeData" :props="props" default-expand-all highlight-current ref="treeBox"
:expand-on-click-node="false" check-on-click-node class="NCC-common-el-tree"
node-key="id" show-checkbox v-loading="loading" :filter-node-method="filterNode"
@check="onCheck">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i :class="data.icon"></i>
<span class="text">{{node.label}}</span>
</span>
</el-tree>
</div>
</div>
<div class="transfer-pane">
<div class="transfer-pane__tools">
<span>已选</span>
<el-button @click="removeAll" type="text">清空列表</el-button>
</div>
<div class="transfer-pane__body shadow right-pane">
<template>
<div v-for="(item, index) in selectedTextData" :key=" index" class="selected-item">
<span>{{ item.fullName}}</span>
<i class="el-icon-delete" @click="removeData(item,index)"></i>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NCC-transfer',
data() {
return {
selectedData: [],
selectedTextData: [],
filterText: ''
}
},
props: {
height: {
type: String,
default: "380px"
},
loading: {
type: Boolean,
default: false
},
treeData: {
type: Array,
default: () => []
},
value: {
type: Array,
default: () => []
},
props: {
type: Object,
default: () => {
return { value: "id", label: "fullName", children: "children" };
}
},
type: {
type: String,
default: ''
}
},
watch: {
filterText(val) {
this.$refs.treeBox.filter(val);
},
value(val) {
this.initHandle()
},
},
methods: {
initHandle() {
if (this.value.length) {
this.$refs.treeBox.setCheckedKeys(this.value)
this.$nextTick(_ => {
this.selectedTextData = this.$refs.treeBox.getCheckedNodes(true)
this.selectedData = this.$refs.treeBox.getCheckedKeys(true)
})
} else {
this.$refs.treeBox.setCheckedKeys([])
this.selectedTextData = []
this.selectedData = []
}
},
filterNode(value, data) {
if (!value) return true;
return data.fullName.indexOf(value) !== -1;
},
onCheck(data, checked) {
if (this.type) {
let list = this.$refs.treeBox.getCheckedNodes(true)
this.selectedTextData = list.filter(o => o.type == this.type)
} else {
this.selectedTextData = this.$refs.treeBox.getCheckedNodes(true)
}
this.selectedData = this.selectedTextData.map(o => o.id)
this.$emit('input', this.selectedData)
this.$emit('getValue', this.selectedData, this.selectedTextData)
},
removeData(item, index) {
this.$refs.treeBox.setChecked(item.id, false)
this.selectedData.splice(index, 1)
this.selectedTextData.splice(index, 1)
this.$emit('input', this.selectedData)
this.$emit('getValue', this.selectedData, this.selectedTextData)
},
removeAll() {
this.$refs.treeBox.setCheckedKeys([])
this.selectedData = []
this.selectedTextData = []
this.$emit('input', this.selectedData)
this.$emit('getValue', this.selectedData, this.selectedTextData)
},
}
};
</script>
|
