From a53b557359fae260d9ad187ae09da24706ebd787 Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 21 Jun 2021 16:24:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(fix):=E6=95=B0=E6=8D=AE=E9=9B=86=E3=80=81?= =?UTF-8?q?=E8=A7=86=E5=9B=BE=E5=88=86=E7=BB=84=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/group/Group.vue | 167 +++++++++++++++------ frontend/src/views/dataset/group/Group.vue | 81 +++++++--- 2 files changed, 181 insertions(+), 67 deletions(-) diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 91fe85ea95..7bb774d906 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -21,26 +21,26 @@ - - - - - - - - - - - - - + + + + + + +
import { post } from '@/api/chart/chart' +import { authModel } from '@/api/system/sysAuth' import TableSelector from '../view/TableSelector' import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector' import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector' @@ -360,7 +361,7 @@ export default { search: '', editGroup: false, editTable: false, - data: [], + tData: [], chartData: [], currGroup: {}, expandedArray: [], @@ -395,7 +396,9 @@ export default { treeProps: { label: 'name', children: 'children', - isLeaf: 'isLeaf' + isLeaf: 'isLeaf', + id: 'id', + parentId: 'pid' }, dsForm: { name: '', @@ -411,7 +414,8 @@ export default { tDs: {}, groupMoveConfirmDisabled: true, dsMoveConfirmDisabled: true, - moveDialogTitle: '' + moveDialogTitle: '', + isTreeSearch: false } }, computed: { @@ -422,11 +426,20 @@ export default { }, watch: { search(val) { - if (val && val !== '') { - this.chartData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) }))) - } else { - this.chartData = JSON.parse(JSON.stringify(this.tables)) + // if (val && val !== '') { + // this.chartData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) }))) + // } else { + // this.chartData = JSON.parse(JSON.stringify(this.tables)) + // } + this.$emit('switchComponent', { name: '' }) + this.tData = [] + this.expandedArray = [] + if (this.timer) { + clearTimeout(this.timer) } + this.timer = setTimeout(() => { + this.getTreeData(val) + }, 500) }, saveStatus() { this.refreshNodeBy(this.saveStatus.sceneId) @@ -617,13 +630,13 @@ export default { groupTree(group) { post('/chart/group/tree', group).then(response => { - this.data = response.data + this.tData = response.data }) }, treeNode(group) { post('/chart/group/treeNode', group).then(res => { - this.data = res.data + this.tData = res.data }) }, @@ -778,31 +791,39 @@ export default { }, loadNode(node, resolve) { - // if (!this.isTreeSearch) { - if (node.level > 0) { - this.tables = [] - this.chartData = [] - if (node.data.id) { - post('/chart/view/listAndGroup', { - sort: 'name asc,create_time desc', - sceneId: node.data.id - }).then(response => { - this.tables = response.data - this.chartData = JSON.parse(JSON.stringify(this.tables)) - resolve(this.chartData) - }) + if (!this.isTreeSearch) { + if (node.level > 0) { + this.tables = [] + this.chartData = [] + if (node.data.id) { + post('/chart/view/listAndGroup', { + sort: 'name asc,create_time desc', + sceneId: node.data.id + }).then(response => { + this.tables = response.data + this.chartData = JSON.parse(JSON.stringify(this.tables)) + resolve(this.chartData) + }) + } } + } else { + resolve(node.data.children) } - // } }, refreshNodeBy(id) { - if (!id || id === '0') { - this.treeNode(this.groupForm) + if (this.isTreeSearch) { + this.tData = [] + this.expandedArray = [] + this.searchTree(this.search) } else { - const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 - node.loaded = false - node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 + if (!id || id === '0') { + this.treeNode(this.groupForm) + } else { + const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 + node.loaded = false + node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 + } } }, @@ -867,6 +888,68 @@ export default { } else { this.dsMoveConfirmDisabled = false } + }, + + searchTree(val) { + const queryCondition = { + withExtend: 'parent', + modelType: 'chart', + name: val + } + authModel(queryCondition).then(res => { + // this.highlights(res.data) + this.tData = this.buildTree(res.data) + console.log(this.tData) + }) + }, + + buildTree(arrs) { + const idMapping = arrs.reduce((acc, el, i) => { + acc[el[this.treeProps.id]] = i + return acc + }, {}) + const roots = [] + arrs.forEach(el => { + // 判断根节点 ### + el.type = el.modelInnerType + el.isLeaf = el.leaf + if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') { + roots.push(el) + return + } + // 用映射表找到父元素 + const parentEl = arrs[idMapping[el[this.treeProps.parentId]]] + // 把当前元素添加到父元素的`children`数组中 + parentEl.children = [...(parentEl.children || []), el] + + // 设置展开节点 如果没有子节点则不进行展开 + if (parentEl.children.length > 0) { + this.expandedArray.push(parentEl[this.treeProps.id]) + } + }) + return roots + }, + + // 高亮显示搜索内容 + highlights(data) { + if (data && this.search && this.search.length > 0) { + const replaceReg = new RegExp(this.search, 'g')// 匹配关键字正则 + const replaceString = '' + this.search + '' // 高亮替换v-html值 + data.forEach(item => { + item.name = item.name.replace(replaceReg, replaceString) // 开始替换 + item.label = item.label.replace(replaceReg, replaceString) // 开始替换 + }) + } + }, + + getTreeData(val) { + if (val) { + this.isTreeSearch = true + this.searchTree(val) + } else { + this.isTreeSearch = false + this.treeNode(this.groupForm) + } } } } diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue index 1fb31bbde9..7c6b45fd49 100644 --- a/frontend/src/views/dataset/group/Group.vue +++ b/frontend/src/views/dataset/group/Group.vue @@ -21,19 +21,19 @@ - - - - - - - - - - - - - + + + + + + +
@@ -435,17 +435,14 @@ export default { // } else { // this.tableData = JSON.parse(JSON.stringify(this.tables)) // } + this.$emit('switchComponent', { name: '' }) + this.tData = [] + this.expandedArray = [] if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() => { - if (val) { - this.searchTree(val) - this.isTreeSearch = true - } else { - this.treeNode(this.groupForm) - this.isTreeSearch = false - } + this.getTreeData(val) }, 500) }, saveStatus() { @@ -830,16 +827,24 @@ export default { }) } } + } else { + resolve(node.data.children) } }, refreshNodeBy(id) { - if (!id || id === '0') { - this.treeNode(this.groupForm) + if (this.isTreeSearch) { + this.tData = [] + this.expandedArray = [] + this.searchTree(this.search) } else { - const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 - node.loaded = false - node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 + if (!id || id === '0') { + this.treeNode(this.groupForm) + } else { + const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 + node.loaded = false + node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 + } } }, @@ -850,7 +855,9 @@ export default { name: val } authModel(queryCondition).then(res => { + // this.highlights(res.data) this.tData = this.buildTree(res.data) + console.log(this.tData) }) }, @@ -862,6 +869,8 @@ export default { const roots = [] arrs.forEach(el => { // 判断根节点 ### + el.type = el.modelInnerType + el.isLeaf = el.leaf if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') { roots.push(el) return @@ -877,6 +886,28 @@ export default { } }) return roots + }, + + // 高亮显示搜索内容 + highlights(data) { + if (data && this.search && this.search.length > 0) { + const replaceReg = new RegExp(this.search, 'g')// 匹配关键字正则 + const replaceString = '' + this.search + '' // 高亮替换v-html值 + data.forEach(item => { + item.name = item.name.replace(replaceReg, replaceString) // 开始替换 + item.label = item.label.replace(replaceReg, replaceString) // 开始替换 + }) + } + }, + + getTreeData(val) { + if (val) { + this.isTreeSearch = true + this.searchTree(val) + } else { + this.isTreeSearch = false + this.treeNode(this.groupForm) + } } } }