fix(移动端): 面貌屑交互补充

core/core-frontend/src/views/dashboard/MobileConfigPanel.vue

@@ -208,7 +208,13 @@ const save = () => {
         <span class="open-mobile">开启移动端</span>
         <el-switch size="small" v-model="dvInfo.mobileLayout" />
         <span class="open-mobile-line"></span>
-        <el-tooltip effect="dark" content="切换至PC端布局" placement="bottom">
+        <el-tooltip
+          :show-arrow="false"
+          :offset="9"
+          effect="dark"
+          content="切换至PC端布局"
+          placement="bottom"
+        >
           <el-icon @click="handleBack" class="switch-pc">
             <Icon name="icon_pc_outlined" />
           </el-icon>

core/core-frontend/src/views/mobile/directory/index.vue

@@ -81,6 +81,13 @@ const dataClick = val => {
   directId.value.push(val.id)
 }
 
+const handleDir = index => {
+  if (index === directId.value.length - 1) return
+  directId.value = directId.value.slice(0, index + 1)
+  directName.value = directName.value.slice(0, index + 1)
+  activeDirectName.value = directName.value[directName.value.length - 1]
+}
+
 const getTree = async () => {
   const request = { busiFlag: 'dashboard' } as BusiTreeRequest
   await interactiveStore.setInteractive(request)
@@ -127,8 +134,10 @@ onMounted(() => {
             <Icon name="icon_right_outlined"></Icon>
           </el-icon>
         </div>
-        <div v-for="(ele, index) in [...directName]" :key="ele">
+        <div v-for="(ele, index) in [...directName]" @click="handleDir(index)" :key="ele">
-          <span class="label">{{ ele }}</span>
+          <span class="label ellipsis" :class="index !== directName.length - 1 && 'primary-name'">{{
+            ele
+          }}</span>
           <el-icon v-if="index !== directName.length - 1">
             <Icon name="icon_right_outlined"></Icon>
           </el-icon>
@@ -168,16 +177,20 @@ onMounted(() => {
     padding: 12px 16px;
     color: #646a73;
     display: flex;
+    width: 100%;
+    overflow-x: auto;
     align-items: center;
     & > div {
       display: flex;
       align-items: center;
+      white-space: nowrap;
     }
 
     .label {
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
+      max-width: 250px;
     }
 
     .ed-icon {

core/core-frontend/src/views/mobile/personal/index.vue

@@ -48,11 +48,47 @@ const findName = () => {
     }
   }
 }
+
+let directIdCopy = []
+let directNameCopy = []
+
+const dfsOrgTree = (arr, depth) => {
+  arr.forEach(item => {
+    const { name, id } = item
+    if (depth <= directIdCopy.length) {
+      if (depth < directIdCopy.length) {
+        directIdCopy = directIdCopy.slice(0, depth)
+        directNameCopy = directNameCopy.slice(0, depth)
+      }
+      directIdCopy.splice(directIdCopy.length - 1, 1, id)
+      directNameCopy.splice(directNameCopy.length - 1, 1, name)
+    } else {
+      directIdCopy.push(id)
+      directNameCopy.push(name)
+    }
+
+    let nextDepth = depth + 1
+
+    if (id === userStore.getOid) {
+      directName.value = [...directNameCopy]
+      directId.value = [...directIdCopy]
+      nextDepth = 999
+    }
+    if (item?.children?.length && nextDepth !== 999) {
+      dfsOrgTree(item?.children, nextDepth)
+    }
+  })
+}
+
 onMounted(() => {
   mountedOrg().then(res => {
     orgOption = res.data as OrgTreeNode[]
     tableData.value = res.data as OrgTreeNode[]
     findName()
+    dfsOrgTree(orgOption, 1)
+    directName.value.pop()
+    directId.value.pop()
+    activeDirectName.value = directName.value[directName.value.length - 1]
   })
 })
 
@@ -84,6 +120,13 @@ const orgCellClick = (type, val) => {
   }
 }
 
+const handleDir = index => {
+  if (index === directId.value.length - 1) return
+  directId.value = directId.value.slice(0, index + 1)
+  directName.value = directName.value.slice(0, index + 1)
+  activeDirectName.value = directName.value[directName.value.length - 1]
+}
+
 const tableData = ref([])
 const directName = ref([])
 const directId = ref([])
@@ -134,8 +177,13 @@ const activeTableData = computed(() => {
         @click-left="onClickLeft"
       />
       <div class="grey">
-        <div class="flex-align-center" v-for="(ele, index) in directName" :key="ele">
+        <div
-          <span :class="ele !== activeDirectName && 'active'">{{ ele }}</span>
+          @click="handleDir(index)"
+          class="flex-align-center"
+          v-for="(ele, index) in directName"
+          :key="ele"
+        >
+          <span class="ellipsis" :class="ele !== activeDirectName && 'active'">{{ ele }}</span>
           <el-icon v-if="directName.length > 1 && index !== directName.length - 1">
             <Icon name="icon_right_outlined"></Icon>
           </el-icon>
@@ -202,6 +250,14 @@ const activeTableData = computed(() => {
     display: flex;
     align-items: center;
 
+    & > div {
+      white-space: nowrap;
+    }
+
+    .ellipsis {
+      max-width: 250px;
+    }
+
     .active {
       color: var(--ed-color-primary);
     }