dvcp_v2_wxcp_app/library/apps/AppMonitoringObject/MonitorAddFamilyMember.vue

<template>
  <div class="add">
    <div class="form">
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;">*</i>
              <span>与户主关系</span>
            </div>
            <div class="right">
              <AiSelect dict="fpRelationship" v-model="form.householdRelation"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>选择人员</span>
            </div>
            <div class="right">
              <AiPagePicker class="select" :selected.sync="userList" single>
                <AiMore v-model="form.name"/>
              </AiPagePicker>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>成员姓名</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
                     placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
        <!-- <div class="form-item" v-if="!id">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>户主姓名</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
                    placeholder-style="color: #999; font-size: 30rpx;" :disabled="isEdit" />
            </div>
          </div>
        </div> -->
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>证件号码</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"
                     placeholder-style="color: #999; font-size: 30rpx;" @input="changeIdNumber" :disabled="userList.length? true : false"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>性别</span>
            </div>
            <div class="right">
              <span :style="form.sex === '' ? 'color:#999;' : 'color:#333;' ">{{ $dict.getLabel('sex', form.sex) || '自动识别' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>联系方式</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"
                     placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>现住址</span>
            </div>
            <div class="right">
              <AiAreaPicker :fullName.sync="form.currentAreaName" v-model="form.currentAreaId">
                <AiMore v-model="form.currentAreaName"/>
              </AiAreaPicker>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>详细地址</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.currentAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>民族</span>
            </div>
            <div class="right">
              <AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>政治面貌</span>
            </div>
            <div class="right">
              <AiSelect dict="fpPoliticalOutlook" v-model="form.politicsStatus"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>文化程度</span>
            </div>
            <div class="right">
              <AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper border-b0">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>个人照片</span>
            </div>
          </div>
        </div>
        <div class="upload">
          <AiUploader :def.sync="photo" multiple placeholder="上传图片" :limit="1" action="/admin/file/add2" :disabled="id != ''"></AiUploader>
        </div>
      </div>

      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>在校生状况</span>
            </div>
            <div class="right">
              <AiSelect dict="fpStudentsInSchool" v-model="form.schoolStatus"></AiSelect>
            </div>
          </div>
        </div>
      </div>
      <!-- 个人健康状况 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>个人健康状况(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in helthList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="userClick(e, index)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 残疾类别 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>残疾类别</span>
            </div>
            <div class="right">
              <AiSelect dict="fpDisabilityType" v-model="form.disabilityType"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>残疾证办理年度</span>
            </div>
            <div class="right">
              <AiSelect dict="fpYear" v-model="form.disabilityCertificateYear"></AiSelect>
            </div>
          </div>
        </div>
      </div>

      <!-- 基础保险 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>基础保险(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in basicsCheckList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="basicsCheck(e, index)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 保障措施 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>保障措施(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in guaranteeCheckList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="guaranteeCheck(e, index)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 劳动技能 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>劳动技能</span>
            </div>
            <div class="right">
              <AiSelect dict="fpLaborSkills" v-model="form.labourStatus"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>是否会讲普通话</span>
            </div>
            <div class="right">
              <div class="check-item" :class="form.mandarin == '01' ? 'check-active' : '' " @click="form.mandarin='01'">是<img
                  src="./components/img/check-icon.png" alt=""></div>
              <div class="check-item" :class="form.mandarin == '02' ? 'check-active' : '' " @click="form.mandarin='02'">否<img
                  src="./components/img/check-icon.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 就业渠道 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>就业渠道</span>
            </div>
            <div class="right">
              <AiSelect dict="fpEmploymentChannels" v-model="form.employmentChannels"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工企业名称</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.migrantEnterprises" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工时间/月</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.workeMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>公益性岗位</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.publicWelfarePosts" type="text" placeholder-style="color: #999; font-size: 30rpx;" maxlength="20"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>公益性岗位（月数）</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.publicWelfarePostsMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
            </div>
          </div>
        </div>
      </div>

      <!-- 是否国外务工 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>是否国外务工</span>
            </div>
            <div class="right">
              <div class="check-item" :class="form.foreignWorkers == '01' ? 'check-active' : '' " @click="form.foreignWorkers='01'">是<img
                  src="./components/img/check-icon.png" alt=""></div>
              <div class="check-item" :class="form.foreignWorkers == '02' ? 'check-active' : '' " @click="form.foreignWorkers='02'">否<img
                  src="./components/img/check-icon.png" alt=""></div>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工所在地</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.foreignWorkersAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" hover-class="text" @click="submit">保存</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      form: {
        name: '',
        objectType: '',
        idNumber: '',
        sex: '',
        phone: '',
        currentAreaId: '',
        currentAreaName: '',
        nation: '',
        politicsStatus: '',
        education: '',
        currentAddress: '',
        files: [],
        schoolStatus: '',
        labourStatus: '',
        workArea: '',
        workeMonths: '',
        basicMedicalTreatment: '',
        seriousIllnessInsurance: '',
        endowmentInsurance: '',
        subsistenceAllowance: '',
        specialPovertySupport: '',
        girdId: '',
        girdName: '',
        healthyStatus: '',
        age: '',
        birthday: '',
        isHousehold: '',
        photo: '',
        riskType: '',
        detail: '',
        disabilityType: '', // 残疾类型
        disabilityCertificateYear: '',
        basicsCheck: '',  // 基础保险
        guaranteeCheck: '', // 保障措施
        mandarin: '',
        employmentChannels: '',
        migrantEnterprises: '',
        publicWelfarePosts: '',
        publicWelfarePostsMonths: '',
        foreignWorkers: '',
        foreignWorkersAddress: '',
        houseIdNumber: '',
      },
      id: '',
      $areaId: '',
      isEdit: false,
      girdInfo: {},
      householdIdNumber: '',
      objectType: '',
      userList: [],
      photo: [],
      flag: false,
      helthList: [],
      namelist: [],
      basicsCheckList: [
        {dictName: '城乡居民基本医疗保险', checked: false},
        {dictName: '城镇职工基本医疗保险', checked: false},
        {dictName: '大病保险', checked: false},
        {dictName: '商业补充医疗保险', checked: false},
        {dictName: '城乡居民基本养老保险', checked: false},
        {dictName: '城镇职工基本养老保险', checked: false},
        {dictName: '享受人身意外保险补贴', checked: false},
      ],
      basicsList: [],
      guaranteeCheckList: [
        {dictName: '享受农村最低生活保障', checked: false},
        {dictName: '是否特困供养人员', checked: false},
        {dictName: '分散供养五保户转集中供养（减少）', checked: false},
        {dictName: '是否接受医疗救助', checked: false},
        {dictName: '是否接受其它健康扶贫', checked: false},
      ],
      guaranteeList: [],
      isAdd: 'false',
    }
  },

  computed: {
    ...mapState(['user'])
  },

  onLoad(query) {
    this.householdIdNumber = query.houseIdNumber
    this.objectType = query.objectType
    this.$dict.load(['fpRelationship', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
      'fpLaborSkills', 'fpPoliticalOutlook', 'sex', 'fpHealth']).then(() => {
      if (query.id) {
        this.id = query.id
        this.getInfo(query.id)
        this.isEdit = true
      }
    })
    this.$dict.getDict('fpHealth').map((item) => {
      this.helthList.push({
        dictName: item.dictName,
        dictValue: item.dictValue,
        checked: false,
      })
    })
    if (query.index > -1) {
      this.isEdit = true
      this.index = Number(query.index)
    }

    this.isGirdUser()
    this.$areaId = this.user.areaId
    uni.$on('reload', () => {
      this.getInfo()
    })
  },

  onShow() {
    document.title = this.id ? '编辑家庭成员' : '添加家庭成员'
  },

  methods: {
    userClick(row, i) {
      row.checked = !row.checked
      this.form.healthyStatus = this.helthList.filter(e => e.checked)?.map(e => e.dictValue)?.toString()
    },

    // 医疗保险
    basicsCheck(row, i) {
      this.basicsCheckList[i].checked = !this.basicsCheckList[i].checked
    },
    // 保障措施
    guaranteeCheck(row, i) {
      this.guaranteeCheckList[i].checked = !this.guaranteeCheckList[i].checked
    },
    getInfo(id) {
      this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.form = {...res.data}
          if (this.form.photo) {
            this.form.files = [{url: this.form.photo}]
          } else {
            this.form.files = []
          }

          res.data.healthyStatusList = res.data.healthyStatus.split(',')
          res.data.healthyStatusList.map((item) => {
            this.helthList.map(items => {
              items.checked = item == items.dictValue
            })
          })
        }
      })
    },

    rules() {
      return {
        householdRelation: '请选择与户主关系',
        name: '请输入姓名',
        idNumber: '请输入身份证号',
        phone: '请输入联系方式',
        currentAreaId: '请选择现住址',
      }
    },

    checkInit(formName, list, index) {
      if (list[index].checked) {
        this.form[formName] = '01'
      } else {
        this.form[formName] = '02'
      }
    },

    submit() {

      const rules = this.rules()

      for (let v of Object.keys(rules)) {
        if (!this.form[v]) {
          return this.$u.toast(rules[v])
        }
      }
      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (this.form.phone.length == 11 && !regTel.test(this.form.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }
      if (!/[^0]0{0,2}$/.test(this.form.currentAreaId)) {
        return this.$u.toast('现住址必须选到村级')
      }

      if (this.form.files.length) {
        this.form.photo = this.form.files[0].url
      }
      if (this.photo.length) {
        this.form.photo = this.photo[0].accessUrl
      }

      this.form.girdId = this.girdInfo.girdId
      this.form.girdName = this.girdInfo.girdName
      this.current = 1

      // if(!this.form.riskType) {
      //   return this.$u.toast('请选择风险因素')
      // }

      this.basicsCheckList.map((item, index) => {
        if (item.checked) {
          this.basicsList.push(index)
        }
      })

      this.form.basicsCheck = this.basicsList.join(',')

      this.guaranteeCheckList.map((item, index) => {
        if (item.checked) {
          this.guaranteeList.push(index)
        }
      })

      this.form.guaranteeCheck = this.guaranteeList.join(',')

      this.checkInit('jcbxCxyiliao', this.basicsCheckList, 0)
      this.checkInit('jcbxCzyiliao', this.basicsCheckList, 1)
      this.checkInit('jcbxDabing', this.basicsCheckList, 2)
      this.checkInit('jcbxShangye', this.basicsCheckList, 3)
      this.checkInit('jcbxCxyanglao', this.basicsCheckList, 4)
      this.checkInit('jcbxCzyanglao', this.basicsCheckList, 5)
      this.checkInit('jcbxRenshenyiwai', this.basicsCheckList, 6)

      this.checkInit('bzcsNongcundibao', this.guaranteeCheckList, 0)
      this.checkInit('bzcsTekungongyang', this.guaranteeCheckList, 1)
      this.checkInit('bzcsWubaohu', this.guaranteeCheckList, 2)
      this.checkInit('bzcsYiliaojiuzhu', this.guaranteeCheckList, 3)
      this.checkInit('bzcsQita', this.guaranteeCheckList, 4)

      this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
        ...this.form,
        id: this.id || '',
        girdId: this.user.girdCheckType == 1 ? this.user.girdId : '',
        householdIdNumber: this.householdIdNumber,
        isHousehold: '0',
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast('保存成功')
          uni.$emit('reload')
          setTimeout(() => {
            uni.navigateBack({
              delta: 2
            })
          },600)
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },

    isGirdUser() {
      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
        if (res.code == 0) {
          this.girdInfo = res.data
        }
      })
    },

    changeIdNumber() {
      // let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      // .length == 18 && !reg.test(this.form.idNumber)
      if (!this.form.idNumber) {
        return this.$u.toast('请输入正确的身份证号码')
      }
      var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
      this.form.sex = info.gender
      this.form.birthDate = info.birthday
      var myDate = new Date();
      var month = myDate.getMonth() + 1;
      var day = myDate.getDate();
      var age = myDate.getFullYear() - this.form.idNumber.substring(6, 10) - 1;
      if (this.form.idNumber.substring(10, 12) < month || this.form.idNumber.substring(10, 12) == month && this.form.idNumber.substring(12, 14) <= day) {
        age++;
      }
      this.form.age = age
    },
  },
  watch: {
    userList: {
      handler: function (v) {
        let {name, idNumber, currentAreaId, currentAreaName} = v?.[0] || {}
        this.form = {...this.form, name, idNumber, currentAreaId, currentAreaName}
        this.form.sex = this.$idCardNoUtil.getIdCardInfo(idNumber)?.sex
        this.form.birthday = this.$idCardNoUtil.getIdCardInfo(idNumber)?.birthday
        this.form.age = this.$calcAge(this.form.idNumber)
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss">
.add {
  padding-bottom: 120px;
  width: 100%;

  ::v-deep .u-radio {
    &:last-child {
      .u-radio__label {
        margin-right: 0;
      }
    }
  }

  & > div {
    margin-bottom: 16px;
    background: #fff;
  }

  .form-group {
    .form-item {
      padding-left: 32px;

      .form-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 112px;
        border-bottom: 1px solid #E4E5E6;
      }

      .form-item__wrappers {
        padding-right: 30px;
        box-sizing: border-box;

        .top {
          font-size: 32px;
          padding: 32px 0;
        }

        .bottoms {
          padding-bottom: 20px;

          .cards {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #CCCCCC;
            border-radius: 16px;
            margin-bottom: 16px;

            .changeActive {
              color: #1174FE;
              border: 1px solid #1174FE;
            }
          }

        }
      }

      .right {
        height: 112px;
        line-height: 112px;
        padding-right: 32px;

        span {
          font-size: 30px;
          color: #999999;
        }

        .check-item {
          display: inline-block;
          width: 140px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          background: #F5F5F5;
          border-radius: 4px;
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          position: relative;

          img {
            display: none;
          }
        }

        .check-item:nth-of-type(1) {
          margin-right: 36px;
        }

        .check-active {
          background: #E7F1FE;
          color: #1174FE;

          img {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 48px;
            height: 48px;
          }
        }
      }

      input {
        height: 100%;
        text-align: right;
      }

      .left {
        display: flex;
        align-items: center;

        span {
          color: #333333;
          font-size: 32px;
        }

        i {
          margin-right: 4px;
          font-style: normal;
          color: #FF4466;
          font-size: 32px;
        }
      }
    }
  }

  .form-item__imgs {
    padding: 32px;

    .form-item__title {
      display: flex;
      align-items: center;
      margin-bottom: 34px;

      h2 {
        color: #333333;
        font-weight: normal;
        font-size: 32px;
      }

      i {
        color: #999999;
        font-size: 28px;
        font-style: normal;
      }
    }

    textarea {
      width: 100%;
    }
  }

  .form-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112px;
    padding: 0 32px;

    h2 {
      font-weight: normal;
      color: #333333;
      font-size: 32px;
    }

    span {
      color: #999999;
      font-size: 28px;
    }
  }

  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 11;
    width: 100%;
    height: 112px;
    line-height: 112px;
    margin: 0;
    text-align: center;
    color: #FFFFFF;
    font-size: 32px;
    background: #3192F4;
  }

  .upload {
    width: 100%;
    padding: 10px 32px 32px 32px;
    box-sizing: border-box;
  }

  .border-b0 {
    border-bottom: 0 !important;
  }

  ::v-deep .familyMember .item {
    width: 100%;
  }
}
</style>