fix : 组织机构样式修改

src/assets/styles/index.scss

@@ -415,7 +415,13 @@ html, body, #app, .el-container, .el-aside, .el-main {
   overflow: hidden;
   margin-right: 5px;
 }
+.oran-icon{
+  width: 1em;
+  height: 1em;
+  margin-right: 4px;
+  vertical-align: -0.21em;
 
+}
 .svg-icon {
   width: 1.2em;
   height: 1.2em;

src/assets/svg/oran.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720946136639" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4221" xmlns:xlink="http://www.w3.org/1999/xlink" width="128.125" height="128"><path d="M992.090881 443.129l-388.66-404.16C579.320881 13.934 546.998881 0.023 512.424881 0.023s-66.896 13.776-91.006 38.946L32.889881 443.129c-40.138 41.728-34.972 77.759-28.348 92.86 4.769 10.731 20.665 40.005 66.63 40.005l56.961 0 0 310.902c0 70.604 50.736 137.104 122.797 137.104l165.454 0L416.383881 694.949c0-35.236-5.298-54.974 30.733-54.974l130.745 0c36.031 0 30.733 19.605 30.733 54.974L608.594881 1024l165.321 0c72.063 0 122.797-66.499 122.797-137.104L896.712881 575.994l56.961 0c45.966 0 61.862-29.407 66.63-40.005C1026.927881 520.888 1032.094881 484.856 992.090881 443.129L992.090881 443.129zM953.676881 512.013 832.601881 512.013l0 374.884c0 35.237-22.784 72.99-58.815 72.99L672.446881 959.887 672.446881 694.949c0-70.604-22.652-118.956-94.717-118.956L446.985881 575.993c-72.063 0-94.717 48.352-94.717 118.956l0 265.069L250.929881 960.018c-36.031 0-58.816-37.754-58.816-72.99L192.113881 512.145 71.038881 512.145c-1.191 0-2.118-4.371-3.047-4.503 2.253-3.843 6.094-13.646 12.452-20.269l388.66-403.895c11.525-12.187 27.95-19.473 43.848-19.34 15.895-0.132 31.262 7.285 42.919 19.34L944.398881 487.24c6.358 6.623 10.199 16.426 12.32 20.269-0.796 0.132-1.856 4.503-3.047 4.503L953.676881 512.013z" fill="#909399" p-id="4222"></path></svg>

src/views/system/organizationalStructure/index.vue

@@ -1,7 +1,6 @@
 <template>
-
+  <div class="organization-layout">
-  <div class="layout">
+    <div class="layout-left">
-    <div class="layout-left" style="width: 40%">
       <div class="candidate" v-loading="loading">
         <el-form :model="queryType" @submit.prevent="getList(1)">
           <el-form-item prop="dictName">
@@ -17,15 +16,13 @@
         <el-scrollbar>
           <div class="tree scrollbar-dict">
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     :default-expanded-keys="expandedKeys" lazy accordion
+                     :default-expanded-keys="expandedKeys" lazy
                      @node-click="handleChange" @node-expand="handleChange">
               <template #default="{ node, data }">
                 <div class="tree-node">
-                  <div  style="display: flex;align-items: center;padding: 3px 0">
+                  <div style="display: flex;align-items: center;padding: 3px 0">
-                    <el-icon v-if="data.type===0">
+                    <svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
-                      <House/>
+                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'" style="margin-right: 4px;">
-                    </el-icon>
-                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'">
                       <FolderOpened/>
                     </el-icon>
                     {{ data.organizationalStructureName }}
@@ -38,15 +35,16 @@
       </div>
     </div>
 
-    <div class="layout-right" style="margin-top: 15px;width:65%;margin-left: 0">
+    <div class="layout-right">
       <depart-component v-if="showDept" v-model:value="deptId"/>
-<!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
+      <!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
     </div>
   </div>
 
 </template>
 
 <script setup>
+import SvgIcon from '@/components/svgIcon/index.vue'
 import {ElNotification} from "element-plus";
 import {getOrganizationStructure} from "@/api/workflow/process-user";
 import DepartComponent from "@/components/organizationalStructure/Department.vue";
@@ -88,7 +86,7 @@ const _value = computed({
   }
 });
 
