web_dist/src/components/zhu-yuan-yi-sheng/jian-cha-shen-qing/da-ying/PrintCheckList.vue

<script setup lang="ts">
import { printListReqNo } from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import env from "@/utils/setting";
import { cptSex } from "@/utils/computed";
import JsBarcode from "jsbarcode";
import { useVuePrint } from "@/utils/cy-use/useVuePrint";

const data = ref([]);

const [PrintTemplate, printFun] = useVuePrint({
  extraPageCss: `
      @page {
        size: A5 ;
        margin: 0;
        padding: 0 ;
    }

    body,
    html {
        font-size: 13px;
    }

    * {
        box-sizing: border-box;
    }
  `,
});

function handleQrCode() {
  data.value.forEach(item => {
    item.items.forEach(tmp => {
      const canvas = document.createElement("canvas");
      JsBarcode(canvas, tmp.reqNo, {
        lineColor: "#333",
        width: 2,
        height: 18,
        margin: 0,
        fontSize: 12,
      });
      tmp.qrCode = canvas.toDataURL("image/png");
    });
  });
}

defineExpose({
  async print(reqs: number[]) {
    data.value = await printListReqNo(reqs);
    handleQrCode();
    await nextTick();
    await printFun();
  },
});
</script>

<template>
  <PrintTemplate>
    <div class="print_jc_list" v-for="item in data">
      <div
        style="
          font-size: 20pt;
          text-align: center;
          font-weight: bold;
          margin-bottom: 6pt;
        "
      >
        {{ env.VITE_HOSPITAL_NAME }}
      </div>
      <div style="text-align: center">
        {{ item.title }}
      </div>
      <div style="font-size: 11pt">病人身份：{{ item.responceTypeName }}</div>
      <div
        style="
          border-top: 0.75pt dashed black;
          border-bottom: 0.75pt solid black;
          width: 100%;
          margin-bottom: 2px;
        "
      >
        <table style="border: 0; width: 100%">
          <tr>
            <td>住院号：{{ item.inpatientNo }}</td>
            <td>姓名：{{ item.name }}</td>
            <td>性别：{{ cptSex(item.sex) }}</td>
            <td>年龄：{{ item.age }}</td>
            <td>床号：{{ item.bedNo }}</td>
          </tr>

          <tr>
            <td colspan="3">病人住址: {{ item.homeStreet }}</td>
            <td colspan="2" style="width: 90pt">联系电话:{{ item.homeTel }}</td>
          </tr>
        </table>
      </div>
      <div class="req_comment-from">
        <div class="req_comment-item">病室摘要：</div>
        <div>
          {{ item.reqComment }}
        </div>
      </div>
      <div class="req_comment-from">
        <div class="req_comment-item">体征：</div>
        <div>
          {{ item.reqTzComment }}
        </div>
      </div>
      <div class="req_comment-from">
        <div class="req_comment-item">相关辅检结果：</div>
        <div>
          {{ item.reqOtherResult }}
        </div>
      </div>
      <div class="req_comment-from">
        <div class="req_comment-item">临床诊断：</div>
        <div>
          {{ item.diagText }}
        </div>
      </div>

      <table class="items_table">
        <tbody>
          <tr v-for="tmpItem in item.items">
            <td style="height: 40px; width: 40%">
              <img :src="tmpItem.qrCode" style="height: 100%; width: 100%" />
            </td>
            <td>{{ tmpItem.itemName }}</td>
          </tr>
        </tbody>
      </table>

      <div>
        <pre>
        {{ item.precautions }}
      </pre
        >
      </div>
    </div>
  </PrintTemplate>
</template>

<style lang="scss">
.print_jc_list {
  background: white;
  height: 210mm;
  width: 148mm;
  padding: 10px;
  overflow: hidden;

  .req_comment-from {
    display: flex;
    width: 100%;
    padding: 5px;
  }

  .req_comment-item {
    width: 20%;
    text-align: right;
  }

  .items_table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;

    tr,
    td {
      margin: 0;
      padding: 5px;
    }
  }
}
</style>