ShibeiWorkPlatform_Frontend/src/views/pages/caiji.vue

<template>
  <div class="bg-app">
    <div class="title">
      居民信息填报
    </div>
    <div class="main">

      <div class="content">

        <mt-cell title="所属社区">

          <span>{{shequName}}</span>
        </mt-cell>
        <div class="line"></div>

        <div v-if="formData.origin === 'internal'">
          <div @click="handelSel('community')">
            <mt-cell title="小区"
                     is-link>
              <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>

        </div>
        <div v-if="formData.origin === 'external'">
          <mt-field class="my-field"
                    :disableClear="true"
                    label="详细地址"
                    placeholder="请输入"
                    v-model="address"></mt-field>
          <div class="line"></div>
        </div>

      </div>
      <div class="content content1">
        <div @click="handelSel('roomType')">
          <mt-cell title="房屋类型"
                   is-link>
            <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="户主姓名"
                  :disableClear="true"
                  placeholder="请输入"
                  v-model="formData.houseHolderName"></mt-field>
        <div class="line"></div>

        <mt-field class="my-field"
                  label="居住成员人数"
                  :disableClear="true"
                  placeholder="请输入"
                  type="number"
                  @blur.native.capture="bluraa"
                  v-model="formData.totalResi"></mt-field>
        <div class="line"></div>

      </div>

      <div v-for="(item,index) in memberList"
           :key="index">
        <div class="content content1">
          <div class="member_title">{{'成员'+(index+1)}}</div>
          <mt-field class="my-field"
                    :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>

    </div>

    <div class="div-btn">
      <mt-button @click="handleSubmit"
                 type="primary"
                 size="small">提交</mt-button>
    </div>

    <mt-popup v-model="popupVisible"
              popup-transition="popup-fade"
              closeOnClickModal="true"
              position="bottom">
      <mt-picker :slots="popupSlots"
                 value-key="label"
                 @change="onPickerChange"
                 showToolbar>
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel"
               @click="popupVisible = !popupVisible">取消</div>
          <div class="">请选择</div>
          <div class="usi-btn-sure"
               @click="popupOk()">确定</div>
        </div>
      </mt-picker>
    </mt-popup>

  </div>
</template>
<script>


import { requestPost } from "@/js/dai/request";
import { Toast } from "mint-ui";