-const getList = (flag,type) => {
+const getList = (flag, type) => {
   let params = {}
   if (flag === 1) {
     isSearch.value = true;
@@ -111,13 +109,13 @@ const getList = (flag,type) => {
   getOrganizationStructure(params).then(res => {
     if (selectItem.type === -1) {
       dataList.value = res.data;
-    } else if (type=== 2) {
+    } else if (type === 2) {
       selectItem.children = res.data;
       if (res.data.length === 0) {
         selectItem.isLeaf = true
-      //   selectItem.children = [{
+        //   selectItem.children = [{
-      //     type: 2
+        //     type: 2
-      //   }
+        //   }
       }
     }
   });
@@ -130,31 +128,32 @@ const init = () => {
   dataList.value = [];
   chooseId.value = 0;
   expandedKeys.value = [];
-  queryType.chooseName =  ""
+  queryType.chooseName = ""
   getList();
 };
 const handleChange = (item, data) => {
-  if(item.type===1){
+  console.log('expandedKeys.value',expandedKeys.value)
-    showDept.value=false
+  if (item.type === 1) {
-    nextTick(()=>{
+    showDept.value = false
-      showDept.value=true
+    nextTick(() => {
+      showDept.value = true
     })
-    deptId.value=item.organizationalStructureId
+    deptId.value = item.organizationalStructureId
   }
   selectItem = item;
   if (isSearch.value) {
     queryType.chooseName = ""
     chooseId.value = item.organizationalStructureId;
-    getList('',2);
+    getList('', 2);
     return;
   } else {
     //渲染子节点用户或部门及用户数据
     if (data.expanded) {
       if (expandedKeys.value.indexOf(item.value) === -1) {
         expandedKeys.value.push(item.value);
-        organizationStructureType.value=item.type
+        organizationStructureType.value = item.type
         chooseId.value = item.organizationalStructureId;
-        getList('',2);
+        getList('', 2);
         return;
       }
     }
@@ -165,7 +164,81 @@ init()
 </script>
 
 <style lang="scss" scoped>
-$containWidth: 480px;
+$containWidth: 550px;
+.organization-layout {
+  display: flex;
+  justify-content: space-between;
+
+  .layout-left {
+    width: $containWidth;
+    //border: 1px solid #ebeef5;
+    padding: 10px;
+    margin-top: 5px;
+
+    .candidate {
+      position: absolute;
+      display: inline-block;
+      width: $containWidth;
+      //height: 80%;
+      //border: 1px solid #e8e8e8;
+
+      :deep(.el-input) {
+        height: 40px;
+
+        .el-input__inner, .el-input-group__append {
+          font-size: 16px;
+        }
+      }
+
+      .scrollbar-dict {
+        border: 1px solid #ebeef5;
+        //min-height: 30vh;
+        //height: 60vh;
+        height: calc(100vh - 250px);
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+
+        // 滚动条轨道
+        &::-webkit-scrollbar-track {
+          background: rgb(239, 239, 239);
+          border-radius: 2px;
+        }
+
+        // 小滑块
+        &::-webkit-scrollbar-thumb {
+          background: rgba(80, 81, 82, 0.29);
+          border-radius: 10px;
+        }
+
+        .el-tree--highlight-current
+        .el-tree-node.is-current
+        > .el-tree-node__content {
+          // 设置颜色
+          background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
+          color: #409eff; // 节点的字体颜色
+          font-weight: bold; // 字体加粗
+        }
+      }
+
+    }
+
+  }
+
+  .layout-right {
+    flex: 1;
+    //width: 70%;
+    //border: 1px solid #ebeef5;
+    margin-left: 30px;
+    padding: 0 10px;
+    border: none;
+  }
+}
+
 :deep(.tree) {
   .el-tree-node__content {
     height: 34px;
@@ -174,37 +247,6 @@ $containWidth: 480px;
       font-size: 18px;
     }
   }
-
-  //.el-tree-node {
-  //  .is-leaf + .el-checkbox .el-checkbox__inner {
-  //    display: inline-block;
-  //  }
-  //
-  //  .el-checkbox .el-checkbox__inner {
-  //    display: none;
-  //  }
-  //}
-}
-
-.footer {
-  float: right;
-}
-
-
-.candidate {
-  position: absolute;
-  display: inline-block;
-  width: $containWidth;
-  //height: 80%;
-  //border: 1px solid #e8e8e8;
-
-  :deep(.el-input) {
-    height: 40px;
-
-    .el-input__inner, .el-input-group__append {
-      font-size: 16px;
-    }
-  }
 }