居民信息

project/fengdu/app/AppResidentInfo/components/Add.vue

@@ -184,7 +184,7 @@
                       <ai-info-item label="户主身份证号" :value="baseInfo.householdIdNumber"/>
                     </template>
                     <ai-info-item label="户籍地" isLine
-                                  :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')" isLine/>
+                                  :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')"/>
                   </ai-wrapper>
                 </ai-card>
               </template>
@@ -275,6 +275,25 @@
                     :areaLevel="3"
                 />
               </el-form-item>
+              <el-form-item label="网格" prop="girdName" required>
+                <ai-picker
+                  :instance="instance"
+                  dialogTitle="选择网格"
+                  :ops="{label: 'girdName', id: 'id'}"
+                  pageTitle="网格"
+                  :action="'/app/appgirdinfo/girdList'"
+                  v-model="baseInfo.girdId"
+                  @pick="onPick">
+                  <div class="AppAnnounceDetail-select">
+                    <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="baseInfo.girdName"></el-input>
+                    <div class="select-left" v-if="girdList.length">
+                      <span v-for="(item, index) in girdList" :key="index">{{ item.girdName }}</span>
+                    </div>
+                    <i v-if="!girdList.length">请选择网格</i>
+                    <div class="select-right">{{ girdList.length ? '重新选择' : '选择网格' }}</div>
+                  </div>
+                </ai-picker>
+              </el-form-item>
             </template>
           </ai-card>
           <ai-card title="联络信息">
@@ -359,10 +378,13 @@ export default {
       buildingCascader: true,
       houseCascader: true,
       navId: 0,
+      girdList: [],
       baseInfo: {
         registerStatus: "",
         tips: [],
         age: "",
+        girdName: '',
+        girdId: [],
         birthplaceAreaId: "",
         currentAddress: "",
         currentAreaId: "",
@@ -426,6 +448,9 @@ export default {
         phone: [
           {required: true, message: "请输入联系方式", trigger: "blur"}
         ],
+        girdName: [
+          {required: true, message: "请选择网格", trigger: "change"}
+        ],
         householdName: [
           {required: true, message: "请选择是否户主", trigger: "change"}
         ],
@@ -481,6 +506,16 @@ export default {
         type: 'List'
       })
     },
+    onPick (e) {
+      if (e.length) {
+        this.baseInfo.girdName = e[0].girdName
+      } else {
+        this.baseInfo.girdName = ''
+        this.baseInfo.girdId = []
+      }
+
+      this.girdList = e
+    },
     householdRelationChange() {
       this.baseInfo.householdIdNumber = "";
       this.baseInfo.householdRelation = "";
@@ -513,7 +548,8 @@ export default {
         ...this.baseInfo,
         currentHouseList: currentHouseList?.join("|"),
         householdHouseList: householdHouseList?.join("|"),
-        tips: tips?.join("|")
+        tips: tips?.join("|"),
+        girdId: this.baseInfo.girdId[0]
       }).then(res => {
         if (res?.code == 0) {
           this.$message.success("保存成功");
@@ -524,8 +560,13 @@ export default {
       this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
         if (res?.data) {
           this.baseInfo = {
-            ...res.data
+            ...res.data,
+            girdId: [res.data.girdId]
           };
+          this.girdList = [{
+            id: res.data.girdId,
+            girdName: res.data.girdName
+          }]
           // this.family = res.data.family;
           this.IdCard(res.data.idNumber);
         }
@@ -574,6 +615,87 @@ export default {
 <style lang="scss" scoped>
 .residentDetail {
   font-size: 14px;
+    .AppAnnounceDetail-select {
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+      line-height: 1;
+      background: #F5F5F5;
+      border-radius: 4px;
+      border: 1px solid #D0D4DC;
+      cursor: pointer;
+      overflow: hidden;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        border-color: #26f;
+      }
+
+      & > i {
+        flex: 1;
+        height: 100%;
+        line-height: 32px;
+        padding: 0 12px;
+        color: #888888;
+        font-size: 14px;
+        font-style: normal;
+        border-right: 1px solid #D0D4DC;
+        background: #fff;
+      }
+
+      .AppAnnounceDetail-select__input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        opacity: 0;
+        height: 100%;
+      }
+
+      .select-right {
+        height: 100%;
+        padding: 0 12px;
+        color: #222222;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all ease 0.3s;
+
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+
+      .select-left {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1;
+        padding: 5px 0 0px 12px;
+        border-right: 1px solid #D0D4DC;
+        border-radius: 4px 0 0 4px;
+        background: #fff;
+
+        em {
+          height: 22px;
+          line-height: 22px;
+          margin: 0 4px 5px 0;
+          color: #222222;
+          font-size: 12px;
+          font-style: normal;
+        }
+
+        span {
+          height: 22px;
+          line-height: 22px;
+          margin: 0 4px 5px 0;
+          padding: 0 8px;
+          font-size: 12px;
+          color: #222222;
+          background: #F3F4F7;
+          border-radius: 2px;
+          border: 1px solid #D0D4DC;
+        }
+      }
+    }
   :deep( .AiID ){
     line-height: unset;