<!--
|
* @Date: 2024-04-18 19:53:35
|
* @LastEditors: gaoshp
|
* @LastEditTime: 2024-11-08 19:14:11
|
* @FilePath: /cps-web/src/views/mdc/MYTree.vue
|
-->
|
<template>
|
<el-input v-model="word" style="max-width: 600px" placeholder="" @change="search" class="input-with-select">
|
<template #append>
|
<el-button :icon="ElementPlusIconsVue.Search" />
|
</template>
|
</el-input>
|
<el-switch v-model="showType" active-text="列表" inactive-text="树状" @change="switchFn" />
|
<el-tree v-show="!showType" :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>
|
<el-table v-show="showType" :data="tableData" @selection-change="handleSelectionChange" highlight-current-row
|
:current-row-key="currentNodeKey" row-key="id" @row-click="rowClick">
|
<el-table-column v-if="showCheckbox" type="selection" :selectable="selectable" width="55" />
|
<el-table-column prop="title" label="工位名称" />
|
</el-table>
|
</template>
|
|
<script>
|
import pmsPng from '@/assets/pms.png'
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
export default {
|
props: {
|
showCheckbox: {
|
type: Boolean,
|
default: false
|
},
|
getAll: {
|
type: Boolean,
|
default: false
|
},
|
props: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
ElementPlusIconsVue,
|
word: '',
|
showType: false, // 显示类型
|
tableData: [],
|
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)
|
}
|
},
|
mounted() {
|
this.getList()
|
let key = this.$route.path
|
if (localStorage.getItem(key) === '1') {
|
this.showType = true
|
}
|
console.log(this.$route, '>>>>>>')
|
},
|
methods: {
|
search() {
|
this.getList()
|
},
|
switchFn(val) {
|
console.log(this.$route, val, '>>>>>>')
|
localStorage.setItem(this.$route.path, val ? '1' : '0')
|
},
|
handleSelectionChange(selection) {
|
if (this.getAll) {
|
return this.value = selection
|
}
|
this.value = selection.map(v => v.id)
|
},
|
rowClick(row) {
|
this.currentNodeKey = row.id
|
},
|
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/smis/group/groupWorkstation/type', {
|
groupCategory: 1,
|
groupType: "group_workstation"
|
}).then(({ code, data }) => {
|
if (code === 200) {
|
this.tableData = data.filter(v => v.isWorkstation && v.title.indexOf(this.word) > -1)
|
this.data = this.formatData(data.filter(v => !v.isWorkstation || (v.isWorkstation && v.title.indexOf(this.word) > -1)))
|
this.$nextTick(() => {
|
this.setCurrentKey(data)
|
this.$emit('loaded', this.currentNodeKey)
|
this.$emit('request', data)
|
})
|
}
|
})
|
},
|
setCurrentKey(data) {
|
this.currentNodeKey = data.find(v => v.isWorkstation && v.title.indexOf(this.word) > -1).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) {
|
console.log('>>>>>>>')
|
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>
|
