<template> <div> <van-form ref='form'> <div :class="['label-title', 'mt-5']">随访单位</div> <van-field v-model='form.visitUnitName' is-link readonly placeholder='随访单位' class='input-back mt-2 form-input' :rules='rules.visitUnitName' @click='show1 = true' /> <DocUnit v-model:show='show1' v-model:value='form.visitUnitId' @change='changeUnit' /> <div class='label-title mt-5'>随访科室</div> <van-field v-model='form.visitOfficeName' is-link readonly placeholder='随访科室' class='input-back mt-2 form-input' :rules='rules.visitOfficeName' @click='show2 = true' /> <DocOffice v-model:show='show2' v-model:value='form.visitOfficeId' @change='changeOffice' :unitId='form.visitUnitId' /> <div class='label-title mt-5'>随访医生</div> <van-field v-model='form.visitDoctorName' is-link readonly placeholder='随访医生' class='input-back mt-2 form-input' :rules='rules.visitDoctorName' @click='show3 = true' /> <DocOfficeDoctor v-model:show='show3' v-model:value='form.visitDoctorId' @change='changeDoctor' :unitId='form.visitUnitId' :officeId='form.visitOfficeId' /> </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 = { visitDate: new dayjs().format("YYYY-MM-DD"), createDate: new dayjs().format("YYYY-MM-DD"), // 随访单位 visitUnitId: this.authInfo.unitId, visitUnitName: this.authInfo.unitName, // 随访科室 visitOfficeId: this.authInfo.officeId, visitOfficeName: this.authInfo.officeName, // 随访医生 visitDoctorId: this.authInfo.relationId, visitDoctorName: 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.visitUnitName = val.unitName this.form.visitUnitId = val.id this.form.visitOfficeId = undefined this.form.visitOfficeName = undefined this.form.visitDoctorId = undefined this.form.visitDoctorName = undefined this.show1 = false }, changeOffice(val) { this.form.visitOfficeId = val.id this.form.visitOfficeName = val.officeName this.form.visitDoctorId = undefined this.form.visitDoctorName = undefined this.show2 = false }, changeDoctor(val) { this.form.visitDoctorId = val.id this.form.visitDoctorName = 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>