web_dist/src/views/clinic/transfer-expenses/print-outpatient-dzfp.vue

<script setup lang="ts">
import { uuid } from "@/utils/getUuid";
import { useVuePrint } from "@/utils/cy-use/useVuePrint";
import env from "@/utils/setting";

const id = uuid();

const printObj = useVuePrint({
  id: id,
  extraCss: "/auto-print.css",
});

const printRef = ref();

type PrintData = {
  total: string;
  qrCode: string;
  name: string;
  printDate: string;
  patientId: string;
  serialNo: string;
  opName: string;
};

const data = ref<PrintData>({});

defineExpose({
  async print(value: PrintData) {
    data.value = value;
    await nextTick();
    printRef.value.$el.click();
  },
});
</script>

<template>
  <div class="mz_qrcode-print">
    <el-button v-print="printObj" ref="printRef">打印</el-button>
    <div :id="id">
      <div class="mz_qrcode-print_header">
        {{ env.VITE_HOSPITAL_NAME }}门诊缴费凭证
      </div>
      <el-row>
        <el-col :span="12"> 姓名： {{ data.name }}</el-col>
        <el-col :span="12"> 门诊号： {{ data.patientId }}</el-col>
        <el-col :span="24"> 机制号：{{ data.serialNo }}</el-col>
      </el-row>
      <hr class="dashed-hr" />
      <el-row>
        <el-col :span="12"> 总金额：{{ data.total }}</el-col>
        <el-col :span="12"> 收费员：{{ data.opName }}</el-col>
        <el-col :span="24"> 打印日期：{{ data.printDate }}</el-col>
        <el-col :span="24"> 电子发票二维码：</el-col>
      </el-row>
      <div style="text-align: center">
        <img :src="`data:image/png;base64,${data.qrCode}`" alt="电子发票" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mz_qrcode-print {
  width: 0;
  height: 0;
  overflow: hidden;
}

.mz_qrcode-print_header {
  font-size: 18px;
  text-align: center;
}

.dashed-hr {
  border: none; /* 移除默认边框 */
  border-top: 1px dashed #000; /* 虚线样式 */
  margin: 10px 0; /* 调整边距 */
}
</style>