地区选择器增加组

src/components/pages/multiplyArea.vue

@@ -49,7 +49,8 @@ export default {
     },
     valueLevel() {
       return this.$route.query.valueLevel || 5
-    }
+    },
+    extra: v => v.$route.query.extra
   },
   methods: {
     getOptionsByRoot() {
@@ -77,8 +78,17 @@ export default {
             this.selectList.push(row)
             this.options = res.data.map(e => ({...e, isChecked: !!this.selected[e.id]}))
           }
-          row.locked = false
+        }).finally(() => row.locked = false)
-        })
+      } else if (this.extra && !row.locked) {
+        row.locked = true
+        this.$http.post("/admin/appresident/queryAreaIdGroup", null, {
+          params: {currentAreaId: id}
+        }).then(res => {
+          if (res?.data) {
+            this.selectList.push(row)
+            this.options = res.data.map(id => ({id, name: id, isChecked: !!this.selected[id]}))
+          }
+        }).finally(() => row.locked = false)
       }
     },
     selectListClick(row, index) {

src/project/police/AppMessageNotification/chooseUser.vue

@@ -3,17 +3,17 @@
     <div class="select-content">
       <div class="area-flex">
         <p class="title">地区</p>
-        <AiAreaPicker v-model="areaList" multiple class="value">
+        <AiAreaPicker v-model="areaList" multiple class="value" extra>
           <span class="label" v-if="areaList.length">已选择</span>
           <span v-else style="color:#999;">请选择</span>
-          <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;" />
+          <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;"/>
         </AiAreaPicker>
       </div>
       <div class="area-flex">
         <p class="title">部门</p>
         <div class="value">
           <AiPagePicker type="dept" :selected.sync="deptList" nodeKey="id" :isRequire="0">
-            <AiMore v-model="moreTextDept" />
+            <AiMore v-model="moreTextDept"/>
           </AiPagePicker>
         </div>
       </div>
@@ -21,16 +21,18 @@
         <p class="title">人员</p>
         <div class="value">
           <AiPagePicker type="sysUser" :selected.sync="userList" action="/app/wxcp/wxuser/list?status=1" nodeKey="id" :isRequire="0">
-            <AiMore v-model="moreText" />
+            <AiMore v-model="moreText"/>
           </AiPagePicker>
         </div>
       </div>
 
       <div class="type-content">
         <div class="type-list" v-for="(item, index) in tagList" :key="index">
-          <p>{{item.name}}</p>
+          <p>{{ item.name }}</p>
           <div class="list">
-            <div class="item" :class="items.isCheck ? 'active' : ''" v-for="(items, indexs) in item.tagList" :key="indexs" @click="typeClick(index, indexs)">{{items.name}}</div>
+            <div class="item" :class="items.isCheck ? 'active' : ''" v-for="(items, indexs) in item.tagList" :key="indexs" @click="typeClick(index, indexs)">
+              {{ items.name }}
+            </div>
           </div>
         </div>
       </div>
@@ -61,10 +63,10 @@ export default {
   computed: {
     ...mapState(['user']),
     moreText() {
-      if(this.userList.length) return '已选择'
+      if (this.userList.length) return '已选择'
     },
     moreTextDept() {
-      if(this.deptList.length) return '已选择'
+      if (this.deptList.length) return '已选择'
     },
   },
   methods: {
@@ -74,7 +76,7 @@ export default {
           res.data.records.map((item) => {
             item.tagList.map((items) => {
               items.isCheck = false
-              if(this.tagIdList.includes(items.id)) {
+              if (this.tagIdList.includes(items.id)) {
                 items.isCheck = true
               }
             })
@@ -93,7 +95,7 @@ export default {
       this.tagIdList = []
       this.tagList.map((item) => {
         item.tagList.map((items) => {
-          if(items.isCheck) {
+          if (items.isCheck) {
             this.tagIdList.push(items.id)
           }
         })
@@ -117,7 +119,7 @@ export default {
       uni.navigateBack({})
     },
     toSelectDept() {
-      uni.navigateTo({ url: `./selectDept` })
+      uni.navigateTo({url: `./selectDept`})
     },
   },
   onShow() {
@@ -127,13 +129,13 @@ export default {
     console.log(option)
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
-    if(option.areaList) {
+    if (option.areaList) {
       this.areaList = option.areaList.split(',')
     }
-    if(option.tagIdList) {
+    if (option.tagIdList) {
-      this.tagIdList =  option.tagIdList.split(',')
+      this.tagIdList = option.tagIdList.split(',')
     }
-    if(option.userList) {
+    if (option.userList) {
       var list = option.userList.split(',')
       list.map(item => {
         var info = {
@@ -143,7 +145,7 @@ export default {
       })
 
     }
-    if(option.deptList) {
+    if (option.deptList) {
       var list = option.deptList.split(',')
       list.map(item => {
         var info = {
@@ -158,64 +160,76 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chooseUser {
-  .select-content{
+  .select-content {
-    .area-flex{
+    .area-flex {
       display: flex;
       justify-content: space-between;
       padding: 32px;
       line-height: 44px;
       margin-bottom: 16px;
       background-color: #fff;
-      .title{
+
+      .title {
         width: 150px;
         margin-bottom: 0;
       }
-      .value{
+
+      .value {
         width: calc(100% - 150px);
         text-align: right;
       }
     }
-    .area-content{
+
+    .area-content {
       padding: 16px 32px 32px;
       border-bottom: 1px solid #ddd;
-      .area-item{
+
+      .area-item {
         display: inline-block;
         margin-right: 16px;
-        .u-icon{
+
+        .u-icon {
           margin-left: 4px;
         }
       }
     }
-    .title{
+
+    .title {
       line-height: 44px;
       margin-bottom: 16px;
       font-size: 32px;
       color: #666;
-      .tips{
+
+      .tips {
         font-size: 34px;
         color: #f46;
         vertical-align: middle;
       }
     }
-    .local-icon{
+
+    .local-icon {
       width: 32px;
       height: 32px;
       margin-right: 4px;
     }
-    .type-list{
+
+    .type-list {
       padding-left: 16px;
       margin-bottom: 16px;
       padding: 34px 32px 32px;
       background-color: #fff;
-      p{
+
+      p {
         line-height: 44px;
         margin-bottom: 24px;
         font-size: 30px;
         color: #666;
       }
-      .list{
+
+      .list {
         overflow: hidden;
-        .item{
+
+        .item {
           padding: 12px 32px;
           float: left;
           font-size: 28px;
@@ -226,16 +240,19 @@ export default {
           border-radius: 4px;
           margin: 0 16px 16px 0;
         }
-        .active{
+
+        .active {
           background-color: #3192F4;
           color: #fff;
         }
       }
     }
   }
-  .bg-144{
+
+  .bg-144 {
     height: 144px;
   }
+
   .footer {
     position: fixed;
     bottom: 0;
@@ -247,18 +264,21 @@ export default {
     display: flex;
     font-size: 36px;
     font-family: PingFangSC-Regular, PingFang SC;
+
     .confirm {
       color: #fff;
       background: #1365dd;
     }
+
     div {
       flex: 1;
       text-align: center;
       color: #333;
     }
   }
-  ::v-deep .u-icon__label{
+
-    font-size: 28px!important;
+  ::v-deep .u-icon__label {
+    font-size: 28px !important;
   }
 
 }