web_dist/src/views/med-tec-mod/YiJiFeiYongLuRu.vue

<template>
    <el-container>
        <el-main style="margin-top: 10px">
            <el-row>
                <el-col>
                    <el-tag effect="dark" size="small">住院号: {{ patient.inpatientNo }}</el-tag>
                    <el-tag effect="dark" size="small" type="warning">患者姓名: {{ patient.name }}</el-tag>
                    <el-tag effect="dark" size="small"> 床号: {{ patient.bedNo }}</el-tag>
                    <el-tag effect="dark" size="small" type="warning">住院次数: {{ patient.admissTimes }}</el-tag>
                    <el-tag effect="dark" size="small">性别: {{ cptSex(patient.sex) }}</el-tag>
                    <el-tag effect="dark" size="small" type="warning">病房: {{ patient.wardName }}</el-tag>
                    <el-tag effect="dark" size="small">入院日期: {{ patient.admissDate }}</el-tag>
                    <el-tag effect="dark" size="small" type="warning">医保身份: {{ patient.responceTypeName }}</el-tag>
                    <el-tag effect="dark" size="small">总费用: {{ patient.totalCharge }}</el-tag>
                </el-col>
                <el-col>
                    住院号：
                    <el-input style="width: 80px" v-model="queryTerm.inpatientNo"
                              @keyup.enter="getHuanZheXinXiClick"></el-input>
                    <span v-show="queryTerm.zaiHuanChuYuan === 1">
        住院次数：<el-input-number :min="0" :precision="0" style="width: 60px" v-model="queryTerm.admissTimes"
                                  :controls="false"></el-input-number>
      </span>
                    <el-divider direction="vertical"></el-divider>
                    <el-switch active-color="#ff4949" inactive-color="#13ce66" active-text="出院" inactive-text="在院"
                               :active-value="1"
                               :inactive-value="0" v-model="queryTerm.zaiHuanChuYuan">
                    </el-switch>
                    <el-divider direction="vertical"></el-divider>
                    项目名称：
                    <el-select v-model="queryTerm.chargeCode" remote filterable clearable
                               :remote-method="remoteMethodChargeCode">
                        <el-option v-for="item in chargeCodeNameData" :key="item.code" :label="item.name"
                                   :value="item.code">
                            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>{{ item.name }}</span>
                        </el-option>
                    </el-select>
                    录入日期：
                    <el-date-picker
                            type="daterange"
                            v-model="queryTerm.dateRange"
                            placeholder="选择日期"
                            style="width: 200px"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :shortcuts="shortcuts"
                    ></el-date-picker>
                    <el-button
                            @click="queryTerm.riQiPaiXu === 'DESC' ? (queryTerm.riQiPaiXu = 'ASC') : (queryTerm.riQiPaiXu = 'DESC')"
                            type="success"
                            :icon="queryTerm.riQiPaiXu === 'DESC' ? 'CaretBottom' : 'CaretTop'"
                    >{{ queryTerm.riQiPaiXu === 'DESC' ? '降序' : '升序' }}
                    </el-button>
                    <el-select style="width: 70px" v-model="queryTerm.feiYongLeiXingCode">
                        <el-option v-for="item in feiYongLeiXing" :key="item.code" :label="item.name"
                                   :value="item.code">
                            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>{{ item.name }}</span>
                        </el-option>
                    </el-select>
                    <el-select v-model="queryTerm.orderNo" style="width: 70px" @change="queryHuanZheFeiYong">
                        <el-option v-for="item in yiZhuTuiFeiLeiXing" :key="item.code" :label="item.name"
                                   :value="item.code">
                            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>{{ item.name }}</span>
                        </el-option>
                    </el-select>
                    <el-select v-model="queryTerm.tuiFeiFlag" style="width: 70px" @change="queryHuanZheFeiYong">
                        <el-option v-for="item in tuiFeiLeiXin" :key="item.code" :label="item.name" :value="item.code">
                            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>{{ item.name }}</span>
                        </el-option>
                    </el-select>

                    <el-select v-model="queryTerm.dept" style="width: 100px">
                        <el-option v-for="(value,key) in deptList"
                                   :value="key" :label="value"/>
                    </el-select>
                    <el-button type="primary" @click="getHuanZheXinXiClick">查询</el-button>
                </el-col>
            </el-row>

            <el-tabs v-model="elTabPane">
                <el-tab-pane label="已录入费用" name="ylrfy">
                    <huan-zhe-fei-yong
                            :init="tableDataHuanZheFeiYong"
                            :patient="patient"
                            @queryFeiYong="getHuanZheXinXiClick"
                            @size="handleSizeChange"
                            @current="handleCurrentChange"
                            @execl="exportExecl"
                    ></huan-zhe-fei-yong>
                </el-tab-pane>
                <el-tab-pane label="费用录入" name="fylr">
                    <xiang-mu-lu-ru :patient="patient"></xiang-mu-lu-ru>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script>
import {ref} from 'vue'
import store from '@/store'
import {getHuanZheXinXi} from '@/api/zhu-yuan-yi-ji/yi-ji-fei-yong-lu-ru'
import {cptSex} from '@/utils/computed'
import {getChargeCode} from '@/api/inpatient/xiang-mu-lu-ru'
import {getHuanZheFeiYong} from '@/api/inpatient/xiang-mu-lu-ru'
import HuanZheFeiYong from '@/components/med-tec-mod/HuanZheFeiYong.vue'
import XiangMuLuRu from '@/components/med-tec-mod/YiJiXiangMuLuRu.vue'
import {yiZhuTuiFeiLeiXing, feiYongLeiXing, tuiFeiLeiXin} from '@/data'
import {shortcuts} from '@/data/shortcuts'
import {getDateRangeFormatDate} from '@/utils/date'
import {ElMessage, ElMessageBox} from 'element-plus'
import {downloadExcel} from '@/utils/excel'

