FormCont.vue

<template>
    <div class="diagnose-form-cont">
        <van-form ref='form' class="doc-form">
            <div class='font-semibold'>诊断信息</div>
            <div class='doc-form-label' required>纳入管理日期</div>
            <van-field
                v-model="form.manageDate"
                is-link
                readonly
                :disabled="!!info.manageDate"
                name="manageDate"
                placeholder="请选择"
                @click="showDate('manageDate')"
                :rules="rules.requiredSelect"
            />
            <van-popup v-model:show="dateOption.show" position="bottom">
                <van-date-picker
                    :min-date="dateRange.min"
                    :max-date="dateRange.max"
                    @confirm="dateConfirm" @cancel="dateOption.show = false" />
            </van-popup>

            <div class='doc-form-label' required>诊断名称</div>
            <van-field
                v-model="form.diseaseName"
                is-link
                readonly
                name="manageDate"
                placeholder="请选择"
                @click="showIcd = true"
                :rules="rules.requiredSelect"
            />
            <DiagnosePicker v-model:show="showIcd"
                v-model:value="form.icdCode"
                :diseaseType="diseaseType"
                @change="icdChange"/>

            <div class='doc-form-label' required>诊断日期</div>
            <van-field
                v-model="form.diseaseDate"
                is-link
                readonly
                name="diseaseDate"
                placeholder="请选择"
                @click="showDate('diseaseDate')"
                :rules="rules.requiredSelect"
            />

            <div class='doc-form-label' required v-if="![1, 4].includes(diseaseType)">诊断评估</div>
            <template v-if="diseaseType == 1">
                <div class='doc-form-label' required>高血压分级</div>
                <van-field
                    v-model="form.diagnoseAssessName"
                    is-link
                    readonly
                    name="diagnoseAssess"
                    placeholder="请选择"
                    @click="showOptions('diagnoseAssess', 'CP00096')"
                    :rules="rules.requiredSelect"
                />
                <div class='doc-form-label' required>高血压危险分层</div>
                <van-field
                    v-model="form.diagnoseLevelName"
                    is-link
                    readonly
                    name="diagnoseLevel"
                    placeholder="请选择"
                    @click="showOptions('diagnoseLevel', 'CP00097')"
                    :rules="rules.requiredSelect"
                />
            </template>

            <template v-else-if="diseaseType == 4">
                <div class='doc-form-label' required>缺血性脑卒中</div>
                <van-field
                    v-model="form.diagnoseResultName"
                    is-link
                    readonly
                    name="diagnoseResult"
                    placeholder="请选择"
                    @click="showOptions('diagnoseResult', 'CP00103', 'checkbox')"
                />
                <div class='doc-form-label' required>出血性脑卒中</div>
                <van-field
                    v-model="form.diagnoseLevelName"
                    is-link
                    readonly
                    name="diagnoseLevel"
                    placeholder="请选择"
                    @click="showOptions('diagnoseLevel', 'CP00104')"
                />
            </template>
            <template v-else-if="[2,3].includes(diseaseType)">
                <!-- 糖尿病 冠心病 -->
                <van-field
                    v-model="form.diagnoseResultName"
                    is-link
                    readonly
                    name="diagnoseResult"
                    placeholder="请选择"
                    @click="showOptions('diagnoseResult', resultSelectOption.dictMap[diseaseType], 'checkbox')"
                    :rules="rules.requiredSelect"
                />
            </template>
            <template v-else>
                <!-- 慢阻肺 慢性肾脏病 血脂异常 -->
                <van-field
                    v-model="form.diagnoseAssessName"
                    is-link
                    readonly
                    name="diagnoseAssess"
                    placeholder="请选择"
                    @click="showOptions('diagnoseAssess', resultSelectOption.dictMap[diseaseType])"
                    :rules="rules.requiredSelect"
                />
            </template>


            <van-popup v-model:show="resultSelectOption.show" position="bottom">
                <div class="pt-4 pb-4 popup-checkbox">
                    <div class="flex justify-between pb-2">
                        <button class="van-picker__cancel van-haptics-feedback" @click="optionCancel">取消</button>
                        <span class="text-16" >请选择 {{ resultSelectOption.formType === 'radio' ? '（仅单选）' : '（可多选）' }}</span>
                        <div v-if="resultSelectOption.formType === 'radio'" style="width: .32rem;"></div>
                        <button v-else class="van-picker__confirm van-haptics-feedback" @click="optionConfirm">确认</button>
                    </div>
                    <div class="bottom-small-line"></div>
                    <CheckBtn v-if="resultSelectOption.formType === 'radio'"
                        v-model:value="resultSelectOption.value"
                        :options="resultSelectOption.array"
                        round column-1
                        class="py-3 px-4"
                        activeStyleNone :clearable="false"
                        @change="optionChange"/>

                    <CheckBtn v-else
                        v-model:value="resultSelectOption.value"
                        :options="resultSelectOption.array"
                        multiple round column-1
                        class="py-3 px-4" />
                </div>
            </van-popup>
        </van-form>

        <div class='mt-5 mb-2' style="color: #595959;">是否进行检验</div>
        <van-field :border="false"
            name="isInspect"
            style="padding: 0"
            :rules="rules.requiredSelect">
            <template #input>
                <van-radio-group v-model="form.isInspect"
                    direction="horizontal"
                    shape="dot"
                    class="w-full doc-radio-group">
                    <van-radio v-for="item in store.getDict('CP00120')"
                        :key="item.value" :name="item.value"
                        label-position="left">{{item.name}}</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <InstpectCommon v-if="form.isInspect == 1"
            :disease="diseaseType"
            :imageVisible="true"
            :info="inspectInfo"
            ref="inspect"/>

        <div class='mt-5 mb-2' style="color: #595959;">是否进行检查</div>
        <van-field :border="false"
            name="isCheck"
            style="padding: 0"
            :rules="rules.requiredSelect">
            <template #input>
                <van-radio-group v-model="form.isCheck"
                    direction="horizontal"
                    shape="dot"
                    class="w-full doc-radio-group">
                    <van-radio v-for="item in store.getDict('CP00120')"
                        :key="item.value" :name="item.value"
                        label-position="left">{{item.name}}</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <CheckCommon v-if="form.isCheck == 1"
           :disease="diseaseType"
           :info="checkInfo"
           ref="check"/>
        <DoctorInfo :info="info" ref="DoctorInfo"/>
    </div>
