居民信息采集

src/assets/scss/pages/caiji.scss

@@ -1,6 +1,6 @@
 .bg-app {
-  // background-color: rgb(230, 230, 230);
+  background-color: rgba(218, 218, 218, 0.89);
-  height: 100vh;
+  height: 100%;
   width: 100vw;
   padding: 20px;
 
@@ -9,18 +9,37 @@
     font-size: 20px;
   }
 
-  .content {
+  .main {
-    margin-top: 20px;
+    padding-top: 20px;
     // font-size: 40px;
 
+    .content {
+      border-radius: 5px;
+      background-border: 5px;
+      background-color: rgba(255, 255, 255, 0.787);
+
+      .member_title {
+        padding: 10px;
+        font-size: 14px;
+      }
+    }
+    .content1 {
+      margin-top: 20px;
+    }
+
     .line {
       border: 1px solid #e4e4e48e;
     }
   }
 
   .div-btn {
-    margin-top: 50px;
+    margin-top: 30px;
+    padding-bottom: 20px;
     display: flex;
     justify-content: center;
   }
 }
+
+.picker_content {
+  color: rgb(59, 59, 59);
+}

src/views/pages/caiji.vue

@@ -3,116 +3,157 @@
     <div class="title">
       居民信息填报
     </div>
-    <div class="content">
+    <div class="main">
 
-      <mt-cell title="所属社区">
+      <div class="content">
 
-        <span>{{shequName}}</span>
+        <mt-cell title="所属社区">
-      </mt-cell>
-      <div class="line"></div>
 
-      <div @click="handelSel('community')">
+          <span>{{shequName}}</span>
-        <mt-cell title="小区"
-                 is-link>
-          <span v-if="selCommunity">{{selCommunity.label}}</span>
-          <span v-else>请选择</span>
-        </mt-cell>
-      </div>
-      <div class="line"></div>
-
-      <div @click="handelSel('building')">
-        <mt-cell title="楼宇"
-                 is-link>
-          <span v-if="selBuilding">{{selBuilding.label}}</span>
-          <span v-else>请选择</span>
-        </mt-cell>
-      </div>
-      <div class="line"></div>
-
-      <div @click="handelSel('unit')">
-        <mt-cell title="单元"
-                 is-link>
-          <span v-if="selUnit">{{selUnit.label}}</span>
-          <span v-else>请选择</span>
-        </mt-cell>
-      </div>
-      <div class="line"></div>
-
-      <div v-if="!selUnit || selUnit.value!=='else'"
-           @click="handelSel('room')">
-        <mt-cell title="房屋"
-                 is-link>
-          <span v-if="selRoom">{{selRoom.label}}</span>
-          <span v-else>请选择</span>
         </mt-cell>
         <div class="line"></div>
-      </div>
-      <div v-if="showAddressField">
-        <mt-field class="my-field"
-                  label="详细地址"
-                  placeholder="请输入"
-                  v-model="address"></mt-field>
-        <div class="line"></div>
-      </div>
-
-      <div @click="handelSel('roomType')">
-        <mt-cell title="房屋类型"
-                 is-link>
-          <span v-if="selRoomType">{{selRoomType.label}}</span>
-          <span v-else>请选择</span>
-        </mt-cell>
-      </div>
-      <div class="line"></div>
 
