样式微调：使部门显示成树形结构

src/views/doc/share.vue

@@ -151,6 +151,12 @@ function handleMouseEnter(row:any){
   currentHoverRow.value=row.uuid
 }
 
+function getItemSpan(str:string){
+  let span=parseInt(str.split(":")[0])-3 //为何要减3，因为系统公司层级的level从3开始，层级递增4,5,6...
+  if(span<0) span=0
+  return `margin-left:${span*20}px`
+}
+
 onMounted(() => {
   const query = route.query
   //只是分享链接的请求
@@ -222,7 +228,9 @@ onMounted(() => {
     </template>
     
     <ul v-if="drawerModel &&permitListRef!=''" style="line-height: 26px;">
-      <li class="el-text" v-for="item in permitListRef.split('|')"> {{ item }}</li>
+      <li class="el-text" v-for="item in permitListRef.split('|')" :style="item.includes(':')?getItemSpan(item):''" >
+         {{ item.replace(/\d:/,'- ') }}
+      </li>
     </ul>
     <span v-else-if="permitListRef==''"> 所有人员都可访问</span>
   </el-drawer>

src/views/doc/sharePermission.vue

@@ -6,8 +6,6 @@ import {
   memberInfo,
   getPermitedList,
   postPermitedList} from '@/api/hr/people/share_ctrol'
-import { MessageBox } from '@element-plus/icons-vue/dist/types';
-import { number } from 'echarts';
 
 import { ElDialog, ElMessageBox,TableInstance, TreeInstance } from 'element-plus';