refactor: 优化数据集查询

This commit is contained in:
wangjiahao 2021-11-25 15:17:00 +08:00
parent 4f72d11a8d
commit 1eeda595f1
3 changed files with 102 additions and 120 deletions

View File

@ -160,7 +160,7 @@
and panel_group.level = #{level}
</if>
</where>
ORDER BY CONVERT(panel_group.name using gbk)
ORDER BY panel_group.node_type desc, CONVERT(panel_group.name using gbk)
</select>
<delete id="deleteCircle">

View File

@ -33,7 +33,7 @@
`sys_auth`.`id` = `sys_auth_detail`.`auth_id`
)))
WHERE
sys_auth_detail.privilege_value = #{request.userId}
sys_auth_detail.privilege_value = 1
AND sys_auth.auth_source_type = #{request.modelType}
AND (
(
@ -54,7 +54,7 @@
) authInfo ON v_auth_model.id = authInfo.auth_source
WHERE
FIND_IN_SET( v_auth_model.id, cids )
ORDER BY CONVERT(v_auth_model.label using gbk) asc
ORDER BY v_auth_model.node_type desc, CONVERT(v_auth_model.label using gbk) asc
</select>
</mapper>

View File

@ -1,7 +1,7 @@
<template>
<el-col class="tree-style">
<!-- group -->
<el-col v-if="!sceneMode">
<el-col>
<el-row class="title-css">
<span class="title-text">
{{ $t('dataset.datalist') }}
@ -10,36 +10,44 @@
</el-row>
<el-divider />
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-form-item>
</el-form>
<el-row style="margin-bottom: 10px">
<el-col :span="16">
<el-input
v-model="filterText"
size="mini"
:placeholder="$t('commons.search')"
prefix-icon="el-icon-search"
clearable
class="main-area-input"
/>
</el-col>
<el-col :span="8">
<el-dropdown>
<el-button size="mini" type="primary">
{{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
<el-dropdown-item @click.native="searchTypeClick('folder')">{{ this.$t('commons.folder') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<el-col class="custom-tree-container">
<div class="block">
<el-tree
ref="asyncTree"
ref="datasetTreeRef"
:default-expanded-keys="expandedArray"
:data="tData"
node-key="id"
:expand-on-click-node="true"
:load="loadNode"
lazy
:props="treeProps"
highlight-current
:expand-on-click-node="true"
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
<span v-if="data.modelInnerType === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
<span style="display: flex;flex: 1;width: 0;">
<span>
<i class="el-icon-folder" />
@ -47,7 +55,7 @@
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span v-if="data.type ==='group'" @click.stop>
<span v-if="data.modelInnerType ==='group'" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickAdd">
<span class="el-dropdown-link">
<el-button
@ -86,10 +94,10 @@
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
<!--此处菜单暂时隐藏后续功能完整后再放开-->
<!-- <el-dropdown-item :command="beforeClickAddData('union',data)">-->
<!-- <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
<!-- {{ $t('dataset.union_data') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item :command="beforeClickAddData('union',data)">-->
<!-- <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
<!-- {{ $t('dataset.union_data') }}-->
<!-- </el-dropdown-item>-->
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
@ -123,12 +131,12 @@
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
<svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
</span>
<span v-if="data.type === 'db' || data.type === 'sql'">
<span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
@ -216,6 +224,7 @@
import { loadTable, getScene, addGroup, delGroup, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
import GroupMoveSelector from './GroupMoveSelector'
import DsMoveSelector from './DsMoveSelector'
import { queryAuthModel } from '@/api/authModel/authModel'
export default {
name: 'Group',
@ -287,25 +296,29 @@ export default {
parentId: 'pid'
},
isTreeSearch: false,
kettleRunning: false
kettleRunning: false,
searchPids: [], // pid
filterText: '',
searchType: 'all',
searchMap: {
all: this.$t('commons.all'),
folder: this.$t('commons.folder')
}
}
},
computed: {
},
watch: {
search(val) {
this.$emit('switchComponent', { name: '' })
this.tData = []
this.expandedArray = []
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getTreeData(val)
}, (val && val !== '') ? 500 : 0)
},
saveStatus() {
this.refreshNodeBy(this.saveStatus.sceneId)
this.treeNode()
},
filterText(val) {
this.searchPids = []
this.$refs.datasetTreeRef.filter(val)
},
searchType(val) {
this.searchPids = []
this.$refs.datasetTreeRef.filter(this.filterText)
}
},
created() {
@ -337,7 +350,7 @@ export default {
clickMore(param) {
switch (param.type) {
case 'rename':
this.add(param.data.type)
this.add(param.data.modelInnerType)
this.groupForm = JSON.parse(JSON.stringify(param.data))
break
case 'move':
@ -393,7 +406,8 @@ export default {
type: 'success',
showClose: true
})
this.refreshNodeBy(group.pid)
this.expandedArray.push(group.pid)
this.treeNode(group.pid)
})
} else {
return false
@ -403,6 +417,7 @@ export default {
saveTable(table) {
table.mode = parseInt(table.mode)
const _this = this
this.$refs['tableForm'].validate((valid) => {
if (valid) {
table.isRename = true
@ -413,7 +428,9 @@ export default {
type: 'success',
showClose: true
})
this.refreshNodeBy(table.sceneId)
_this.expandedArray.push(response.data.sceneId)
_this.$refs.datasetTreeRef.setCurrentKey(response.data.id)
_this.treeNode()
this.$store.dispatch('dataset/setTable', new Date().getTime())
})
} else {
@ -434,7 +451,7 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.refreshNodeBy(data.pid)
this.treeNode(data.pid)
})
}).catch(() => {
})
@ -452,7 +469,7 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.refreshNodeBy(data.sceneId)
this.treeNode(data.sceneId)
this.$store.dispatch('dataset/setTable', new Date().getTime())
})
}).catch(() => {
@ -480,7 +497,7 @@ export default {
},
treeNode(group) {
post('/dataset/group/treeNode', group).then(res => {
queryAuthModel({ modelType: 'dataset' }).then(res => {
this.tData = res.data
})
},
@ -500,9 +517,17 @@ export default {
},
nodeClick(data, node) {
if (data.type !== 'group') {
if (data.modelInnerType !== 'group') {
this.$emit('switchComponent', { name: 'ViewTable', param: data })
}
if (node.expanded) {
this.expandedArray.push(data.id)
} else {
const index = this.expandedArray.indexOf(data.id)
if (index > -1) {
this.expandedArray.splice(index, 1)
}
}
},
back() {
@ -588,7 +613,7 @@ export default {
this.groupForm.pid = this.tGroup.id
addGroup(this.groupForm).then(res => {
this.closeMoveGroup()
this.refreshNodeBy(this.groupForm.pid)
this.treeNode()
})
},
targetGroup(val) {
@ -612,14 +637,13 @@ export default {
}
},
saveMoveDs() {
const oldSceneId = this.dsForm.sceneId
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
this.dsForm.isRename = true
alter(this.dsForm).then(res => {
this.closeMoveDs()
this.refreshNodeBy(oldSceneId)
this.refreshNodeBy(newSceneId)
this.expandedArray.push(newSceneId)
this.treeNode()
})
},
targetDs(val) {
@ -652,69 +676,6 @@ export default {
}
},
refreshNodeBy(id) {
if (this.isTreeSearch) {
this.tData = []
this.expandedArray = []
this.searchTree(this.search)
} else {
if (!id || id === '0') {
this.treeNode(this.groupForm)
} else {
const node = this.$refs.asyncTree.getNode(id) // id
node.loaded = false
node.expand() //
}
}
},
searchTree(val) {
const queryCondition = {
name: val
}
post('/dataset/table/search', queryCondition).then(res => {
this.tData = this.buildTree(res.data)
})
},
buildTree(arrs) {
const idMapping = arrs.reduce((acc, el, i) => {
acc[el[this.treeProps.id]] = i
return acc
}, {})
const roots = []
arrs.forEach(el => {
// ###
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
@ -723,6 +684,27 @@ export default {
this.isTreeSearch = false
this.treeNode(this.groupForm)
}
},
filterNode(value, data) {
if (!value) return true
if (this.searchType === 'folder') {
if (data.modelInnerType === 'group' && data.label.indexOf(value) !== -1) {
this.searchPids.push(data.id)
return true
}
if (this.searchPids.indexOf(data.pid) !== -1) {
if (data.modelInnerType === 'group') {
this.searchPids.push(data.id)
}
return true
}
} else {
return data.label.indexOf(value) !== -1
}
return false
},
searchTypeClick(searchTypeInfo) {
this.searchType = searchTypeInfo
}
}
}