地区选择器增加组

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,7 +3,7 @@
     <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;"/>
@@ -30,7 +30,9 @@
         <div class="type-list" v-for="(item, index) in tagList" :key="index">
           <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>
@@ -166,55 +168,67 @@ export default {
       line-height: 44px;
       margin-bottom: 16px;
       background-color: #fff;
+
       .title {
         width: 150px;
         margin-bottom: 0;
       }
+
       .value {
         width: calc(100% - 150px);
         text-align: right;
       }
     }
+
     .area-content {
       padding: 16px 32px 32px;
       border-bottom: 1px solid #ddd;
+
       .area-item {
         display: inline-block;
         margin-right: 16px;
+
         .u-icon {
           margin-left: 4px;
         }
       }
     }
+
     .title {
       line-height: 44px;
       margin-bottom: 16px;
       font-size: 32px;
       color: #666;
+
       .tips {
         font-size: 34px;
         color: #f46;
         vertical-align: middle;
       }
     }
+
     .local-icon {
       width: 32px;
       height: 32px;
       margin-right: 4px;
     }
+
     .type-list {
       padding-left: 16px;
       margin-bottom: 16px;
       padding: 34px 32px 32px;
       background-color: #fff;
+
       p {
         line-height: 44px;
         margin-bottom: 24px;
         font-size: 30px;
         color: #666;
       }
+
       .list {
         overflow: hidden;
+
         .item {
           padding: 12px 32px;
           float: left;
@@ -226,6 +240,7 @@ export default {
           border-radius: 4px;
           margin: 0 16px 16px 0;
         }
+
         .active {
           background-color: #3192F4;
           color: #fff;
@@ -233,9 +248,11 @@ export default {
       }
     }
   }
+
   .bg-144 {
     height: 144px;
   }
+
   .footer {
     position: fixed;
     bottom: 0;
@@ -247,16 +264,19 @@ 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;
   }