调整样式

src/components/AiTreePath.vue

@@ -1,18 +1,20 @@
 <template>
   <section class="AiTreePath">
-    <AiTreePath v-if="parent" v-bind="$props" :node="parent" v-on="$listeners"/>
-    <b v-else v-text="`全部`" @click="$emit('click','all')"/>
+    <b v-text="`全部`" @click="$emit('click','all')"/>
+    <div flex v-for="p in parents" :key="p.id">
+      <u-icon name="arrow-right" size="32" color="#ccc"/>
+      <div class="mar-l8" v-text="p[options.label]" @click="$emit('click',p)"/>
+    </div>
     <u-icon v-if="label" name="arrow-right" size="32" color="#ccc"/>
-    <div :class="{active}" v-text="label" @click="$emit('click',node)"/>
+    <div class="active" v-text="label" @click="$emit('click',node)"/>
   </section>
 </template>
 <script>
 export default {
   name: "AiTreePath",
   props: {
-    current: {default: null},
     prop: {default: () => ({})},
-    paths: {default: () => []},
+    paths: {default: () => ({})},
     node: {default: null}
   },
   computed: {
@@ -24,7 +26,18 @@ export default {
     }),
     label: v => v.node?.[v.options.label] || "",
     parent: v => v.paths?.[v.node?.[v.options.parent]],
-    active: v => v.node?.[v.options.id] == v.current
+    parents() {
+      const arr = []
+      const {id: KEY, parent: PARENT} = this.options
+      const find = n => {
+        if (!!n?.[KEY]) {
+          arr.unshift(n)
+          find(this.paths[n?.[PARENT]])
+        }
+      }
+      find(this.parent)
+      return arr
+    }
   }
 }
 </script>

src/components/pages/selectDept.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="selectDept">
     <AiTopFixed>
-      <AiTreePath :current="cursor.id" :node="cursor" :paths="depts.map" :prop="{parent:'parentid'}" @click="changeList"/>
+      <AiTreePath :node="cursor" :paths="depts.map" :prop="{parent:'parentid'}" @click="changeList"/>
     </AiTopFixed>
     <div class="user-list">
       <template v-if="list.length>0">