feat: There is no way the buss!!

src/pages/regulatoryRepository/enterpriseStandardDatabase/components/EnterpriseStandardDatabase.vue

@@ -4,18 +4,25 @@
 <!--左侧树-->
     <div class="tree-content" :class="{ 'tree-closed': sideClose }" >
       <div class="tree">
+          <el-input
+                  placeholder="输入树状图体系"
+                  v-model="filterText">
+          </el-input>
           <el-tree
                   ref="tree"
                   node-key="id"
-                  class="filter-tree"
+                  class="tree-line"
+                  icon-class="icon-tree"
+                  :indent="0"
                   :props="props"
                   :data="treeList"
                   highlight-current
                   @node-click="treeClick"
+                  :filter-node-method="filterNode"
                   default-expand-all
                   :expand-on-click-node="false">
                 <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
-                        <span> {{ node.label}} </span>
+                        <span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span> <span> {{ node.label}} </span>
                         <span>
                           <el-button
                                   type="text"
@@ -1021,6 +1028,7 @@ export default {
             // 唯一辨识
             dicId: ""
         },
+      filterText: '', // 企业标准库过滤
       treeList: [],
       standId: '',
       visibleOrgTable: false,
@@ -3434,7 +3442,11 @@ export default {
       }
     }
   },
-  watch: {},
+  watch: {
+      filterText(val) {
+          this.$refs.tree.filter(val);
+      }
+  },
   computed: {
     // 是否拥有拖拽权限
     hasPermissionDrag () {
@@ -3491,6 +3503,94 @@ export default {
 }
 </script>
 
+<style lang="less" scoped>
+    /deep/ .icon-tree {
+        margin:0  5px 0 10px;
+        position:relative;
+        background:url('~@/assets/images/shangqi/img/tree-add.png');
+        background-size:100% 100%;
+    }
+    /deep/ .expanded{
+        background:url('~@/assets/images/shangqi/img/tree-sub.png');
+        background-size:100% 100%;
+    }
+    /deep/ .is-leaf{
+        background-image:none;
+        background-size:100% 100%;
+    }
+    /deep/ .is-leaf-none{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/none-file.png');
+        background-size:100% 100%;
+    }
+    /deep/ .is-show{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/tree.png');
+        background-size:100% 100%;
+    }
+    /deep/.tree-line{
+        .el-tree-node {
+            position: relative;
+            padding-left: 0px; // 缩进量
+            line-height: 30px;
+        }
+        .el-tree-node__children {
+            padding-left: 16px; // 缩进量
+        }
+
+        // 竖线
+        .el-tree-node::before {
+            content: "";
+            height: 100%;
+            width: 1px;
+            position: absolute;
+            left: -3px;
+            top: -26px;
+            border-width: 1px;
+            border-left: 1px dashed #858990e0;
+        }
+        // 当前层最后一个节点的竖线高度固定
+        .el-tree-node:last-child::before {
+            height: 38px; // 可以自己调节到合适数值
+        }
+
+        // 横线
+        .el-tree-node::after {
+            content: "";
+            width: 11px;
+            height: 20px;
+            position: absolute;
+            left: -3px;
+            top: 12px;
+            border-width: 1px;
+            border-top: 1px dashed #858990e0;
+        }
+
+        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+        & > .el-tree-node::after {
+            border-top: none;
+        }
+        & > .el-tree-node::before {
+            border-left: none;
+        }
+
+        // 展开关闭的icon
+        .el-tree-node__expand-icon{
+            font-size: 16px;
+            // 叶子节点（无子节点）
+            &.is-leaf{
+                color: transparent;
+                // display: none; // 也可以去掉
+            }
+        }
+    }
+</style>
 <style  lang="less" scoped>
   @import '~@/assets/styles/mixins';
   @import '~@/assets/styles/style';