修改项目树问题 绘制稳态治理分析页面

src/components/tree/govern/pointTreeWx.vue

@@ -22,14 +22,14 @@
                     @node-click="clickNode"
                     :expand-on-click-node="false"
                 >
-                    <template #default="{ node, data }">
+                    <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
                             <div class="left" style="display: flex; align-items: center">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 5px">{{ node.label }}</span>
                             </div>
@@ -42,128 +42,83 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
-import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
+import { ref, watch } from 'vue'
+import { getSchemeTree } from '@/api/cs-device-boot/planData'
 import { useConfig } from '@/stores/config'
-import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
-import { useDictData } from '@/stores/dictData'
-defineOptions({
-    name: 'govern/schemeTree'
-})
+import { createLineTreeDecorators } from './lineTreeUtils'
+import { bootstrapWithTemplate } from './treeCommonUtils'
+import { createTreeFilterNode } from './treeFilterUtils'
+
+defineOptions({ name: 'govern/schemeTree', inheritAttrs: false })
 
 interface Props {
     template?: boolean
 }
-const dictData = useDictData()
-const props = withDefaults(defineProps<Props>(), {
-    template: false
-})
-const filterText = ref('')
-watch(filterText, val => {
-    treRef.value!.filter(val)
-})
 
-const filterNode = (value: string, data: any, node: any) => {
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
-}
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
-}
-/** 树形结构数据 */
-const defaultProps = {
-    children: 'children',
-    label: 'name',
-    value: 'id'
-}
+const props = withDefaults(defineProps<Props>(), { template: false })
 
 const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const id: any = ref(null)
-const treeData = ref({})
-//获取方案树形数据
-const getTreeList = () => {
-    getSchemeTree().then(res => {
-        let arr: any[] = []
 
-        res.data.forEach((item: any) => {
-            item.icon = 'el-icon-Menu'
-            item.color = config.getColorVal('elementUiPrimary')
-            item?.children.forEach((item2: any) => {
-                item2.icon = 'el-icon-Document'
-                item2.color = config.getColorVal('elementUiPrimary')
-                arr.push(item2)
-            })
+const config = useConfig()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof ElTree>>()
+const filterText = ref('')
+const id = ref<string | null>(null)
+const planId = ref('')
+
+const defaultProps = { children: 'children', label: 'name', value: 'id' }
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+const filterNode = createTreeFilterNode()
+
+watch(filterText, val => treRef.value?.filter(val))
+
+function decorateSchemeTree(data: any[]): any[] {
+    const { primary, applyMeta } = decorators
+    const leaves: any[] = []
+
+    data.forEach(item => {
+        applyMeta(item, { icon: 'el-icon-Menu', color: primary() })
+        item.children?.forEach((child: any) => {
+            applyMeta(child, { icon: 'el-icon-Document', color: primary() })
+            leaves.push(child)
         })
+    })
+
+    return leaves
+}
+
+function getTreeList() {
+    getSchemeTree().then(res => {
+        const leaves = decorateSchemeTree(res.data)
         tree.value = res.data
-        nextTick(() => {
-            if (arr.length) {
-                treRef.value.setCurrentKey(id.value || arr[0].id)
-                let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
-                // 注册父组件事件
-                emit('init', {
-                    level: 2,
-                    ...list
-                })
-            } else {
-                emit('init')
-            }
-        })
+
+        const node = id.value ? leaves.find(item => item.id == id.value) : leaves[0]
+        if (!node) {
+            emit('init')
+            return
+        }
+
+        treRef.value?.setCurrentKey(node.id)
+        emit('init', { level: 2, ...node })
     })
 }
 
-//方案id
-const planId: any = ref('')
-
-const clickNode = (e: anyObj) => {
-    e?.children ? (planId.value = e.id) : (planId.value = e.pid)
+const clickNode = (e: any) => {
+    planId.value = e?.children ? e.id : e.pid
     id.value = e.id
     emit('nodeChange', e)
 }
 
-if (props.template) {
-    // id: dictData.state.area[0]?.id
-    querySysExcel({})
-        .then((res: any) => {
-            emit('Policy', res.data)
-            getTreeList()
-        })
-        .catch(err => {
-            getTreeList()
-        })
-} else {
-    getTreeList()
-}
+bootstrapWithTemplate(
+    props.template,
+    getTreeList,
+    () => querySysExcel({}),
+    data => emit('Policy', data)
+)
 </script>
+
 <style lang="scss" scoped>
 .cn-tree {
     flex-shrink: 0;