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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
| <!--
| * @Date: 2024-04-18 19:53:35
| * @LastEditors: Sneed
| * @LastEditTime: 2024-06-16 16:21:59
| * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue
| -->
| <template>
| <el-tree :expand-on-click-node="false" ref="treeRef" v-bind="$attrs" :show-checkbox="showCheckbox"
| :current-node-key="currentNodeKey" node-key="id" :props="defalutProps" :data="data" @check-change="checkChange"
| @node-click="handleNodeClick" highlight-current default-expand-all :render-content="renderContent"></el-tree>
| </template>
|
| <script>
| import pmsPng from '@/assets/pms.png'
| export default {
| props: {
| showCheckbox: {
| type: Boolean,
| default: false
| },
| getAll: {
| type: Boolean,
| default: false
| },
| props: {
| type: Object,
| default: () => {
| return {}
| }
| }
| },
| data() {
| return {
| pmsPng,
| firstWorkKey: '',
| currentNodeKey: [],
| defalutProps: {
| label: 'title',
| children: 'children',
| disabled: this.showCheckbox ? '' : 'disabled',
| class: (data, node) => {
| return this.value.includes(data.id) ? 'active' : ''
| },
| ...this.props
| },
| data: [],
| value: [],
| }
| },
| watch: {
| currentNodeKey(val) {
| if (!this.showCheckbox) {
| this.value = [val]
| }
| },
| value(value) {
| this.$emit('update:modelValue', value)
| }
| },
| created() {
| this.getList()
| },
| methods: {
| renderContent(h, { data, node }) {
| let img = data.groupTag == 'fms_beltline'
| return h('a', {
| class: {
| disabled: this.props.disabled ? this.props.disabled(data, node) : data.disabled
| },
| disabled: this.props.disabled ? this.props.disabled(data, node) : data.disabled
| },
| img ? h('img', {
| src: pmsPng
| }, '') : '',
| data.title)
| },
| getList() {
| this.$HTTP.post('/api/blade-cps/group/groupWorkstation/type', {
| groupCategory: 1,
| groupType: "group_workstation"
| }).then(({ code, data }) => {
| if (code === 200) {
| this.data = this.formatData(data)
| this.$nextTick(() => {
| this.currentNodeKey = this.firstWorkKey
| this.$emit('loaded', this.firstWorkKey)
| this.$emit('request', data)
| })
| }
| })
| },
| setCurrentKey(v) {
| if (this.firstWorkKey) return
| if (v.isWorkstation) {
| this.firstWorkKey = v.id
| }
| },
| formatData(data, current) {
| let newData = []
| if (!current) {
| newData = data.filter(item => item.parentId == 0).map(v => {
| if (!v.isWorkstation) v.disabled = true
| v.children = this.formatData(data, v).sort((a, b) => {
| return b.sort - a.sort
| })
| this.setCurrentKey(v)
| return v
| })
| } else {
| let res = data.filter(v => v.parentId == current.id)
| res = res.map(item => {
| if (!item.isWorkstation) item.disabled = true
| item.children = this.formatData(data, item).sort((a, b) => {
| return b.sort - a.sort
| })
| this.setCurrentKey(item)
| return item
| })
| return res
| }
| return newData
| },
| handleNodeClick(node) {
| this.$nextTick(() => {
| if (node.isWorkstation) {
| this.currentNodeKey = node.id
| }
| })
|
| },
| checkChange(data, data1, data2) {
| if (this.getAll) {
| return this.value = this.$refs.treeRef.getCheckedNodes().filter(v => v.isWorkstation)
| }
| this.value = this.$refs.treeRef.getCheckedNodes().filter(v => v.isWorkstation).map(item => item.id)
| },
| },
| }
| </script>
|
| <style lang="scss">
| .is-current>.el-tree-node__content {
| // background: var(--el-color-primary) !important;
| }
|
| a.disabled {
| color: #ccc;
| }
| </style>
|
|
