From 5b193823b0663cc6c7c0c709979b5c534368f20c Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 11 Feb 2022 12:05:02 +0800
Subject: [PATCH] BUG 27200

---
 package.json                                 |   1 +
 src/components/AiPagePicker.vue              |  11 +-
 src/components/pages/selectGird.vue          |   7 +-
 src/saas/AppBackUserList/AppBackUserList.vue | 192 +++++++++++--------
 4 files changed, 128 insertions(+), 83 deletions(-)

diff --git a/package.json b/package.json
index 024d1c95..eb3b6bb6 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "miniprogram-api-typings": "^3.3.2",
     "node-sass": "npm:dart-sass@^1.25.0",
     "postcss-comment": "^2.0.0",
+    "query-string": "^7.1.1",
     "uview-ui": "^1.8.4",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/components/AiPagePicker.vue b/src/components/AiPagePicker.vue
index 3aef11c7..9c31a68e 100644
--- a/src/components/AiPagePicker.vue
+++ b/src/components/AiPagePicker.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script>
+import qs from 'query-string'
+
 export default {
   name: "AiPagePicker",
   model: {
@@ -47,7 +49,14 @@ export default {
         this.$emit("select", data)
         this.$emit("change", data.map(e => e[nodeKey]))
       })
-      uni.navigateTo({url: `${config.url}?selected=${selected?.toString()}`})
+      let url = `${config.url}`,
+          qsstr = qs.stringify({
+            selected, ...this.$attrs
+          })
+      if (!!qsstr) {
+        url += `?${qsstr}`
+      }
+      uni.navigateTo({url})
     }
   }
 }
diff --git a/src/components/pages/selectGird.vue b/src/components/pages/selectGird.vue
index 8b01e012..a75d02c7 100644
--- a/src/components/pages/selectGird.vue
+++ b/src/components/pages/selectGird.vue
@@ -59,13 +59,16 @@ export default {
       return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
     }
   },
