CommonBottom.vue

<template>
    <div>
        <van-form ref='form'>
            <div class='label-title' v-if='showPush'>请选择推送渠道</div>
            <van-field
                v-model='form.isSmsIsWxStr'
                style='padding: 0px'
                :rules='rules.isSmsIsWxStr'
            >
                <template #input>
                    <div class='w-full'>
                    <checkBtn class='mt-3'
                              column-1
                              text-align='left'
                              :options='vxList'
                              v-model:value='checkVx'
                              :fieldNames="{text: 'name', value: 'value'}"
                    ></checkBtn>
                    <div class='push-lab'>随访信息将通过小程序消息推送给居民</div>
                    <checkBtn class='mt-3'
                              column-1
                              text-align='left'
                              :options='messageList'
                              v-model:value='checkMessage'
                              :fieldNames="{text: 'name', value: 'value'}"
                    ></checkBtn>
                    <div class='push-lab'>随访信息将通过短信方式发送给居民</div>
                    </div>
                </template>
            </van-field>

            <div :class="['label-title', {'mt-5': showPush}]">随访单位</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'


export default {
    name: 'CommonBottom',
    components: { CheckBtn, DocOfficeDoctor, DocOffice, DocUnit },
    props: {
        info: {
            default: () => {
                return {}
            }
        },
        firstForm: {
            default: () => {
                return {}
            }
        },
        modeEnumList: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            show1: false,
            show2: false,
            show3: false,
            vxList:[],
            checkVx: undefined,
            messageList: [],
            checkMessage: undefined,
            form: {
                isSmsIsWx: []
            },
            rules: {
                isSmsIsWxStr: [{ required: true, message: '请选择' }],
                visitUnitName: [{ required: true, message: '请选择' }],
                visitOfficeName: [{ required: true, message: '请选择' }],
                visitDoctorName: [{ required: true, message: '请选择' }],
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
            },
            immediate: true
        },
        'firstForm.residentsRecord': {
            handler() {
                this.vxList = this.getVxEnum(this.firstForm)
                this.messageList = this.getMessageEnum(this.firstForm.residentsRecord)
            },
            immediate: true,
            deep:true
        },
        'checkMessage': {
            handler() {
                this.form.isSms = 2
              if (this.checkMessage) {
                  this.form.isSms = 1
                  this.form.isSmsIsWx.push(1)
                  this.form.isSmsIsWxStr = 1
              } else {
                  this.form.isSmsIsWx = this.form.isSmsIsWx.filter(item => item !=1)
                  //判断推送渠道是否存在值
                  if (!this.checkVx) {
                      this.form.isSmsIsWxStr = ''
                  }
              }
            }
        },
        'checkVx': {
            handler() {
                this.form.isWx = 2
                if (this.checkVx) {
                    this.form.isWx = 1
                    this.form.isSmsIsWx.push(2)
                    this.form.isSmsIsWxStr = 2
                } else {
                    this.form.isSmsIsWx = this.form.isSmsIsWx.filter(item => item !=2)
                    //判断推送渠道是否存在值
                    if (!this.checkMessage) {
                        this.form.isSmsIsWxStr = ''
                    }
                }
            }
        },
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        },
        //是否显示推送渠道
        showPush() {
            let res = false
            let list = []
            if (this.firstForm.visitWayRules) {
                list = this.firstForm.visitWayRules.split(',').map(item => Number(item))
            }
            if (list && list.length && (list.includes(2) || list.includes(3) || list.includes(4))) {
                res = true
            }
            return res
        }
    },
    methods: {
        //微信
        getVxEnum(patientInfo = {}) {
            return [{ name: `微信 ${patientInfo.sendNumber ? `（${this.$phoneHide(patientInfo.sendNumber)}已注册小程序）` : `（未注册小程序）`}`, value:2 }]
        },
        getMessageEnum(patientInfo = {}) {
            return [{ name: `短信 ${patientInfo.telephone ? `（手机号 ${this.$phoneHide(patientInfo.telephone)}）` : `（手机号 不存在）`}`, value: 1 }]
        },
        setForm(info) {
            const form = {
                visitDate: new dayjs(),
                createDate: new dayjs(),
                // 随访单位
                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,
                isSms: 2,
                isWx: 2,
                isSmsIsWx: [],
            }
            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('ArchiveCommon 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;
}

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

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

:deep(.van-field__error-message) {
    position: absolute;
}

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