特殊人群引入选择完成

src/apps/AppSpecialPeople/add.vue

@@ -5,49 +5,72 @@
         <span class="label"><span class="tips">*</span>类型</span>
         <div class="value" @click="showType=true">
           <span :class="appId ? '' : 'color-999'">{{ appName }}</span>
-          <u-icon name="arrow-right" color="#cccccc" ></u-icon>
+          <u-icon name="arrow-right" color="#cccccc"/>
         </div>
       </div>
       <div class="info-content" v-for="(items, indexs) in formDataList" :key="indexs">
         <div v-for="(item, index) in items" :key="index">
+          <!-- 初始化字段锁定 -->
+          <div class="item" v-if="!!formData[item.isInit]&&item.isInit!=item.fieldDbName">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" v-if="item.dict"
+                 v-text="toString($dict.getLabel(item.dict, formData[item.fieldDbName]))"/>
+            <div class="value" v-else-if="item.type=='area'" v-text="toString(formData[item.fieldDbName+'_name'])"/>
+            <div class="value" v-else-if="item.type=='upload'">
+              <template v-if="formData[item.fieldDbName]">
+                <ai-image v-for="(op,i) in [formData[item.fieldDbName]].flat()" :key="i" :src="op" preview/>
+              </template>
+              <span v-else>-</span>
+            </div>
+            <div class="value" v-else v-text="toString(formData[item.fieldDbName])"/>
+          </div>
           <!-- input输入框 -->
-          <div class="item" v-if="item.type == 'input' || item.type == 'name' || item.type == 'phone'">
+          <div class="item" v-else-if="item.type == 'input' || item.type == 'name' || item.type == 'phone'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength" />
+              <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;"
+                       height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
             </div>
           </div>
           <!-- number 输入框 -->
-          <div class="item" v-if="item.type == 'number'">
+          <div class="item" v-else-if="item.type == 'number'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength" />
+              <u-input type="number" placeholder="请输入" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
+                       :maxlength="item.maxLength"/>
             </div>
           </div>
           <!-- 身份证输入框 -->
-          <div class="item" v-if="item.type == 'idNumber'">
+          <div class="item" v-else-if="item.type == 'idNumber'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <u-input type="idcard" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength" />
+              <u-input type="idcard" placeholder="请输入" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" v-model="formData[item.fieldDbName]"
+                       :maxlength="item.maxLength"/>
             </div>
           </div>
           <!-- textarea输入框 富文本-->
-          <div class="textarea"  v-if="item.type == 'textarea' || item.type == 'text' || item.type == 'rtf'">
+          <div class="textarea" v-else-if="item.type == 'textarea' || item.type == 'text' || item.type == 'rtf'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <u-input type="textarea" placeholder="请输入请输入"  placeholder-style="color:#999;font-size:16px;" height="200" v-model="formData[item.fieldDbName]" :maxlength="item.maxLength" />
+              <u-input type="textarea" placeholder="请输入请输入" placeholder-style="color:#999;font-size:16px;" height="200"
+                       v-model="formData[item.fieldDbName]" :maxlength="item.maxLength"/>
             </div>
           </div>
           <!-- 字典下拉选择 -->
-          <div class="item" v-if="item.type == 'dict'">
+          <div class="item" v-else-if="item.type == 'dict'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value" @click="selectClick(item.fieldDbName, item.dict)">
-              <span :class="formData[item.fieldDbName] ? '' : 'color-999'">{{$dict.getLabel(item.dict, formData[item.fieldDbName]) || '请选择'}}</span>
+              <span
+                  :class="formData[item.fieldDbName] ? '' : 'color-999'">{{
+                  $dict.getLabel(item.dict, formData[item.fieldDbName]) || '请选择'
+                }}</span>
               <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
           <!-- 单选radio -->
-          <div class="item" v-if="item.type == 'radio'">
+          <div class="item" v-else-if="item.type == 'radio'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
               <u-radio-group v-model="formData[item.fieldDbName]">
@@ -58,14 +81,14 @@
             </div>
           </div>
           <!-- 开关onOff -->
