GeneralFUForm.vue

<template>
    <div>
        <van-form ref='form'>
            <div class='title'>随访信息</div>
            <div v-if='showOne'>
                <div class='label-title'>随访内容</div>
                <van-field
                    v-model='form.visitContent'
                    placeholder='随访内容'
                    class='input-back mt-2 form-input'
                    rows='2'
                    autosize
                    type='textarea'
                    :rules='rules.visitContent'
                />
            </div>
            <div v-if='showOne'>
                <div class='no-req-label mt-5'>处置意见</div>
                <van-field
                    v-model='form.disposalOpinion'
                    rows='2'
                    autosize
                    type='textarea'
                    placeholder='处置意见'
                    class='input-back mt-2 form-input'
                />
            </div>
            <div v-if='showTwo'>
                <div class='no-req-label mt-5'>健康指导</div>
                <div class='health mt-2'>
                    <div class='health-cell mt-2' v-for='item in form.visitHealthGuideList'>
                        <div class='no-req-label' v-if="item.name != '无'">{{ item.name }}</div>
                        <van-field
                            v-model='item.templateContent'
                            rows='1'
                            autosize
                            type='textarea'
                            placeholder='请输入'
                            class='input-back mt-2 form-input'
                        />
                    </div>
                </div>
            </div>
            <!--            催检-->
            <div v-if='showFour'>
                <div class='no-req-label mt-5'>催检内容</div>
                <div class='tel-back mt-2'>
                    <div class='tel'>
                        <div style='text-indent: 2em;line-height: .2rem'>
                            <span v-if='modeEnumList.urgeResidentShow'>{{ firstForm.residentsRecord.residentName }}先生/女士，</span>
                            <span v-else>您好，</span>
                            <span>请您于{{ form.screenTime }}</span>
                            <span>到{{ authInfo.unitName }}</span>
                            <span>进行专病高危筛查/慢病复查，</span>
                            <span>祝早日康复！</span>
                        </div>
                        <div class='mt-2' style='text-align: center' @click='showTime1 = true'>
                            <span style='color: #607FF0'>修改日期</span>
                        </div>
                    </div>
                </div>
                <van-popup v-model:show='showTime1' position='bottom'>
                    <van-date-picker  v-model='currentTime1' @confirm='timeConfirm1' @cancel='showTime1 = false' />
                </van-popup>

            </div>

<!--            上传随访照片-->
            <div v-if='showOne'>
                <div class='no-req-label mt-5'>上传随访记录</div>
             <DocImageUpload
                 description="支持上传jpg、png、jpeg文件，大小请在10M以内"
                 lengthMessage="抱歉，最多可上传6个文件。"
                 :imageData="[]"
                 @change="(ids, option) => form.uploadVisitRecord = ids"
                 :maxLength="6"
                 class="mt-2"
             />
            </div>
<!--            现场随访照片-->
            <div>
                <div class='no-req-label mt-5'>现场随访照片</div>
                <DocImageUpload
                    description="支持上传jpg、png、jpeg文件，大小请在10M以内"
                    lengthMessage="抱歉，最多可上传6个文件。"
                    :imageData="[]"
                    @change="(ids, option) => form.sceneVisitImage = ids"
                    :maxLength="6"
                    class="mt-2"
                />
            </div>


            <div>
                <div class='label-title mt-5'>下次随访日期</div>
                <van-field
                    v-model='form.nextVisitDate'
                    is-link
                    readonly
                    name='nextVisitDate'
                    placeholder='下次随访日期'
                    class='input-back mt-2 form-input'
                    :rules='rules.nextVisitDate'
                    @click='showDate = true' />
                <van-popup v-model:show='showDate' position='bottom'>
                    <van-date-picker v-model='form._nextVisitDate'
                                     :min-date='nextVisitDateRange.min'
                                     :max-date='nextVisitDateRange.max'
                                     @confirm='dataConfirm' @cancel='showDate = false' />
                </van-popup>
            </div>
        </van-form>
    </div>
</template>

<script>
import { useStore } from '@/resident/store'
import dayjs from 'dayjs'
import DocIcon from '@/components/docIcon/DocIcon'
import { showToast } from 'vant'
import { fetchDataHandle } from '@/utils/common'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload'

