Skip to content

D
dataease
提交 d73f55e6 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw
浏览文件
操作

feat: 仪表板查询组件增加快速检索功能

上级 10544674
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 73 行删除
frontend/src/views/panel/filter/filterDialog.vue
浏览文件 @ d73f55e6
...@@ -13,39 +13,58 @@ ...@@ -13,39 +13,58 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="component-result-content filter-common"> <div class="component-result-content filter-common">
<el-tree <el-col>
v-if="showDomType === 'tree'" <el-row>
:data="datas" <el-form>
:props="defaultProps" <el-form-item class="my-form-item">
lazy <el-input
:load="loadTree" v-model="keyWord"
@node-click="handleNodeClick" size="mini"
> :placeholder="$t('dataset.search')"
<div slot-scope="{ node, data }" class="custom-tree-node"> prefix-icon="el-icon-search"
<el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" /> clearable
<span class="label-span">{{ node.label }}</span> />
</div> </el-form-item>
</el-tree> </el-form>
</el-row>
<div v-if="showDomType === 'field'"> <el-row>
<draggable <el-tree
v-model="fieldDatas" v-if="showDomType === 'tree'"
:disabled="selectField.length !== 0" :default-expanded-keys="expandedArray"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}" node-key="id"
animation="300" :data="datas"
:move="onMove" :props="defaultProps"
class="drag-list" lazy
@end="end1" :load="loadTree"
@start="start1" @node-click="handleNodeClick"
> >
<transition-group> <div slot-scope="{ node, data }" class="custom-tree-node">
<div v-for="item in fieldDatas" :key="item.id" class="filter-db-row"> <el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" />
<i class="el-icon-s-data" /> <span class="label-span">{{ node.label }}</span>
<span> {{ item.name }}</span>
</div> </div>
</transition-group> </el-tree>
</draggable>
</div> <div v-if="showDomType === 'field'">
<draggable
v-model="fieldDatas"
:disabled="selectField.length !== 0"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
@end="end1"
@start="start1"
>
<transition-group>
<div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" class="filter-db-row">
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
</transition-group>
</draggable>
</div>
</el-row>
</el-col>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :lazy="true" class="de-tab" :label="$t('panel.select_by_module')" name="assembly"> <el-tab-pane :lazy="true" class="de-tab" :label="$t('panel.select_by_module')" name="assembly">
...@@ -59,44 +78,62 @@ ...@@ -59,44 +78,62 @@
</div> </div>
<div class="component-result-content filter-common"> <div class="component-result-content filter-common">
<el-table
v-if="comShowDomType === 'view'" <el-col>
class="de-filter-data-table" <el-row>
:data="viewInfos" <el-form>
:show-header="false" <el-form-item class="my-form-item">
size="mini" <el-input
:highlight-current-row="true" v-model="viewKeyWord"
style="width: 100%" size="mini"
> :placeholder="$t('dataset.search')"
<el-table-column prop="name" :label="$t('commons.name')"> prefix-icon="el-icon-search"
<template v-if="comShowDomType === 'view'" :id="scope.row.id" slot-scope="scope"> clearable
<div class="filter-db-row" @click="comShowFieldDatas(scope.row)"> />
<i class="el-icon-s-data" /> </el-form-item>
<span> {{ scope.row.name }}</span> </el-form>
</div> </el-row>
</template> <el-row>
</el-table-column> <el-table
</el-table> v-if="comShowDomType === 'view'"
class="de-filter-data-table"
<div v-else-if="comShowDomType === 'field'"> :data="viewInfos.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
<draggable :show-header="false"
v-model="comFieldDatas" size="mini"
:disabled="selectField.length !== 0" :highlight-current-row="true"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}" style="width: 100%"
animation="300" >
:move="onMove" <el-table-column prop="name" :label="$t('commons.name')">
class="drag-list" <template v-if="comShowDomType === 'view'" :id="scope.row.id" slot-scope="scope">
@end="end1" <div class="filter-db-row" @click="comShowFieldDatas(scope.row)">
@start="start1" <i class="el-icon-s-data" />
> <span> {{ scope.row.name }}</span>
<transition-group> </div>
<div v-for="item in comFieldDatas" :key="item.id" class="filter-db-row"> </template>
<i class="el-icon-s-data" /> </el-table-column>
<span> {{ item.name }}</span> </el-table>
</div>
</transition-group> <div v-else-if="comShowDomType === 'field'">
</draggable> <draggable
</div> v-model="comFieldDatas"
:disabled="selectField.length !== 0"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
@end="end1"
@start="start1"
>
<transition-group>
<div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" class="filter-db-row">
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
</transition-group>
</draggable>
</div>
</el-row>
</el-col>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -201,6 +238,7 @@ import { mapState } from 'vuex' ...@@ -201,6 +238,7 @@ import { mapState } from 'vuex'
// import { ApplicationContext } from '@/utils/ApplicationContext' // import { ApplicationContext } from '@/utils/ApplicationContext'
import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset' import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset'
import { viewsWithIds } from '@/api/panel/view' import { viewsWithIds } from '@/api/panel/view'
import { authModel } from '@/api/system/sysAuth'
export default { export default {
name: 'FilterDialog', name: 'FilterDialog',
components: { components: {
...@@ -259,7 +297,11 @@ export default { ...@@ -259,7 +297,11 @@ export default {
sort: 'type desc,name asc' sort: 'type desc,name asc'
}, },
isTreeSearch: false, isTreeSearch: false,
defaultDatas: [] defaultDatas: [],
keyWord: '',
timer: null,
expandedArray: [],
viewKeyWord: ''
} }
}, },
computed: { computed: {
...@@ -296,6 +338,18 @@ export default { ...@@ -296,6 +338,18 @@ export default {
this.componentInfo.options.attrs.fieldId = null this.componentInfo.options.attrs.fieldId = null
this.$emit('re-fresh-component', this.componentInfo) this.$emit('re-fresh-component', this.componentInfo)
} }
},
keyWord(val) {
this.expandedArray = []
if (this.showDomType === 'field') {
return
}
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getTreeData(val)
}, (val && val !== '') ? 1000 : 0)
} }
}, },
created() { created() {
...@@ -310,7 +364,52 @@ export default { ...@@ -310,7 +364,52 @@ export default {
}, },
methods: { methods: {
getTreeData(val) {
if (val) {
this.isTreeSearch = true
this.searchTree(val)
} else {
this.isTreeSearch = false
this.treeNode(this.groupForm)
}
},
searchTree(val) {
this.expandedArray = []
const queryCondition = {
withExtend: 'parent',
modelType: 'dataset',
name: val
}
authModel(queryCondition).then(res => {
this.datas = this.buildTree(res.data)
})
},
buildTree(arrs) {
const idMapping = arrs.reduce((acc, el, i) => {
acc[el[this.defaultProps.id]] = i
return acc
}, {})
const roots = []
arrs.forEach(el => {
// 判断根节点 ###
el.type = el.modelInnerType
el.isLeaf = el.leaf
if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
roots.push(el)
return
}
// 用映射表找到父元素
const parentEl = arrs[idMapping[el[this.defaultProps.parentId]]]
// 把当前元素添加到父元素的`children`数组中
parentEl.children = [...(parentEl.children || []), el]
// 设置展开节点 如果没有子节点则不进行展开
if (parentEl.children.length > 0) {
this.expandedArray.push(parentEl[this.defaultProps.id])
}
})
return roots
},
loadViews() { loadViews() {
const viewIds = this.componentData const viewIds = this.componentData
.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId) .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
...@@ -338,7 +437,7 @@ export default { ...@@ -338,7 +437,7 @@ export default {
} }
} }
} else { } else {
resolve(node.data.children) node.data.children && resolve(node.data.children)
} }
}, },
treeNode(group) { treeNode(group) {
...@@ -400,11 +499,15 @@ export default { ...@@ -400,11 +499,15 @@ export default {
this.removeTail(bread) this.removeTail(bread)
this.$nextTick(() => { this.$nextTick(() => {
this.expandedArray = []
this.keyWord = ''
this.isTreeSearch = false
this.datas = JSON.parse(JSON.stringify(this.defaultDatas)) this.datas = JSON.parse(JSON.stringify(this.defaultDatas))
}) })
}, },
comBackLink(bread) { comBackLink(bread) {
this.comShowDomType = 'view' this.comShowDomType = 'view'
this.viewKeyWord = ''
this.comRemoveTail() this.comRemoveTail()
}, },
// loadTable(sceneId) { // loadTable(sceneId) {
...@@ -435,12 +538,14 @@ export default { ...@@ -435,12 +538,14 @@ export default {
}) })
}, },
showFieldDatas(row) { showFieldDatas(row) {
this.keyWord = ''
this.showDomType = 'field' this.showDomType = 'field'
this.setTailLink(row) this.setTailLink(row)
this.addTail(row) this.addTail(row)
this.loadField(row.id) this.loadField(row.id)
}, },
comShowFieldDatas(row) { comShowFieldDatas(row) {
this.viewKeyWord = ''
this.comShowDomType = 'field' this.comShowDomType = 'field'
this.comSetTailLink(row) this.comSetTailLink(row)
this.comAddTail(row) this.comAddTail(row)
...@@ -511,6 +616,9 @@ export default { ...@@ -511,6 +616,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.my-form-item {
cursor: text;
}
.de-dialog-container { .de-dialog-container {
height: 50vh !important; height: 50vh !important;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论