web_dist/src/views/medicine-management/MedicinePageSubmit.vue

<template>
  <div class="layout_container">
    <header>
      <!-- :shortcuts="shortcuts"
       size="small"
       style="width: 300px"
       -->
      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
        @change="formatDateRange"
      ></el-date-picker
      >&nbsp;&nbsp;
      <el-select v-model="medicineType" style="width: 80px">
        <el-option value="1" label="全部" key="med-type-1"></el-option>
        <el-option value="2" label="毒麻" key="med-type-2"></el-option>
        <el-option value="3" label="非毒麻" key="med-type-3"></el-option>
        <el-option
          value="4"
          label="大输液"
          key="med-type-4"
        ></el-option> </el-select
      >&nbsp;&nbsp;
      <el-button type="primary" icon="Search" @click="getMedicinePages"
        >检索</el-button
      >
      <el-button type="success" icon="Upload" @click="uploadMedicinePages"
        >提交药单</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="FirstAidKit" @click="getUsedMedicines"
        >药品查询</el-button
      >
      <el-button type="danger" icon="DataLine" @click="getPoisonousAnesthetics"
        >麻、精药品使用查询</el-button
      >
    </header>
    <div class="layout_main">
      <div id="normalMedicinePagesArea" style="position: relative">
        <div
          style="
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
          "
        >
          医技科室领药单
        </div>
        <div style="display: flex; margin-top: 12px">
          <div style="width: 50%; text-align: center">
            统计基准：{{ dateRange[0] }} 至 {{ dateRange[1] }}
          </div>
          <div style="width: 30%">领药科室：{{ userInfo.deptName }}</div>
          <div style="width: 30%">药品库房：住院药房</div>
        </div>
        <div style="position: absolute; top: 55px; left: 2%">
          <el-button
            plain
            type="primary"
            icon="Switch"
            circle
            title="反选"
            @click="switchCheck"
          ></el-button>
        </div>
        <div
          style="
            margin-top: 8px;
            width: 90%;
            margin-left: 5%;
            color: black;
            font-size: 14px;
          "
        >
          <div
            style="display: flex; width: 100%; height: 28px; overflow-y: scroll"
          >
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 10%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              提交标志
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 10%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              药品编码
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 30%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              药品名
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 30%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              规格
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 10%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              数量
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 10%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              单价
            </div>
            <div
              style="
                height: 26px;
                line-height: 26px;
                width: 10%;
                text-align: center;
                border: 1px solid #333;
              "
            >
              金额
            </div>
          </div>
          <div
            style="
              height: 530px;
              overflow-y: scroll;
              border-bottom: 1px solid #333;
            "
          >
            <div
              v-for="item in cptMedicines"
              style="display: flex; width: 100%; text-align: center"
              :key="item.chargeCode"
            >
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 10%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                <input type="checkbox" v-model="item.checked" />
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 10%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.chargeCode }}
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 30%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.drugName }}
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 30%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.spec }}
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 10%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.amount }}
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 10%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.price }}
              </div>
              <div
                style="
                  height: 26px;
                  line-height: 26px;
                  width: 10%;
                  text-align: center;
                  border: 1px solid #333;
                "
              >
                {{ item.chargeFee }}
              </div>
            </div>
          </div>
          <div style="display: flex; margin-top: 10px">
            <div style="width: 50%">总行数：{{ cptMedicines.length }}</div>
            <div style="width: 50%; text-align: right">
              合计金额：{{ cptTotalCharge }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="showUsedMedicines" width="820px" title="药品查询">
    <el-table :data="usedMedicines" stripe height="500">
      <el-table-column
        prop="chargeCode"
        label="药品编码"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="drugName"
        label="药品名"
        width="120"
      ></el-table-column>
      <el-table-column prop="spec" label="规格" width="100"></el-table-column>
      <el-table-column prop="amount" label="数量" width="60"></el-table-column>
      <el-table-column prop="price" label="单价" width="60"></el-table-column>
      <el-table-column
        prop="chargeFee"
        label="金额"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="patName"
        label="患者姓名"
        width="80"
      ></el-table-column>
      <el-table-column prop="patNo" label="住院号" width="80"></el-table-column>
      <el-table-column
        prop="chargeDate"
        label="录入时间"
        width="130"
      ></el-table-column>
    </el-table>
  </el-dialog>
  <div class="dialog-no-header">
    <el-dialog fullscreen v-model="showUsedPoisonousAnesthetics">
      <div style="position: fixed; top: 10px; right: 60px">
        <el-button
          type="primary"
          icon="Printer"
          @click="printUsedPoisonousAnesthetics"
          >打印</el-button
        >
        <el-button
          type="danger"
          icon="Close"
          @click="showUsedPoisonousAnesthetics = false"
          >关闭</el-button
        >
      </div>
      <div id="poisonousAnestheticsArea">
        <table id="jmtable" style="width: 100%; color: black">
          <thead>
            <tr>
              <td
                colspan="14"
                style="
                  border: none;
                  text-align: center;
                  font-size: 18px;
                  font-weight: bold;
                "
              >
                {{ userInfo.deptName }}精、麻药品使用登记表
              </td>
            </tr>
            <tr>
              <td colspan="7" style="border: none; text-align: left">
                &nbsp;&nbsp;统计基准：{{ dateRange[0] }} 至 {{ dateRange[1] }}
              </td>
              <td colspan="7" style="border: none; text-align: right">
                打印日期：{{ today }}&nbsp;&nbsp;
              </td>
            </tr>
            <tr>
              <td>时间</td>
              <td>药品名称</td>
              <td>患者姓名</td>
              <td>性别</td>
              <td>身份证号</td>
              <td>住院号</td>
              <td>住院诊断</td>
              <td>药品规格</td>
              <td>数量</td>
              <td>实际用量</td>
              <td>余量处理</td>
              <td>发药人</td>
              <td>复核人</td>
              <td>药品批号</td>
            </tr>
            <tr>
              <td style="border: none"></td>
            </tr>
          </thead>
          <tbody v-for="(val, key) in usedPoisonousAnesthetics">
            <tr
              v-for="(item, index) in val"
              :key="'usedPoisonousAnesthetics-' + key + '-' + index"
            >
              <td>{{ item.chargeDate }}</td>
              <td>{{ item.chargeName }}</td>
              <td>{{ item.patName }}</td>
              <td>{{ item.patGender }}</td>
              <td>{{ item.socialNo }}</td>
              <td>{{ item.patNo }}</td>
              <td>{{ item.admdiag }}</td>
              <td>{{ item.spec }}</td>
              <td>{{ item.chargeAmount }}</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>
                <span v-if="index === 0">
                  <span v-if="printMode">
                    {{ medBatchNos[key] }}
                  </span>
                  <input
                    v-else
                    type="text"
                    v-model="medBatchNos[key]"
                    style="border: none; text-align: center"
                  />
                </span>
                <span v-else>{{ medBatchNos[key] }}</span>
              </td>
            </tr>
            <tr>
              <td style="border: none" colspan="8"></td>
              <td style="border: none; color: #0a84fd">
                总计：{{ poisonousAnestheticsCounts[key] }}
              </td>
              <td style="border: none" colspan="5"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { shortcuts } from "@/data/shortcuts";
import { getFormatDatetime } from "@/utils/date";
import { computed } from "vue";
import {
  fetchMedicinePages,
  submitMedicinePages,
  fetchUsedMedicines,
  fetchPoisonousAnesthetics,
} from "@/api/medicine-management/index.js";
import { ElMessage } from "element-plus";
import { initLodop, getLodop } from "@/utils/c-lodop";
import { useUserStore } from "@/pinia/user-store";

const poisonousAnestheticsFlag = ["3", "4"];

const dateRange = ref([]);
const medicineType = ref("1");
const cptMedicines = computed(() => {
  return allMedicines.value.filter(item => {
    if (medicineType.value === "1") {
      return true;
    }
    if (medicineType.value === "2") {
      return poisonousAnestheticsFlag.indexOf(item.drugFlag) !== -1;
    }
    return poisonousAnestheticsFlag.indexOf(item.drugFlag) === -1;
  });
});
const cptTotalCharge = computed(() => {
  let sum = 0;
  cptMedicines.value.forEach(item => {
    sum += item.chargeFee;
  });
  return sum;
});
const allMedicines = ref([]);
const usedMedicines = ref([]);
const showUsedMedicines = ref(false);
const usedPoisonousAnesthetics = ref({});
const poisonousAnestheticsCounts = ref({});
const showUsedPoisonousAnesthetics = ref(false);
const medBatchNos = ref({});

const today = getFormatDatetime(new Date(), "YYYY-MM-DD hh:mm:ss");
const formatDateRange = () => {
  //   console.log("dateRange.value1", dateRange.value);
  dateRange.value[0] = getFormatDatetime(
    dateRange.value[0],
    "YYYY-MM-DD hh:mm:ss"
  );
  dateRange.value[1] = getFormatDatetime(
    dateRange.value[1],
    "YYYY-MM-DD hh:mm:ss"
  );
  //   console.log("dateRange.value2", dateRange.value);
};
const userInfo = useUserStore().userInfo;

const getMedicinePages = () => {
  //   console.log(medicineType.value);
  const params = {
    start: dateRange.value[0],
    end: dateRange.value[1],
    dept: userInfo.deptCode,
    chargeCodes: medicineType.value,
  };
  //   console.log("getMedicinePages", params);
  fetchMedicinePages(params).then(res => {
    allMedicines.value = res;
  });
};

const switchCheck = () => {
  cptMedicines.value.forEach(item => {
    item.checked = !item.checked;
  });
};

const uploadMedicinePages = () => {
  const params = {
    start: dateRange.value[0],
    end: dateRange.value[1],
    dept: userInfo.deptCode,
    chargeList: pickedCheckedItem(),
  };
  submitMedicinePages(params).then(res => {
    allMedicines.value = res;
    ElMessage({
      message: "提交成功",
      type: "success",
      duration: 2500,
      showClose: true,
    });
  });
};

const pickedCheckedItem = () => {
  let arr = [];
  cptMedicines.value.forEach(item => {
    if (item.checked) {
      arr.push(item);
    }
  });
  return arr;
};

const getUsedMedicines = () => {
  const params = {
    start: dateRange.value[0],
    end: dateRange.value[1],
    dept: userInfo.deptCode,
  };
  fetchUsedMedicines(params).then(res => {
    usedMedicines.value = res;
    showUsedMedicines.value = true;
  });
};

const getPoisonousAnesthetics = () => {
  printMode.value = false;
  medBatchNos.value = {};
  const params = {
    start: dateRange.value[0],
    end: dateRange.value[1],
    dept: userInfo.deptCode,
  };
  fetchPoisonousAnesthetics(params).then(res => {
    usedPoisonousAnesthetics.value = res.medicines;
    poisonousAnestheticsCounts.value = res.amounts;
    showUsedPoisonousAnesthetics.value = true;
  });
};

const printMode = ref(false);
const printUsedPoisonousAnesthetics = () => {
  printMode.value = true;
  setTimeout(() => {
    const styleContent =
      "<style>#jmtable tr td, #jmtable tr th {border: 1px solid black;text-align: center;font-size: 12px} #jmtable {border-collapse: collapse;}</style>";
    const strFormHtml =
      styleContent +
      "<body>" +
      document.getElementById("poisonousAnestheticsArea").innerHTML +
      "</body>";
    let LODOP = getLodop();
    LODOP.PRINT_INIT("poisonousAnestheticsArea");
    LODOP.SET_PRINT_PAGESIZE(2, "210mm", "297mm", "");
    LODOP.SET_PRINT_MODE("RESELECT_PRINTER", true);
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");
    LODOP.ADD_PRINT_TABLE("2mm", "2mm", "292mm", "195mm", strFormHtml);
    LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);
    LODOP.SET_PRINT_STYLE("ItemType", 3);
    LODOP.ADD_PRINT_TEXT("4mm", "267mm", "20mm", "7mm", "第#页/共&页");
    LODOP.PREVIEW();
    printMode.value = false;
  }, 300);
};

onMounted(() => {
  dateRange.value[0] = today;
  dateRange.value[1] = today;
  initLodop();
});
</script>

<style scoped>
:deep(.dialog-no-header .el-dialog__header) {
  display: none;
}

#jmtable tr td,
#jmtable tr th {
  border: 1px solid black;
  text-align: center;
  font-size: 12px;
}
#jmtable {
  border-collapse: collapse;
}
</style>