-  onLoad() {
+  onLoad(params) {
+    if (params.girdLevel) {
+      this.girdLevel = params.girdLevel
+    }
     this.isGirdUser()
   },
   methods: {
     isGirdUser() {
       this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
-        if (res.code == 0) {
+        if (res?.data) {
           if (res.data.checkType) {
             this.userGird = res.data
             this.getTree()
diff --git a/src/saas/AppBackUserList/AppBackUserList.vue b/src/saas/AppBackUserList/AppBackUserList.vue
index 634226ce..229a2771 100644
--- a/src/saas/AppBackUserList/AppBackUserList.vue
+++ b/src/saas/AppBackUserList/AppBackUserList.vue
@@ -2,28 +2,28 @@
   <div class="BackUserList">
     <AiTopFixed v-if="isAdmin">
       <div class="pad-t32"></div>
-      <div class="select-gird" @click="showSelect=true">
-        <div class="gird-name-div">
+      <div class="select-gird">
+        <AiPagePicker type="gird" girdLevel="2" class="gird-name-div" @select="confirmSelect">
           <img src="./components/img/gird-icon.png" alt="" class="gird-icon">
-          <div class="gird-name">{{girdName}}</div>
-          <img src="./components/img/down-icon.png" alt="" class="down-icon"> 
-        </div>
+          <div class="gird-name">{{ girdName }}</div>
+          <img src="./components/img/down-icon.png" alt="" class="down-icon">
+        </AiPagePicker>
       </div>
       <div class="header">
         <div class="tab-item">
-          <h2 style="color:#2C51CE;">{{totalInfo.total}}</h2>
+          <h2 style="color:#2C51CE;">{{ totalInfo.total }}</h2>
           <p>返乡人员</p>
         </div>
         <div class="tab-item">
-          <h2 style="color:#5AAD6A;">{{totalInfo.today}}</h2>
+          <h2 style="color:#5AAD6A;">{{ totalInfo.today }}</h2>
           <p>今日返乡</p>
         </div>
         <div class="tab-item">
-          <h2 style="color:#F5A319;">{{totalInfo.todayUnusual}}</h2>
+          <h2 style="color:#F5A319;">{{ totalInfo.todayUnusual }}</h2>
           <p>今日异常</p>
         </div>
         <div class="tab-item">
-          <h2 style="color:#CD413A;border-right:0;">{{totalInfo.release}}</h2>
+          <h2 style="color:#CD413A;border-right:0;">{{ totalInfo.release }}</h2>
           <p>异常处理</p>
         </div>
       </div>
@@ -34,17 +34,18 @@
     </AiTopFixed>
     <div class="user-list" v-if="isAdmin">
       <div class="item" @click="toUser(item)" v-for="(item,index) in list" :key="index">
-        <h2 class="name">{{item.name}}<span class="status" v-if="item.status == 0">有异常</span></h2>
-        <p class="color-999">{{item.idNumber}}</p>
-        <p><img src="./components/img/org-icon.png" alt=""><span class="start-name">{{item.startAreaName}}</span></p>
-        <p><img src="./components/img/blue-icon.png" alt=""><span class="start-name">{{item.arriveAreaName}}</span></p>
-        <p><img src="./components/img/time-icon.png" alt="">{{item.createTime}}</p>
+        <h2 class="name">{{ item.name }}<span class="status" v-if="item.status == 0">有异常</span></h2>
+        <p class="color-999">{{ item.idNumber }}</p>
+        <p><img src="./components/img/org-icon.png" alt=""><span class="start-name">{{ item.startAreaName }}</span></p>
+        <p><img src="./components/img/blue-icon.png" alt=""><span class="start-name">{{ item.arriveAreaName }}</span>
+        </p>
+        <p><img src="./components/img/time-icon.png" alt="">{{ item.createTime }}</p>
       </div>
     </div>
     <AiEmpty v-if="!list.length && isAdmin"></AiEmpty>
     <div v-if="!isAdmin" class="empty">
       <img src="./components/img/no-admin.png" alt="">
-      <p>没有网格员权限<br />无法查看返乡登记哦~</p>
+      <p>没有网格员权限<br/>无法查看返乡登记哦~</p>
     </div>
     <div class="pad-b120"></div>
     <div class="footer" v-if="isAdmin">
@@ -73,14 +74,13 @@
       </div>
       <div class="btn" @click="show=false">取消</div>
     </u-popup>
-    <u-select v-model="showSelect" :list="girdList" label-name="girdName" value-name="id"  @confirm="confirmSelect"/>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapActions, mapState} from 'vuex'
 import qs from "query-string"
-import { mapActions } from 'vuex'
+
 export default {
   appName: '返乡登记',
   data() {
@@ -92,13 +92,11 @@ export default {
       totalInfo: {},
       isAdmin: true,
       show: false,
-      girdList: [],
       girdName: '',
       girdId: '',
-      showSelect: false
     }
   },
-  computed: { 
+  computed: {
     ...mapState(['user']),
     params() {
       return qs.parse(decodeURIComponent(location.search))
@@ -110,14 +108,9 @@ export default {
   },
   methods: {
     ...mapActions(['injectJWeixin', 'wxInvoke']),
-    confirmSelect(e) {
-      console.log(e)
-      this.girdId = e[0].value
-      this.girdList.map((item) => {
-        if(item.id == this.girdId) {
-          this.girdName = item.girdName
-        }
-      })
+    confirmSelect(v) {
+      this.girdId = v?.[0].id
+      this.girdName = v?.[0].girdName
       this.getListInit()
       this.getTotal()
     },
@@ -132,14 +125,14 @@ export default {
     },
     getList() {
       var status = ''
-      if(this.tabIndex == 1) {
+      if (this.tabIndex == 1) {
         status = 0
       }
       this.$http.post(`/app/appepidemicbackhomerecord/list?current=${this.current}&size=10&status=${status}&name=${this.name}&arriveGirdId=${this.girdId}`)
       .then((res) => {
         if (res.code == 0) {
           res.data.records.map((item) => {
-            item.idNumber = item.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")
+            item.idNumber = item.idNumber.replace(/(.{6}).*(.{4})/, "$1********$2")
           })
           this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
         }
@@ -156,15 +149,14 @@ export default {
       uni.navigateTo({url: `./UserInfo?id=${row.id}`})
     },
     linkTo(url) {
-      uni.navigateTo({ url })
+      uni.navigateTo({url})
     },
     isGirdUser() {
       this.isAdmin = false
       this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
-        if (res.code == 0) {
+        if (res?.data) {
           if (res.data.checkType != '0') {
             this.isAdmin = true
-            this.params = res.data.appGirdInfo
             this.getGirdList()
           }
         }
@@ -173,7 +165,6 @@ export default {
     getGirdList() {
       this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
         if (res.code == 0) {
-          this.girdList = res.data
           this.girdId = res.data[0].id
           this.girdName = res.data[0].girdName
           this.getList()
@@ -218,7 +209,7 @@ export default {
     },
   },
   onReachBottom() {
-    this.current ++
+    this.current++
     this.getList()
   }
 }
@@ -226,16 +217,17 @@ export default {
 
 <style lang="scss" scoped>
 .BackUserList {
-  .header{
+  .header {
     padding: 54px 32px 48px 32px;
     display: flex;
     background-color: #fff;
     margin-bottom: 4px;
-    .tab-item{
+
+    .tab-item {
       flex: 1;
       text-align: center;
-     
-      h2{
+
+      h2 {
         font-size: 52px;
         font-family: DINAlternate-Bold, DINAlternate;
         font-weight: bold;
@@ -245,7 +237,8 @@ export default {
         border-right: 1px solid #ddd;
         line-height: 44px;
       }
-      p{
+
+      p {
         font-size: 28px;
         font-family: PingFangSC-Regular, PingFang SC;
         color: #999;
@@ -253,11 +246,13 @@ export default {
         margin-top: -22px;
       }
     }
+
     .tab-item:nth-last-of-type(1) {
       border-right: 0;
     }
   }
-  .search{
+
+  .search {
     width: 100%;
     height: 112px;
     padding: 32px;
@@ -265,17 +260,20 @@ export default {
     background: #FFF;
     display: flex;
     margin-bottom: 8px;
-    .left{
+
+    .left {
       width: calc(100% - 402px);
     }
   }
-  .tab-select{
+
+  .tab-select {
     width: 100%;
     height: 96px;
     background: #FFF;
     display: flex;
     margin-bottom: 4px;
-    .item{
+
+    .item {
       flex: 1;
       font-size: 32px;
       line-height: 96px;
@@ -283,10 +281,12 @@ export default {
       color: #333;
       text-align: center;
     }
-    .active{
+
+    .active {
       color: #135AB8;
       position: relative;
-      span{
+
+      span {
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -296,19 +296,22 @@ export default {
       }
     }
   }
-  .user-list{
-    .item{
+
+  .user-list {
+    .item {
       padding: 32px 64px 24px;
       background-color: #fff;
       margin-bottom: 8px;
-      .name{
+
+      .name {
         font-size: 36px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #333;
         line-height: 50px;
         margin-bottom: 8px;
-        .status{
+
+        .status {
           float: right;
           font-size: 28px;
           font-family: PingFangSC-Regular, PingFang SC;
@@ -316,48 +319,57 @@ export default {
           line-height: 40px;
         }
       }
-      p{
+
+      p {
         font-size: 28px;
         font-family: PingFangSC-Regular, PingFang SC;
         color: #333;
         line-height: 40px;
         margin-bottom: 8px;
-        img{
+
+        img {
           width: 32px;
           height: 32px;
           margin-right: 18px;
           vertical-align: top;
         }
       }
-      .start-name{
+
+      .start-name {
         display: inline-block;
         width: calc(100% - 50px);
       }
-      .color-999{
+
+      .color-999 {
         margin-bottom: 24px;
         color: #999;
       }
     }
   }
+
   ::v-deep .AiTopFixed {
     .placeholder {
       .content {
         padding: 0 !important;
-       
+
       }
     }
+
     .fixed {
       margin: 0 !important;
-      background-color: #f5f5f5!important;
+      background-color: #f5f5f5 !important;
+
       .content {
         padding: 0 !important;
       }
     }
   }
-  .pad-t32{
+
+  .pad-t32 {
     padding-top: 32px;
   }
-  .select-gird{
+
+  .select-gird {
     width: calc(100% - 60px);
     padding: 24px 32px;
     background: #FFFFFF;
@@ -365,12 +377,14 @@ export default {
     margin: 0 30px 32px;
     box-sizing: border-box;
     text-align: center;
-    img{
+
+    img {
       width: 32px;
       height: 32px;
       vertical-align: middle;
     }
-    div{
+
+    div {
       display: inline-block;
       padding-left: 20px;
       box-sizing: border-box;
@@ -379,11 +393,13 @@ export default {
       font-weight: 500;
       color: #333;
       line-height: 48px;
-      img{
+
+      img {
         margin-left: 8px;
       }
     }
-    span{
+
+    span {
       display: inline-block;
       width: 112px;
       height: 48px;
@@ -393,12 +409,14 @@ export default {
       color: #3F8DF5;
       line-height: 48px;
     }
-    .gird-name-div{
+
+    .gird-name-div {
       display: inline-block;
       width: 100%;
       padding-left: 0;
     }
-    .gird-name{
+
+    .gird-name {
       display: inline-block;
       max-width: calc(100% - 80px);
       white-space: nowrap;
@@ -407,24 +425,29 @@ export default {
       vertical-align: middle;
     }
   }
-  .empty{
+
+  .empty {
     text-align: center;
-    img{
+
+    img {
       width: 282px;
       height: 306px;
       margin: 136px auto 0;
     }
-    p{
+
+    p {
       font-size: 28px;
       font-family: PingFangSC-Regular, PingFang SC;
       color: #999;
       line-height: 40px;
     }
   }
-  .pad-b120{
+
+  .pad-b120 {
     padding-bottom: 120px;
   }
-  .footer{
+
+  .footer {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -436,39 +459,46 @@ export default {
     font-size: 36px;
     font-family: PingFangSC-Regular, PingFang SC;
     z-index: 99;
-    .bg-fff{
+
+    .bg-fff {
       flex: 1;
       color: #333;
       background-color: #fff;
     }
-    .bg-blue{
+
+    .bg-blue {
       flex: 2;
       color: #fff;
       background-color: #3975C6;
     }
   }
-  .line-bg{
+
+  .line-bg {
     width: 110px;
     height: 8px;
     background: #DCDDDE;
     border-radius: 4px;
     margin: 32px auto 82px;
   }
-  .flex{
+
+  .flex {
     width: 100%;
     display: flex;
     padding-bottom: 70px;
-    .item{
+
+    .item {
       flex: 1;
       text-align: center;
-      img{
+
+      img {
         width: 100px;
         height: 100px;
         border-radius: 16px;
         background-color: #fff;
         margin-bottom: 16px;
       }
-      p{
+
+      p {
         font-size: 26px;
         font-family: PingFangSC-Regular, PingFang SC;
         color: #666;
@@ -476,7 +506,8 @@ export default {
       }
     }
   }
-  .btn{
+
+  .btn {
     width: 100%;
     height: 96px;
     line-height: 96px;
@@ -487,8 +518,9 @@ export default {
     font-weight: 500;
     color: #333;
   }
-  ::v-deep .uni-scroll-view{
-    background-color:#f7f7f7;
+
+  ::v-deep .uni-scroll-view {
+    background-color: #f7f7f7;
   }
 }
 </style>