<template> <div class="pt-2 base-form"> <div class="px-4 py-2 title">基本信息</div> <van-form label-width="5em" ref="form"> <van-field v-model="form.idCard" required center clearable name="idCard" label="身份证号" placeholder="请输入身份证号" :rules="rules.idCard" > <template #button> <van-button size="small" plain type="primary" @click="getInfo">搜索</van-button> </template> </van-field> <van-field v-model="form.residentName" name="residentName" required label="姓名" placeholder="请输入姓名" maxlength="50" :rules="rules.residentName" /> <van-field required v-model="form.genderTrans" is-link readonly name="gender" label="性别" placeholder="请选择" :rules="rules.gender" @click="showGender = true"/> <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 v-model="form.age" name="age" required label="年龄" type="digit" placeholder="请输入年龄" maxlength="10" :rules="rules.age" /> <van-field required v-model="form.dataBirth" is-link readonly name="dataBirth" label="出生日期" placeholder="请选择" :rules="rules.dataBirth" @click="showPicker = true" /> <van-popup v-model:show="showPicker" position="bottom"> <van-date-picker @confirm="dataBirthConfirm" @cancel="showPicker = false" /> </van-popup> <van-field required v-model="form.nationalTrans" 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.educationTrans" is-link readonly name="education" label="学历" placeholder="请选择" @click="showEducation = true"/> <van-popup v-model:show="showEducation" position="bottom"> <van-picker :columns-field-names="{ text: 'name', value: 'value' }" :columns="store.getDict('DC00007')" @confirm="educationConfirm" @cancel="showEducation = false" /> </van-popup> <van-field required v-model="form.maritalStatusTrans" is-link readonly name="marital" label="婚姻状况" placeholder="请选择" :rules="rules.marital" @click="showEarital = true"/> <van-popup v-model:show="showEarital" position="bottom"> <van-picker :columns-field-names="{ text: 'name', value: 'value' }" :columns="store.getDict('DC00008')" @confirm="maritalConfirm" @cancel="showEarital = 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.registeredCodeTrans" name="registeredCode" is-link readonly label="户口地址" placeholder="请选择所在地区" :rules="rules.registeredCode" @click="showRegistered = true" /> <van-popup v-model:show="showRegistered" :close-on-click-overlay="false" round position="bottom"> <DocAddress v-model:value="form.registeredCode" @close="showRegistered = false" @change="registeredChange"/> </van-popup> <van-field v-model="form.permanentAddress" name="permanentAddress" label="详细地址" placeholder="请输入" @blur="permanentBlur" maxlength="50" /> <van-field required v-model="form.presentCodeTrans" name="presentCode" is-link readonly label="常住地址" placeholder="请选择所在地区" @click="showPresent = true" /> <van-popup v-model:show="showPresent" :close-on-click-overlay="false" round position="bottom"> <DocAddress v-model:value="form.presentCode" @close="showPresent = false" @change="presentChange"/> </van-popup> <van-field v-model="form.nowAddress" name="nowAddress" label="详细地址" placeholder="请输入" maxlength="50" /> <div class="px-4 py-2 title">筛查癌种</div> <van-field name="species" label="请选择要筛查的癌种" required readonly label-width="100%" :rules="rules.species"> <template #input> <van-checkbox-group v-model="form.species" class="pt-2 pl-2"> <van-checkbox v-for="(item, index) in cancerArray" :key="index" :name="item.value" shape="square" class="mb-3">{{ item.name }}</van-checkbox> </van-checkbox-group> </template> </van-field> </van-form> <!-- {{ form }} --> </div> </template> <script> import { fetchDataHandle, getInfoByIdCard } from '@/utils/common.js' import { idCardRule, mobileValidator } from '@/utils/commonReg.js' import { useStore } from '@/tumour/store/index.js' import { getResidentInfo } from '@/tumour/api/base.js' import { getDictValue } from '@/tumour/utils/dictionaries.js' import { showToast } from 'vant' import DocAddress from '@/tumour/utils/docAddress/DocAddress.vue' const defaultForm = (info = {}) => { const form = { id: undefined, // 年龄 age: undefined, // 证件类型,[DC00004] certificateType: 1, // 创建单位id createdUnitId: undefined, createdUnitName: undefined, // 创建医生 createdUserName: undefined, // 出生日期 dataBirth: undefined, // 职业,[DC00010] duty: undefined, // 文化程度(学历),[DC00007] education: undefined, educationTrans: undefined, // 性别,[DC00005] gender: undefined, genderTrans: undefined, // 身份证号 idCard: '', // 婚姻状况,[DC00008] maritalStatus: undefined, maritalStatusTrans: undefined, // 民族,[DC00006] national: undefined, nationalTrans: undefined, // 现住址 nowAddress: undefined, // 户籍地址 permanentAddress: undefined, // 现住址编码 presentCode: undefined, presentCodeTrans: undefined, // 户籍地编码 registeredCode: undefined, registeredCodeTrans: undefined, // 居民档案id residentId: undefined, // 姓名 residentName: undefined, // 本人电话 telephone: undefined, // 工作单位 workUnit: undefined, // 筛查癌种 species: undefined } Reflect.ownKeys(form).forEach(key => { if (info[key] != undefined) { form[key] = info[key] } }) return form } export default { components: { DocAddress }, data() { return { form: defaultForm(), // 性别选择 showGender: false, // 日期选择 showPicker: false, // 民族 showNational: false, // 学历 showEducation: false, // 婚姻情况 showEarital: false, // 户口地址 showRegistered: false, // 常住 showPresent: false, rules: { idCard: [{ required: true, message: '请输入' }, idCardRule], residentName: [{ required: true, message: '请输入' }], age: [{ required: true, message: '请输入' }], gender: [{ required: true, message: '请选择' }], national: [{ required: true, message: '请选择' }], maritalStatus: [{ required: true, message: '请选择' }], telephone: [{ required: true, message: '请输入' }, mobileValidator], registeredCode: [{ required: true, message: '请输入' }], presentCode: [{ required: true, message: '请输入' }], species: [{ required: true, message: '请选择' }] } } }, setup() { const store = useStore() return { store } }, computed: { cancerArray() { const exclude = [11, 99] return this.store.getDict('DC00032').filter(e => !exclude.includes(e.value)) }, }, mounted() {}, methods: { getInfo() { const idCard = this.form.idCard if (!idCard) return getResidentInfo(idCard).then(res => { const result = res.data || {} if (result.id) { this.form = defaultForm({ ...result, id: null, species: [] }) return } const info = getInfoByIdCard(idCard) this.form = defaultForm({ gender: info.gender, genderTrans: getDictValue('DC00005', info.gender), dataBirth: info.dataBirth, age: info.age, species: [] }) console.log(info) }) }, submit() { return new Promise((resolve) => { this.$refs.form.validate().then(res => { console.log(res, this.form) resolve(this.form) }).catch(err => { console.warn(err) showToast('还有表单未填写') if (Array.isArray(err)) { this.$refs.form.scrollToField(err[0].name) } }) }) }, genderConfirm({ selectedValues, selectedOptions }) { this.form.gender = selectedValues[0] this.form.genderTrans = selectedOptions[0].name this.showGender = false }, // 民族 nationalConfirm({ selectedValues, selectedOptions }) { this.form.national = selectedValues[0] this.form.nationalTrans = selectedOptions[0].name this.showNational = false }, // 学历 educationConfirm({ selectedValues, selectedOptions }) { this.form.education = selectedValues[0] this.form.educationTrans = selectedOptions[0].name this.showEducation = false }, // 婚姻 maritalConfirm({ selectedValues, selectedOptions }) { this.form.maritalStatus = selectedValues[0] this.form.maritalStatusTrans = selectedOptions[0].name this.showEarital = false }, dataBirthConfirm({ selectedValues }) { this.form.dataBirth = selectedValues.join('-') this.showPicker = false }, // 户口地址 registeredChange(val) { console.log(val) const selectedOptions = val.selectedOptions this.form.registeredCodeTrans = selectedOptions.map(e => e.text).join('/') if (!this.form.presentCode && selectedOptions.length >= 5) { this.form.presentCode = val.value this.form.presentCodeTrans = this.form.registeredCodeTrans } }, // 常住地址 presentChange(val) { const selectedOptions = val.selectedOptions this.form.presentCodeTrans = selectedOptions.map(e => e.text).join('/') }, permanentBlur(val) { if (!this.form.nowAddress) { this.form.nowAddress = this.form.permanentAddress } } } } </script> <style lang="less" scoped> @import '@/tumour/utils/common.less'; .van-cell { // padding-left: 0; // padding-right: 0; :deep(.van-cell__title) { &>label { display: inline-block; min-width: 56px; text-align: justify; text-align-last: justify; } &:not(.van-field__label--required) { &>label { margin-left: 7px; } } } } // .form-label { // color: #595959; // >span { // display: inline-block; // min-width: .56rem; // text-align: justify; // text-align-last: justify; // } // &[required] { // &::before { // content: '*'; // color: #F5222D; // margin-right: 0.04rem; // } // } // } </style>