CommonBottom.vue

<template>
    <div>
        <van-form ref='form'>

            <div :class="['label-title', 'mt-5']">筛查单位</div>
            <van-field
                v-model='form.screenUnitName'
                is-link
                readonly
                placeholder='筛查单位'
                class='input-back mt-2 form-input'
                :rules='rules.screenUnitName'
                @click='show1 = true'
            />
            <DocUnit v-model:show='show1' v-model:value='form.screenUnitId' @change='changeUnit' />

            <div class='label-title mt-5'>筛查科室</div>
            <van-field
                v-model='form.screenOfficeName'
                is-link
                readonly
                placeholder='筛查科室'
                class='input-back mt-2 form-input'
                :rules='rules.screenOfficeName'
                @click='show2 = true'
            />
            <DocOffice v-model:show='show2' v-model:value='form.screenOfficeId' @change='changeOffice'
                       :unitId='form.screenUnitId' />

            <div class='label-title mt-5'>筛查医生</div>
            <van-field
                v-model='form.screenDoctorName'
                is-link
                readonly
                placeholder='筛查医生'
                class='input-back mt-2 form-input'
                :rules='rules.screenDoctorName'
                @click='show3 = true'
            />

            <DocOfficeDoctor v-model:show='show3' v-model:value='form.screenDoctorId' @change='changeDoctor'
                             :unitId='form.screenUnitId' :officeId='form.screenOfficeId' />
        </van-form>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { useStore } from '@/doctor/store'
import DocUnit from '@/doctor/components/docUnit/DocUnit'
import DocOffice from '@/doctor/components/docOffice/DocOffice'
import DocOfficeDoctor from '@/doctor/components/docOfficeDoctor/DocOfficeDoctor'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload'


export default {
    name: 'CommonBottom',
    components: { DocImageUpload, CheckBtn, DocOfficeDoctor, DocOffice, DocUnit },
    props: {
        info: {
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            store: useStore(),
            show1: false,
            show2: false,
            show3: false,
            form: {
            },
            rules: {
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
            },
            immediate: true
        },
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        },
    },
    methods: {
        setForm(info) {
            const form = {
                screenDate: new dayjs().format("YYYY-MM-DD"),
                createDate: new dayjs().format("YYYY-MM-DD"),
                // 筛查单位
                screenUnitId: this.authInfo.unitId,
                screenUnitName: this.authInfo.unitName,
                // 筛查科室
                screenOfficeId: this.authInfo.officeId,
                screenOfficeName: this.authInfo.officeName,
                // 筛查医生
                screenDoctorId: this.authInfo.relationId,
                screenDoctorName: this.authInfo.nickName,
                // 录入单位
                createUnitId: this.authInfo.unitId,
                createUnitName: this.authInfo.unitName,
                // 录入科室
                createOfficeId: this.authInfo.officeId,
                createOfficeName: this.authInfo.officeName,
                // 录入医生
                createDoctorId: this.authInfo.relationId,
                createDoctorName: this.authInfo.nickName,
            }
            Reflect.ownKeys(form).forEach(key => {
                if (info[key] != undefined) {
                    form[key] = info[key]
                }
            })
            return form
        },
        changeUnit(val) {
            this.form.screenUnitName = val.unitName
            this.form.screenUnitId = val.id
            this.form.screenOfficeId = undefined
            this.form.screenOfficeName = undefined
            this.form.screenDoctorId = undefined
            this.form.screenDoctorName = undefined
            this.show1 = false
        },
        changeOffice(val) {
            this.form.screenOfficeId = val.id
            this.form.screenOfficeName = val.officeName
            this.form.screenDoctorId = undefined
            this.form.screenDoctorName = undefined
            this.show2 = false
        },
        changeDoctor(val) {
            this.form.screenDoctorId = val.id
            this.form.screenDoctorName = val.staffName
            this.show3 = false
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    let par = {
                        ...this.form,
                    }
                    resolve(par)
                }).catch((e) => {
                    console.warn('error', e)
                })
            })
        }
    }
}
</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;
    }
}

.push-lab {
    line-height: 20px;
    color: #8C8C8C;
    font-size: 12px
}

.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;
}

.vx-cb {
    position: absolute;
    right: 10px;
    top: 23px;
}

.ms-cb {
    position: absolute;
    right: 10px;
    top: 97px;
}

: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>