archiveCommon.vue

<template>
    <van-form ref='form'>
        <div class='title'>居民信息</div>
        <!--                    <div class='label-title'>证件类型</div>
                            <van-field
                                v-model='form.certificateTypeName'
                                is-link
                                readonly
                                placeholder='证件类型'
                                class='input-back mt-2 form-input'
                                :rules='rules.certificateTypeName'
                            />-->
        <div class='label-title mt-5'>证件号码</div>
        <van-field
            v-model='form.idCard'
            readonly
            placeholder='证件号码'
            class='input-back mt-2 form-input'
            :rules='rules.idCard'
        />
        <div class='label-title mt-5'>姓名</div>
        <van-field
            v-model='form.residentName'
            clearable
            placeholder='姓名'
            class='input-back mt-2 form-input'
            :rules='rules.residentName'
        />
        <div class='label-title mt-5'>性别</div>
        <van-field
            v-model='form.genderName'
            is-link
            readonly
            placeholder='性别'
            class='input-back mt-2 form-input'
            :rules='rules.genderName'
        />
        <div class='label-title mt-5'>出生日期</div>
        <van-field
            v-model='form.dataBirth'
            is-link
            readonly
            placeholder='出生日期'
            class='input-back mt-2 form-input'
            :rules='rules.dataBirth'
        />
        <div class='label-title mt-5'>本人电话</div>
        <van-field
            v-model='form.telephone'
            clearable
            placeholder='本人电话'
            class='input-back mt-2 form-input'
            :rules='rules.telephone'
        />
        <div class='label-title mt-5'>民族</div>
        <van-field
            v-model='form.nationalName'
            is-link
            readonly
            name='national'
            placeholder='请选择'
            class='input-back mt-2 form-input'
            :rules='rules.nationalName'
            @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>
        <div class='label-title mt-5'>年龄</div>
        <van-field
            v-model='form.currentAge'
            readonly
            placeholder='年龄'
            class='input-back mt-2 form-input'
            :rules='rules.currentAge'
        />

        <div class='label-title mt-5'>现住址</div>
        <van-field
            v-model='form.presentCodeName'
            is-link
            readonly
            placeholder='请选择所在地区'
            class='input-back mt-2 form-input'
            :rules='rules.presentCodeName'
            @click='showPresent = true'
        >
            <template #input>
                <span class='text-end'>{{ form.presentCodeName }}</span>
            </template>
        </van-field>
        <van-popup v-model:show='showPresent' :close-on-click-overlay='false' position='bottom'>
            <DocAddress v-model:value='form.presentCode' @close='showPresent = false'
                        :viewData='addressRecord.presentCode'
                        @change='presentChange' />
        </van-popup>
        <div class='no-req-label mt-5'>详细地址</div>
        <van-field
            v-model='form.nowAddress'
            clearable
            class='input-back mt-2 form-input'
            placeholder='请填写详细地址'
            maxlength='50'
        />
        <div class='flex items-center justify-between mt-5'>
            <div class='label-title '>户口地址</div>
            <van-button size='mini' plain type='primary'
                        @click='setRegisteredAddress'>同步现住址
            </van-button>
        </div>

        <van-field
            v-model='form.registeredCodeName'
            is-link
            readonly
            placeholder='请选择所在地区'
            class='input-back mt-2 form-input'
            :rules='rules.registeredCode'
            @click='showRegistered = true'
        >
            <template #input>
                <span class='text-end'>{{ form.registeredCodeName }}</span>
            </template>
        </van-field>
        <van-popup v-model:show='showRegistered' :close-on-click-overlay='false' position='bottom'>
            <DocAddress v-model:value='form.registeredCode' @close='showRegistered = false'
                        :viewData='addressRecord.registeredCode'
                        @change='registeredChange' />
        </van-popup>
        <div class='no-req-label mt-5'>详细地址</div>
        <van-field
            v-model='form.permanentAddress'
            clearable
            class='input-back mt-2 form-input'
            placeholder='请填写详细地址'
            maxlength='50'
        />
        <div class='title mt-5'>联系人信息</div>
        <div class='no-req-label mt-5'>联系人姓名</div>
        <van-field
            v-model='form.contactName'
            clearable
            placeholder='联系人姓名'
            class='input-back mt-2 form-input'
            :rules='rules.contactName'
        />
        <div class='no-req-label mt-5'>与居民关系</div>
        <van-field
            v-model='form.relationName'
            readonly
            is-link
            placeholder='与居民关系'
            class='input-back mt-2 form-input'
            @click='showRelation= true'
        />
        <van-popup v-model:show='showRelation' position='bottom'>
            <van-picker
                :columns-field-names="{ text: 'name', value: 'value' }"
                :columns="store.getDict('DC00023')"
                @confirm='relationlConfirm'
                @cancel='showRelation = false'
            />
        </van-popup>
        <van-field
            v-if='form.relation == 99'
            v-model='form.relationOther'
            clearable
            placeholder='其他关系'
            class='input-back mt-2 form-input'
        />
        <div class='no-req-label mt-5'>联系电话</div>
        <van-field
            v-model='form.contactPhone'
            clearable
            placeholder='联系电话'
            class='input-back mt-2 form-input'
            :rules='rules.contactPhone'
        />
    </van-form>
