dvcp_v2_webapp/packages/jianping/AppHelpedResident/hrAdd.vue

<template>
  <section class="hrAdd">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-form :model="form" ref="ruleForm" :rules="rules" label-width="160px" label-position="right" size="small">
          <ai-card title="基本信息">
            <template #content>
              <div flex class="half wrap">
                <div flex class="column">
                  <el-form-item label="户主姓名" prop="name">
                    <el-input size="small" class="user-selecter" v-model="form.name" placeholder="请输入姓名" clearable :disabled="isEdit || isSelectUser">
                      <template slot="append">
                        <ai-person-select :instance="instance" @selectPerson="checkName" :url="'/app/appresident/list?auditStatus=1&householdName=1&areaId='+user.info.areaId"></ai-person-select>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入联系方式" :maxlength="11" show-word-limit/>
                  </el-form-item>
                  <el-form-item label="证件号码" prop="idNumber">
                    <el-input v-model="form.idNumber" placeholder="请输入证件号码" :maxlength="18" :disabled="isEdit || isSelectUser" @change="handleIdNumberAutocomplete"/>
                  </el-form-item>
                </div>
                <el-form-item label="个人照片" prop="photo">
                  <ai-avatar :instance="instance" v-model="form.photo"/>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <ai-select v-model="form.sex" :selectList="dict.getDict('sex')" disabled/>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker disabled value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="form.birthDate" type="date" placeholder="选择日期"/>
                </el-form-item>
                <!-- <el-form-item label="年龄" prop="age">
                  <el-input disabled v-model="form.age" placeholder="请输入年龄" type="number"/>
                </el-form-item> -->
                <el-form-item label="民族">
                  <ai-select v-model="form.nation" :selectList="dict.getDict('fpNation')"/>
                </el-form-item>
                <el-form-item label="文化程度">
                  <ai-select v-model="form.education" :selectList="dict.getDict('fpEducation')"/>
                </el-form-item>
                <el-form-item label="政治面貌">
                  <ai-select v-model="form.politicsStatus" :selectList="dict.getDict('fpPoliticalOutlook')"/>
                </el-form-item>
                <el-form-item label="在校生状况">
                  <ai-select v-model="form.schoolStatus" :selectList="dict.getDict('fpStudentsInSchool')"/>
                </el-form-item>
              </div>
              <el-form-item label="健康状况">
                <el-checkbox-group v-model="form.healthyStatusList">
                  <el-checkbox :label="item.dictValue" v-for="(item, index) in dict.getDict('fpHealth')" :key="index">{{item.dictName}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div flex class="half wrap">
                <el-form-item label="残疾类别">
                  <ai-select v-model="form.disabilityType" :selectList="dict.getDict('fpDisabilityType')" placeholder="请选择" />
                </el-form-item>
                <el-form-item label="残疾办证年度">
                  <el-date-picker v-model="form.disabilityCertificateYear" type="year" placeholder="请选择"/>
                </el-form-item>
              </div>
              <el-form-item label="基础保险">
                <el-checkbox-group v-model="form.basicsList">
                  <el-checkbox :label="item.value" v-for="(item, index) in basicsCheckList" :key="index">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="保障措施">
                <el-checkbox-group v-model="form.guaranteeList">
                  <el-checkbox :label="item.value" v-for="(item, index) in guaranteeCheckList" :key="index">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div flex class="half wrap">
                <el-form-item label="劳动技能">
                  <ai-select v-model="form.labourStatus" :selectList="dict.getDict('fpLaborSkills')"/>
                </el-form-item>
                <el-form-item label="是否会讲普通话">
                  <ai-select v-model="form.mandarin" :selectList="dict.getDict('fpYesOrNo')" />
                </el-form-item>
                <el-form-item label="务工时间(月)">
                  <el-input v-model="form.workeMonths" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="就业渠道">
                  <ai-select v-model="form.employmentChannels" :selectList="dict.getDict('fpEmploymentChannels')" />
                </el-form-item>
                <el-form-item label="务工企业名称">
                  <el-input v-model="form.migrantEnterprises" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="公益性岗位">
                  <el-input v-model="form.publicWelfarePosts" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="是否国外务工">
                  <ai-select v-model="form.foreignWorkers" :selectList="dict.getDict('fpYesOrNo')" />
                </el-form-item>
                <el-form-item label="公益性岗位(月数)">
                  <el-input v-model="form.publicWelfarePostsMonths" placeholder="请输入" clearable/>
                </el-form-item>
              </div>
              <el-form-item label="务工所在地">
                <el-input v-model="form.foreignWorkersAddress" placeholder="请输入" clearable maxlength="30" show-word-limit/>
              </el-form-item>
              <el-form-item label="现住址" prop="currentAreaId">
                <ai-area-get :instance="instance" v-model="form.currentAreaId" :root="rootArea" valueLevel="5"/>
                <el-form-item prop="currentAddress">
                  <el-input v-model="form.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit clearable/>
                </el-form-item>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="生产生活条件">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="住房面积(m²)">
                  <el-input v-model="form.houseArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="户类型">
                  <ai-select v-model="form.houseType" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="与村主干路距离(公里)">
                  <el-input v-model="form.trunkRoadDistance" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="入户路类型">
                  <ai-select v-model="form.houseRoadType" :selectList="dict.getDict('fpHouseRoadType')"/>
                </el-form-item>
                <el-form-item label="是否危房">
                  <ai-select v-model="form.dilapidatedHousehold" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否住房损耗">
                  <ai-select v-model="form.houseDamage" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否解决安全饮水">
                  <ai-select v-model="form.drinkingWaterSafety" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否饮水设施损坏">
                  <ai-select v-model="form.drinkingWaterDamage" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有卫生厕所">
                  <ai-select v-model="form.toilet" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="主要燃料类型">
                  <ai-select v-model="form.fuelType" :selectList="dict.getDict('fpFuelType')"/>
                </el-form-item>
                <el-form-item label="是否通生活用电">
                  <ai-select v-model="form.electric" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否通广播电视">
                  <ai-select v-model="form.television" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="耕地面积(亩)">
                  <el-input v-model="form.cultivatedLandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="林地面积(亩)">
                  <el-input v-model="form.woodlandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="林果面积(亩)">
                  <el-input v-model="form.orchardArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="退耕还林面积(亩)">
                  <el-input v-model="form.grainForGreenArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="牧草地面积(亩)">
                  <el-input v-model="form.grazingGrasslandArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="水面面积(亩)">
                  <el-input v-model="form.watersArea" placeholder="请输入" :maxlength="8"/>
                </el-form-item>
                <el-form-item label="是否加入农民专业合作社">
                  <ai-select v-model="form.nongheshe" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有龙头企业带动">
                  <ai-select v-model="form.longtouqiye" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否有创业致富人带头人带动">
                  <ai-select v-model="form.cyzfdtr" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="是否通生产通电">
                  <ai-select v-model="form.produceElectric" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
              </div>
            </template>
          </ai-card>
          <ai-card title="家庭风险情况">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="监测对象类型" prop="objectType">
                  <ai-select v-model="form.objectType" :selectList="dict.getDict('fpType')"/>
                </el-form-item>
                <el-form-item label="是否军烈属">
                  <ai-select v-model="form.militaryMartyrs" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
                <el-form-item label="风险因素" prop="riskType">
                  <ai-select v-model="form.riskType" :selectList="dict.getDict('fpRiskType')"/>
                </el-form-item>
                <el-form-item label="脱贫年度">
                  <el-date-picker v-model="form.povertyYear" type="year" placeholder="请选择"/>
                </el-form-item>
                <el-form-item label="因自然灾害子项">
                  <ai-select v-model="form.naturalDisasterType" :selectList="dict.getDict('fpNaturalDisaster')"/>
                </el-form-item>
                <el-form-item label="是否义务阶段失学辍学">
                  <ai-select v-model="form.dropOutOfSchool" :selectList="dict.getDict('fpYesOrNo')"/>
                </el-form-item>
              </div>
              <el-form-item label="义务阶段未上学原因">
                <el-input v-model="form.dropOutOfSchoolReason" type="textarea" placeholder="请输入" maxlength="500" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="备注说明">
                <el-input v-model="form.detail" placeholder="请输入" type="textarea" maxlength="500" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="图片（最多9张）" >
                <ai-uploader
                  :isShowTip="true"
                  :instance="instance"
                  v-model="form.files"
                  fileType="img"
                  acceptType=".png,.jpg,.jpeg"
                  :limit="9">
                  <template slot="tips">最多上传9张图片,单张图片最大10MB<br/>支持.png,.jpg,.jpeg格式</template>
                </ai-uploader>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="家庭收支情况">
            <template slot="content">
              <div flex class="half wrap">
                <el-form-item label="纳入监测对象的收入参考范围">
                  <el-input v-model="form.income1" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="纳入监测对象的人均收入参考范围">
                  <el-input v-model="form.income2" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="工资性收入(元)">
                  <el-input v-model="form.income3" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性收入(元)">
                  <el-input v-model="form.income4" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="计划生育金(元)">
                  <el-input v-model="form.income5" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="资产收益扶贫分红收入">
                  <el-input v-model="form.income6" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="低保金(元)">
                  <el-input v-model="form.income7" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="特困供养金(元)">
                  <el-input v-model="form.income8" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="养老保险金(元)">
                  <el-input v-model="form.income9" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="生态补偿金(元)">
                  <el-input v-model="form.income10" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="转移性收入(元)">
                  <el-input v-model="form.income11" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="其它转移性收入(元)">
                  <el-input v-model="form.income12" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="财产性收入(元)">
                  <el-input v-model="form.income13" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="其它财产收入(元)">
                  <el-input v-model="form.income14" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="生产经营性支出(元)">
                  <el-input v-model="form.income15" placeholder="请输入" clearable/>
                </el-form-item>
              </div>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "hrAdd",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    isEdit() {
      return !!this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? "编辑监测对象" : "添加监测对象"
    },
    rules() {
      return {
        idNumber: [{required: true, message: "请输入身份证号"}],
        name: [{required: true, message: "请输入姓名"}],
        sex: [{required: true, message: "请选择性别"}],
        phone: [{required: true, message: "请输入联系方式"}],
        currentAreaId: [
          {required: true, message: "请选择现住址"},
          {pattern: /[^0]0{0,2}$/, message: "请选择到村/社区"},
        ],
        isHousehold: [{required: true, message: "请选择是否户主"}],
        householdRelation: [{required: true, message: "请选择与户主关系"}],
        householdIdNumber: [{required: true, message: "请选择户主身份证号"}],
        riskType: [{required: true, message: "请选择风险因素"}],
        objectType: [{required: true, message: "请选择监测对象类型"}],
      }
    },
    rootArea() {
      return this.user.info?.areaId?.replace(/(\d{6})\d+/g, '$1' + Array(7).join("0")) || ""
    },
    guaranteeCheckList() {
      return [
        {label: '享受农村最低生活保障', value: 0},
        {label: '是否特困供养人员', value: 1},
        {label: '分散供养五保户转集中供养（减少）', value: 2},
        {label: '是否接受医疗救助', value: 3},
        {label: '是否接受其它健康扶贫', value: 4},
      ]
    },
    basicsCheckList() {
      return [
        {label: '城乡居民基本医疗保险', value: 0},
        {label: '城镇职工基本医疗保险', value: 1},
        {label: '大病保险', value: 2},
        {label: '商业补充医疗保险', value: 3},
        {label: '城乡居民基本养老保险', value: 4},
        {label: '城镇职工基本养老保险', value: 5},
        {label: '享受人身意外保险补贴', value: 6},
      ]
    },
  },
  data() {
    return {
      form: {
        householdRelation: "",
        healthyStatus: '',
        healthyStatusList: [],
        guaranteeList: [],
        basicsList: [],
        file: [], 
      },
      isSelectUser: false, //是否选择人员
    }
  },
  methods: {
    checkName(e) {
      if(!e) {
        this.isSelectUser = false
        this.form.name = ''
        this.form.idNumber = ''
        this.form.phone =''
        this.form.currentAreaId = ''
        this.form.currentAddress = ''
        this.form.birthDate = '' 
        this.form.sex = '' 
        this.form.age = ''
        this.form.nation = ''
        this.form.education = ''
        this.form.politicsStatus = ''
        return
      }
      this.form.name = e.name
      this.form.idNumber = e.idNumber
      this.form.phone = e.phone
      this.form.currentAreaId = e.currentAreaId
      this.form.currentAddress = e.currentAddress
      this.form.nation = e.nation
      this.form.education = e.education
      this.form.politicsStatus = e.politicsStatus
      this.handleIdNumberAutocomplete(e.idNumber)
      this.isSelectUser = true
    },
    back() {
      this.$router.push({})
    },
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/app/apppreventionreturntopoverty/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          res.data.healthyStatusList = []
          res.data.basicsList = []
          res.data.guaranteeList = []
          if(res.data.healthyStatus) {
            res.data.healthyStatusList = res.data.healthyStatus.split(',')
          }
          if(res.data.basicsCheck) {
             res.data.basicsList = res.data.basicsCheck.split(',')
          }
          if(res.data.guaranteeCheck) {
             res.data.guaranteeList = res.data.guaranteeCheck.split(',')
          }
          this.form = {...res.data}
        }
      })
    },
    handleIdNumberAutocomplete(v) {
      let {birthday: birthDate, sex} = this.idCardNoUtil.getIdCardInfo(v)
      this.form = {...this.form, birthDate, sex, age: this.$calcAge(v)}
    },
    submit() {
      this.$refs.ruleForm.validate(v => {
        if (v) {
          this.form.isHousehold = 1
          this.form.householdIdNumber = this.form.idNumber
          if (this.form.healthyStatusList.length) {
            this.form.healthyStatus = this.form.healthyStatusList.join(',')
          }
          if(this.user.info.girdCheckType == 1) {
            this.form.girdId = this.user.info.girdId
          }
          if(this.form.basicsList.length) {
            this.form.basicsCheck = this.form.basicsList.join(',')
          }
          if(this.form.guaranteeList.length) {
            this.form.guaranteeCheck = this.form.basicsList.join(',')
          }
          this.instance.post(`/app/apppreventionreturntopoverty/addOrUpdate`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功!');
              this.back()
            }
          })
        }
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.hrAdd {
  height: 100%;

  .half {
    align-items: flex-start;

    & > .el-form-item, & > div {
      width: 50%;

      .el-form-item {
        width: 100%;
      }
    }
  }

  .el-date-editor {
    width: 100%;
  }

  ::v-deep .AiPersonSelect .el-button {
    color: #fff;
  }
}
</style>