web_dist/src/views/clinic/TransferInOfExpenses.vue

<template>
  <div class="layout_container">
    <DefaultTemplate>
      <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>
    </DefaultTemplate>
    <ZyFeeTemplate>
      <el-tag> 住院收费项目:合计【{{ zySum }}】</el-tag>
      <el-table :data="zyXinXiList" height="100%" stripe>
        <el-table-column label="项目名称" prop="itemName"></el-table-column>
        <el-table-column label="收费编码" prop="chargeCodeMx"></el-table-column>
        <el-table-column label="数量" prop="chargeQuantity"></el-table-column>
        <el-table-column label="单价" prop="unitPrice"></el-table-column>
        <el-table-column label="金额" prop="chargeFee"></el-table-column>
      </el-table>
    </ZyFeeTemplate>

    <print-outpatient-dzfp ref="printQrCodeRef" />

    <el-dialog
      v-model="electronicPrescription.dialog"
      title="打印电子处方"
      destroy-on-close
    >
      <div style="text-align: center">
        <div>
          <img
            id="dzfpQrCode"
            :src="`data:image/png;base64,${electronicPrescription.qrCode}`"
          />
          <div></div>
        </div>
      </div>
      <template #footer>
        <el-button v-print="printObj" type="primary" size="default"
          >打印
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="saveStore.dialog" title="保存" destroy-on-close>
      <div style="color: red">收费日期： {{ huanZheXinXi.chargeDate }}</div>
      <div v-html="saveStore.message" style="color: red" />
      <PatientInfo />
      <div
        style="height: 400px; display: flex; flex-direction: column"
        class="layout_el-table"
      >
        <ZyTale />
      </div>
      <template #footer>
        <el-button v-el-btn="saveStore.func" type="primary" size="default"
          >保存
        </el-button>
      </template>
    </el-dialog>

    <header>
      住院号：
      <el-input
        v-model="inpatientNo"
        clearable
        placeholder="在此输入住院号"
        prefix-icon="Search"
        size="small"
        style="width: 150px"
        @blur="inpatientNo = $event.target.value.trim()"
        @keyup.enter="queryClick"
      >
      </el-input>
      <el-button style="margin-left: 10px" type="primary" @click="queryClick"
        >患者
      </el-button>
      <el-divider direction="vertical"></el-divider>
      机制号：
      <el-input
        v-model.number="serialNo"
        clearable
        onkeyup="this.value=this.value.replace(/\D/g,'') "
        placeholder="在此输入机制号"
        prefix-icon="Search"
        size="small"
        style="width: 150px"
        @keyup.enter="querySerialNo"
      >
      </el-input>
      <el-button style="margin-left: 10px" type="primary" @click="querySerialNo"
        >机制
      </el-button>
      <el-button @click="handleQueryQrCode"> 电子发票</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-button @click="handleOnlyChargeRed"> 仅充红</el-button>
    </header>
    <div>
      <PatientInfo />
    </div>
    <div>
      收费日期：
      <el-date-picker
        v-model="chargeDate"
        type="datetime"
        style="width: 165px"
      />
      执行科室：
      <SystemDeptSelect
        clearable
        style="width: 120px"
        v-model="huanZheXinXi.execUnit"
      />
    </div>
    <div class="layout_main layout_container layout-horizontal">
      <div class="layout_flex_1-x layout_el-table">
        <el-tag> 门诊发票信息: 合计 【{{ mzSum }}】</el-tag>
        <el-table
          ref="multipleTable"
          :data="mzXinXiList"
          highlight-current-row
          @selection-change="mzSelectChecked"
        >
          <el-table-column :label="`门诊发票信息: 合计 【${mzSum}】`">
            <el-table-column label="项目名称" prop="itemName"></el-table-column>
            <el-table-column
              label="收费编码"
              prop="chargeCodeMx"
            ></el-table-column>
            <el-table-column
              label="数量"
              prop="chargeQuantity"
            ></el-table-column>
            <el-table-column label="单价" prop="unitPrice"></el-table-column>
            <el-table-column label="金额" prop="chargeFee"></el-table-column>
            <el-table-column
              label="选择"
              type="selection"
              width="60"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <el-button icon="Right" type="primary"></el-button>
      </div>
      <div class="layout_flex_1-x layout_el-table">
        <ZyTale />
      </div>
    </div>
  </div>

  <el-drawer
    v-model="huanZheFeiYongDrawer"
    size="50%"
    title="查看患者通过急门诊转入的费用"
    destroy-on-close
  >
    <div class="layout_display_flex_y">
      <div>
        <el-input
          v-model="inpatientNo"
          clearable
          placeholder="住院号"
          style="width: 200px"
          @blur="inpatientNo = $event.target.value.trim()"
          @keyup.enter="getZyJiMenZhenZhuangRuFeiYongClick"
        >
          <template #prepend>住院号</template>
        </el-input>
        <el-divider direction="vertical"></el-divider>
        项目名称：
        <el-select
          style="width: 120px"
          v-model="chargeCodeMX"
          :remote-method="remoteMethodEntryName"
          clearable
          filterable
          placeholder="根据拼音首字母查找"
          remote
        >
          <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 type="primary" @click="getZyJiMenZhenZhuangRuFeiYongClick"
          >查询
        </el-button>
        <el-tag style="margin-left: 7px"
          >合计：{{ huanZheFeiYongZongHe }}
        </el-tag>
      </div>
      <div class="layout_flex_1-y layout_display_flex_y">
        <div class="layout_flex_1-y">
          <el-table :data="zyDetailChargeList" height="100%">
            <el-table-column
              label="住院号"
              prop="inpatientNo"
            ></el-table-column>
            <el-table-column label="流水号" prop="detailSn"></el-table-column>
            <el-table-column
              label="收费日期"
              prop="chargeDate"
              width="80"
            ></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
                  cancel-button-text="取消"
                  confirm-button-text="删除"
                  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>
        </div>
        <div>
          <el-pagination
            :page-size="huanZheFeiYongPageSize"
            :total="huanZheFeiYongTotal"
            background
            layout="prev, pager, next, total"
            @current-change="huanZheFeiYongCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  baoCunHuanZheZhuYuanFeiYong,
  correctInvoice,
  getDzfpQrcodeBySerialNo,
  getSerialNo,
  getZyJiMenZhenZhuangRuFeiYong,
  queryEntryName,
  queryHuanZhe,
  shanChuFeiYong,
} from "@/api/inpatient/transfer-in-of-expenses";
import { cptSex } from "@/utils/computed";
import { computed } from "vue";
import { ElMessage, ElTable } from "element-plus";
import { compareDate, formatDatetime } from "@/utils/date";
import { stringIsBlank, stringNotBlank } from "@/utils/blank-utils";
import Dig from "@/utils/math";
import SystemDeptSelect from "@/components/system/dept-select/SystemDeptSelect.vue";
import { isDev } from "@/utils/public";
import dayjs from "dayjs";
import { CyMessageBox } from "@/utils/cy-message-box";
import { useCompShallowRef } from "@/utils/useCompRef";
import { BizException, ExceptionEnum } from "@/utils/BizException";
import { createReusableTemplate } from "@vueuse/core";
import PrintOutpatientDzfp from "@/views/clinic/transfer-expenses/print-outpatient-dzfp.vue";

