[update] 修改企标和内部工作组的左侧树

This commit is contained in:
lideqin
2023-09-15 09:25:36 +08:00
parent 55439cbe14
commit 6c740e70a5
2 changed files with 47 additions and 77 deletions
@@ -15,16 +15,22 @@
<template #custom="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.key)" @mouseleave="handleTreeMouseout(record.key)">
<!--<a-tooltip>-->
<!-- <template #title>-->
<!-- {{ record.title }}-->
<!-- </template>-->
<!-- <span v-if="record.title.indexOf(treeInput) > -1" class="tree-node-custom-title">-->
<!-- {{ record.title.substr(0, record.title.indexOf(treeInput)) }}-->
<!-- <span style="color: #f50">{{ treeInput }}</span>-->
<!-- {{ record.title.substr(record.title.indexOf(treeInput) + treeInput.length) }}-->
<!-- </span>-->
<!-- <span v-else class="tree-node-custom-title">{{ record.title }}</span>-->
<!--</a-tooltip>-->
<a-tooltip>
<template #title>
{{ record.title }}
</template>
<span v-if="record.title.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ record.title.substr(0, record.title.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ record.title.substr(record.title.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ record.title }}</span>
<span class="tree-node-custom-title">{{ record.title }}</span>
</a-tooltip>
<template v-if="record.key === mouseInNodeKey && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value">
<!-- 新增-->
@@ -167,9 +173,6 @@ export default {
flag: '3',
treeInput: '', // 左侧树搜索框内容
treeData: [], // 左侧树数据
treeDataList: [], // 左侧树的数组结构,用于搜索
expandedKeys: [],
autoExpandParent: true,
defaultExpandAll: false, // 左侧树默认展开所有
currentTreeNode: null, // 当前选中的树节点
mouseInNodeKey: null, // 鼠标悬浮的节点key值
@@ -245,25 +248,6 @@ export default {
this.treeData = []
this.initTreeData({ nodeName: this.treeInput })
},
// 左侧树搜索框改变
// handleTreeChange (e) {
// const value = e.target.value
// const expandedKeys = this.treeDataList
// .map(item => {
// if (item.title.indexOf(value) > -1) {
// return item.parentId
// }
// return null
// })
// .filter((item, i, self) => item && self.indexOf(item) === i)
// this.expandedKeys = expandedKeys
// this.autoExpandParent = true
// },
// 左侧树点击展开
treeExpand (expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
// 左侧树点击选中
treeSelect (selectedKeys) {
this.currentTreeNode = selectedKeys
@@ -2,16 +2,14 @@
<a-card :bordered="false" class="page-left-right-layout">
<div class="page-left-box">
<a-input-search v-model="treeInput" :placeholder="$t('system.internalWorkGroup.treeSearchPlaceholder')"
@change="handleTreeChange" />
@search="handleTreeSearch" />
<a-tree
:show-line="true"
:show-icon="true"
:tree-data="treeData"
:selectedKeys="currentTreeNode"
:replaceFields="{children: 'subset', title: 'name', key: 'id'}"
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
@expand="treeExpand"
:default-expand-all="defaultExpandAll"
@select="treeSelect">
<!-- <template #iconCustom="{title}">-->
<!-- <div class="tree-node">-->
@@ -28,16 +26,22 @@
<!-- 没有删除 -->
<template #customNoDelete="{name, id}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
<!--<a-tooltip>-->
<!-- <template #title>-->
<!-- {{ name }}-->
<!-- </template>-->
<!-- <span v-if="name.indexOf(treeInput) > -1" class="tree-node-custom-title">-->
<!-- {{ name.substr(0, name.indexOf(treeInput)) }}-->
<!-- <span style="color: #f50">{{ treeInput }}</span>-->
<!-- {{ name.substr(name.indexOf(treeInput) + treeInput.length) }}-->
<!-- </span>-->
<!-- <span v-else class="tree-node-custom-title">{{ name }}</span>-->
<!--</a-tooltip>-->
<a-tooltip>
<template #title>
{{ name }}
</template>
<span v-if="name.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ name.substr(0, name.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ name.substr(name.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ name }}</span>
<span class="tree-node-custom-title">{{ name }}</span>
</a-tooltip>
<template v-if="id === mouseInNodeKey">
<!-- 新增-->
@@ -52,16 +56,22 @@
<template #custom="{name, id}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
<!--<a-tooltip>-->
<!-- <template #title>-->
<!-- {{ name }}-->
<!-- </template>-->
<!-- <span v-if="name.indexOf(treeInput) > -1" class="tree-node-custom-title">-->
<!-- {{ name.substr(0, name.indexOf(treeInput)) }}-->
<!-- <span style="color: #f50">{{ treeInput }}</span>-->
<!-- {{ name.substr(name.indexOf(treeInput) + treeInput.length) }}-->
<!-- </span>-->
<!-- <span v-else class="tree-node-custom-title">{{ name }}</span>-->
<!--</a-tooltip>-->
<a-tooltip>
<template #title>
{{ name }}
</template>
<span v-if="name.indexOf(treeInput) > -1" class="tree-node-custom-title">
{{ name.substr(0, name.indexOf(treeInput)) }}
<span style="color: #f50">{{ treeInput }}</span>
{{ name.substr(name.indexOf(treeInput) + treeInput.length) }}
</span>
<span v-else class="tree-node-custom-title">{{ name }}</span>
<span class="tree-node-custom-title">{{ name }}</span>
</a-tooltip>
<template v-if="id === mouseInNodeKey">
<!-- 新增-->
@@ -183,9 +193,7 @@ export default {
return {
treeInput: null, // 树查询绑定值
treeData: [],
treeDataList: [], // 左侧树的数组结构,用于搜索
expandedKeys: [],
autoExpandParent: true,
defaultExpandAll: false, // 左侧树默认展开所有
currentTreeNode: null, // 当前选中的树节点
mouseInNodeKey: null, // 鼠标悬浮的节点key值
columns: [
@@ -251,10 +259,13 @@ export default {
this.treeData = this.dealTreeData(res.result)
// this.treeData = res.result
this.treeData[0].scopedSlots = { title: 'customNoDelete' }
this.generateList(this.treeData)
} else {
this.treeData = []
}
}).finally(() => {
this.$nextTick(() => {
this.defaultExpandAll = true
})
})
},
// 处理左侧树数据结构
@@ -267,35 +278,10 @@ export default {
return item
})
},
// 获取左侧树的数组结构(非树结构)
generateList (data) {
for (let i = 0; i < data.length; i++) {
const node = data[i]
const id = node.id
this.treeDataList.push({ id, name: node.name, pid: node.pid })
if (node.subset) {
this.generateList(node.subset)
}
}
},
// 左侧树搜索框改变
handleTreeChange (e) {
const value = e.target.value
const expandedKeys = this.treeDataList
.map(item => {
if (item.name.indexOf(value) > -1) {
return item.pid
}
return null
})
.filter((item, i, self) => item && self.indexOf(item) === i)
this.expandedKeys = expandedKeys
this.autoExpandParent = true
},
// 左侧树点击展开
treeExpand (expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
// 左侧树搜索框搜索
handleTreeSearch () {
this.treeData = []
this.initTreeData({ name: this.treeInput })
},
// 左侧树鼠标移入
handleTreeMouseover (key) {