Skip to content

D
dataease
提交 a53b5573 authored 作者: junjie's avatar junjie
浏览文件
操作

feat(fix):数据集、视图分组增加搜索

上级 97c90910
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 67 行删除
frontend/src/views/chart/group/Group.vue
浏览文件 @ a53b5573
...@@ -21,26 +21,26 @@ ...@@ -21,26 +21,26 @@
<!-- </el-button>--> <!-- </el-button>-->
<!-- </el-row>--> <!-- </el-row>-->
<!-- <el-row>--> <el-row>
<!-- <el-form>--> <el-form>
<!-- <el-form-item class="form-item">--> <el-form-item class="form-item">
<!-- <el-input--> <el-input
<!-- v-model="search"--> v-model="search"
<!-- size="mini"--> size="mini"
<!-- :placeholder="$t('chart.search')"--> :placeholder="$t('chart.search')"
<!-- prefix-icon="el-icon-search"--> prefix-icon="el-icon-search"
<!-- clearable--> clearable
<!-- />--> />
<!-- </el-form-item>--> </el-form-item>
<!-- </el-form>--> </el-form>
<!-- </el-row>--> </el-row>
<el-col class="custom-tree-container"> <el-col class="custom-tree-container">
<div class="block"> <div class="block">
<el-tree <el-tree
ref="asyncTree" ref="asyncTree"
:default-expanded-keys="expandedArray" :default-expanded-keys="expandedArray"
:data="data" :data="tData"
node-key="id" node-key="id"
:expand-on-click-node="true" :expand-on-click-node="true"
:load="loadNode" :load="loadNode"
...@@ -328,6 +328,7 @@ ...@@ -328,6 +328,7 @@
<script> <script>
import { post } from '@/api/chart/chart' import { post } from '@/api/chart/chart'
import { authModel } from '@/api/system/sysAuth'
import TableSelector from '../view/TableSelector' import TableSelector from '../view/TableSelector'
import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector' import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector' import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
...@@ -360,7 +361,7 @@ export default { ...@@ -360,7 +361,7 @@ export default {
search: '', search: '',
editGroup: false, editGroup: false,
editTable: false, editTable: false,
data: [], tData: [],
chartData: [], chartData: [],
currGroup: {}, currGroup: {},
expandedArray: [], expandedArray: [],
...@@ -395,7 +396,9 @@ export default { ...@@ -395,7 +396,9 @@ export default {
treeProps: { treeProps: {
label: 'name', label: 'name',
children: 'children', children: 'children',
isLeaf: 'isLeaf' isLeaf: 'isLeaf',
id: 'id',
parentId: 'pid'
}, },
dsForm: { dsForm: {
name: '', name: '',
...@@ -411,7 +414,8 @@ export default { ...@@ -411,7 +414,8 @@ export default {
tDs: {}, tDs: {},
groupMoveConfirmDisabled: true, groupMoveConfirmDisabled: true,
dsMoveConfirmDisabled: true, dsMoveConfirmDisabled: true,
moveDialogTitle: '' moveDialogTitle: '',
isTreeSearch: false
} }
}, },
computed: { computed: {
...@@ -422,11 +426,20 @@ export default { ...@@ -422,11 +426,20 @@ export default {
}, },
watch: { watch: {
search(val) { search(val) {
if (val && val !== '') { // if (val && val !== '') {
this.chartData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) }))) // this.chartData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
} else { // } else {
this.chartData = JSON.parse(JSON.stringify(this.tables)) // 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() { saveStatus() {
this.refreshNodeBy(this.saveStatus.sceneId) this.refreshNodeBy(this.saveStatus.sceneId)
...@@ -617,13 +630,13 @@ export default { ...@@ -617,13 +630,13 @@ export default {
groupTree(group) { groupTree(group) {
post('/chart/group/tree', group).then(response => { post('/chart/group/tree', group).then(response => {
this.data = response.data this.tData = response.data
}) })
}, },
treeNode(group) { treeNode(group) {
post('/chart/group/treeNode', group).then(res => { post('/chart/group/treeNode', group).then(res => {
this.data = res.data this.tData = res.data
}) })
}, },
...@@ -778,31 +791,39 @@ export default { ...@@ -778,31 +791,39 @@ export default {
}, },
loadNode(node, resolve) { loadNode(node, resolve) {
// if (!this.isTreeSearch) { if (!this.isTreeSearch) {
if (node.level > 0) { if (node.level > 0) {
this.tables = [] this.tables = []
this.chartData = [] this.chartData = []
if (node.data.id) { if (node.data.id) {
post('/chart/view/listAndGroup', { post('/chart/view/listAndGroup', {
sort: 'name asc,create_time desc', sort: 'name asc,create_time desc',
sceneId: node.data.id sceneId: node.data.id
}).then(response => { }).then(response => {
this.tables = response.data this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables)) this.chartData = JSON.parse(JSON.stringify(this.tables))
resolve(this.chartData) resolve(this.chartData)
}) })
}
} }
} else {
resolve(node.data.children)
} }
// }
}, },
refreshNodeBy(id) { refreshNodeBy(id) {
if (!id || id === '0') { if (this.isTreeSearch) {
this.treeNode(this.groupForm) this.tData = []
this.expandedArray = []
this.searchTree(this.search)
} else { } else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 if (!id || id === '0') {
node.loaded = false this.treeNode(this.groupForm)
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 } else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
node.loaded = false
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
} }
}, },
...@@ -867,6 +888,68 @@ export default { ...@@ -867,6 +888,68 @@ export default {
} else { } else {
this.dsMoveConfirmDisabled = false 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 = '<span style="color: #0a7be0">' + this.search + '</span>' // 高亮替换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)
}
} }
} }
} }
......
frontend/src/views/dataset/group/Group.vue
浏览文件 @ a53b5573
...@@ -21,19 +21,19 @@ ...@@ -21,19 +21,19 @@
<!-- </el-button>--> <!-- </el-button>-->
<!-- </el-row>--> <!-- </el-row>-->
<!-- <el-row>--> <el-row>
<!-- <el-form>--> <el-form>
<!-- <el-form-item class="form-item">--> <el-form-item class="form-item">
<!-- <el-input--> <el-input
<!-- v-model="search"--> v-model="search"
<!-- size="mini"--> size="mini"
<!-- :placeholder="$t('dataset.search')"--> :placeholder="$t('dataset.search')"
<!-- prefix-icon="el-icon-search"--> prefix-icon="el-icon-search"
<!-- clearable--> clearable
<!-- />--> />
<!-- </el-form-item>--> </el-form-item>
<!-- </el-form>--> </el-form>
<!-- </el-row>--> </el-row>
<el-col class="custom-tree-container"> <el-col class="custom-tree-container">
<div class="block"> <div class="block">
...@@ -435,17 +435,14 @@ export default { ...@@ -435,17 +435,14 @@ export default {
// } else { // } else {
// this.tableData = JSON.parse(JSON.stringify(this.tables)) // this.tableData = JSON.parse(JSON.stringify(this.tables))
// } // }
this.$emit('switchComponent', { name: '' })
this.tData = []
this.expandedArray = []
if (this.timer) { if (this.timer) {
clearTimeout(this.timer) clearTimeout(this.timer)
} }
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
if (val) { this.getTreeData(val)
this.searchTree(val)
this.isTreeSearch = true
} else {
this.treeNode(this.groupForm)
this.isTreeSearch = false
}
}, 500) }, 500)
}, },
saveStatus() { saveStatus() {
...@@ -830,16 +827,24 @@ export default { ...@@ -830,16 +827,24 @@ export default {
}) })
} }
} }
} else {
resolve(node.data.children)
} }
}, },
refreshNodeBy(id) { refreshNodeBy(id) {
if (!id || id === '0') { if (this.isTreeSearch) {
this.treeNode(this.groupForm) this.tData = []
this.expandedArray = []
this.searchTree(this.search)
} else { } else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象 if (!id || id === '0') {
node.loaded = false this.treeNode(this.groupForm)
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点 } else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
node.loaded = false
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
} }
}, },
...@@ -850,7 +855,9 @@ export default { ...@@ -850,7 +855,9 @@ export default {
name: val name: val
} }
authModel(queryCondition).then(res => { authModel(queryCondition).then(res => {
// this.highlights(res.data)
this.tData = this.buildTree(res.data) this.tData = this.buildTree(res.data)
console.log(this.tData)
}) })
}, },
...@@ -862,6 +869,8 @@ export default { ...@@ -862,6 +869,8 @@ export default {
const roots = [] const roots = []
arrs.forEach(el => { 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') { if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
roots.push(el) roots.push(el)
return return
...@@ -877,6 +886,28 @@ export default { ...@@ -877,6 +886,28 @@ export default {
} }
}) })
return roots return roots
},
// 高亮显示搜索内容
highlights(data) {
if (data && this.search && this.search.length > 0) {
const replaceReg = new RegExp(this.search, 'g')// 匹配关键字正则
const replaceString = '<span style="color: #0a7be0">' + this.search + '</span>' // 高亮替换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)
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论