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

<template>
  <el-container>
    <el-header style="margin-top: 8px">
      <el-tag effect="dark">住院号: {{ patient.inpatientNo }}</el-tag>
      <el-tag effect="dark" type="warning">患者姓名: {{ patient.name }}</el-tag>
      <el-tag effect="dark">床号: {{ patient.bedNo }}</el-tag>
      <el-tag effect="dark" type="warning">住院次数: {{ patient.admissTimes }}</el-tag>
      <el-tag effect="dark">性别: {{ cptSex(patient.sex) }}</el-tag>
      <el-tag effect="dark" type="warning">病房: {{ patient.wardName }}</el-tag>
      <el-tag effect="dark">入院日期: {{ patient.admissDate }}</el-tag>
      <el-tag effect="dark" type="warning">医保身份: {{ patient.responceTypeName }}</el-tag>
      <el-tag effect="dark">总费用: {{ patient.totalCharge }}</el-tag
      ><br />
      住院号：<el-input size="mini" style="width: 160px" placeholder="请输入住院号" v-model="queryTerm.inpatientNo" @keyup.enter="getHuanZheXinXiClick"></el-input>
      <span v-show="queryTerm.zaiHuanChuYuan === 1">
        住院次数：<el-input-number
          size="mini"
          :min="0"
          :precision="0"
          style="width: 60px"
          placeholder="请输入住院次数"
          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" size="mini" 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="选择日期"
        size="mini"
        style="width: 200px"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
      ></el-date-picker>
      <el-button
        size="mini"
        @click="queryTerm.riQiPaiXu === 'DESC' ? (queryTerm.riQiPaiXu = 'ASC') : (queryTerm.riQiPaiXu = 'DESC')"
        type="success"
        :icon="queryTerm.riQiPaiXu === 'DESC' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
        >{{ queryTerm.riQiPaiXu === 'DESC' ? '降序' : '升序' }}</el-button
      >
      <el-select style="width: 100px" size="mini" 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: 100px" size="mini" @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-button size="mini" type="primary" @click="getHuanZheXinXiClick">查询</el-button>
    </el-header>
    <el-container>
      <el-main style="margin-top: 10px">
        <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"
            ></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>
  </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 Cookie from 'js-cookie'
import { getChargeCode } from '@/api/yibao/xiang-mu-lu-ru'
import { getHuanZheFeiYong } from '../../api/yibao/xiang-mu-lu-ru'
import HuanZheFeiYong from './components/HuanZheFeiYong.vue'
import XiangMuLuRu from './components/YiJiXiangMuLuRu.vue'
import { yiZhuTuiFeiLeiXing, feiYongLeiXing } from '@/data/index'
import { shortcuts } from '@/data/shortcuts'
import { getDateRangeFormatDate } from '../../utils/date'
export default {
  components: { HuanZheFeiYong, XiangMuLuRu },
  name: 'yiJiFeiYongLuRu',
  setup() {
    const windowSize = store.state.app.windowSize
    const windowHeigth = windowSize.h

    const queryTerm = ref({
      inpatientNo: '',
      admissTimes: 0,
      zaiHuanChuYuan: '',
      dateRange: shortcuts[2].value,
      riQiPaiXu: 'DESC',
      chargeCode: '',
      orderNo: 0,
      feiYongLeiXingCode: 0,
      dept: Cookie.get('dept') === '3100000' ? '' : Cookie.get('dept'),
      currentPage: 1,
      pageSize: 30,
    })

    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
            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.stratTime
      queryTerm.value.endTime = dateRangeS.endTime
      queryTerm.value.currentPage = 1
      getHuanZheFeiYong(queryTerm.value)
        .then((res) => {
          tableDataHuanZheFeiYong.value = res
        })
        .catch(() => {
          tableDataHuanZheFeiYong.value = []
        })
    }

    const handleHuanZheFeiYong = () => {
      if (elTabPane.value !== 'ylrfy') return
      let dateRangeS = getDateRangeFormatDate(queryTerm.value.dateRange)
      queryTerm.value.startTime = dateRangeS.stratTime
      queryTerm.value.endTime = dateRangeS.endTime
      getHuanZheFeiYong(queryTerm.value)
        .then((res) => {
          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
      handleHuanZheFeiYong()
    }

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

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

<style></style>