HIYL-localization-web/src/views/cases/components/UltrasoundReportPrint.vue

<template>
  <el-dialog
    title="超声检查报告单打印预览"
    :visible.sync="visible"
    width="80%"
    append-to-body
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 打印区域容器 -->
    <div ref="printContent" class="print-container">
      <div align="left">
        {{ logo }}
        <h1 align="center">青岛海信医疗设备股份有限公司</h1>
        <h2 align="center">彩色多普勒超声检查报告单</h2>
      </div>
      <div style="margin-top: 15px">
        <table width="98%" align="left" style="border-color: red">
          <tbody>
            <tr>
              <td style="font-size: 12pt"><b>超声部位:</b> {{ form.part }}</td>
              <td align="right" style="font-size: 12pt">
                <b>检查号:</b> {{ form.outNo || form.medicalNo }}
              </td>
            </tr>
          </tbody>
        </table>
        <hr style="width: 100%" />
      </div>
      <div style="margin-top: 10px">
        <table
          width="100%"
          align="left"
          style="margin-bottom: 10px; padding-bottom: 20px; border-color: red"
        >
          <tbody>
            <tr>
              <td style="font-size: 12pt">
                <b>姓名:</b> {{ form.patientName }}
              </td>
              <td style="font-size: 12pt">
                <b>性别:</b> {{ getGenderLabel(form.gender) }} <b>年龄:</b>
                {{ form.age }}{{ getAgeUnitLabel(form.ageUnit) }}
              </td>
              <td style="font-size: 12pt"><b>科别:</b> -</td>
              <td style="font-size: 12pt">
                <b>申请医师:</b> {{ form.doctor }}
              </td>
            </tr>
            <tr>
              <td></td>
            </tr>
            <tr>
              <td style="font-size: 12pt">
                <b>病历号:</b> {{ form.medicalNo }}
              </td>
              <td style="font-size: 12pt"><b>住院号:</b> {{ form.inNo }}</td>
              <td style="font-size: 12pt"><b>病区号:</b> {{ form.wardNo }}</td>
              <td style="font-size: 12pt"><b>床位号:</b> {{ form.bedNo }}</td>
            </tr>
          </tbody>
        </table>
        <hr style="margin-bottom: 15px; width: 100%" />
      </div>
      <div style="margin-bottom: 25px" align="center" width="100%">
        <!-- 影像图片区域 -->
        <div v-if="imgList.length">
          <img
            v-for="(img, idx) in imgList"
            :key="idx"
            :src="img.url"
            style="max-width: 80%; margin: 10px"
          />
        </div>
        <hr style="margin-top: 15px; width: 100%" />
      </div>
      <div style="margin-top: 25px; width: 100%" align="center">
        <table width="100%" align="center">
          <tbody>
            <tr>
              <td style="font-size: 12pt"><b>超声所见</b></td>
            </tr>
            <tr>
              <td
                style="padding-top: 16px; padding-left: 36px; font-size: 12pt"
              >
                {{ form.findings || "无" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="margin-top: 50px; width: 100%" align="center">
        <table width="100%" align="center">
          <tbody>
            <tr>
              <td style="font-size: 12pt"><b>超声提示</b></td>
            </tr>
            <tr>
              <td
                style="padding-top: 16px; padding-left: 36px; font-size: 12pt"
              >
                {{ form.conclusion || "无" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer">
        <hr style="width: 100%" />
        <table width="100%" align="center">
          <tbody>
            <tr>
              <td valign="bottom" style="font-size: 12pt">
                <b>青岛海信医疗设备股份有限公司</b>
              </td>
              <td valign="bottom" style="font-size: 12pt">
                <b>诊断医师:</b> {{ $store.state.user.nickName || "未知" }}
              </td>
              <td valign="bottom" style="font-size: 12pt">
                <b>检查日期:</b> {{ formatDate(new Date()) }}
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%" align="left">
          <tbody>
            <tr>
              <td style="font-size: 12pt">仅供临床参考,不作证明材料!</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 弹窗底部操作按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handlePrint">打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "UltrasoundReportPrint",
  props: {
    // 控制弹窗显隐
    visible: {
      type: Boolean,
      default: false,
    },
    // 报告表单数据
    form: {
      type: Object,
      required: true,
    },
    // 影像列表
    imgList: {
      type: Array,
      default: () => [],
    },
    // 性别字典
    genderList: {
      type: Array,
      default: () => [
        { label: "未知", value: "0" },
        { label: "男", value: "1" },
        { label: "女", value: "2" },
      ],
    },
    // 年龄单位字典
    ageUnitList: {
      type: Array,
      default: () => [
        { label: "岁", value: "1" },
        { label: "月", value: "2" },
        { label: "天", value: "3" },
      ],
    },
    // 医院logo（可选）
    logo: {
      type: String,
      default: "",
    },
  },
  methods: {
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hour = String(date.getHours()).padStart(2, "0");
      const minute = String(date.getMinutes()).padStart(2, "0");
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    // 获取性别标签
    getGenderLabel(value) {
      const item = this.genderList.find((item) => item.value === value);
      return item ? item.label : "未知";
    },
    // 获取年龄单位标签
    getAgeUnitLabel(value) {
      const item = this.ageUnitList.find((item) => item.value === value);
      return item ? item.label : "岁";
    },
    // 打印处理
    handlePrint() {
      // 创建隐藏的打印窗口
      const printWindow = window.open("", "_blank", "width=800,height=600");

      if (!printWindow) {
        this.$message.error("请允许弹出窗口以进行打印");
        return;
      }

      // 获取打印区域内容
      const printContent = this.$refs.printContent.innerHTML;

      // 构建完整的HTML文档
      const printDoc = `${printContent}`;

      // 写入打印窗口
      printWindow.document.write(printDoc);
      printWindow.document.close();

      // 等待页面加载完成后打印
      printWindow.onload = function () {
        printWindow.focus();
        setTimeout(() => {
          printWindow.print();
          printWindow.close();
        }, 500);
      };
    },
    // 弹窗打开时的处理
    handleOpen() {
      // 可添加打印前的样式适配
    },
    // 弹窗关闭时的处理
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
/* 打印区域样式隔离 */
.print-container {
  padding: 20px;
  background: #fff;
  font-size: 12pt;
  height: 80vh;
  overflow-y: auto;
}

/* 打印样式适配 */
@media print {
  .print-container {
    padding: 0;
    height: auto;
    overflow: visible;
  }
}
body {
  font-family: "SimSun", "宋体", sans-serif;
}
table {
  border-collapse: collapse;
}
hr {
  height: 2px;
  border: none;
  border-top: 2px solid #909399;
}
</style>