-          <div class="item"  v-if="item.type == 'onOff'">
+          <div class="item" v-else-if="item.type == 'onOff'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
               <u-switch v-model="formData[item.fieldDbName]" :active-value="1" :inactive-value="0"></u-switch>
             </div>
           </div>
           <!-- 多选checkbox -->
-          <div class="textarea" v-if="item.type == 'checkbox'">
+          <div class="textarea" v-else-if="item.type == 'checkbox'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
               <u-checkbox-group>
@@ -74,28 +97,31 @@
                     v-for="(e, i) in item.checkList" :key="i"
                     :name="item.dictValue"
                     @change="checkboxChange(indexs, index, i)"
-                >{{e.dictName}}</u-checkbox>
+                >{{ e.dictName }}
+                </u-checkbox>
               </u-checkbox-group>
             </div>
           </div>
           <!-- 附件 -->
-          <div class="textarea" v-if="item.type == 'upload'">
+          <div class="textarea" v-else-if="item.type == 'upload'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <AiUploader :multiple="true" type="image" :limit="9" placeholder="上传图片" :def.sync="formData[item.fieldDbName]"
-                action="/admin/file/add2"></AiUploader>
+              <AiUploader :multiple="true" type="image" :limit="9" placeholder="上传图片"
+                          :def.sync="formData[item.fieldDbName]"
+                          action="/admin/file/add2"/>
             </div>
           </div>
           <!-- 地区选择 -->
-          <div class="item area"  v-if="item.type == 'area'">
+          <div class="item area" v-else-if="item.type == 'area'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value">
-              <AiAreaPicker :value="formData[item.fieldDbName]" @select="v => formData[item.fieldDbName] = v" :areaId="user.areaId" all :name.sync="formData[item.fieldDbName+'_name']"></AiAreaPicker>
+              <AiAreaPicker :value="formData[item.fieldDbName]" @select="v => formData[item.fieldDbName] = v"
+                            :areaId="user.areaId" all :name.sync="formData[item.fieldDbName+'_name']"></AiAreaPicker>
               <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
           <!-- 人员选择 -->
-          <div class="item" v-if="item.type == 'user'">
+          <div class="item" v-else-if="item.type == 'user'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value" @click="handleSelectUser(item.fieldDbName)">
               <template v-if="!formData[item.fieldDbName].length">
@@ -110,19 +136,44 @@
             </div>
           </div>
           <!-- 日期选择 / 日期带时分秒选择 / 时间-时分秒选择 -->
-          <div class="item"  v-if="item.type == 'date' || item.type == 'datetime' || item.type == 'time'">
+          <div class="item" v-else-if="item.type == 'date' || item.type == 'datetime' || item.type == 'time'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value" @click="dateClick(indexs, index)">
-              <span :class="formData[item.fieldDbName] ? '' : 'color-999'">{{formData[item.fieldDbName] || '请选择'}}</span>
+              <span
+                  :class="formData[item.fieldDbName] ? '' : 'color-999'">{{
+                  formData[item.fieldDbName] || '请选择'
+                }}</span>
               <u-icon name="arrow-right area-icon" color="#cccccc"></u-icon>
             </div>
           </div>
+          <!-- 居民档案选择 -->
+          <div class="item" v-else-if="item.type == 'resident'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" flex>
+              <AiPagePicker @select="v=>handleSelectResident(v,item)" single>
+                <u-icon :label="formData[item.fieldDbName + '_name'] || item.fieldTips || '从居民档案中选择' "
+                        name="arrow-right" label-pos="left" color="#ccc"/>
+              </AiPagePicker>
+            </div>
+          </div>
+          <!-- 网格选择 -->
+          <div class="item" v-else-if="item.type == 'gird'">
+            <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
+            <div class="value" flex>
+              <AiPagePicker type="gird" @select="v=>handleSelectGird(v,item)">
+                <u-icon :label="formData[item.fieldDbName + '_name'] || item.fieldTips || '选择网格' "
+                        name="arrow-right" label-pos="left" color="#ccc"/>
+              </AiPagePicker>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <u-picker mode="time" v-model="dateShow" :params="deteParams" @confirm="dateConfirm">请选择</u-picker>
-    <u-select v-model="selectShow" mode="single-column" :list="selectList" label-name="dictName" value-name="dictValue" @confirm="selectConfirm"></u-select>
-    <u-select v-model="showType" :list="typeList" label-name="applicationName" value-name="id" @confirm="typeConfirm"></u-select>
+    <u-select v-model="selectShow" mode="single-column" :list="selectList" label-name="dictName" value-name="dictValue"
+              @confirm="selectConfirm"></u-select>
+    <u-select v-model="showType" :list="typeList" label-name="applicationName" value-name="id"
+              @confirm="typeConfirm"></u-select>
     <div class="footer" @click="submit" v-if="appId">
       <div class="btn">保存</div>
     </div>