export default {
    components: {HuanZheFeiYong, XiangMuLuRu},
    name: 'yiJiFeiYongLuRu',
    setup() {
        const windowSize = store.state.app.windowSize
        const windowHeigth = windowSize.h
        const dangQianShiJian = new Date()

        const deptList = store.state.user.info.partTimeDeptMap

        const queryTerm = ref({
            inpatientNo: '',
            admissTimes: 0,
            zaiHuanChuYuan: '',
            dateRange: [dangQianShiJian, dangQianShiJian],
            riQiPaiXu: 'DESC',
            chargeCode: '',
            orderNo: 2,
            feiYongLeiXingCode: 0,
            dept: store.state.user.info.deptCode === '3100000' ? '' : store.state.user.info.deptCode,
            currentPage: 1,
            pageSize: 30,
            total: 0,
            tuiFeiFlag: 0,
        })

        const total = ref(0)

        const elTabPane = ref('ylrfy')
        const patient = ref({})

        const tableDataHuanZheFeiYong = ref([])

        const getHuanZheXinXiClick = () => {
            if (queryTerm.value.zaiHuanChuYuan === 0) {
                queryTerm.value.admissTimes = 0
            }
            if (patient.inpatientNo === queryTerm.value.inpatientNo) {
                queryHuanZheFeiYong()
            } else {
                getHuanZheXinXi(queryTerm.value.inpatientNo, queryTerm.value.zaiHuanChuYuan, queryTerm.value.admissTimes)
                    .then((res) => {
                        patient.value = res
                        patient.value.feiYongLeiXingCode = queryTerm.value.feiYongLeiXingCode
                        queryTerm.value.admissTimes = res.admissTimes
                        queryHuanZheFeiYong()
                    })
                    .catch(() => {
                        patient.value = {}
                        tableDataHuanZheFeiYong.value = []
                    })
            }
        }

        const queryHuanZheFeiYong = () => {
            if (elTabPane.value !== 'ylrfy') return
            let dateRangeS = getDateRangeFormatDate(queryTerm.value.dateRange)
            queryTerm.value.startTime = dateRangeS.startTime
            queryTerm.value.endTime = dateRangeS.endTime
            queryTerm.value.currentPage = 1
            queryTerm.value.total = 0
            getHuanZheFeiYong(queryTerm.value)
                .then((res) => {
                    total.value = res.total
                    patient.value.total = total.value
                    tableDataHuanZheFeiYong.value = res
                })
                .catch(() => {
                    tableDataHuanZheFeiYong.value = []
                })
        }

        const handleHuanZheFeiYong = () => {
            if (elTabPane.value !== 'ylrfy') return
            let dateRangeS = getDateRangeFormatDate(queryTerm.value.dateRange)
            queryTerm.value.startTime = dateRangeS.startTime
            queryTerm.value.endTime = dateRangeS.endTime
            queryTerm.value.total = total.value
            getHuanZheFeiYong(queryTerm.value)
                .then((res) => {
                    res.total = total.value
                    tableDataHuanZheFeiYong.value = res
                })
                .catch(() => {
                    tableDataHuanZheFeiYong.value = []
                })
        }

        // 根据项目名称来查询
        const chargeCodeNameData = ref([])

        /**
         * 远程搜索
         */
        const remoteMethodChargeCode = (val) => {
            if (val.length >= 2) {
                getChargeCode(val).then((res) => {
                    chargeCodeNameData.value = res
                })
            }
        }

        // 分页
        const handleSizeChange = (val) => {
            queryTerm.value.pageSize = val.val
            patient.value.pageSize = val.val
            queryHuanZheFeiYong()
        }

        const handleCurrentChange = (val) => {
            queryTerm.value.currentPage = val.val
            handleHuanZheFeiYong()
        }

        // 导出excel 表格
        const exportExecl = () => {
            if (total.value > 0) {
                ElMessageBox.prompt('导出文件名字', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '文件名不能为空 (∩•̀ω•́)⊃-*⋆',
                })
                    .then(({value}) => {
                        queryTerm.value.total = total.value
                        const data = {
                            param: queryTerm.value,
                            url: '/xmlr/exportExcel',
                            fileName: `${value}.xlsx`,
                        }
                        setTimeout(() => {
                            downloadExcel(data)
                        }, 500)
                    })
                    .catch((e) => {
                    })
            } else {
                ElMessage.error('请先查询出数据')
            }
        }

        return {
            windowHeigth,
            queryTerm,
            getHuanZheXinXiClick,
            tableDataHuanZheFeiYong,
            patient,
            cptSex,
            queryHuanZheFeiYong,
            chargeCodeNameData,
            remoteMethodChargeCode,
            elTabPane,
            yiZhuTuiFeiLeiXing,
            tuiFeiLeiXin,
            shortcuts,
            feiYongLeiXing,
            handleSizeChange,
            handleCurrentChange,
            exportExecl,
            deptList,
        }
    },
}
</script>

<style></style>