BaseInfo.vue

<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,
        // 当前人群-显示type=CP00181
        groupsArrays: undefined,
        // 当前人群-查询
        groups: 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>