特殊人群

src/components/AiPagePicker/AiPagePicker.vue

@@ -25,7 +25,8 @@ export default {
     ops: {default: () => ({})},
     valueObj: Boolean,
     params: {default: () => ({})},
-    multiple: Boolean
+    multiple: Boolean,
+    single: Boolean,
   },
   data() {
     return {
@@ -35,6 +36,7 @@ export default {
         gird: {url: "/components/pages/selectGird", label: "girdName"},
         party: {url: "/components/pages/selectParty", label: "name"},
         dept: {url: "/components/pages/selectDept", label: "name"},
+        deptUser: {url: "/components/pages/selectDeptUser", label: "name"},
         custom: {...this.ops}
       },
     }
@@ -50,7 +52,7 @@ export default {
   },
   methods: {
     handleJump() {
-      let {config, nodeKey, valueObj, multiple} = this,
+      let {config, nodeKey, valueObj, multiple, single} = this,
           selected = (valueObj ? this.value[nodeKey] : this.value) || this.selected?.map(e => e[nodeKey])
       uni.$once('pagePicker:' + this.type, data => {
         console.log('发送', data)
@@ -61,7 +63,7 @@ export default {
       })
       let url = `${config.url}`,
           qsstr = qs.stringify({
-            selected, nodeKey, multiple, ...this.params
+            selected, nodeKey, multiple, single, ...this.params
           })
       if (!!qsstr) {
         url += `?${qsstr}`

src/components/AiTreePath/AiTreePath.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="AiTreePath">
+    <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)"/>
+  </section>
+</template>
+<script>
+export default {
+  name: "AiTreePath",
+  props: {
+    prop: {default: () => ({})},
+    paths: {default: () => ({})},
+    node: {default: null}
+  },
+  computed: {
+    options: v => ({
+      id: 'id',
+      label: 'name',
+      parent: 'parentId',
+      ...v.prop
+    }),
+    label: v => v.node?.[v.options.label] || "",
+    parent: v => v.paths?.[v.node?.[v.options.parent]],
+    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>
+<style scoped lang="scss">
+.AiTreePath {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 36px;
+  line-height: 40px;
+  font-family: PingFang-SC;
+  flex-wrap: wrap;
+
+  .active {
+    font-weight: bold;
+    color: #26f
+  }
+}
+</style>

src/components/pages/selectDept.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="selectDept">
+    <AiTopFixed>
+      <AiTreePath :node="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" flex>
+          <div class="select-img" @click="checkClick(item)">
+            <img :src="item.isCheck ? checkIcon : cirIcon" alt="">
+          </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>
+        <AiEmpty/>
+        <div class="pad-b118"/>
+      </template>
+    </div>
+    <div class="pad-b118"/>
+    <div class="footer">
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "selectDept",
+  appName: "选择部门",
+  data() {
+    return {
+      current: 1,
+      total: 0,
+      name: '',
+      list: [],
+      depts: [],
+      cirIcon: require('./img/xz.png'),
+      checkIcon: require('./img/xzh.png'),
+      selected: [],
+      cursor: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isSingle: v => !!v.$route.query.single,
+    nodeKey: v => v.$route.query.nodeKey || "idNumber",
+    isRequire: v => v.$route.query.isRequire || 1,
+    isAuth: v => !!v.$route.query.isAuth, //是否只能选择自己当前部门及以下
+  },
+  onLoad(query) {
+    console.log(query)
+    if (query.selected) {
+      this.selected = query.selected?.split(",").map(e => Number(e)) || []
+    }
+    this.getList()
+  },
+  methods: {
+    getList() {
+      var url = this.isAuth ? `/app/wxcp/wxdepartment/listByUser?name=${this.name}` : `/app/wxcp/wxdepartment/listAll?name=${this.name}`
+      this.$http.post(url).then(res => {
+        if (res?.data) {
+          res.data.forEach(e => e.isCheck = this.selected.includes(e[this.nodeKey]))
+          this.depts = new this.$tree(res.data, {parent: 'parentid'})
+          this.list = this.depts.tree
+        }
+      })
+    },
+    checkClick(item) {
+      if (this.isSingle && this.isRequire == 1) {
+        this.depts.every(e => {
+          e.isCheck = item.id == e.id
+        })
+      } else item.isCheck = !item.isCheck
+
+    },
+    confirm() {
+      let checkList = []
+      this.depts.every((item) => {
+        if (item.isCheck) {
+          checkList.push(item)
+        }
+      })
+      if (!checkList.length && this.isRequire == 1) {
+        return this.$u.toast('请先选择部门')
+      } else {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker:dept", checkList)
+          }
+        })
+      }
+    },
+    changeList(item) {
+      if (item == "all") {
+        this.cursor = {}
+        this.list = this.depts.tree
+      } else {
+        this.cursor = item
+        this.list = item.children
+      }
+    },
+    getCursor(item) {
+      if (item.children?.length > 0) {
+        this.cursor = item
+        this.list = item.children
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDept {
+  ::v-deep .AiTopFixed .u-search {
+    margin-bottom: 0 !important;
+  }
+
+  .pad-b118 {
+    padding-bottom: 118px;
+  }
+
+  .user-list {
+    background-color: #fff;
+
+    .item {
+      width: 100vw;
+
+      .select-img {
+        display: inline-block;
+
+        img {
+          width: 48px;
+          height: 48px;
+          margin: 12px 36px 12px 30px;
+          vertical-align: middle;
+        }
+      }
+
+      .user-info {
+        padding: 20px 0 20px 0;
+        height: 100%;
+        border-bottom: 1px solid #E4E5E6;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 74px;
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+    }
+  }
+}
+</style>

src/components/pages/selectDeptUser.vue

@@ -0,0 +1,303 @@
+<template>
+  <section class="selectDeptUser">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in selectDeptPath" :key="index">
+          <span v-if="index>0" class="mar-h4">/</span>
+          <span class="color-3F8DF5" @click="deptNameClick(item, index)">{{ item.name }}</span>
+        </span>
+      </div>
+      <div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
+        <div class="imges">
+          <div class="imgselect" v-if="type == 1" :class="{checked:item.isChecked}" />
+          <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
+        </div>
+        <div class="rightes">
+          <div class="applicationNames">{{ item.name }}</div>
+          <img src="./img/right-icon.png" alt="" class="imgs"/>
+        </div>
+      </div>
+      <div v-if="type == 0">
+        <div class="userCards" v-for="(e, userIndex) in userList" :key="e.id">
+          <div class="imges">
+            <div class="imgselect" :class="{checked:e.isChecked}" @click.stop="itemCheck(e, 'user', userIndex)"/>
+            <img src="./img/tx@2x.png" alt="" class="avatras"/>
+          </div>
+          <div class="rights fill">
+            <div class="applicationNames" v-text="e.name"></div>
+            <div class="idNumbers">{{ e.phone }}</div>
+          </div>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" v-if="!hasData"/>
+    </div>
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "selectDeptUser",
+  appName: "选择人员",
+  data() {
+    return {
+      selected: [],
+      allData: null,
+      treeList: [],
+      selectDeptPath: [],
+      userList: [],
+      type: 0,
+    }
+  },
+  computed: {
+    isSingle: v => !!v.$route.query.single,
+    nodeKey: v => v.$route.query.nodeKey || "id",
+    isRequire: v => v.$route.query.isRequire || 1,
+    hasData() {
+      return this.treeList?.length > 0 || this.userList?.length > 0
+    },
+    ...mapState(['user'])
+  },
+  onLoad(query) {
+    if (query.selected) {
+      this.selected = query.selected?.split(",") || []
+    }
+    this.getListAll() 
+  },
+  methods: {
+    isSelected(id) {
+      return !!this.selected.find(e => e == id)
+    },
+    getListAll() {
+      this.$instance.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
+        if (res?.data) {
+          let parents = res.data.map(e => e.parentid)
+          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id)}))
+          this.deptInit()
+        }
+      })
+    },
+    deptInit() {
+      this.treeList = this.allData.filter(e => !e.parentid)
+      this.selectDeptPath = [{name: "可选范围", id: ''}]
+    },
+    itemClick({id, name, corpId}) {
+      let index = this.selectDeptPath.findIndex(e => e.id == id && e.corpId == corpId)
+      if (index == -1) {
+        this.selectDeptPath.push({name, id, corpId})
+        this.getDeptsAndUsersByParent(id, corpId)
+      }
+    },
+    getDeptsAndUsersByParent(departmentId, corpId) {
+      this.treeList = this.allData.filter(e => e.parentid == departmentId && e.corpId == corpId)
+      this.userList = []
+      this.$instance.post(`/app/wxcp/wxuser/listByDeptId`, null, {
+        params: {departmentId, status: 1, cid: corpId}
+      }).then(res => {
+        if (res?.data) {
+          this.userList = res.data.map(e => ({...e, isChecked: this.isSelected(e.id, e.corpId)}))
+        }
+      })
+    },
+    deptNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.deptInit()
+      } else {
+        let length = this.selectDeptPath.length - index
+        this.selectDeptPath.splice(index + 1, length)
+        this.getDeptsAndUsersByParent(row.id, row.corpId)
+      }
+    },
+    itemCheck(row, kind, index) {
+      if(this.isSingle) {
+        this.selected = []
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+        this.userList[index].isChecked = true
+        this.selected.push({...row, kind})
+      } else {
+        row.isChecked = !row.isChecked
+        if (row.isChecked) {
+          this.selected.push({...row, kind})
+        } else {
+          let index = this.selected.findIndex(e => e.id == row.id)
+          this.selected.splice(index, 1)
+        }
+      }
+      this.$forceUpdate()
+    },
+    submit() {
+      if(![this.selected].flat().length) {
+        return this.$u.toast('请选择人员')
+      }
+      uni.navigateBack({
+        success: () => {
+          uni.$emit("pagePicker:deptUser",  this.selected)
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDeptUser {
+  height: 100%;
+  background: #fff;
+
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0 1px 0 0 #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .empty-div {
+      height: 16px;
+      background: #f5f5f5;
+    }
+
+    .imges {
+      display: flex;
+      align-items: center;
+
+      .imgselect {
+        width: 48px;
+        height: 48px;
+        vertical-align: middle;
+        background-image: url("./img/xz.png");
+        background-position: center;
+        background-size: 100% 100%;
+
+        &.checked {
+          background-image: url("./img/xzh.png");
+        }
+      }
+
+      .avatras {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+        margin-left: 36px;
+      }
+    }
+
+    .cards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+
+      img {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+
+      .rightes {
+        width: calc(100% - 160px);
+        display: flex;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+
+        .applicationNames {
+          flex: 1;
+          min-width: 0;
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .imgs {
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .userCards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+      .rights {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+        padding-right: 40px;
+        height: inherit;
+
+        .applicationNames {
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .idNumbers {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .mar-h4 {
+    margin: 0 4px;
+  }
+}
+</style>

src/components/pages/selectResident.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="selectResident">
-    <AiTopFixed>
-      <u-search placeholder="搜索" v-model="name" :show-action="false" @change="getList"></u-search>
-    </AiTopFixed>
+    <!-- <AiTopFixed> -->
+    <div class="search-top">
+      <u-search placeholder="搜索" v-model="name" :show-action="false" bg-color="#fff" search-icon-color="#E2E8F1" 
+        color="#666" height="72" @search="getSearchList" @clear="handerClear" @change="getList"></u-search>
+    </div>
+    <!-- </AiTopFixed> -->
     <div class="user-list">
       <template v-if="list.length>0">
         <div class="item" v-for="(item, index) in list" :key="index">
@@ -37,19 +40,23 @@ export default {
       list: [],
       cirIcon: require('./img/xz.png'),
       checkIcon: require('./img/xzh.png'),
-      selected: []
+      selected: [],
+      isSingle:  false, //是否单选
     }
   },
-  computed: {...mapState(['user'])},
+  computed: {
+    ...mapState(['user']),
+  },
   onLoad(query) {
     if (query.selected) {
       this.selected = query.selected?.split(",") || []
     }
+    this.isSingle = query.single || false
     this.getList()
   },
   methods: {
     getList() {
-      this.$http.post(`/app/appresident/list`, null, {
+      this.$instance.post(`/app/appresident/list`, null, {
         params: {
           current: this.current,
           size: 20,
@@ -69,7 +76,15 @@ export default {
       })
     },
     checkClick(index) {
-      this.list[index].isCheck = !this.list[index].isCheck
+      if(this.isSingle) {
+        this.list.map((item) => {
+          item.isCheck = false
+        })
+        this.list[index].isCheck = true
+      }else {
+        this.list[index].isCheck = !this.list[index].isCheck
+      }
+      
     },
     confirm() {
       let checkList = []
@@ -83,10 +98,15 @@ export default {
       } else {
         uni.navigateBack({
           success: () => {
-            uni.$emit("pagePicker", checkList)
+            uni.$emit("pagePicker:resident", checkList)
           }
         })
       }
+    },
+    handerClear() {
+      this.current = 1
+      this.name = ''
+      this.getList()
     }
   },
   onReachBottom() {
@@ -106,9 +126,20 @@ export default {
     padding-bottom: 118px;
   }
 
+  .search-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #E4E5E6;
+    z-index: 99;
+  }
+
   .user-list {
     background-color: #fff;
-
+    padding-top: 100px;
     .item {
       .select-img {
         display: inline-block;