部门调整为树结构

src/components/AiTreePath.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="AiTreePath">
+    <AiTreePath v-if="parent" v-bind="$props" :current="parent" v-on="$listeners"/>
+    <div v-else v-text="`全部`" @click="$emit('click','all')"/>
+    <u-icon v-if="label" name="arrow-right" size="32" color="#ccc"/>
+    <div v-text="label" @click="$emit('click',current)"/>
+  </section>
+</template>
+<script>
+export default {
+  name: "AiTreePath",
+  props: {
+    current: {default: null},
+    prop: {default: () => ({})},
+    paths: {default: () => []}
+  },
+  computed: {
+    options: v => ({
+      id: 'id',
+      label: 'name',
+      parent: 'parentId',
+      ...v.prop
+    }),
+    label: v => v.current?.[v.options.label] || "",
+    parent: v => v.paths?.[v.current?.[v.options.parent]]
+  }
+}
+</script>
+<style scoped lang="scss">
+.AiTreePath {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 36px;
+  line-height: 40px;
+  font-family: PingFang-SC;
+}
+</style>

src/components/pages/selectDept.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="selectDept">
     <AiTopFixed>
-      <u-search placeholder="搜索" v-model="name" :show-action="false" @change="getList()"/>
+      <AiTreePath :current="cursor" :paths="depts.map" :prop="{parent:'parentid'}" @click="changeList"/>
     </AiTopFixed>
     <div class="user-list">
       <template v-if="list.length>0">
-        <div class="item" v-for="(item, index) in list" :key="index">
-          <div class="select-img" @click="checkClick(index)">
+        <div class="item" v-for="(item, index) in list" :key="index" flex>
+          <div class="select-img" @click="checkClick(item)">
             <img :src="item.isCheck ? checkIcon : cirIcon" alt="">
           </div>
-          <div class="user-info">{{ item.name }}</div>
+          <div class="user-info fill" flex @click="getCursor(item)">
+            <div class="fill" v-text="item.name"/>
+            <u-icon v-if="Array.isArray(item.children)" class="mar-r16" name="arrow-right" size="40" color="#999"/>
+          </div>
         </div>
       </template>
       <template v-else>
@@ -26,6 +29,7 @@
 
 <script>
 import {mapState} from 'vuex'
+import Tree from "../../common/tree";
 
 export default {
   name: "selectDept",
@@ -36,55 +40,46 @@ export default {
       total: 0,
       name: '',
       list: [],
+      depts: [],
       cirIcon: require('./img/xz.png'),
       checkIcon: require('./img/xzh.png'),
-      selected: []
+      selected: [],
+      cursor: null
     }
   },
   computed: {
     ...mapState(['user']),
-    isSingle() {
-      return this.$route.query.single
-    },
-    nodeKey() {
-      return this.$route.query.nodeKey || "idNumber"
-    },
-    isRequire() {
-      return this.$route.query.isRequire || 1
-    }
+    isSingle: v => !!v.$route.query.single,
+    nodeKey: v => v.$route.query.nodeKey || "idNumber",
+    isRequire: v => v.$route.query.isRequire || 1
   },
   onLoad(query) {
-    console.log(query)
     if (query.selected) {
-      this.selected = query.selected?.split(",") || []
+      this.selected = query.selected?.split(",").map(e => Number(e)) || []
     }
-    this.selected.map((item, index) => {
-      this.selected[index] = parseInt(item)
-    })
     this.getList()
   },
   methods: {
     getList() {
       this.$http.post(`/app/wxcp/wxdepartment/listAll?name=${this.name}`).then(res => {
         if (res?.data) {
-          res.data.forEach(e => {
-            e.isCheck = this.selected.includes(e[this.nodeKey])
-          })
-          this.list = res.data
+          res.data.forEach(e => e.isCheck = this.selected.includes(e[this.nodeKey]))
+          this.depts = new Tree(res.data, {parent: 'parentid'})
+          this.list = this.depts.tree
         }
       })
     },
-    checkClick(index) {
+    checkClick(item) {
       if (this.isSingle && this.isRequire == 1) {
-        this.list.map((e, i) => {
-          e.isCheck = i == index;
+        this.depts.every(e => {
+          e.isCheck = item.id == e.id
         })
-      } else this.list[index].isCheck = !this.list[index].isCheck
+      } else item.isCheck = !item.isCheck
 
     },
     confirm() {
       let checkList = []
-      this.list.map((item) => {
+      this.depts.every((item) => {
         if (item.isCheck) {
           checkList.push(item)
         }
@@ -98,6 +93,21 @@ export default {
           }
         })
       }
+    },
+    changeList(item) {
+      if (item == "all") {
+        this.list = this.depts.tree
+        this.cursor = null
+      } else {
+        this.cursor = item
+        this.list = item.children
+      }
+    },
+    getCursor(item) {
+      if (item.children?.length > 0) {
+        this.cursor = item
+        this.list = item.children
+      }
     }
   },
 }
@@ -117,6 +127,8 @@ export default {
     background-color: #fff;
 
     .item {
+      width: 100vw;
+
       .select-img {
         display: inline-block;
 
@@ -129,9 +141,7 @@ export default {
       }
 
       .user-info {
-        display: inline-block;
         padding: 20px 0 20px 0;
-        width: calc(100% - 114px);
         height: 100%;
         border-bottom: 1px solid #E4E5E6;
         font-size: 36px;
@@ -139,14 +149,6 @@ export default {
         font-weight: 500;
         color: #333;
         line-height: 74px;
-
-        img {
-          width: 74px;
-          height: 74px;
-          border-radius: 8px;
-          margin-right: 34px;
-          vertical-align: bottom;
-        }
       }
     }
   }