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

<template>
  <el-dialog
    title="打印预览"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
  >
    <div id="print">
      <el-form ref="form" :model="report" label-width="90px" class="report-form">
        <el-row>
          <el-col :span="4">
            <img
              src="@/assets/images/cases/logo.jpg"
              alt="医院logo"
              style="width: 40px"
            />
          </el-col>
          <el-col :span="20" style="text-align: center">
            <h2 style="margin: 0">海伦普济医院</h2>
            <h3 style="margin: 4px 0 0; font-weight: normal">
              彩色多普勒超声检查报告单
            </h3>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px solid #333; margin: 6px 0">
          <el-col :span="16">
            <el-form-item label="超声部位" prop="positions">
              {{
                report.positions.length
                  ? report.positions.map((item) => item.level2.name).join("|") +
                    (report.position_text ? "|" + report.position_text : "")
                  : report.position_text
              }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检查号">
              {{ report.id }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="患者姓名" prop="patient_name">
              {{ report.patient_name }}
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="性别" prop="patient_sex">
              {{
                report.patient_sex
                  ? patientSexList.find((i) => i.value == report.patient_sex)
                      .label || ""
                  : ""
              }}
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="年龄" prop="patient_age" label-width="60px">
              {{ report.patient_age }}
              {{
                report.patient_age_type
                  ? patientAgeTypeList.find(
                      (i) => i.value == report.patient_age_type
                    ).label || ""
                  : ""
              }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="科别" prop="exam_rooms">
              {{ report.exam_rooms.map((i) => i.name).join("|") }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请医师" prop="request_doctor">
              {{ report.request_doctor }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px solid #333; margin: 6px 0">
          <el-col :span="6">
            <el-form-item label="门诊号" prop="outpatient_number">
              {{ report.outpatient_number }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住院号" prop="hospitalization_number">
              {{ report.hospitalization_number }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="病区号" prop="area_number">
              {{ report.area_number }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="床位号" prop="bed_number">
              {{ report.bed_number }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px solid #333; margin: 6px 0">
          <el-col :span="24">
            <div
              v-if="
                report.attachment &&
                report.attachment.filter((x) => x.showInDoc === 1).length > 0
              "
            >
              <el-row :gutter="10">
                <el-col
                  :span="6"
                  v-for="(item, idx) in report.attachment.filter(
                    (x) => x.showInDoc === 1
                  )"
                  :key="idx"
                >
                  <el-form-item>
                    <el-image
                      :src="
                        $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                        item.bucket_compress +
                        '/' +
                        item.object_compress
                      "
                      fit="cover"
                      :preview-src-list="[
                        $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                          item.bucket_compress +
                          '/' +
                          item.object_compress,
                      ]"
                      style="width: 100px; height: 80px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-form-item label="未附超声图像" label-width="120px" v-else />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="超声所见">
              <el-input
                v-model="report.text_comment"
                type="textarea"
                :rows="9"
                :disabled="report.status != 1 && report.status != 5"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="检查结论">
              <el-input
                v-model="report.text_conclusion"
                type="textarea"
                :rows="4"
                :disabled="report.status != 1 && report.status != 5"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="margin-top: 120px; border-top: 1px solid #333; margin: 6px 0"
        >
          <el-col :span="8">
            <el-form-item
              label="青岛海信医疗设备股份有限公司"
              label-width="200"
            />
            <el-form-item label="" label-width="0">
              仅供临床参考,不作证明材料!
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="诊断医师">
              {{ report.reporter_name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检查日期">
              {{ report.create_time }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handlePrint" v-print="'#print'">
        打 印
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { patientSexList, patientAgeTypeList } from "@/api/cases/index.js";
export default {
  name: "UltrasoundReportPrint",
  data() {
    return {
      visible: false,
      report: {},
      // 字典
      //  性别
      patientSexList: patientSexList(),
      //  年龄单位
      patientAgeTypeList: patientAgeTypeList(),
    };
  },
  methods: {
    print(report) {
      this.report = JSON.parse(JSON.stringify(report));
      this.visible = true;
    },
    handlePrint() {
      let print = document.getElementById("#printContent");
      // print.title = this.form.personName + "的指引单";
      print.extraHead =
        '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printContent { height: auto !important;padding: 20px; width: 100%; } <style>';
      print.extraCss = "https://www.google.com,https://www.google.com";
    },
  },
};
</script>
<!--  去除打印的页眉页脚 -->
<style media="printContent" scoped lang="scss">
/*去除页眉页脚*/
@page {
  size: auto;
  /* auto is the initial value */
  margin: 8mm;
}

html {
  /* background-color: #FFFFFF; */
  margin: 0;
  /* this affects the margin on the html before sending to printer */
}

body {
  /* border: solid 1px blue ; */
  margin: 10mm 15mm 10mm 15mm;
  /* margin you want for the content */
}
</style>