ShibeiWorkPlatform_Frontend/src/views/pages/caiji.vue

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

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

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

      <div @click="handelSel('community')">
        <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"
                label="户主姓名"
                placeholder="请输入"
                v-model="username"></mt-field>
      <div class="line"></div>

      <mt-field class="my-field"
                label="居住成员人数"
                placeholder="请输入"
                type="number"
                v-model="memberNum"></mt-field>
      <div class="line"></div>

      <div v-for="(item,index) in memberList"
           :key="index">
        <mt-field class="my-field"
                  :label="'成员'+(index+1)+'姓名'"
                  placeholder="请输入"
                  v-model="item.name"></mt-field>
        <div class="line"></div>
        <mt-field class="my-field"
                  :label="'成员'+(index+1)+'身份证'"
                  placeholder="请输入"
                  v-model="item.idcard"></mt-field>
        <div class="line"></div>
        <mt-field class="my-field"
                  :label="'成员'+(index+1)+'手机号'"
                  placeholder="请输入"
                  type="tel"
                  v-model="item.phone"></mt-field>
        <div class="line"></div>

        <div @click="handelSel('detNum',index)">
          <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)">
          <mt-cell :title="'成员'+(index+1)+'新冠疫苗接种情况'"
                   is-link>
            <span v-if="item.selDetCondition.value">{{item.selDetCondition.label}}</span>
            <span v-else>请选择</span>
          </mt-cell>
        </div>
        <div class="line"></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";

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

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

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

      address: '',
      username: '',
      phone: '',
      idcard: '',
      value: '',
      memberNum: 2,

      selMemberIndex: null,

      memberList: [
        {
          name: '',
          phone: '',
          idcard: '',
          num: 0,
          condition: '',
          selDetNum: {},
          selDetCondition: {}
        },
        {
          name: '',
          phone: '',
          idcard: '',
          num: 0,
          condition: '',
          selDetNum: {},
          selDetCondition: {}
        }
      ],

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

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


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

    }
  },
  components: {},
  computed: {

  },
  created () { },
  mounted () {
    this.loadCommunity()

  },

  methods: {
    //根据社区id获取小区列表
    async loadCommunity () {
      const url = "/gov/org/neighborhood/neighborhoodlist"

      let params = {
        pageSize: 100,
        pageNo: 0,
        level: 'community',
        id: 'f6e183d8e6687020074e6d8061926bfa'
      }

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

      if (code === 0) {
        data.list.forEach(element => {
          element.label = element.neighborHoodName
          element.value = element.neighborHoodId
        });
        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 () {

    },

    popupOk () {
      if (this.selType === 'community') {
        this.selCommunity = this.selObj
        this.selBuilding = null
        this.selUnit = null
        this.selRoom = null
        this.loadBuilding()

      }
      if (this.selType === 'building') {
        this.selBuilding = this.selObj
        this.selUnit = null
        this.selRoom = null
        this.loadUnit()

      }
      if (this.selType === 'unit') {
        this.selUnit = this.selObj
        this.selRoom = null
        if (this.selUnit && this.selUnit.value === 'else') {
          this.showAddressField = true
        } else {
          this.showAddressField = false
        }
        this.loadRoom()

      }
      if (this.selType === 'room') {
        this.selRoom = this.selObj
        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') {
        // this.selMemberIndex = index
        // this.pickerData = this.detNumList
      }
      if (this.selType === 'detCondition') {
        // this.selMemberIndex = index
        // this.pickerData = this.detConditionList
      }

      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>