print-outpatient-dzfp.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <script setup lang="ts">
  2. import { uuid } from "@/utils/getUuid";
  3. import { useVuePrint } from "@/utils/cy-use/useVuePrint";
  4. import env from "@/utils/setting";
  5. const id = uuid();
  6. const printObj = useVuePrint({
  7. id: id,
  8. extraCss: "/auto-print.css",
  9. });
  10. const printRef = ref();
  11. type PrintData = {
  12. total: string;
  13. qrCode: string;
  14. name: string;
  15. printDate: string;
  16. patientId: string;
  17. serialNo: string;
  18. opName: string;
  19. };
  20. const data = ref<PrintData>({});
  21. defineExpose({
  22. async print(value: PrintData) {
  23. data.value = value;
  24. await nextTick();
  25. printRef.value.$el.click();
  26. },
  27. });
  28. </script>
  29. <template>
  30. <div class="mz_qrcode-print">
  31. <el-button v-print="printObj" ref="printRef">打印</el-button>
  32. <div :id="id">
  33. <div class="mz_qrcode-print_header">
  34. {{ env.VITE_HOSPITAL_NAME }}门诊缴费凭证
  35. </div>
  36. <el-row>
  37. <el-col :span="12"> 姓名: {{ data.name }}</el-col>
  38. <el-col :span="12"> 门诊号: {{ data.patientId }}</el-col>
  39. <el-col :span="24"> 机制号:{{ data.serialNo }}</el-col>
  40. </el-row>
  41. <hr class="dashed-hr" />
  42. <el-row>
  43. <el-col :span="12"> 总金额:{{ data.total }}</el-col>
  44. <el-col :span="12"> 收费员:{{ data.opName }}</el-col>
  45. <el-col :span="24"> 打印日期:{{ data.printDate }}</el-col>
  46. <el-col :span="24"> 电子发票二维码:</el-col>
  47. </el-row>
  48. <div style="text-align: center">
  49. <img :src="`data:image/png;base64,${data.qrCode}`" alt="电子发票" />
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <style lang="scss" scoped>
  55. .mz_qrcode-print {
  56. width: 0;
  57. height: 0;
  58. overflow: hidden;
  59. }
  60. .mz_qrcode-print_header {
  61. font-size: 18px;
  62. text-align: center;
  63. }
  64. .dashed-hr {
  65. border: none; /* 移除默认边框 */
  66. border-top: 1px dashed #000; /* 虚线样式 */
  67. margin: 10px 0; /* 调整边距 */
  68. }
  69. </style>