//查询条件
//住院号
const inpatientNo = ref(isDev ? "022271" : "");
//机制号
const serialNo = ref(isDev ? 4744457 : null);
//收费代码
const chargeCodeMX = ref("");
// 住院次数
const admissTimes = ref("");

const printQrCodeRef = useCompShallowRef(PrintOutpatientDzfp);

let serialNoTmp = null;

const [DefaultTemplate, PatientInfo] = createReusableTemplate();
const [ZyFeeTemplate, ZyTale] = createReusableTemplate();

const huanZheXinXi = ref({
  execUnit: "",
});

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

//查询患者信息
const queryClick = async () => {
  if (!inpatientNo.value) {
    ElMessage({
      type: "warning",
      message: "请先输入患者住院号",
      showClose: true,
      duration: 2500,
    });
    return;
  }
  deptList.value = [{ code: "1070000", name: "急诊科" }];
  queryHuanZhe(inpatientNo.value).then(res => {
    huanZheXinXi.value = res;
    admissTimes.value = res.admissTimes;
    huanZheXinXi.value.execUnit = "1070000";

    chargeDate.value = new Date(
      dayjs(huanZheXinXi.value.admissDate ?? "").add(1, "minutes")
    );
  });
};

function checkZyFee() {
  if (zyXinXiList.value.length === 0) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "请选择要转入的费用");
  }
}

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

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