@@ -130,9 +181,11 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-export default {
+import {mapActions, mapState} from 'vuex'
+import AiImage from "../../components/AiImage";
 
+export default {
+  components: {AiImage},
   data() {
     return {
       appId: '',
@@ -155,12 +208,11 @@ export default {
   computed: {...mapState(['user'])},
   created() {
     this.getType()
+    this.typeConfirm([{value: "1adc7c0963e14b06bce444ab6ed49fc5", label: "测试居民档案选择器"}])
   },
   onShow() {
     document.title = '新增人员'
   },
-
-
   methods: {
     ...mapActions(['selectEnterpriseContact']),
     handleSelectUser(fieldDbName) {
@@ -184,7 +236,8 @@ export default {
       this.appName = e[0].label
       this.$http.post(`/app/appapplicationinfo/queryApplicationInfo?appId=${this.appId}`).then((res) => {
         if (res?.data) {
-          var data = res.data
+          this.formData = {}
+          let data = res.data
           let dictList = []
           let formList = {}
           data.tableInfos.map((item) => {
@@ -212,8 +265,7 @@ export default {
                 fieldValue: ''
               }
               if (item.defaultValue) {
-                var val = item.defaultValue?.split('`')
-                colItem.fieldValue = val
+                colItem.fieldValue = item.defaultValue?.split('`')
               }
 
             } else if (item.type == 'onOff') {
@@ -276,9 +328,7 @@ export default {
                 }
               })
             })
-
             this.$forceUpdate()
-            console.log(this.formData)
             this.pageShow = true
           }
         }
@@ -304,7 +354,6 @@ export default {
           })
         })
         this.$forceUpdate()
-        console.log(this.formData)
         this.pageShow = true
       })
     },
@@ -340,7 +389,6 @@ export default {
       if (this.formDataList[this.datePropIndex][this.dateIndex].type == 'time') {  //时分秒
         this.formData[fieldDbName] = `${e.hour}-${e.minute}-${e.second}`
       }
-      console.log(e)
     },
     submit() {
       var isValid = true
@@ -369,7 +417,6 @@ export default {
             //   this.formData[items.fieldDbName] = this.formData[items.fieldDbName] ? '1' : '0'
             // }
             if (items.type == 'area' && this.formData[items.fieldDbName]) {
-              console.log(this.formData)
               var area = []
               area.push(this.formData[items.fieldDbName])
               area.push(this.formData[items.fieldDbName + '_name'])
@@ -403,6 +450,22 @@ export default {
         }
       })
     },
+    handleSelectResident(resident, item) {
+      let info = resident?.[0] || {}
+      this.formData = {...this.formData, ...info}
+      this.formData[item.fieldDbName] = info.id
+      this.formData[item.fieldDbName + "_name"] = info.name
+      this.$forceUpdate()
+    },
+    toString(obj) {
+      return obj?.toString() || "-"
+    },
+    handleSelectGird(gird, item) {
+      let info = gird?.[0] || {}
+      this.formData[item.fieldDbName] = [info.id, info.girdName].join("_")
+      this.formData[item.fieldDbName + "_name"] = info.girdName
+      this.$forceUpdate()
+    }
   }
 }
 </script>
