@@ -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 = "async Tree"
ref = "dataset TreeRef "
: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.t ype === 'group'" slot-scope="{ node, data }" class="custom-tree-node father" >
< span v-if = "data.modelInnerT ype === '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.t ype ==='group'" @click.stop >
< span v-if = "data.modelInnerT ype ==='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.t ype === 'db'" icon-class="ds-db" class="ds-icon-db" / >
< svg-icon v-if = "data.t ype === 'sql'" icon-class="ds-sql" class="ds-icon-sql" / >
< svg-icon v-if = "data.t ype === 'excel'" icon-class="ds-excel" class="ds-icon-excel" / >
< svg-icon v-if = "data.t ype === 'custom'" icon-class="ds-custom" class="ds-icon-custom" / >
< svg-icon v-if = "data.modelInnerT ype === 'db'" icon-class="ds-db" class="ds-icon-db" / >
< svg-icon v-if = "data.modelInnerT ype === 'sql'" icon-class="ds-sql" class="ds-icon-sql" / >
< svg-icon v-if = "data.modelInnerT ype === 'excel'" icon-class="ds-excel" class="ds-icon-excel" / >
< svg-icon v-if = "data.modelInnerT ype === 'custom'" icon-class="ds-custom" class="ds-icon-custom" / >
< / span >
< span v-if = "data.t ype === 'db' || data.t ype === 'sql'" >
< span v-if = "data.modelInnerT ype === 'db' || data.modelInnerT ype === '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 . refresh NodeBy ( this . saveStatus . sceneId )
this . t ree Node( )
} ,
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 . t ype)
this . add ( param . data . modelInnerT ype)
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 . da ta. 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 . refresh NodeBy ( data . pid )
this . t ree Node( data . pid )
} )
} ) . catch ( ( ) => {
} )
@@ -452,7 +469,7 @@ export default {
message : this . $t ( 'dataset.delete_success' ) ,
showClose : true
} )
this . refresh NodeBy ( data . sceneId )
this . t ree Node( 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 . t ype !== 'group' ) {
if ( data . modelInnerT ype !== '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 . refresh NodeBy ( this . groupForm . pid )
this . t ree Node( )
} )
} ,
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 ( old SceneId)
this . refresh NodeBy ( newSceneId )
this . expandedArray . push ( new SceneId)
this . t ree Node( )
} )
} ,
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
}
}
}