<template> <div class="base-info"> <div class="flex py-4 border-bottom"> <div class="px-4 doc-title">居民信息</div> <div class="text-12">请准确填写您的证件信息,标*内容为必填</div> </div> <van-form label-width="5em" ref="form" class="screen-form" input-align="right" error-message-align="right"> <van-field v-model="form.residentName" required clearable name="residentName" label="姓名" placeholder="请输入" :rules="rules.residentName" > </van-field> <van-field required v-model="form.genderName" readonly name="gender" label="性别" placeholder="请选择" :rules="rules.gender"/> <van-popup v-model:show="showGender" position="bottom"> <van-picker :columns-field-names="{ text: 'name', value: 'value' }" :columns="store.getDict('DC00005')" @confirm="genderConfirm" @cancel="showGender = false" /> </van-popup> <van-field required v-model="form.dataBirth" is-link readonly name="dataBirth" label="出生日期" placeholder="请选择" @click="showBirth = true" /> <van-popup v-model:show="showBirth" position="bottom"> <van-date-picker v-model="form._dataBirth" :min-date="birthRange.min" :max-date="birthRange.max" @confirm="dataBirthConfirm" @cancel="showBirth = false" /> </van-popup> <van-field v-model="form.currentAge" name="currentAge" required readonly label="年龄" type="digit" placeholder="请输入年龄" maxlength="10" :rules="rules.currentAge" > <template #extra> <span class="ml-1">岁</span> </template> </van-field> <van-field required v-model="form.nationalName" is-link readonly name="national" label="民族" placeholder="请选择" :rules="rules.national" @click="showNational = true"/> <van-popup v-model:show="showNational" position="bottom"> <van-picker :columns-field-names="{ text: 'name', value: 'value' }" :columns="store.getDict('DC00006')" @confirm="nationalConfirm" @cancel="showNational = false" /> </van-popup> <van-field v-model="form.telephone" name="telephone" required type="tel" label="本人电话" placeholder="请输入" maxlength="11" :rules="rules.telephone" /> <van-field required v-model="form.presentCodeName" name="presentCode" is-link readonly label="现住址" placeholder="请选择所在地区" :rules="rules.presentCode" @click="showPresent = true" > <template #input> <span class="text-end" v-if="form.presentCodeName">{{ form.presentCodeName }}</span> <span class="text-end" style="color: #999999" v-else>请选择</span> </template> </van-field> <van-popup v-model:show="showPresent" :close-on-click-overlay="false" position="bottom" :lazy-render="false"> <DocAddress v-model:value="form.presentCode" @close="showPresent = false" :viewData="addressRecord.presentCode" @change="presentChange"/> </van-popup> <van-field v-model="form.nowAddress" name="nowAddress" label="详细地址" placeholder="请输入" maxlength="50" /> <div class="flex pt-3 pr-4 justify-end"> <van-button size="mini" plain type="primary" @click="setRegisteredAddress"> <span class="text-12">同步住址</span> </van-button> </div> <van-field required v-model="form.registeredCodeName" name="registeredCode" is-link readonly label="户口地址" placeholder="请选择所在地区" :rules="rules.registeredCode" @click="showRegistered = true" > <template #input> <span class="text-end" v-if="form.registeredCodeName">{{ form.registeredCodeName }}</span> <span class="text-end" style="color: #999999" v-else>请选择</span> </template> </van-field> <van-popup v-model:show="showRegistered" :close-on-click-overlay="false" position="bottom" :lazy-render="false"> <DocAddress v-model:value="form.registeredCode" @close="showRegistered = false" :viewData="addressRecord.registeredCode" @change="registeredChange"/> </van-popup> <van-field v-model="form.permanentAddress" name="permanentAddress" label="详细地址" placeholder="请输入" maxlength="50" > </van-field> </van-form> <div class="pt-4"></div> <div class="px-5 pb-4 mt-5 grow flex flex-col justify-end"> <van-button type="primary" block round @click="submit">下一步</van-button> </div> </div> </template> <script> import { useStore } from '@/resident/store/index.js' import { getInfoByIdCard, fetchDataHandle, addToArr } from '@/utils/common.js' import { mobileValidator, addressValidator } from '@/utils/commonReg.js' import DocAddress from '@/components/docAddress/DocAddress.vue' import dayjs from 'dayjs' const defaultForm = (info = {}) => { const form = { id: undefined, residentInfoId:undefined, // 年龄 currentAge: undefined, // 出生地详细地址 birthAddress: undefined, // 出生地编码 birthCode: undefined, // 证件类型,[DC00004] certificateType: 1, // 联系人姓名 contactName: undefined, contactName2: undefined, // 联系人电话 contactPhone: undefined, // 与居民关系,[DC00023] contactRelation: undefined, // 创建单位id createdUnitId: undefined, createdUnitName: undefined, // 创建医生 createdUserName: undefined, // 出生日期 dataBirth: undefined, _dataBirth: undefined, // 职业,[DC00010] duty: undefined, // 文化程度(学历),[DC00007] education: undefined, // 性别,[DC00005] gender: undefined, genderName: undefined, // 身份证号 idCard: undefined, // innerMarital: undefined, // 民族,[DC00006] national: undefined, nationalName: undefined, // 现住址 nowAddress: undefined, // 户籍地址 permanentAddress: undefined, // 现住址编码 presentCode: undefined, presentCodeName: undefined, // 户籍地编码 registeredCode: undefined, registeredCodeName: undefined, // 居民档案id residentId: undefined, // 姓名 residentName: undefined, // 本人电话 telephone: undefined, // 工作单位 workUnit: undefined, diseaseId: undefined, // 与居民关系 relation: undefined, relationOther: undefined, // 人群 chronicTagsArray: undefined, chronicCrowd: undefined, firstScreenDate: undefined, firstScreenResult: undefined, highTagsArray: undefined, highTags: undefined, latelyDiagnoseDate: undefined, latelyScreenDate:undefined, } Reflect.ownKeys(form).forEach(key => { if (info[key] != undefined) { form[key] = info[key] } }) return form } export default { components: { DocAddress }, inject: ['checkInfo', 'recordForm'], data() { return { form: defaultForm(), rules: { residentName: [{ required: true, message: '请输入' }], currentAge: [{ required: true, message: '请输入' }], gender: [{ required: true, message: '请选择' }], national: [{ required: true, message: '请选择' }], telephone: [{ required: true, message: '请输入' }, mobileValidator], presentCode: [{ required: true, message: '请选择' }, addressValidator], registeredCode: [{ required: true, message: '请选择' }, addressValidator] }, // 地址回显使用 addressRecord: {}, // 性别选择 showGender: false, // 出生日期 showBirth: false, // 民族 showNational: false, // 现住址 showPresent: false, // 户籍地址 showRegistered: false, store: useStore(), birthRange: { start: undefined, end: undefined } } }, computed: { residentsRecord() { return this.checkInfo.residentsRecord } }, created() { console.log('checkInfo', this.checkInfo) this.init() }, methods: { init() { const date = dayjs() this.birthRange.max = new Date(date.year(), date.month(), date.date()) this.birthRange.min = new Date(date.year() - 120, date.month(), date.date()) if (this.recordForm.base) { this.form = defaultForm(this.recordForm.base) return } if (this.residentsRecord) { this.form = defaultForm(this.residentsRecord) this.addressRecord.presentCode = addToArr(this.form.presentCode) this.addressRecord.registeredCode = addToArr(this.form.registeredCode) } const idCard = this.checkInfo.idCard const info = getInfoByIdCard(idCard) this.form.gender = info.gender this.form.genderName = this.store.getDictValue('DC00005', this.form.gender) this.form.currentAge = info.age this.form.dataBirth = info.dataBirth this.form._dataBirth = info.dataBirth.split('-') }, submit() { // this.recordForm.base = {...this.form} // this.$parent.onNext() // return this.$refs.form.validate().then(() => { this.recordForm.base = {...this.form} this.$parent.onNext() }).catch(err => { console.warn(err) const array = err || [] if (array.length) { this.$refs.form.scrollToField(array[0].name) } }) }, // 性别 genderConfirm({ selectedValues, selectedOptions }) { this.form.gender = selectedValues[0] this.form.genderName = selectedOptions[0].name this.showGender = false }, // 出生日期 dataBirthConfirm({ selectedValues }) { this.form.dataBirth = selectedValues.join('-') this.showBirth = false const age = dayjs().diff(dayjs(this.form.dataBirth), 'years') this.form.currentAge = age }, // 民族 nationalConfirm({ selectedValues, selectedOptions }) { this.form.national = selectedValues[0] this.form.nationalName = selectedOptions[0].name this.showNational = false }, // 户口地址 registeredChange(val) { const selectedOptions = val.selectedOptions this.form.registeredCodeName = selectedOptions.map(e => e.text).join('/') if (!this.form.presentCode && selectedOptions.length >= 5) { this.form.presentCode = val.value this.form.presentCodeName = this.form.registeredCodeName } }, // 现住址 presentChange(val) { const selectedOptions = val.selectedOptions this.form.presentCodeName = selectedOptions.map(e => e.text).join('/') }, // 同步现住址 setRegisteredAddress() { this.$refs.form.validate(['presentCode']).then(res => { this.form.registeredCode = this.form.presentCode this.form.registeredCodeName = this.form.presentCodeName this.form.permanentAddress = this.form.nowAddress this.addressRecord.registeredCode = addToArr(this.form.presentCode) }).catch(err => console.warn(err)) } } } </script> <style lang="less" scoped> @import '../../../utils/common.less'; </style>