//门诊发票信息 金额总和
let mzSum = computed(() => {
  let sum = 0;
  mzXinXiList.value.forEach(item => {
    sum = Dig.add(sum, Dig.multiply(item.unitPrice, item.chargeQuantity));
  });
  return sum.toFixed(2);
});
//住院收费项目 金额总和
let zySum = computed(() => {
  let sum = 0;
  zyXinXiList.value.forEach(item => {
    sum = Dig.add(sum, Dig.multiply(item.unitPrice, item.chargeQuantity));
  });
  return sum.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 saveStore = reactive({
  dialog: false,
  message: "",
  func: null,
});

function openSaveDialog(message) {
  saveStore.dialog = true;
  saveStore.message = message;
  saveStore.func = handleSave;
}

//删除住院收费项目 前端删除 后端也删除 只是不执行一个查找的动作了
const shanChuFeiYongClick = (index, val) => {
  shanChuFeiYong(val).then(res => {
    zyDetailChargeList.value.splice(index, 1);
  });
};
//点击保存触发的事件
const baoCunClick = () => {
  if (compareDate(huanZheXinXi.value.admissDate, chargeDate.value)) {
    return ElMessage.error("费用发生时间不能在入院时间之前。");
  }
  if (
    stringNotBlank(huanZheXinXi.value.disDate) &&
    compareDate(chargeDate.value, huanZheXinXi.value.disDate)
  ) {
    return ElMessage.error("费用发生时间不能在出院时间之后。");
  }
  huanZheXinXi.value.chargeDate = formatDatetime(chargeDate.value);
  if (typeof huanZheXinXi.value.inpatientNo === "undefined") {
    ElMessage({
      type: "warning",
      message: "请先选择患者",
      showClose: true,
      duration: 2500,
    });
    return;
  }
  checkZyFee();
  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 openSaveDialog(
        `门诊病人姓名【'${mzXinXiList.value[i].patientName}'】住院病人姓名【'  ${huanZheXinXi.value.name}'】不一致,是否继续？`
      );
    } else if (
      huanZheXinXi.value.name === mzXinXiList.value[i].patientName &&
      typeof mzXinXiList.value[i].patientName !== "undefined"
    ) {
      return openSaveDialog();
    }
  }
};

const electronicPrescription = reactive({
  dialog: false,
  qrCode: "",
});

async function handleSave() {
  await baoCunHuanZheZhuYuanFeiYong({
    ...huanZheXinXi.value,
    serialNo: serialNoTmp,
  });
  await handleCorrectInvoice();
}

async function handleCorrectInvoice(inputFee = true) {
  checkZyFee();
  const zyCodes = zyXinXiList.value.map(item => {
    return item.chargeCodeMx;
  });
  const codes = [];

  mzXinXiList.value.forEach(item => {
    if (!zyCodes.includes(item.chargeCodeMx)) {
      codes.push(item.chargeCodeMx);
    }
  });

  const success = await correctInvoice({
    serialNo: serialNoTmp,
    codes: codes,
  })
    .then(res => {
      handleOpenPrint(res);
      return true;
    })
    .catch(() => {
      if (inputFee) {
        CyMessageBox.alert({
          message: "保存费用成功，但冲红发票失败，可以点击仅冲红发票按钮重试",
        });
      }
      return false;
    });
  if (success) {
    zyXinXiList.value = [];
    multipleTable.value.clearSelection();
    saveStore.dialog = false;
  }
}

//项目名称 数组
const entryNameList = ref([]);

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

const chargeDate = ref(new Date());

// 科室
const deptList = ref([]);

function handleOpenPrint(res) {
  if (stringIsBlank(res)) return;
  electronicPrescription.dialog = true;
  electronicPrescription.qrCode = res;
}

function handleQueryQrCode() {
  getDzfpQrcodeBySerialNo(serialNo.value).then(res => {
    printQrCodeRef.value.print({ ...res, serialNo: serialNo.value });
  });
}

async function handleOnlyChargeRed() {
  checkZyFee();
  saveStore.dialog = true;
  saveStore.message = "仅充红，不会在录入住院费用了。";
  saveStore.func = () => handleCorrectInvoice(false);
}

const printObj = {
  id: "#dzfpQrCode",
  extraCss: `/static/transferin-print.css`,
};
</script>

<style lang="scss"></style>