修改样式

src/views/govern/device/planData/components/schemeTree.vue

@@ -1,18 +1,10 @@
 <template>
     <div>
-        <div
-            :style="{ width: menuCollapse ? '40px' : '280px' }"
-            style="transition: all 0.3s; overflow: hidden; height: 100%"
-        >
-            <Icon
-                v-show="menuCollapse"
-                @click="onMenuCollapse"
-                :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
-                :class="menuCollapse ? 'unfold' : ''"
-                size="18"
-                class="fold ml10 mt20 menu-collapse"
-                style="cursor: pointer"
-            />
+        <div :style="{ width: menuCollapse ? '40px' : '280px' }"
+            style="transition: all 0.3s; overflow: hidden; height: 100%">
+            <Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
+                style="cursor: pointer" />
             <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
                 <div style="display: flex; align-items: center" class="mb10">
                     <el-input v-model="filterText" placeholder="请输入内容" clearable>
@@ -20,37 +12,18 @@
                             <Icon name="el-icon-Search" style="font-size: 16px" />
                         </template>
                     </el-input>
-                    <Icon
-                        @click="onMenuCollapse"
-                        :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
-                        :class="menuCollapse ? 'unfold' : ''"
-                        size="18"
-                        class="fold ml10 menu-collapse"
-                        style="cursor: pointer"
-                    />
+                    <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                        :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
+                        style="cursor: pointer" />
                 </div>
-                <el-tree
-                    style="flex: 1; overflow: auto"
-                    :props="defaultProps"
-                    highlight-current
-                    :filter-node-method="filterNode"
-                    node-key="id"
-                    v-bind="$attrs"
-                    default-expand-all
-                    :data="tree"
-                    ref="treRef"
-                    @node-click="clickNode"
-                    :expand-on-click-node="false"
-                >
+                <el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
+                    :filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree"
+                    ref="treRef" @node-click="clickNode" :expand-on-click-node="false">
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
                             <div class="left">
-                                <Icon
-                                    :name="data.icon"
-                                    style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
-                                />
+                                <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
+                                    v-if="data.icon" />
                                 <span>{{ node.label }}</span>
                             </div>
                             <div class="right">
@@ -108,11 +81,40 @@ const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
 }
-const filterNode = (value: string, data: any) => {
+const filterNode = (value: string, data: any, node: any) => {
     if (!value) return true
-    return data.name.includes(value)
-}
+    // 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',
@@ -206,7 +208,7 @@ const edit = async (node: Node, data: any) => {
                 handleOpen(3, planId.value)
             }
         })
-        .catch(e => {})
+        .catch(e => { })
 }
 /** 删除树节点 */
 const del = (node: Node, data: any) => {
@@ -233,7 +235,7 @@ const del = (node: Node, data: any) => {
         })
 }
 //取消删除
-const cancelDel = () => {}
+const cancelDel = () => { }
 const clickNode = (e: anyObj) => {
     e.children ? (planId.value = e.id) : (planId.value = e.pid)
     emit('nodeChange', e)
@@ -287,6 +289,7 @@ defineExpose({ treeRef, getPlanData, getTreeList, setCheckedNode })
 .ml10 {
     margin-bottom: 0 !important;
 }
+
 .add_plan {
     width: 100%;
     height: 40px;
@@ -294,21 +297,25 @@ defineExpose({ treeRef, getPlanData, getTreeList, setCheckedNode })
     justify-content: flex-end;
     align-items: center;
 }
+
 .custom-tree-node {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .left,
     .right {
         display: flex;
         align-items: center;
     }
+
     .left {
         span {
             margin-left: 2px;
         }
     }
+
     .right {
         a {
             margin-left: 2px;