let loading // 加载动画
export default {
  data () {
    return {
      popupVisible: false,
      shequName: '其他小区',
      shequId: '6e511da6816e53af4cda952365a26eb9',//德兴路  1202807601961984002
      showAddressField: false,//是否显示其他

      communityList: [],
      buildingList: [],
      unitList: [],
      roomList: [],
      selType: 'community',//弹出框所显示的数据类型：community、building、unit、room
      pickerData: [],

      selObj: {},
      selCommunity: null,
      selBuilding: null,
      selUnit: null,
      selRoom: null,
      selRoomType: null,


      formData: {
        origin: '',//兴德路社区：internal;其他社区：external	
        villageId: '',//小区id；外部不显示此组件；如果是内部必填。用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
        villageContent: '',
        buildId: '',//楼栋id；外部不显示此组件；如果是内部必填，用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
        buildContent: '',
        unitId: '',//单元id；外部不显示磁组件。如果是内部必填。用户可以选择其他，自己输入，前端把输入的内容放在这个字段即可	
        unitContent: '',//选择其他时，输入的值
        homeId: '',//房屋id；外部不展示此组件。如果是内部必填。用户选择其他，可以自己输入，前端把输入的内容放在这个字段即可	
        homeContent: '',////选择其他时，输入的值
        address: '',//外部：用户自己输入；内部：把小区名楼栋名单元名房屋名拼接起来。例如：绿地望海领域10号楼一单元101	
        houseType: '',//1自由0租住	
        houseHolderName: '',//户主姓名	
        totalResi: 1,//居住成员人数	
        customerId: '',//customerId

      },

      selMemberIndex: null,

      memberList: [
        {
          name: '',
          mobile: '',
          idNum: '',
          customerId: '',
          heSuanCount: 0,
          ymjz: '',
          selDetNum: {},
          selDetCondition: {}
        }
      ],



      roomTypeList: [
        {
          value: '1',
          label: '自有'
        },
        {
          value: '2',
          label: '租住'
        },
      ],

      detNumList: [],//参加核酸次数list
      detConditionList: [//参加核酸类型list
        {
          // label: '已全程接种（包含加强针或序贯）',
          label: '已全程接种',
          value: '1'
        },
        {
          label: '未全程接种',
          value: '2'
        },
        {
          label: '未接种',
          value: '3'
        },
      ],


      popupSlots: [//问题类型弹框数据
        {
          values: []
        }
      ],

    }
  },
  components: {},
  computed: {

  },
  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/icneighborhood/open/list"

      let params = {
        agencyId: this.shequId,
        isPage: false
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        data.list.forEach(element => {
          element.label = element.neighborHoodName
          element.value = element.id
        });
        this.communityList = data.list
        let obj = {
          values: this.communityList
        }

        this.popupSlots = []
        this.popupSlots.push(obj)
      } else {
        this.$message.error(msg)
      }
    },
    //获取楼宇列表
    async loadBuilding () {
      const url = "/gov/org/icbuilding/buildingoption"
      let params = {

        neighborHoodId: this.selCommunity.value
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // data.forEach(element => {
        //   element.label = element.buildingName
        //   element.value = element.buildingId
        // });
        this.buildingList = data
        let obj = {
          values: this.buildingList
        }

        this.popupSlots = []
        this.popupSlots.push(obj)
      } else {
        this.$message.error(msg)
      }
    },
    //获取单元列表
    async loadUnit () {
      const url = '/gov/org/icbuildingunit/unitoption'

      let params = {
        buildingId: this.selBuilding.value
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // data.forEach(element => {
        //   element.label = element.unitName
        //   element.value = element.id
        // });
        this.unitList = data
        this.unitList.push({
          label: '其他',
          value: 'else'
        })
        let obj = {
          values: this.unitList
        }

        this.popupSlots = []
        this.popupSlots.push(obj)
      } else {
        this.$message.error(msg)
      }
    },
    //获取房间列表
    async loadRoom () {
      const url = "/gov/org/ichouse/houseoption"

      let params = {
        buildingId: this.selBuilding.value,
        unitId: this.selUnit.value
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // data.forEach(element => {
        //   element.label = element.unitName
        //   element.value = element.id
        // });
        this.roomList = data
        this.roomList.push({
          label: '其他',
          value: 'else'
        })
        let obj = {
          values: this.roomList
        }

        this.popupSlots = []
        this.popupSlots.push(obj)
      } else {
        this.$message.error(msg)
      }
    },

    handelSel (selType, index) {
      this.selType = selType
      if (selType === 'community') {
        this.pickerData = this.communityList

      }
      if (selType === 'building') {
        if (!this.selCommunity) {
          Toast({
            message: '请先选择小区',
            duration: 5000
          });
          return false
        } else {
          this.pickerData = this.buildingList
        }


      }
      if (selType === 'unit') {
        if (!this.selBuilding) {
          Toast({
            message: '请先选择楼宇',
            duration: 5000
          });
          return false
        } else {
          this.pickerData = this.unitList
        }

      }
      if (selType === 'room') {
        if (!this.selUnit) {
          Toast({
            message: '请先选择单元',
            duration: 5000
          });
          return false
        } else {
          this.pickerData = this.roomList
        }

      }

      if (selType === 'roomType') {
        this.pickerData = this.roomTypeList
      }
      if (selType === 'detNum') {
        this.selMemberIndex = index
        this.pickerData = this.detNumList
      }
      if (selType === 'detCondition') {
        this.selMemberIndex = index
        this.pickerData = this.detConditionList
      }


      let obj = {
        values: this.pickerData
      }

      this.popupSlots = []
      this.popupSlots.push(obj)
      this.popupVisible = !this.popupBuildingVisibl
    },

    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 {
          this.showAddressField = false
        }
        this.loadRoom()

      }
      if (this.selType === 'room') {
        this.selRoom = this.selObj

        this.formData.homeContent = ''
        if (this.selRoom && this.selRoom.value === 'else') {
          this.showAddressField = true
        } else {
          this.showAddressField = false
        }
      }

      if (this.selType === 'roomType') {
        this.selRoomType = this.selObj
      }

      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') {
        let change = this.memberList[this.selMemberIndex]
        change.selDetCondition = this.selObj
        this.$set(this.memberList, this.selMemberIndex, change)
      }

      this.popupVisible = false

    },

    onPickerChange (picker, values) {

      this.selObj = values[0]

    },




  }
}
</script>

<style lang="scss" scoped >
@import "@/assets/scss/pages/caiji.scss";

.my-field /deep/ .mint-field-core {
  text-align: right;
  margin-right: 20px;
}

/deep/ .mint-popup-bottom {
  width: 100vw;
}

.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  .usi-btn-cancel,
  .usi-btn-sure {
    color: #26a2ff;
    font-size: 16px;
  }
}
</style>