打印样式

print.md

@@ -0,0 +1,12 @@
+# 打印帮助文档
+
+## 1. 使用vue3-print-nb 来打印页面内容
+
+```scss
+@page {
+  // 纸张大小  打印方向 portrait 横向 landscape 竖向
+  size: A4 landscape;
+  // 打印边距
+  margin: 40px;
+}
+```

public/static/printcss/auto-print.css

@@ -0,0 +1,19 @@
+@media print {
+    .header,
+    .footer {
+        display: none;
+    }
+
+    @page {
+        size: auto;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    body,
+    html {
+        height: max-content !important; /* 限制打印区域高度 */
+        box-sizing: border-box;
+    }
+
+}

src/utils/cy-use/useDefaultTemplate.ts

@@ -1,33 +0,0 @@
-// 导出一个函数，用于创建默认模板
-import { createReusableTemplate } from "@vueuse/core";
-
-export function useDefaultTemplate(needRender = true) {
-  // 定义一个变量，用于存储渲染函数
-  let render;
-
-  // 定义一个组件，用于渲染默认模板
-  const DefineTemplate = defineComponent({
-    name: "CyDefineTemplate",
-    setup(_, { slots }) {
-      // 将默认模板的渲染函数赋值给render变量
-      render = slots.default;
-      // 如果需要渲染，则返回渲染函数
-      if (needRender) {
-        return () => render();
-      }
-      // 否则返回null
-      return () => null;
-    },
-  });
-
-  // 定义一个函数，用于渲染用户模板
-  const UserTemplate = props => {
-    // 调用渲染函数，并传入props参数
-    return render(props);
-  };
-
-  // 返回默认模板和用户模板
-  return [DefineTemplate, UserTemplate];
-}
-
-const aa = createReusableTemplate();

src/utils/cy-use/useVuePrint.ts

@@ -0,0 +1,8 @@
+import { stringNotBlank } from "@/utils/blank-utils";
+
+export function useVuePrint(options: { id: string; extraCss?: string }) {
+  if (stringNotBlank(options.extraCss)) {
+    options.extraCss = "/static/printcss" + options.extraCss;
+  }
+  return options;
+}

src/views/clinic/TransferInOfExpenses.vue

@@ -1,20 +1,107 @@
 <template>
   <div class="layout_container">
-    <el-dialog v-model="electronicPrescription.dialog" title="打印电子处方">
+    <DefaultTemplate>
+      <el-descriptions border title="基本信息">
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-user"></i>
+            患者姓名
+          </template>
+          {{ huanZheXinXi.name }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-user"></i>
+            住院次数
+          </template>
+          {{ huanZheXinXi.admissTimes }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-user-solid"></i>
+            性别
+          </template>
+          {{ cptSex(huanZheXinXi.sex) }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-house"></i>
+            床号
+          </template>
+          {{ huanZheXinXi.bedNo }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-s-home"></i>
+            病房
+          </template>
+          {{ huanZheXinXi.wardName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-date"></i>
+            入院日期
+          </template>
+          {{ huanZheXinXi.admissDate }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-tickets"></i>
+            身份
+          </template>
+          {{ huanZheXinXi.responceTypeName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-coin"></i>
+            总费用
+          </template>
+          {{ huanZheXinXi.totalCharge }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <i class="el-icon-coin"></i>
+            余额
+          </template>
+          <span style="color: red">{{ huanZheXinXi.balance }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </DefaultTemplate>
+    <ZyFeeTemplate>
+      <el-tag> 住院收费项目:合计【{{ zySum }}】</el-tag>
+      <el-table :data="zyXinXiList" height="100%" stripe>
+        <el-table-column label="项目名称" prop="itemName"></el-table-column>
+        <el-table-column label="收费编码" prop="chargeCodeMx"></el-table-column>
+        <el-table-column label="数量" prop="chargeQuantity"></el-table-column>
+        <el-table-column label="单价" prop="unitPrice"></el-table-column>
+        <el-table-column label="金额" prop="chargeFee"></el-table-column>
+      </el-table>
+    </ZyFeeTemplate>
+
+    <print-outpatient-dzfp ref="printQrCodeRef" />
+
+    <el-dialog
+      v-model="electronicPrescription.dialog"
+      title="打印电子处方"
+      destroy-on-close
+    >
       <div style="text-align: center">
-        <img
-          id="dzfpQrCode"
-          :src="`data:image/png;base64,${electronicPrescription.qrCode}`"
-        />
+        <div>
+          <img
+            id="dzfpQrCode"
+            :src="`data:image/png;base64,${electronicPrescription.qrCode}`"
+          />
+          <div></div>
+        </div>
       </div>
       <template #footer>
-        <el-button v-print="'#dzfpQrCode'" type="primary" size="default"
+        <el-button v-print="printObj" type="primary" size="default"
           >打印
         </el-button>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="saveStore.dialog" title="保存">
+    <el-dialog v-model="saveStore.dialog" title="保存" destroy-on-close>
       <div style="color: red">收费日期： {{ huanZheXinXi.chargeDate }}</div>
       <div v-html="saveStore.message" style="color: red" />
       <PatientInfo />
@@ -76,73 +163,7 @@
       <el-button @click="handleOnlyChargeRed"> 仅充红</el-button>
     </header>
     <div>
-      <DefaultTemplate>
-        <el-descriptions border title="基本信息">
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-user"></i>
-              患者姓名
-            </template>
-            {{ huanZheXinXi.name }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-user"></i>
-              住院次数
-            </template>
-            {{ huanZheXinXi.admissTimes }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-user-solid"></i>
-              性别
-            </template>
-            {{ cptSex(huanZheXinXi.sex) }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-house"></i>
-              床号
-            </template>
-            {{ huanZheXinXi.bedNo }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-s-home"></i>
-              病房
-            </template>
-            {{ huanZheXinXi.wardName }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-date"></i>
-              入院日期
-            </template>
-            {{ huanZheXinXi.admissDate }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-tickets"></i>
-              身份
-            </template>
-            {{ huanZheXinXi.responceTypeName }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-coin"></i>
-              总费用
-            </template>
-            {{ huanZheXinXi.totalCharge }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label>
-              <i class="el-icon-coin"></i>
-              余额
-            </template>
-            <span style="color: red">{{ huanZheXinXi.balance }}</span>
-          </el-descriptions-item>
-        </el-descriptions>
-      </DefaultTemplate>
+      <PatientInfo />
     </div>
     <div>
       收费日期：
@@ -191,22 +212,7 @@
         <el-button icon="Right" type="primary"></el-button>
       </div>
       <div class="layout_flex_1-x layout_el-table">
-        <ZyFeeTemplate>
-          <el-tag> 住院收费项目:合计【{{ zySum }}】</el-tag>
-          <el-table :data="zyXinXiList" height="100%" stripe>
-            <el-table-column label="项目名称" prop="itemName"></el-table-column>
-            <el-table-column
-              label="收费编码"
-              prop="chargeCodeMx"
-            ></el-table-column>
-            <el-table-column
-              label="数量"
-              prop="chargeQuantity"
-            ></el-table-column>
-            <el-table-column label="单价" prop="unitPrice"></el-table-column>
-            <el-table-column label="金额" prop="chargeFee"></el-table-column>
-          </el-table>
-        </ZyFeeTemplate>
+        <ZyTale />
       </div>
     </div>
   </div>
@@ -215,6 +221,7 @@
     v-model="huanZheFeiYongDrawer"
     size="50%"
     title="查看患者通过急门诊转入的费用"
+    destroy-on-close
   >
     <div class="layout_display_flex_y">
       <div>
@@ -319,7 +326,7 @@
   </el-drawer>
 </template>
 
-<script setup name="TransferInOfExpenses">
+<script setup lang="ts">
 import { ref } from "vue";
 import {
   baoCunHuanZheZhuYuanFeiYong,
@@ -340,25 +347,28 @@ import Dig from "@/utils/math";
 import SystemDeptSelect from "@/components/system/dept-select/SystemDeptSelect.vue";
 import { isDev } from "@/utils/public";
 import dayjs from "dayjs";
-import { useDefaultTemplate } from "@/utils/cy-use/useDefaultTemplate";
-import { CyMessageBox } from "@/utils/cy-message-box/index";
+import { CyMessageBox } from "@/utils/cy-message-box";
 import { useCompShallowRef } from "@/utils/useCompRef";
 import { BizException, ExceptionEnum } from "@/utils/BizException";
+import { createReusableTemplate } from "@vueuse/core";
+import PrintOutpatientDzfp from "@/views/clinic/transfer-expenses/print-outpatient-dzfp.vue";
 
 //查询条件
 //住院号
 const inpatientNo = ref(isDev ? "022271" : "");
 //机制号
-const serialNo = ref(isDev ? 4744398 : null);
+const serialNo = ref(isDev ? 4744457 : null);
 //收费代码
 const chargeCodeMX = ref("");
 // 住院次数
 const admissTimes = ref("");
 
+const printQrCodeRef = useCompShallowRef(PrintOutpatientDzfp);
+
 let serialNoTmp = null;
 
-const [DefaultTemplate, PatientInfo] = useDefaultTemplate();
-const [ZyFeeTemplate, ZyTale] = useDefaultTemplate();
+const [DefaultTemplate, PatientInfo] = createReusableTemplate();
+const [ZyFeeTemplate, ZyTale] = createReusableTemplate();
 
 const huanZheXinXi = ref({
   execUnit: "",
@@ -635,7 +645,7 @@ function handleOpenPrint(res) {
 
 function handleQueryQrCode() {
   getDzfpQrcodeBySerialNo(serialNo.value).then(res => {
-    handleOpenPrint(res);
+    printQrCodeRef.value.print({ ...res, serialNo: serialNo.value });
   });
 }
 
@@ -645,6 +655,11 @@ async function handleOnlyChargeRed() {
   saveStore.message = "仅充红，不会在录入住院费用了。";
   saveStore.func = () => handleCorrectInvoice(false);
 }
+
+const printObj = {
+  id: "#dzfpQrCode",
+  extraCss: `/static/transferin-print.css`,
+};
 </script>
 
-<style></style>
+<style lang="scss"></style>

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

@@ -0,0 +1,79 @@
+<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>