</template>

<script>
import { addToArr } from '@/utils/common'
import { useStore } from '@/doctor/store'
import DocAddress from '@/components/docAddress/DocAddress'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'

const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
        residentInfoId: undefined,
        // 年龄
        currentAge: undefined,
        // 出生地详细地址
        birthAddress: undefined,
        // 出生地编码
        birthCode: undefined,
        // 证件类型,[DC00004]
        certificateType: 1,
        certificateTypeName: '身份证',
        // 联系人姓名
        contactName: undefined,
        contactName2: undefined,
        // 联系人电话
        contactPhone: undefined,
        // 与居民关系,[DC00023]
        contactRelation: undefined,
        contactRelationName: undefined,
        // 出生日期
        dataBirth: undefined,
        // 职业,[DC00010]
        duty: undefined,
        dutyName: undefined,
        // 文化程度(学历),[DC00007]
        education: undefined,
        educationName: 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,
        // 与居民关系
        relation: undefined,
        relationName: undefined,
        relationOther: undefined,
        // 人群
        chronicCrowd: undefined,
        chronicTagsArray: undefined,
        firstScreenDate: undefined,
        firstScreenResult: undefined,
        highTagsArray: undefined,
        highTags: undefined,
        latelyDiagnoseDate: undefined,
        latelyScreenDate: undefined,
        // 建档单位、科室、医生
        createDoctorId: undefined,
        createDoctorName: undefined,
        createOfficeId: undefined,
        createOfficeName: undefined,
        createUnitId: undefined,
        createUnitName: undefined,
        // 当前人群-显示type=CP00181
        groupsArrays: undefined,
        // 当前人群-查询
        groups: undefined
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return form
}
export default {
    name: 'archiveCommon',
    components: { DocAddress, DocNavBar },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            // 民族
            showNational: false,
            showRelation: false,
            // 现住址
            showPresent: false,
            // 户籍地址
            showRegistered: false,
            // 地址回显使用
            addressRecord: {},
            form: {},
            rules: {
                certificateTypeName: [{ required: true, message: '请选择证件类型' }],
                idCard: [{ required: true, message: '请填写证件号码' }],
                residentName: [{ required: true, message: '请填写姓名' }],
                genderName: [{ required: true, message: '请选择性别' }],
                dataBirth: [{ required: true, message: '请选择出生日期' }],
                nationalName: [{ required: true, message: '请选择名族' }],
                currentAge: [{ required: true, message: '请填写年龄' }],
                telephone: [{ required: true, message: '请填写本人电话' }],
                contactName: [{ required: false, message: '请填写联系人姓名' }],
                contactPhone: [{ required: false, message: '请填写联系电话' }],
                presentCodeName: [{ required: true, message: '请选择所在地区' }],
                registeredCode: [{ required: true, message: '请选择所在地区' }]
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.init()
            },
            immediate: true
        }
    },
    methods: {
        init() {
            this.form = defaultForm(this.info)
            if (this.form.presentCode) {
                this.addressRecord.presentCode = addToArr(this.form.presentCode)
            }
            if (this.form.registeredCode) {
                this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
            }
        },
        // 民族
        nationalConfirm({ selectedValues, selectedOptions }) {
            this.form.national = selectedValues[0]
            this.form.nationalName = selectedOptions[0].name
            this.showNational = false
        },
        //与居民关系
        relationlConfirm({ selectedValues, selectedOptions }) {
            this.form.relation = selectedValues[0]
            this.form.relationName = selectedOptions[0].name
            this.showRelation = false
        },
        // 现住址
        presentChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.presentCodeName = selectedOptions.map(e => e.text).join('/')
        },
        // 户口地址
        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
            }
        },
        // 同步现住址
        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))
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    resolve(this.form)
                }).catch((e) => {
                    console.warn('档案信息校验失败', e)
                    const array = e || []
                    if (array.length) {
                        this.$refs.form.scrollToField(array[0].name)
                    }
                })
            })
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
    margin-bottom: 20px;
}

.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;

    &::after {
        content: "*";
        color: red;
        font-weight: bold;
        margin-left: 4px;
    }
}

.no-req-label {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
}

.form-input {
    padding: 8px 12px;
    border-radius: 8px;
}

.input-back {
    background: #FAFAFA;
}

.tel-back {
    background: #F5F5F5;
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
}

.tel {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 8px;
}

.tel-label {
    color: #607FF0;
    font-weight: bold;
}

.p-12-0 {
    padding: 12px 0px;
}

:deep(.van-nav-bar .van-icon) {
    color: #000000;
}

:deep(.van-cell-group--inset) {
    overflow: visible;
}

:deep(.van-cell) {
    overflow: visible;
}

/*:deep(.van-field__error-message) {
    position: absolute;
    margin-top: 3px;
}*/

:deep(.van-cell:after) {
    border-bottom: 0px;
}
</style>