@@ -410,6 +473,7 @@ export default {
 <style lang="scss" scoped>
 .add {
   padding-bottom: 112px;
+
   .title {
     width: 100%;
     height: 96px;
@@ -421,22 +485,25 @@ export default {
     padding-right: 32px;
     box-sizing: border-box;
     overflow: hidden;
+
     .tips {
       display: inline-block;
       width: 8px;
       height: 32px;
       background: #4E75FE;
-      box-shadow: 0px 8px 24px 2px #C9D8FA;
+      box-shadow: 0 8px 24px 2px #C9D8FA;
       border-radius: 4px;
       vertical-align: middle;
       margin-right: 22px;
     }
+
     .select {
       float: right;
       font-size: 30px;
       color: #1365DD;
     }
   }
+
   .item {
     width: 100%;
     padding: 34px 32px 34px 0;
@@ -450,18 +517,22 @@ export default {
     line-height: 44px;
     box-sizing: border-box;
     position: relative;
+
     .value {
       .u-icon {
         margin-left: 16px;
       }
+
       ::v-deep .u-input {
         font-size: 32px;
       }
     }
   }
+
   .color-999 {
     color: #999;
   }
+
   .tips {
     display: inline-block;
     width: 16px;
@@ -471,11 +542,13 @@ export default {
     color: #F46;
     line-height: 44px;
   }
+
   .textarea {
     width: 100%;
     padding: 34px 32px 34px 0;
     background: #FFFFFF;
     border-bottom: 1px solid #D8DDE6;
+
     .label {
       display: inline-block;
       font-size: 32px;
@@ -484,20 +557,25 @@ export default {
       line-height: 44px;
       margin-bottom: 8px;
     }
+
     .value {
       padding: 0 16px;
     }
   }
+
   ::v-deep .default {
     width: 160px !important;
     height: 160px !important;
   }
+
   .area {
     padding: 16px 54px 16px 0;
+
     .label {
       display: inline-block;
       line-height: 78px !important;
     }
+
     .u-icon {
       vertical-align: super;
       position: absolute;
@@ -505,18 +583,21 @@ export default {
       right: 16px;
     }
   }
+
   .area-icon {
     vertical-align: super;
     position: absolute;
     top: 10px;
     right: 0;
   }
+
   .footer {
     width: 100%;
     position: fixed;
     bottom: 0;
     left: 0;
   }
+
   .btn {
     width: 100%;
     height: 112px;
@@ -528,11 +609,13 @@ export default {
     font-weight: 500;
     color: #FFF;
   }
+
   .line-bg {
     width: 100%;
     height: 16px;
     background: #F5F5F5;
   }
+
   .pad-l32 {
     padding-left: 32px;
     background-color: #fff;

src/components/AiImage.vue

@@ -6,6 +6,9 @@
     <u-image v-else :src="image" @tap="prev">
       <image v-if="link" class="errorImage" slot="error" :src="$cdn+'link.png'"/>
       <image v-else-if="miniapp" class="errorImage" slot="error" :src="$cdn+'miniwxmp.jpg'"/>
+      <div v-else-if="$slots.errorImage" slot="error">
+        <slot name="errorImage"/>
+      </div>
       <image v-else class="errorImage" slot="error" :src="$cdn+'file.png'"/>
     </u-image>
   </section>

src/components/pages/selectResident.vue

@@ -15,9 +15,12 @@
           </div>
         </div>
       </template>
-      <AiEmpty v-else/>
+      <template v-else>
+        <AiEmpty />
+        <div class="pad-b118"/>
+      </template>
     </div>
-    <div class="pad-b118"></div>
+    <div class="pad-b118"/>
     <div class="footer">
       <div class="btn" @click="confirm">确定选择</div>
     </div>
@@ -40,7 +43,12 @@ export default {
       selected: []
     }
   },
-  computed: {...mapState(['user'])},
+  computed: {
+    ...mapState(['user']),
+    isSingle() {
+      return this.$route.query.single
+    }
+  },
   onLoad(query) {
     if (query.selected) {
       this.selected = query.selected?.split(",") || []
@@ -69,7 +77,12 @@ export default {
       })
     },
     checkClick(index) {
-      this.list[index].isCheck = !this.list[index].isCheck
+      if (this.isSingle) {
+        this.list.map((e, i) => {
+          e.isCheck = i == index;
+        })
+      } else this.list[index].isCheck = !this.list[index].isCheck
+
     },
     confirm() {
       let checkList = []