export default {
    name: 'GeneralFUForm',
    components: { DocImageUpload, DocIcon },
    props: {
        info: {
            default: () => {
                return {}
            }
        },
        firstForm: {
            default: () => {
                return {}
            }
        },
        modeEnumList: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            form: {},
            //展示用
            imgList: [],
            imgList2: [],
            //input图片值
            imgInputList1: [],
            imgInputList2: [],
            showDate: false,
            showTime1: false,
            currentTime1: null,
            showImgList: [],
            initSwipe: 0,
            rules: {
                visitContent: [{ required: true, message: '请输入' }],
                nextVisitDate: [{ required: true, message: '请选择' }]
            },
            // 筛查日期可选范围
            nextVisitDateRange: {
                min: undefined,
                max: undefined
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
            },
            immediate: true
        }
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        },
        //复检
        showOne() {
            const { visitWayRules } = this.firstForm
            let res = false
            let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
            if (list && list.includes(1)) {
                res = true
            }
            return res
        },
        //指导
        showTwo() {
            const { visitWayRules } = this.firstForm
            let res = false
            let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
            if (list && list.includes(2)) {
                res = true
            }
            return res
        },
        //宣教
        showThree() {
            const { visitWayRules } = this.firstForm
            let res = false
            let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
            if (list && list.includes(3)) {
                res = true
            }
            return res
        },
        //催检
        showFour() {
            const { visitWayRules } = this.firstForm
            let res = false
            let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
            if (list && list.includes(4)) {
                res = true
            }
            return res
        },
    },
    created() {
        const date = dayjs()
        this.nextVisitDateRange.max = new Date(date.year() + 10, date.month(), date.date())
        this.nextVisitDateRange.min = new Date(date.year(), date.month(), date.date() + 1)
        this.form._nextVisitDate = [date.year(), date.month(), date.date() + 1]
        let time = new dayjs().add(1, 'day').format('YYYY-MM-DD')
        this.currentTime1 = time.split('-')
    },
    methods: {
        setForm(info = {}) {
            const modeArray = this.store.getDict('DC00084')
            let visitHealthGuideList = []
            if (info.healthGuideContent) {
                visitHealthGuideList = JSON.parse(info.healthGuideContent)
            }
            const form = {
                id: info.id,
                diseaseType: info.diseaseType,
                visitDate: info.visitDate || new dayjs(),
                nextVisitDate: info.nextVisitDate ||  new dayjs().add(1, 'day').format('YYYY-MM-DD'),
                isSms: info.isSms,
                isWx: info.isWx,
                screenTime: new dayjs().add(1, 'day').format('YYYY-MM-DD'),
                visitContent: info.visitContent,
                disposalOpinion: info.disposalOpinion,
                uploadVisitRecord: info.uploadVisitRecord,
                sceneVisitImage: info.sceneVisitImage,
                sendInfo: info.sendInfo,
                visitHealthGuideList: modeArray.map(e => {
                    const item = visitHealthGuideList.find(i => i.templateMode === e.value)
                    return {
                        templateMode: e.value,
                        name: e.name,
                        templateContent: item ? item.templateContent : '',
                        id: item ? item.visitId : ''
                    }
                })

            }
            return form
        },
        dataConfirm({ selectedValues }) {
            this.form.nextVisitDate = selectedValues.join('-')
            this.showDate = false
        },
        //催检日期选择
        timeConfirm1({ selectedValues }) {
            this.form.screenTime = selectedValues.join('-')
            this.showTime1 = false
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    if (this.imgList.length > 6 || this.imgList2.length > 8) {
                        return
                    }
                    let time = dayjs(this.form.screenTime).format('YYYY-MM-DD')
                    let content = `${this.modeEnumList.urgeResidentShow ? `${this.firstForm.residentsRecord.residentName}先生/女士，` : `您好，`}请您于${time}到${this.authInfo.unitName}进行专病高危筛查/慢病复查，祝早日恢复健康！`
                    let par = {
                        img1: this.imgList || [],
                        img2: this.imgList2 || [],
                        imgInput1: this.imgInputList1,
                        imgInput2: this.imgInputList2,
                        ...this.form,
                        urgentInsContent: content,
                        healthGuideContent: JSON.stringify(this.form.visitHealthGuideList)
                    }
                    resolve(par)
                }).catch((e) => {
                    console.warn('generaFu error', e)
                    // reject(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;
    }
}

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

.health {
    padding: 1px 8px 8px 8px;
    background: #FAFAFA;
    border-radius: 8px;

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

.tips {
    color: #A5AEBE;
    font-size: 12px;
    margin-top: 8px;
}

.img-btn {
    border: 1px solid #EEEEEE;
    background: #FAFAFA;
    border-radius: 8px;
    padding: 14px 46px;
    text-align: center;
    color: #607FF0;
}

.doc-up {
    font-size: 20px;
}

.pdf {
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 8px;
}

.remove {
    font-size: 24px;
    position: absolute;
    right: -8px;
    top: -9px;
    z-index: 1;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 100%;
        height: 300px;
    }
}

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

.warn {
    color: #ee0a24;
    text-align: left;
}

</style>

<style lang='less'>
.custom-image-preview .van-image-preview__container .van-image-preview__item:not(:first-child):not(last-child) {
    display: block !important;
}

.van-image__img {
    width: 100%;
}

.van-swipe__track {
    width: 100% !important;
}

.van-swipe-item {
    width: 100% !important;
}
</style>