tree

src/views/desensitizationStrategy/DesensitizationStrategy/modules/StrategyAddDialog.vue

@@ -141,7 +141,7 @@ import { ref, reactive, watch, computed, nextTick,toRaw } from 'vue'
 import { ElMessage,ElMessageBox } from 'element-plus'
 
 import DesensitizationRuleDialog from './DesensitizationRuleDialog.vue'
-
+import useAppStore from '@/store/modules/app'
 import {
 desensitizationruleQuery,
 queryversion,
@@ -158,6 +158,9 @@ queryDesensitizationTables
 import { queryTables,query } from '@/api/classification/classification.js'
 
 import TreeFilter from './TreeFilter.vue'
+
+
+const appStore = useAppStore()
 const props = defineProps({
   title: {
     type: String,
@@ -553,7 +556,9 @@ const handleRuleConfirm = (str,data) =>{
 }
 
 
-
+const getNodeIcon = (type) => {
+  return appStore.DATABASE_ICONS[type]
+}
 
 // 生成唯一标识符
 function uuid() {
@@ -565,53 +570,67 @@ function uuid() {
 // 树节点点击处理
 const handleNodeClick = async (data) => {
    currentNodeData.value = data
-  // 2. 点击一层系统数据，查 schemas
+  // 点击一层系统数据，查 schemas
   if (data.type === 'system') {
       const res = await queryShemas({
         dataSystemId: data.tid,
         dataType: data.dbtype,
-      projectid: sessionStorage.getItem('projectId')
+        projectid: sessionStorage.getItem('projectId') || ''
       })
       if (res && res.data) {
         data.children = res.data.map(schema => ({
           id: uuid(),
-        ...schema,
+          dataSystemId: data.tid,
+          dbtype: data.dbtype,
+          projectid: sessionStorage.getItem('projectId') || '',
+          schema: schema.text,
           type: 'database',
           label: schema.text,
           parent: data,
-        children: [
+          icon: getNodeIcon('DATABASE'),
+          children: []
+        }))
+        treeData.value = [...treeData.value] // 触发视图更新
+      }
+  }
+
+  // 点击二层数据库,构造一层
+  if(data.type === 'database'){
+   data.children = [
       {
         id: uuid(),
         label: '表',
         type: 'category',
-            parent: {
-              ...schema,
-              type: 'database',
-              label: schema.text,
+        dataSystemId: data.dataSystemId,
+        dbtype: data.dbtype,
+        projectid: data.projectid,
+        schema: data.schema,
        parent: data,
-              tid: data.tid,
-              dbservername: schema.text
-            },
+       icon: getNodeIcon('queryTables'),
         children: []
       }
    ]
-      }))
-      treeData.value = [...treeData.value] // 触发视图更新
-    }
   }
-  // 3. 点击三层 category，查表
-  if (data.type === 'category' && data.parent) {
-    const parentDb = data.parent
+
+
+  // 点击三层 category，查表
+  if (data.type === 'category') {
     const res = await queryTables({
-      dataSystemId: parentDb.tid,
-      schema: parentDb.dbservername
+      dataSystemId: data.dataSystemId,
+      schema: data.schema
     })
     if (res && res.data) {
       data.children = res.data.map(table => ({
-        ...table,
+        dataSystemId: data.dataSystemId,
+        dbtype: data.dbtype,
+        projectid: data.projectid,
+        schema: data.schema,
+        realName: table.realName,
+        showName: table.showName,
         id: uuid(),
         label: table.showName,
         type: 'table',
+        icon: getNodeIcon('TABLE'),
         parent: data
       }))
       treeData.value = [...treeData.value]
@@ -689,6 +708,7 @@ const openDialog = async (mode, strategyData = null) => {
       ...item,
       label: item.sysname,
       type: 'system',
+        icon: getNodeIcon(item.dbtype),
       children: [
       ]
     }))

src/views/desensitizationStrategy/DesensitizationStrategy/modules/TreeFilter.vue

@@ -24,7 +24,7 @@
     >
       <template #default="{ node, data }">
         <span class="custom-tree-node">
-          <i :class="getNodeIcon(data.type)" class="node-icon"></i>
+          <i class="iconfont node-icon" v-html="data.icon.text" :style="`color: ${data.icon.color};`"></i>
           <span>{{ node.label }}</span>
           <template v-if="data.type === 'category'">
             <i class="el-icon-collection icon-category" style="margin-left:6px;color:#F7BA2A;font-size:16px;"></i>