| | |
| | | <!-- |
| | | * @Date: 2024-04-18 19:53:35 |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-04-18 20:56:37 |
| | | * @LastEditTime: 2024-06-04 21:33:08 |
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue |
| | | --> |
| | | <template> |
| | | <el-tree 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></el-tree> |
| | | highlight-current default-expand-all :expand-on-click-node="false" :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: '', |
| | | currentNodeKey: [], |
| | | defalutProps: { |
| | | label: 'title', |
| | | children: 'children' |
| | | children: 'children', |
| | | disabled: this.showCheckbox ? '' : 'disabled', |
| | | class: (data, node) => { |
| | | return this.value.includes(data.id) ? 'active' : '' |
| | | }, |
| | | ...this.props |
| | | }, |
| | | data: [], |
| | | value: [] |
| | | value: [], |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | 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, |
| | |
| | | this.data = this.formatData(data) |
| | | this.$nextTick(() => { |
| | | this.currentNodeKey = this.firstWorkKey |
| | | this.$emit('loaded', this.firstWorkKey) |
| | | this.$emit('request', data) |
| | | }) |
| | | } |
| | | }) |
| | |
| | | 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 |
| | | }) |
| | |
| | | } 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 |
| | | }) |
| | |
| | | return newData |
| | | }, |
| | | handleNodeClick(node) { |
| | | console.log(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" scoped></style> |
| | | <style lang="scss"> |
| | | .is-current .el-tree-node__content { |
| | | background: var(--el-color-primary) !important; |
| | | } |
| | | |
| | | a.disabled { |
| | | color: #ccc; |
| | | } |
| | | </style> |