组织架构修改

src/views/system/organization.vue

@@ -46,6 +46,7 @@
             <div class="tree-box blue">
                 <el-scrollbar class="h-100p">
                     <el-tree
+                    class="tree-line1"
                     :data="dataSource"
                     node-key="id"
                     default-expand-all
@@ -53,10 +54,9 @@
                     >
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
-                            <!-- <span>{{ node.label }}</span> -->
                                 <span  :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
                             <span>
-                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"/>
+                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);" v-if="data.children"/>
                                 <HcIcon name="edit" @click="addClick" style="margin-left: 8px;color: rgb(84, 188, 189);" />
                                 <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;" />
                                 <HcIcon name="vip-crown-2" @click="authorityClick" style="margin-left: 8px;color: purple;"/>
@@ -291,6 +291,66 @@ const loadNode = (node, resolve) => {
 </script>
 
 <style lang="scss" scoped>
+// 树的线样式
+.tree-line1 {
+    :deep(.el-tree-node) {
+        position: relative;
+        padding-left: 12px; // 缩进量
+        width: 100%;
+    }
+    :deep(.el-tree-node__children) {
+        padding-left: 12px; // 缩进量
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        content:"";
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        left: 1px;
+        top: 0px;
+        border-width: 1px;
+        border-left: 2px dashed var(--el-color-primary);
+    }
+    // 当前层最后⼀个节点的竖线⾼度固定
+    :deep(.el-tree-node:last-child::before){
+        height: 15px; // 可以⾃⼰调节到合适数值
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        content:"";
+        width: 35px;
+        height: 20px;
+        position: absolute;
+        left: 2px;
+        top: 12px;
+        border-width: 1px;
+        border-top: 2px dashed var(--el-color-primary);
+    }
+    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
+    & > :deep(.el-tree-node::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    & > :deep(.el-tree-node::before) {
+        border-left: none;
+    }
+    // 展开关闭的icon
+    :deep(.el-tree-node__expand-icon) {
+        font-size: 16px;
+        &.is-leaf {
+            color: transparent;
+            font-size: 0;
+           
+           
+           
+           
+        }
+    }
+    :deep(.el-tree__empty-block) {
+      min-width: 300px;
+    }
+}
 
 </style>
 
@@ -322,4 +382,4 @@ const loadNode = (node, resolve) => {
 }
 
 
-</style>
+</style>