web_dist/src/views/clinic/TransferInOfExpenses.vue

<template>
  <el-container style="margin-right: 10px">
    <el-header height="36px" style="margin-top: 8px">
      <el-input
          size="small"
          placeholder="在此输入住院号"
          clearable
          prefix-icon="el-icon-search"
          style="width: 300px"
          @keyup.enter="queryClick"
          @blur="inpatientNo = $event.target.value.trim()"
          v-model="inpatientNo"
      >
        <template #prepend>住院号</template>
      </el-input>
      <el-button style="margin-left: 10px" type="primary" @click="queryClick">查询患者信息</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-input
          size="small"
          placeholder="在此输入机制号"
          clearable
          @keyup.enter="querySerialNo"
          prefix-icon="el-icon-search"
          style="width: 300px"
          v-model="serialNo"
          onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
          @blur="serialNo = $event.target.value.trim()"
      >
        <template #prepend>机制号</template>
      </el-input>
      <el-select size="small" v-model="liShiFlag">
        <el-option v-for="item in chaKanLiShi" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-button style="margin-left: 10px" type="primary" @click="querySerialNo">查询机制号信息</el-button>
      <el-button style="margin-left: 10px" type="warning" @click="huanZheFeiYongDrawer = true">查看患者费用</el-button>
      <el-button style="margin-left: 10px" type="success" @click="baoCunClick">保存</el-button>
    </el-header>
    <el-main>
      <div>
        <el-descriptions border title="基本信息">
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              患者姓名
            </template>
            {{ huanZheXinXi.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              住院次数
            </template>
            {{ huanZheXinXi.admissTimes }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user-solid"></i>
              性别
            </template>
            {{ cptSex(huanZheXinXi.sex) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-house"></i>
              床号
            </template>
            {{ huanZheXinXi.bedNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-s-home"></i>
              病房
            </template>
            {{ huanZheXinXi.wardName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-date"></i>
              入院日期
            </template>
            {{ huanZheXinXi.admissDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-tickets"></i>
              身份
            </template>
            {{ huanZheXinXi.responceTypeName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-coin"></i>
              总费用
            </template>
            {{ huanZheXinXi.totalCharge }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-coin"></i>
              余额
            </template>
            <span style="color: red">{{ huanZheXinXi.balance }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      收费日期：
      <el-date-picker type="datetime" v-model="chargeDate"></el-date-picker>
      <div style="width: 100%">
        <div style="float: left; width: 45%">
          <el-table :height="windowHeight / 1.4" highlight-current-row :data="mzXinXiList"
                    @selection-change="mzSelectChecked"
                    ref="multipleTable">
            <el-table-column label="门诊发票信息">
              <el-table-column label="项目名称" prop="itemName"></el-table-column>
              <el-table-column label="收费编码" prop="chargeCode"></el-table-column>
              <el-table-column label="数量" prop="chargeAmount"></el-table-column>
              <el-table-column label="单价" prop="price"></el-table-column>
              <el-table-column label="金额" prop="chargeFee"></el-table-column>
              <el-table-column label="选择" width="60" type="selection"></el-table-column>
            </el-table-column>
          </el-table>
          <el-tag>合计:{{ mzSum }}</el-tag>
        </div>
        <div style="width: 9%; float: left; margin-left: 4px; text-align: center"
             :style="{ lineHeight: windowHeight / 1.4 + 'px' }">
          <el-button icon="el-icon-right" type="primary"></el-button>
        </div>
        <div style="float: right; width: 45%">
          <el-table :height="windowHeight / 1.4" stripe :data="zyXinXiList">
            <el-table-column label="住院收费项目">
              <el-table-column label="项目名称" prop="itemName"></el-table-column>
              <el-table-column label="收费编码" prop="chargeCode"></el-table-column>
              <el-table-column label="数量" prop="chargeAmount"></el-table-column>
              <el-table-column label="单价" prop="price"></el-table-column>
              <el-table-column label="金额" prop="chargeFee"></el-table-column>
            </el-table-column>
          </el-table>
          <el-tag>合计:{{ zySum }}</el-tag>
        </div>
      </div>
      <el-drawer title="查看患者通过急门诊转入的费用" v-model="huanZheFeiYongDrawer" size="50%">
        <div style="margin-left: 20px">
          <el-input
              placeholder="住院号"
              clearable
              style="width: 200px"
              @keyup.enter="getZyJiMenZhenZhuangRuFeiYongClick"
              v-model="inpatientNo"
              @blur="inpatientNo = $event.target.value.trim()"
          >
            <template #prepend>住院号</template>
          </el-input>
          <el-divider direction="vertical"></el-divider>
          项目名称：
          <el-select v-model="chargeCodeMX" placeholder="根据拼音首字母查找" filterable clearable remote
                     :remote-method="remoteMethodEntryName">
            <el-option v-for="item in entryNameList" :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-divider direction="vertical"></el-divider>
          <el-button @click="getZyJiMenZhenZhuangRuFeiYongClick" type="primary">查询</el-button>
          <el-table :data="zyDetailChargeList" :height="windowHeight / 1.1">
            <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
            <el-table-column label="流水号" prop="detailSn"></el-table-column>
            <el-table-column label="收费日期" width="80" prop="chargeDate"></el-table-column>
            <el-table-column label="收费代码" prop="chargeCode"></el-table-column>
            <el-table-column label="项目名称" prop="chargeCodeName" show-overflow-tooltip></el-table-column>
            <el-table-column label="费用录入日期" prop="genTime" width="80"></el-table-column>
            <el-table-column label="金额" prop="chargeFee"></el-table-column>
            <el-table-column label="数量" prop="chargeAmount"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-popconfirm
                    confirm-button-text="删除"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    iconColor="red"
                    title="是否删除该费用"
                    @confirm="shanChuFeiYongClick(scope.$index, scope.row)"
                >
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              layout="prev, pager, next, total"
              @current-change="huanZheFeiYongCurrentChange"
              :total="huanZheFeiYongTotal"
              :page-size="huanZheFeiYongPageSize"
              background
          ></el-pagination>
          <el-tag style="margin-left: 7px">合计：{{ huanZheFeiYongZongHe }}</el-tag>
        </div>
      </el-drawer>
    </el-main>
  </el-container>
</template>

<script>
import {ref} from '@vue/reactivity'
import {
  baoCunHuanZheZhuYuanFeiYong,
  getSerialNo,
  getZyJiMenZhenZhuangRuFeiYong,
  queryEntryName,
  queryHuanZhe,
  shanChuFeiYong
} from '@/api/yibao/transfer-in-of-expenses'
import {cptSex} from '@/utils/computed'
import store from '@/store'
import {computed} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {formatDatetime} from '../../utils/date'

export default {
  name: 'TransferInOfExpenses',
  setup() {
    const windowSize = store.state.app.windowSize
    const windowHeight = windowSize.h

    //查询条件
    //住院号
    const inpatientNo = ref('') // 016868
    //机制号
    const serialNo = ref('') // 11516328
    //是否查看历史记录
    const liShiFlag = ref(0)
    //收费代码
    const chargeCodeMX = ref('')
    // 住院次数
    const admissTimes = ref('')

    const huanZheXinXi = ref({})

    const mzXinXiList = ref([])
    const zyXinXiList = ref([])

    //查询患者信息
    const queryClick = () => {
      if (!inpatientNo.value) {
        ElMessage({
          type: 'warning',
          message: '请先输入患者住院号',
          showClose: true,
          duration: 2500,
        })
        return
      }
      queryHuanZhe(inpatientNo.value).then((res) => {
        huanZheXinXi.value = res
        admissTimes.value = res.admissTimes
      })
    }

    //查询机制号
    const querySerialNo = () => {
      if (!serialNo.value) {
        ElMessage({
          type: 'warning',
          message: '请先输入机制号',
          showClose: true,
          duration: 2500,
        })
        return
      }
      getSerialNo(serialNo.value, liShiFlag.value)
          .then((res) => {
            mzXinXiList.value = res
          })
          .catch(() => {
            mzXinXiList.value = []
          })
    }

    //定义用来删除 多选框的选中状态 以及点击选中多选框
    const multipleTable = ref(null)
    //点击多选框，把里面的内容添加进去
    const mzSelectChecked = (selection, row) => {
      zyXinXiList.value = selection
    }

    //门诊发票信息 金额总和
    let mzSum = computed(() => {
      let sum = 0
      mzXinXiList.value.forEach((item) => {
        sum += item.price * item.chargeAmount
      })
      return sum.toFixed(2)
    })
    //住院收费项目 金额总和
    let zySum = computed(() => {
      let he = 0
      zyXinXiList.value.forEach((item) => {
        he += item.price * item.chargeAmount
      })
      return he.toFixed(2)
    })

    const huanZheFeiYongDrawer = ref(false)

    const HuanZheFeiYongCurrentPage = ref(1)
    const huanZheFeiYongPageSize = ref(10)
    const huanZheFeiYongTotal = ref(0)
    const huanZheFeiYongZongHe = ref(0)

    //住院患者的费用信息
    const zyDetailChargeList = ref([])

    let resInpatientNo = null
    let resChargeCodeMx = null

    //点击查询患者 门急诊转入的费用 在定义两个字段，用来分页的时候就算输入框没值了 也能拿到数据
    const getZyJiMenZhenZhuangRuFeiYongClick = () => {
      if (!admissTimes.value) {
        ElMessage.warning({
          message: '请先查询出患者信息',
          showClose: true,
          duration: 2500,
        })
        return
      }
      //通过住院号和项目编码 获取住院门诊装入费用
      getZyJiMenZhenZhuangRuFeiYong(inpatientNo.value, chargeCodeMX.value, admissTimes.value, HuanZheFeiYongCurrentPage.value, huanZheFeiYongPageSize.value).then((res) => {
        resInpatientNo = inpatientNo.value
        resChargeCodeMx = chargeCodeMX.value
        zyDetailChargeList.value = res.data
        huanZheFeiYongTotal.value = res.total
        huanZheFeiYongZongHe.value = res.sum
      })
    }

    //点击上下分页触发的事件
    const huanZheFeiYongCurrentChange = (val) => {
      HuanZheFeiYongCurrentPage.value = val
      if (zyDetailChargeList.value) {
        getZyJiMenZhenZhuangRuFeiYong(resInpatientNo, resChargeCodeMx, admissTimes.value, HuanZheFeiYongCurrentPage.value, huanZheFeiYongPageSize.value).then((res) => {
          zyDetailChargeList.value = res.data
          huanZheFeiYongTotal.value = res.total
        })
      }
    }

    //删除住院收费项目 前端删除 后端也删除 只是不执行一个查找的动作了
    const shanChuFeiYongClick = (index, val) => {
      shanChuFeiYong(val).then((res) => {
        zyDetailChargeList.value.splice(index, 1)
      })
    }
    //点击保存触发的事件
    const baoCunClick = () => {
      console.log(chargeDate.value)
      if (chargeDate.value === null) {
        chargeDate.value = new Date()
      }
      huanZheXinXi.value.chargeDate = formatDatetime(chargeDate.value)
      if (typeof huanZheXinXi.value.inpatientNo === 'undefined') {
        ElMessage({
          type: 'warning',
          message: '请先选择患者',
          showClose: true,
          duration: 2500,
        })
        return
      }

      if (zyXinXiList.value.length === 0) {
        ElMessage({
          type: 'warning',
          message: '请先选择要添加的费用',
          showClose: true,
          duration: 2500,
        })
        return
      }
      huanZheXinXi.value.list = zyXinXiList.value

      if (huanZheXinXi.value.chargeDate === '') {
        return ElMessage.error({
          message: '请选择日期',
        })
      }
      for (let i = 0; mzXinXiList.value.length; i++) {
        if (huanZheXinXi.value.name !== mzXinXiList.value[i].patientName && typeof mzXinXiList.value[i].patientName !== 'undefined') {
          return ElMessageBox.confirm('', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            type: 'warning',
            message: `门诊病人姓名【'   ${mzXinXiList.value[i].patientName}  '】住院病人姓名【'  ${huanZheXinXi.value.name}  '】不一致,是否继续？<br>收费日期：${huanZheXinXi.value.chargeDate}`,
          })
              .then(() => {
                baoCunHuanZheZhuYuanFeiYong(huanZheXinXi.value).then((res) => {
                  zyXinXiList.value = []
                  mzXinXiList.value = []
                })
              })
              .catch(() => {
              })
        } else if (huanZheXinXi.value.name === mzXinXiList.value[i].patientName && typeof mzXinXiList.value[i].patientName !== 'undefined') {
          return ElMessageBox.confirm('', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            type: 'warning',
            message: `收费日期：${huanZheXinXi.value.chargeDate}`,
          })
              .then(() => {
                baoCunHuanZheZhuYuanFeiYong(huanZheXinXi.value).then((res) => {
                  zyXinXiList.value = []
                  mzXinXiList.value = []
                })
              })
              .catch(() => {
              })
        }
      }
    }
    //项目名称 数组
    const entryNameList = ref([])

    //远程搜索项目名称
    const remoteMethodEntryName = (val) => {
      if (val.length >= 2) {
        queryEntryName(val).then((res) => {
          entryNameList.value = res
        })
      }
    }

    const chargeDate = ref(new Date())

    //门诊合计
    return {
      inpatientNo,
      serialNo,
      liShiFlag,
      queryClick,
      querySerialNo,
      huanZheXinXi,
      cptSex,
      windowHeight,
      chaKanLiShi,
      mzXinXiList,
      mzSelectChecked,
      zyXinXiList,
      mzSum,
      zySum,
      huanZheFeiYongDrawer,
      HuanZheFeiYongCurrentPage,
      huanZheFeiYongPageSize,
      huanZheFeiYongCurrentChange,
      huanZheFeiYongTotal,
      getZyJiMenZhenZhuangRuFeiYongClick,
      zyDetailChargeList,
      shanChuFeiYongClick,
      chargeCodeMX,
      baoCunClick,
      multipleTable,
      remoteMethodEntryName,
      entryNameList,
      huanZheFeiYongZongHe,
      chargeDate,
    }
  },
}

let chaKanLiShi = [
  {code: 0, name: '不查看历史记录'},
  {code: 1, name: '查看历史记录'},
]
</script>

<style></style>