-      <mt-field class="my-field"
+        <div v-if="formData.origin === 'internal'">
-                label="户主姓名"
+          <div @click="handelSel('community')">
-                placeholder="请输入"
+            <mt-cell title="小区"
-                v-model="username"></mt-field>
+                     is-link>
-      <div class="line"></div>
+              <span class="picker_content"
+                    v-if="selCommunity">{{selCommunity.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+          </div>
+          <div class="line"></div>
+
+          <div @click="handelSel('building')">
+            <mt-cell title="楼宇"
+                     is-link>
+              <span class="picker_content"
+                    v-if="selBuilding">{{selBuilding.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+          </div>
+          <div class="line"></div>
+
+          <div @click="handelSel('unit')">
+            <mt-cell title="单元"
+                     is-link>
+              <span class="picker_content"
+                    v-if="selUnit">{{selUnit.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+          </div>
+          <div class="line"></div>
+
+          <mt-field v-if="selUnit && selUnit.value==='else'"
+                    class="my-field"
+                    :disableClear="true"
+                    label="单元号"
+                    placeholder="请输入"
+                    v-model="formData.unitContent"></mt-field>
+          <div class="line"></div>
+
+          <div v-if="!selUnit || selUnit.value!=='else'"
+               @click="handelSel('room')">
+            <mt-cell title="房屋"
+                     is-link>
+              <span class="picker_content"
+                    v-if="selRoom">{{selRoom.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+            <div class="line"></div>
+          </div>
+
+          <mt-field v-if="(selUnit&&selUnit.value==='else')||(selRoom&&selRoom.value==='else')"
+                    class="my-field"
+                    :disableClear="true"
+                    label="房屋"
+                    placeholder="请输入"
+                    v-model="formData.homeContent"></mt-field>
 
-      <mt-field class="my-field"
+        </div>
-                label="居住成员人数"
+        <div v-if="formData.origin === 'external'">
-                placeholder="请输入"
+          <mt-field class="my-field"
-                type="number"
+                    :disableClear="true"
-                v-model="memberNum"></mt-field>
+                    label="详细地址"
-      <div class="line"></div>
+                    placeholder="请输入"
+                    v-model="address"></mt-field>
+          <div class="line"></div>
+        </div>
 
-      <div v-for="(item,index) in memberList"
+      </div>
-           :key="index">
+      <div class="content content1">
-        <mt-field class="my-field"
+        <div @click="handelSel('roomType')">
-                  :label="'成员'+(index+1)+'姓名'"
+          <mt-cell title="房屋类型"
-                  placeholder="请输入"
+                   is-link>
-                  v-model="item.name"></mt-field>
+            <span class="picker_content"
+                  v-if="selRoomType">{{selRoomType.label}}</span>
+            <span v-else>请选择</span>
+          </mt-cell>
+        </div>
         <div class="line"></div>
+
         <mt-field class="my-field"
-                  :label="'成员'+(index+1)+'身份证'"
+                  label="户主姓名"
+                  :disableClear="true"
                   placeholder="请输入"
-                  v-model="item.idcard"></mt-field>
+                  v-model="formData.houseHolderName"></mt-field>
         <div class="line"></div>
+
         <mt-field class="my-field"
-                  :label="'成员'+(index+1)+'手机号'"
+                  label="居住成员人数"
+                  :disableClear="true"
                   placeholder="请输入"
-                  type="tel"
+                  type="number"
-                  v-model="item.phone"></mt-field>
+                  @blur.native.capture="bluraa"
+                  v-model="formData.totalResi"></mt-field>
         <div class="line"></div>
 
-        <div @click="handelSel('detNum',index)">
+      </div>
-          <mt-cell :title="'成员'+(index+1)+'参加几轮全员核酸检测'"
-                   is-link>
-            <span v-if="item.selDetNum.value">{{item.selDetNum.label}}</span>
-            <span v-else>请选择</span>
-          </mt-cell>
-        </div>
-        <div class="line"></div>
 
-        <div @click="handelSel('detCondition',index)">
+      <div v-for="(item,index) in memberList"
-          <mt-cell :title="'成员'+(index+1)+'新冠疫苗接种情况'"
+           :key="index">
-                   is-link>
+        <div class="content content1">
-            <span v-if="item.selDetCondition.value">{{item.selDetCondition.label}}</span>
+          <div class="member_title">{{'成员'+(index+1)}}</div>
-            <span v-else>请选择</span>
+          <mt-field class="my-field"
-          </mt-cell>
+                    :disableClear="true"
+                    :label="'姓名'"
+                    placeholder="请输入"
+                    v-model="item.name"></mt-field>
+          <div class="line"></div>
+          <mt-field class="my-field"
+                    :disableClear="true"
+                    :label="'身份证'"
+                    placeholder="请输入"
+                    v-model="item.idNum"></mt-field>
+          <div class="line"></div>
+          <mt-field class="my-field"
+                    :disableClear="true"
+                    :label="'手机号'"
+                    placeholder="请输入"
+                    type="tel"
+                    v-model="item.mobile"></mt-field>
+          <div class="line"></div>
+
+          <div @click="handelSel('detNum',index)">
+            <mt-cell :title="'参加核酸检测次数'"
+                     is-link>
+              <span class="picker_content"
+                    v-if="item.selDetNum.value">{{item.selDetNum.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+          </div>
+          <div class="line"></div>
+
+          <div @click="handelSel('detCondition',index)">
+            <mt-cell :title="'新冠疫苗接种情况'"
+                     is-link>
+              <span class="picker_content"
+                    v-if="item.selDetCondition.value">{{item.selDetCondition.label}}</span>
+              <span v-else>请选择</span>
+            </mt-cell>
+          </div>
+          <div class="line"></div>
         </div>
-        <div class="line"></div>
 
       </div>
 
@@ -148,6 +189,7 @@
 
 
 import { requestPost } from "@/js/dai/request";
+import { Toast } from "mint-ui";
 
 let loading // 加载动画
 export default {
@@ -155,7 +197,7 @@ export default {
     return {
       popupVisible: false,
       shequName: '其他小区',
-      shequId: '111',
+      shequId: '6e511da6816e53af4cda952365a26eb9',//德兴路  1202807601961984002
       showAddressField: false,//是否显示其他
 
       communityList: [],
@@ -172,36 +214,42 @@ export default {
       selRoom: null,
       selRoomType: null,
 
-      address: '',
+
-      username: '',
+      formData: {
-      phone: '',
+        origin: '',//兴德路社区：internal;其他社区：external	
-      idcard: '',
+        villageId: '',//小区id；外部不显示此组件；如果是内部必填。用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
-      value: '',
+        villageContent: '',
-      memberNum: 2,
+        buildId: '',//楼栋id；外部不显示此组件；如果是内部必填，用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
+        buildContent: '',
+        unitId: '',//单元id；外部不显示磁组件。如果是内部必填。用户可以选择其他，自己输入，前端把输入的内容放在这个字段即可	
+        unitContent: '',//选择其他时，输入的值
+        homeId: '',//房屋id；外部不展示此组件。如果是内部必填。用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
+        homeContent: '',////选择其他时，输入的值
+        address: '',//外部：用户自己输入；内部：把小区名楼栋名单元名房屋名拼接起来。例如：绿地望海领域10号楼一单元101	
+        houseType: '',//1自由0租住	
+        houseHolderName: '',//户主姓名	
+        totalResi: 1,//居住成员人数	
+        customerId: '',//customerId
+
+      },
 
       selMemberIndex: null,
 
       memberList: [
         {
           name: '',
-          phone: '',
+          mobile: '',
-          idcard: '',
+          idNum: '',
-          num: 0,
+          customerId: '',
-          condition: '',
+          heSuanCount: 0,
-          selDetNum: {},
+          ymjz: '',
-          selDetCondition: {}
-        },
-        {
-          name: '',
-          phone: '',
-          idcard: '',
-          num: 0,
-          condition: '',
           selDetNum: {},
           selDetCondition: {}
         }
       ],
 
+
+
       roomTypeList: [
         {
           value: '1',
@@ -213,27 +261,11 @@ export default {
         },
       ],
 
-      detNumList: [
+      detNumList: [],//参加核酸次数list
-        {
-          value: '0',
-          label: '0'
-        },
-        {
-          value: '1',
-          label: '1'
-        },
-        {
-          value: '2',
-          label: '2'
-        },
-        {
-          value: '3',
-          label: '3'
-        },
-      ],//参加核酸次数list
       detConditionList: [//参加核酸类型list
         {
-          label: '已全程接种（包含加强针或序贯）',
+          // label: '已全程接种（包含加强针或序贯）',
+          label: '已全程接种',
           value: '1'
         },
         {
@@ -261,20 +293,58 @@ export default {
   },
   created () { },
   mounted () {
+    if (this.shequId === '6e511da6816e53af4cda952365a26eb9') {
+      this.formData.origin = 'internal'
+    } else {
+      this.formData.origin = 'external'
+    }
     this.loadCommunity()
-
+    this.detNumList = []
+    for (let i = 0; i < 11; i++) {
+      let obj = {
+        value: i + '',
+        label: i + '',
+      }
+      this.detNumList.push(obj)
+    }
   },
 
   methods: {
+    bluraa () {
+      let objTemp = {
+        name: '',
+        mobile: '',
+        idNum: '',
+        heSuanCount: 0,
+        ymjz: '',
+        selDetNum: {},
+        customerId: '',
+        selDetCondition: {}
+      }
+
+      if (this.memberList.length > this.formData.totalResi) {//已有成员数量比设置的数量大，删除多余
+        let differ = this.memberList.length - this.formData.totalResi
+        this.memberList.splice(this.formData.totalResi, differ)
+      } else if (this.memberList.length < this.formData.totalResi) {////已有成员数量比设置的数量小，补充空对象
+        let differ = this.formData.totalResi - this.memberList.length
+
+        for (let i = 0; i < differ; i++) {
+          let temp = JSON.parse(JSON.stringify(objTemp))
+          this.memberList.push(temp)
+        }
+      }
+
+
+      console.log(this.memberList)
+    },
+
     //根据社区id获取小区列表
     async loadCommunity () {
-      const url = "/gov/org/neighborhood/neighborhoodlist"
+      const url = "/gov/org/icneighborhood/open/list"
 
       let params = {
-        pageSize: 100,
+        agencyId: this.shequId,
-        pageNo: 0,
+        isPage: false
-        level: 'community',
-        id: 'f6e183d8e6687020074e6d8061926bfa'
       }
 
       const { data, code, msg } = await requestPost(url, params)
@@ -282,7 +352,7 @@ export default {
       if (code === 0) {
         data.list.forEach(element => {
           element.label = element.neighborHoodName
-          element.value = element.neighborHoodId
+          element.value = element.id
         });
         this.communityList = data.list
         let obj = {
@@ -450,28 +520,49 @@ export default {
     },
 
     handleSubmit () {
+      if (this.formData.origin === 'internal') {
+        this.formData.address = this.
+}
+
+
+      this.formData.memberList = this.memberList
 
     },
 
     popupOk () {
       if (this.selType === 'community') {
         this.selCommunity = this.selObj
+        this.formData.villageContent = this.selObj.label
+        this.formData.villageId = this.selObj.value
+
         this.selBuilding = null
         this.selUnit = null
         this.selRoom = null
+        this.formData.unitContent = ''
+        this.formData.homeContent = ''
         this.loadBuilding()
 
       }
       if (this.selType === 'building') {
         this.selBuilding = this.selObj
+        this.formData.buildContent = this.selObj.label
+        this.formData.buildId = this.selObj.value
+
         this.selUnit = null
         this.selRoom = null
+        this.formData.unitContent = ''
+        this.formData.homeContent = ''
         this.loadUnit()
 
       }
       if (this.selType === 'unit') {
         this.selUnit = this.selObj
+
+
+
         this.selRoom = null
+        this.formData.unitContent = ''
+        this.formData.homeContent = ''
         if (this.selUnit && this.selUnit.value === 'else') {
           this.showAddressField = true
         } else {
@@ -482,6 +573,8 @@ export default {
       }
       if (this.selType === 'room') {
         this.selRoom = this.selObj
+
+        this.formData.homeContent = ''
         if (this.selRoom && this.selRoom.value === 'else') {
           this.showAddressField = true
         } else {
@@ -494,12 +587,17 @@ export default {
       }
 
       if (this.selType === 'detNum') {
+
+        let change = this.memberList[this.selMemberIndex]
+        change.selDetNum = this.selObj
+        this.$set(this.memberList, this.selMemberIndex, change)
         // this.selMemberIndex = index
         // this.pickerData = this.detNumList
       }
       if (this.selType === 'detCondition') {
-        // this.selMemberIndex = index
+        let change = this.memberList[this.selMemberIndex]
-        // this.pickerData = this.detConditionList
+        change.selDetCondition = this.selObj
+        this.$set(this.memberList, this.selMemberIndex, change)
       }
 
       this.popupVisible = false