</template>

<script>
import { useStore } from '@/doctor/store'
import { fetchDataHandle } from '@/utils/common.js'
import InstpectCommon from '../common/Instpect.vue'
import CheckCommon from '../common/Check.vue'
import DiagnosePicker from './DiagnosePicker.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import DoctorInfo from './DoctorInfo.vue'
import dayjs from 'dayjs'

const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
        residentInfoId: undefined,
        // 纳入管理日期
        manageDate: undefined,
        // 诊断名称code
        icdCode: undefined,
        diseaseName: undefined,
        // 诊断日期
        diseaseDate: undefined,
        // 诊断评估
        // 用于单选
        diagnoseAssess: undefined,
        diagnoseAssessName: undefined,
        // 高血压危险分层 出血性脑卒中
        diagnoseLevel: undefined,
        diagnoseLevelName: undefined,
        // 用于多选
        diagnoseResult: [],
        diagnoseResultName: undefined,
        // 是否需要检查
        isInspect: 2,
        // 是否需要检查
        isCheck: 2,
        diseaseType: undefined,
        checkItem: undefined,
        checkItemName: undefined,
        inspectItem: undefined,
        inspectItemName: undefined,
        source: undefined,
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return form
}

export default {
    components: {
        InstpectCommon,
        CheckCommon,
        DiagnosePicker,
        CheckBtn,
        DoctorInfo
    },
    props: {
        info: { default: () => ({}) }
    },
    data() {
        return {
            store: useStore(),
            form: defaultForm(),
            // 纳入管理日期
            dateRange: {
                min: undefined,
                max: undefined
            },
            rules: {
                requiredSelect: [{ required: true, message: '请选择' }],
                requiredInput: [{ required: true, message: '请输入' }]
            },
            // 诊断名称
            showIcd: false,
            // 诊断评估 选择配置
            resultSelectOption: {
                show: false,
                formType: '', // radio checkbox
                field: '', // diagnoseAssess diagnoseLevel diagnoseResult
                array: [],
                name: '',
                value: undefined,
                dictMap: {
                    2: 'CP00101',
                    3: 'CP00102',
                    5: 'CP00105',
                    6: 'CP00106',
                    7: 'CP00095'
                }
            },
            // 日期选择选择
            dateOption: {
                show: false,
                field: ''
            }
        }
    },
    computed: {
        diseaseType() {
            return this.info.diseaseType
        },
        // 检查项
        checkList() {
            const diagnoseInspectList = this.info.diagnoseInspectList || []
            return diagnoseInspectList.filter(e => e.projectType === 1)
        },
        // 检验项
        inspectList() {
            const diagnoseInspectList = this.info.diagnoseInspectList || []
            return diagnoseInspectList.filter(e => e.projectType === 0)
        },
        // 检验项图片
        inspectFileList() {
            return this.info.inspectFileList || []
        },
        inspectInfo() {
            const projects = [], insTypes = []
            this.inspectList.forEach(e => {
                const pList = e.inspectDetailed ? JSON.parse(e.inspectDetailed) : []
                const iList = pList.map( i => i.insType) || []
                projects.push(...pList)
                insTypes.push(...iList)
            })
            return {
                image: this.info.inspectFile || '',
                imageData: this.info.inspectFileList || [],
                items: projects,
                inspect: Array.from(new Set(insTypes))
            }
        },
        checkInfo() {
            const insTypes = [], items = []
            this.checkList.forEach(e => {
                const pList = e.inspectDetailed ? JSON.parse(e.inspectDetailed) : []
                const iList = pList.map( i => i.insType) || []
                insTypes.push(...iList)
                if (e.inspectFile) {
                    items.push({
                        itemValue: e.inspectFile,
                        itemType: 5,
                        inspectFile: e.inspectFile,
                        inspectFileList: e.inspectFileList,
                        insType: pList[0]?.insType,
                        insName: pList[0]?.insName,
                        itemCode: pList[0]?.insType + '-2'
                    })
                }
                //未上传图片并存在结论的数据
                items.push({
                    itemValue: pList[0]?.itemValue,
                    itemType: 1,
                    inspectFile: undefined,
                    inspectFileList: [],
                    insType: pList[0]?.insType,
                    insName: pList[0]?.insName,
                    itemCode: pList[0]?.itemCode
                })
            })
            return {
                items,
                check: Array.from(new Set(insTypes))
            }
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            const date = dayjs()
            this.form.manageDate = date.format('YYYY-MM-DD')
            // this.form._manageDate = [date.year(), date.month() + 1, date.date()]
            this.dateRange.max = new Date(date.year(), date.month(), date.date())
            this.dateRange.min = new Date(date.year() - 20, date.month(), date.date())

        },
        async submit() {
            try {
                this.$refs.form.validate()
                if (this.form.diseaseType === 4) {
                    const diagnoseResult = this.form.diagnoseResult || []
                    if (!diagnoseResult.length && !this.form.diagnoseLevel) {
                        this.$message.info('请在 缺血性脑卒中 和 出血性脑卒中 中选择一项填写')
                        this.$refs.form.scrollToField('diagnoseResult')
                        return
                    }
                }
                this.form.diagnoseInspectList = []
                if (this.form.isInspect === 1) {
                    let { inspect: inspectItems, data, image} = await this.$refs.inspect.submit()
                    let inspectObj = {}
                    for (let item of data) {
                        if (inspectObj[item.insType] === void 0) {
                            inspectObj[item.insType] = []
                        }
                        const insItem = {
                            insType: item.insType,
                            insName: item.insName,
                            itemCode: item.itemCode,
                            itemName: item.itemName,
                            itemType: item.itemType,
                            itemValue: item.itemValue,
                            unit: item.unit
                        }
                        inspectObj[item.insType].push(insItem)
                    }
                    for (let diagType in inspectObj) {
                        let diagInspect = {
                            projectType: 0,
                            diagnoseType: diagType,
                            diagnoseName: inspectObj[diagType][0].insName,
                            inspectDetailed: JSON.stringify(inspectObj[diagType])
                        }
                        // inspectItems.push(inspectObj[diagType][0].insType)
                        this.form.diagnoseInspectList.push(diagInspect)
                    }
                    this.form.inspectItem = inspectItems
                    this.form.inspectFile = image
                }
                if (this.form.isCheck === 1) {
                    let { check: checkItems, data } = await this.$refs.check.submit()
                    let checkObj = {}, fileObj = {}
                    for (let item of data) {
                        if (item.itemType === 5 && item.itemValue !== void 0 && item.itemValue !== '') {
                            fileObj[item.insType] = item.itemValue
                        } else {
                            if (checkObj[item.insType] === void 0) {
                                checkObj[item.insType] = []
                            }
                            let checkItem = {
                                insType: item.insType,
                                insName: item.insName,
                                itemCode: item.itemCode,
                                itemName: item.itemName,
                                itemType: item.itemType,
                                itemValue: item.itemValue
                            }
                            checkObj[item.insType].push(checkItem)
                        }
                    }
                    for (let diagType in checkObj) {
                        let diagCheck = {
                            projectType: 1,
                            diagnoseType: diagType,
                            diagnoseName: checkObj[diagType][0].insName,
                            inspectDetailed: JSON.stringify(checkObj[diagType]),
                            inspectFile: fileObj[diagType]
                        }
                        // checkItems.push(checkObj[diagType][0].insType);
                        this.form.diagnoseInspectList.push(diagCheck)
                    }
                    this.form.checkItem = checkItems
                }
                const doctorInfo = await this.$refs.DoctorInfo.submit()
                let query = fetchDataHandle(this.form, {
                    diagnoseResult: 'arrToStr'
                })
                return {
                    ...query,
                    ...doctorInfo
                }
            } catch(err) {
                this.$message.info('表单校验不通过')
                const array = err || []
                if (array.length) {
                    this.$refs.form.scrollToField(array[0].name)
                }
            }
        },
        // 日期确定
        dateConfirm({ selectedValues }) {
            this.form[this.dateOption.field] = selectedValues.join('-')
            this.dateOption.show = false
        },
        // 诊断名称
        icdChange(option) {
            this.form.diseaseName = option.diseaseName
        },
        // 日期选择
        showDate(field) {
            if (field === 'manageDate' && this.info.manageDate) return
            this.dateOption.field = field
            this.dateOption.show = true
        },
        // 诊断评估 选择配置
        showOptions(field, dict, formType = 'radio') {
            this.resultSelectOption.field = field
            this.resultSelectOption.formType = formType
            this.resultSelectOption.array = this.store.getDict(dict)
            this.resultSelectOption.value = this.form[field]
            this.resultSelectOption.show = true
        },
        optionCancel() {
            this.resultSelectOption.show = false
            this.resultSelectOption.value = undefined
        },
        optionConfirm() {
            const field = this.resultSelectOption.field
            const fieldName = field + 'Name'
            this.form[field] = this.resultSelectOption.value
            console.log('this.form[field]', this.form[field])
            this.form[fieldName] = this.resultSelectOption.array.map(e => {
                return this.form[field].includes(e.value) ? e.name : ''
            }).filter(e => e).join('、')
            this.resultSelectOption.show = false
            this.resultSelectOption.value = undefined
        },
        optionChange(val, option) {
            const field = this.resultSelectOption.field
            const fieldName = field + 'Name'
            this.form[field] = val
            this.form[fieldName] = option.name
            this.resultSelectOption.show = false
            this.resultSelectOption.value = undefined
        },
        // 处理诊断评估字段回显
        fieldNameHandler() {
            const mark = this.diseaseType
            if (mark == 1) {
                this.form.diagnoseAssessName = this.store.getDictValue('CP00096', this.form.diagnoseAssess)
                this.form.diagnoseLevelName = this.store.getDictValue('CP00097', this.form.diagnoseLevel)
            } else if ([2, 3].includes(mark)) {
                this.form.diagnoseResultName = this.store.getDictValue(this.resultSelectOption.dictMap[mark], this.form.diagnoseResult)
            } else if (mark == 4) {
                this.form.diagnoseResultName = this.store.getDictValue('CP00103', this.form.diagnoseResult)
                this.form.diagnoseLevelName = this.store.getDictValue('CP00104', this.form.diagnoseLevel)
            } else if ([5, 6, 7].includes(mark)) {
                this.form.diagnoseAssessName = this.store.getDictValue(this.resultSelectOption.dictMap[mark], this.form.diagnoseAssess)
            }
        }
    },
    watch: {
        info: {
            handler(info) {
                this.form = defaultForm(info)
                this.fieldNameHandler()
            },
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>

</style>