格式问题

src/components/print-poisonous-hemp/PrintPoisonousHempTemplate.vue

@@ -5,6 +5,7 @@ import env from "@/utils/setting";
 import { cptSex } from "@/utils/computed";
 import Pr from "@/assets/prescription.png";
 import { useVuePrint } from "@/utils/cy-use/useVuePrint";
+import dayjs from "dayjs";
 
 const props = defineProps<{
   data: PrintOrderVo;
@@ -43,9 +44,19 @@ const [PrintTemplate, printFunc] = useVuePrint({
         padding: 0;
     }
 
+    .print-none{
+      display: none;
+    }
+
     body,
     html {
         height: max-content;
+        font-size: 9pt !important;
+    }
+
+    .print-poisonous-hemp__hidden-input{
+          text-align: center;
+          border: none;
     }
 
     * {
@@ -74,10 +85,10 @@ async function printPrescription(red: boolean) {
         JsBarcode(canvas, i.id, {
           lineColor: "#333",
           width: 1,
-          height: 12,
+          height: 6,
           margin: 0,
-          fontSize: 10,
           displayValue: false,
+          // fontSize: 10,
         });
         i.qrCode = canvas.toDataURL("image/png");
       });
@@ -87,7 +98,6 @@ async function printPrescription(red: boolean) {
   if (tmp.length > 0) {
     state.currentDrugData = tmp;
     await nextTick();
-    printFunc();
   }
 }
 
@@ -119,260 +129,309 @@ defineExpose({
         </el-collapse-item>
       </el-collapse>
     </aside>
-    <div class="layout_main">
-      <el-button @click="printPrescription(true)">打印红色处方</el-button>
-      <el-button @click="printPrescription(false)">打印终止妊娠</el-button>
-      <PrintTemplate>
-        <template v-for="(item, index) in state.currentDrugData">
-          <div
-            style="
-              display: flex;
-              flex-direction: column;
-              height: 210mm;
-              width: 148mm;
-            "
-          >
-            <div style="display: flex; justify-content: space-between">
-              <div>
-                <img :src="item.qrCode" style="width: 190px" :alt="item.id" />
+    <div class="layout_main layout_container">
+      <header>
+        <el-button @click="printPrescription(true)">红色处方</el-button>
+        <el-button @click="printPrescription(false)">终止妊娠</el-button>
+        <el-button
+          @click="
+            () => {
+              printFunc();
+            }
+          "
+          >打印
+        </el-button>
+        <span style="color: red">
+          请注意，如果有余液请在 【余液丢弃】
+          后面的输入框数据，如果不填写或者为0将不会打印这段话。
+        </span>
+      </header>
+      <div class="layout_main">
+        <PrintTemplate>
+          <template v-for="(item, index) in state.currentDrugData">
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                height: 210mm;
+                width: 148mm;
+                padding: 6pt;
+              "
+            >
+              <div style="text-align: right">
+                <span style="border: 0.75pt solid red; color: red">
+                  {{ item.printName }}
+                </span>
               </div>
-              <div style="text-align: center">
-                <div>
-                  {{ env.VITE_HOSPITAL_NAME }}
+              <div style="text-align: center; font-size: 18pt">
+                {{ env.VITE_HOSPITAL_NAME }}
+              </div>
+              <div style="display: flex; justify-content: end">
+                <div style="width: max-content; text-align: right">
+                  <div>
+                    <img
+                      :src="item.qrCode"
+                      style="width: 142.5pt"
+                      :alt="item.id"
+                    />
+                    <div style="text-align: center">{{ item.id }}</div>
+                  </div>
                 </div>
-                <div>处方笺</div>
               </div>
-              <div>
-                <div style="border: 1px solid red; color: red">
-                  {{ item.printName }}
+              <div style="text-align: center">处方笺</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  margin-bottom: 2.25pt;
+                "
+              >
+                <div>
+                  <span>科别：</span>
+                  <span class="print-poisonous-hemp__tag--underline">
+                    {{ state.data.wardName }}
+                  </span>
+                </div>
+                <div>
+                  <span>费别：</span>
+                  <span class="print-poisonous-hemp__tag--underline">
+                    {{ state.data.responceName }}
+                  </span>
                 </div>
               </div>
-            </div>
-            <div class="print-poisonous-hemp__header-table">
-              <table>
-                <tbody>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      姓名：
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-left">
-                      {{ state.data.name }}
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      性别：
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-left">
-                      {{ cptSex(state.data.gender) }}
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      年龄：
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-left">
-                      {{ state.data.age }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      住院号：
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-left">
-                      {{ state.data.inpatientNo }}
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      科室：
-                    </td>
-                    <td
-                      colspan="3"
-                      class="print-poisonous-hemp__tag--text-left"
-                    >
-                      {{ state.data.wardName }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      处方类型：
-                    </td>
-                    <td>
-                      {{ state.tagName }}
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      打印时间：
-                    </td>
-                    <td colspan="3">
-                      {{ state.printTime }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      身份证：
-                    </td>
-                    <td>
-                      {{ state.data.socialNo }}
-                    </td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      病人类别：
-                    </td>
-                    <td colspan="3">
-                      {{ state.data.responceName }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      代办人：
-                    </td>
-                    <td class="print-poisonous-hemp__tag--underline"></td>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      代办人身份证：
-                    </td>
-                    <td
-                      class="print-poisonous-hemp__tag--underline"
-                      colspan="3"
-                    ></td>
-                  </tr>
-                  <tr>
-                    <td class="print-poisonous-hemp__tag--text-right">
-                      诊断：
-                    </td>
-                    <td colspan="5">
-                      {{ state.data.diagnose }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              style="flex: 1; height: 0; display: flex; flex-direction: column"
-            >
-              <div style="padding-top: 6pt">
-                <img :src="Pr" />
+              <div style="display: flex; justify-content: space-between">
+                <div>
+                  <span>医保证/医保卡号：</span>
+                  <span
+                    style="display: inline-block; width: 90pt"
+                    class="print-poisonous-hemp__tag--underline"
+                  >
+                  </span>
+                </div>
+                <div>
+                  <span>就诊号：</span>
+                  <div
+                    style="display: inline-block; width: 90pt"
+                    class="print-poisonous-hemp__tag--underline"
+                  ></div>
+                </div>
               </div>
-              <div class="print-poisonous-hemp__body-table">
-                <table>
+              <div
+                style="height: 5pt"
+                class="print-poisonous-hemp__tag--underline"
+              ></div>
+              <div class="print-poisonous-hemp__header-table">
+                <table style="table-layout: fixed">
                   <tbody>
                     <tr>
-                      <td colspan="3">
-                        1&nbsp;&nbsp;{{ item.orderName }}（{{
-                          item.drugSpecification
-                        }}）
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        姓名：
+                      </td>
+                      <td
+                        class="print-poisonous-hemp__tag--text-left print-poisonous-hemp__tag--underline"
+                      >
+                        {{ state.data.name }}
                       </td>
-                      <td style="text-align: center">X</td>
                       <td class="print-poisonous-hemp__tag--text-right">
-                        {{ item.drugQuan }}{{ item.packUnitName }}
+                        性别：
+                      </td>
+                      <td
+                        class="print-poisonous-hemp__tag--text-left print-poisonous-hemp__tag--underline"
+                      >
+                        {{ cptSex(state.data.gender) }}
                       </td>
-                    </tr>
-                    <tr>
-                      <td colspan="2"></td>
-                      <td>用法：{{ item.dose }}{{ item.doseUnitName }}</td>
-                      <td style="text-align: center">{{ item.frequName }}</td>
                       <td class="print-poisonous-hemp__tag--text-right">
-                        {{ item.supplyName }}
+                        年龄：
                       </td>
-                    </tr>
-                    <tr>
                       <td
-                        colspan="5"
-                        style="padding: 5pt 0"
-                        class="print-poisonous-hemp__tag--text-right"
+                        class="print-poisonous-hemp__tag--text-left print-poisonous-hemp__tag--underline"
                       >
-                        <div style="display: flex">
-                          <div style="flex: 1">使用批号：</div>
-                          <div
-                            style="width: 20%"
-                            class="print-poisonous-hemp__tag--underline"
-                          ></div>
-                        </div>
+                        {{ state.data.age }}
                       </td>
                     </tr>
                     <tr>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        住院号：
+                      </td>
                       <td
                         colspan="5"
-                        style="padding: 5pt 0"
-                        class="print-poisonous-hemp__tag--text-right"
+                        class="print-poisonous-hemp__tag--text-left print-poisonous-hemp__tag--underline"
                       >
-                        <div style="display: flex">
-                          <div style="flex: 1">余液丢弃</div>
-                          <div
-                            style="width: 20%"
-                            class="print-poisonous-hemp__tag--underline"
-                          ></div>
-                          <div>mg按医疗垃圾处理</div>
-                        </div>
+                        {{ state.data.inpatientNo }}
                       </td>
                     </tr>
                     <tr>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        临床诊断：
+                      </td>
                       <td
-                        colspan="5"
-                        style="padding: 5pt 0"
-                        class="print-poisonous-hemp__tag--text-right"
+                        class="print-poisonous-hemp__tag--underline"
+                        colspan="2"
                       >
-                        <div style="display: flex">
-                          <div style="flex: 1"></div>
-                          <div
-                            style="width: 20%"
-                            class="print-poisonous-hemp__tag--underline"
-                          ></div>
-                          <div>处理人</div>
-                        </div>
+                        {{ state.data.diagnose }}
+                      </td>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        开具时间：
+                      </td>
+                      <td
+                        class="print-poisonous-hemp__tag--underline"
+                        colspan="2"
+                      >
+                        {{ dayjs(item.startTime).format("YYYY年MM月DD日") }}
                       </td>
                     </tr>
                     <tr>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        住址电话：
+                      </td>
                       <td
-                        colspan="5"
-                        style="padding: 5pt 0"
-                        class="print-poisonous-hemp__tag--text-right"
+                        colspan="2"
+                        class="print-poisonous-hemp__tag--underline"
                       >
-                        <div style="display: flex">
-                          <div style="flex: 1"></div>
-                          <div
-                            style="width: 20%"
-                            class="print-poisonous-hemp__tag--underline"
-                          ></div>
-                          <div>核对人</div>
-                        </div>
+                        {{ state.data.homeStreet }}/{{ state.data.homeTel }}
+                      </td>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        身份证编号：
+                      </td>
+                      <td
+                        colspan="2"
+                        class="print-poisonous-hemp__tag--underline"
+                      >
+                        {{ state.data.socialNo }}
                       </td>
                     </tr>
                     <tr>
-                      <td colspan="5">----（以下空白）----</td>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        代办人姓名：
+                      </td>
+                      <td
+                        class="print-poisonous-hemp__tag--underline"
+                        colspan="2"
+                      ></td>
+                      <td class="print-poisonous-hemp__tag--text-right">
+                        身份证编号：
+                      </td>
+                      <td
+                        class="print-poisonous-hemp__tag--underline"
+                        colspan="2"
+                      ></td>
                     </tr>
                   </tbody>
                 </table>
               </div>
+              <div
+                style="
+                  flex: 1;
+                  height: 0;
+                  display: flex;
+                  flex-direction: column;
+                  border-top: 0.75pt solid #000;
+                  margin-top: 2pt;
+                "
+              >
+                <div style="padding-top: 6pt">
+                  <img :src="Pr" />
+                </div>
+                <div class="print-poisonous-hemp__body-table">
+                  <table>
+                    <tbody>
+                      <tr>
+                        <td style="width: 33%">
+                          {{ item.orderName }}（{{ item.drugSpecification }}）
+                        </td>
+                        <td
+                          style="width: 33%"
+                          class="print-poisonous-hemp__tag--text-right"
+                        >
+                          X{{ item.drugQuan }}{{ item.packUnitName }}
+                        </td>
+                        <td style="width: 33%"></td>
+                      </tr>
+                      <tr>
+                        <td style="width: 33%">
+                          用法：{{ item.dose }}{{ item.doseUnitName }}
+                        </td>
+                        <td
+                          style="width: 33%"
+                          class="print-poisonous-hemp__tag--text-right"
+                        >
+                          {{ item.supplyName }}
+                        </td>
+                        <td style="width: 33%"></td>
+                      </tr>
+                      <tr>
+                        <td colspan="3" style="padding: 5pt 0">
+                          <span :class="item.dropAmt ? '' : 'print-none'">
+                            余液丢弃<input
+                              v-model="item.dropAmt"
+                              class="print-poisonous-hemp__hidden-input"
+                              style="width: 11.25pt"
+                              type="number"
+                            />mg 按医疗垃圾处理&nbsp;&nbsp;&nbsp;
+                          </span>
+                          <span>
+                            双人签名：<span
+                              style="width: 90pt; display: inline-block"
+                              class="print-poisonous-hemp__tag--underline"
+                            ></span
+                            >&nbsp;&nbsp;<span
+                              style="width: 90pt; display: inline-block"
+                              class="print-poisonous-hemp__tag--underline"
+                            ></span>
+                          </span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td colspan="3">----（以下空白）----</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div style="height: 15pt; border-top: 0.75pt solid #000"></div>
+              <div style="display: flex">
+                <div style="width: 8%">医师：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 16%"
+                >
+                  {{ item.enterOperName }}
+                </div>
+                <div>审核药师：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 26%"
+                ></div>
+                <div>发出批号：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 25%"
+                ></div>
+              </div>
+              <div style="height: 4pt"></div>
+              <div style="display: flex">
+                <div style="width: 16%">药品金额：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 13%"
+                ></div>
+                <div style="width: 20%">调配药师/士：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 26%"
+                ></div>
+                <div style="width: 25%">核对、发药药师：</div>
+                <div
+                  class="print-poisonous-hemp__tag--underline"
+                  style="width: 23%"
+                ></div>
+              </div>
+              <div style="margin: 5pt 0; border-top: 0.75pt solid #000"></div>
+              <div>说明：根据《处方管理办法》，本处方开具当日有效。</div>
             </div>
-            <div class="print-poisonous-hemp__foot">
-              <table>
-                <tr>
-                  <td class="print-poisonous-hemp__tag--text-right">医师：</td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                  <td class="print-poisonous-hemp__tag--text-right">
-                    发出批号：
-                  </td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                </tr>
-                <tr>
-                  <td class="print-poisonous-hemp__tag--text-right">
-                    审核药师：
-                  </td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                  <td class="print-poisonous-hemp__tag--text-right">
-                    核对药师：
-                  </td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                </tr>
-                <tr>
-                  <td class="print-poisonous-hemp__tag--text-right">
-                    调配药师：
-                  </td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                  <td class="print-poisonous-hemp__tag--text-right">
-                    发药药师：
-                  </td>
-                  <td class="print-poisonous-hemp__tag--underline"></td>
-                </tr>
-              </table>
-            </div>
-          </div>
-        </template>
-      </PrintTemplate>
+          </template>
+        </PrintTemplate>
+      </div>
     </div>
   </div>
 </template>
@@ -381,7 +440,7 @@ defineExpose({
 .print-poisonous-hemp__tag {
   padding: 10px;
   cursor: pointer;
-  border: 1px solid var(--el-border-primary-light-9);
+  border: 0.75pt solid var(--el-border-primary-light-9);
 }
 
 .print-poisonous-hemp__body-table {
@@ -389,7 +448,6 @@ defineExpose({
   height: 0;
 
   table {
-    table-layout: fixed;
     width: 100%;
   }
 }
@@ -399,7 +457,7 @@ defineExpose({
 }
 
 .print-poisonous-hemp__tag--underline {
-  border-bottom: 1px solid #000;
+  border-bottom: 0.75pt solid #000;
 }
 
 .print-poisonous-hemp__tag--text-left {
@@ -409,16 +467,6 @@ defineExpose({
 .print-poisonous-hemp__header-table {
   table {
     width: 100%;
-    border-bottom: 1px solid #000;
   }
 }
-
-.print-poisonous-hemp__foot {
-  table {
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  border-top: 1px solid #000;
-}
 </style>

src/ts-type/print-poisonous-hemp.d.ts

@@ -15,6 +15,10 @@ export interface DrugData {
   id: string;
   // 前端专用
   qrCode?: string;
+  startTime: string;
+  // 丢弃
+  dropAmt?: number;
+  enterOperName: string;
 }
 
 export interface DrugGroup {
@@ -35,6 +39,7 @@ export interface PrintOrderVo {
   responceName: string; // 医保类别
   socialNo: string;
   homeStreet: string; // 住址
+  homeTel: string; // 电话
   birthDate: string | Date; // 格式为"yyyy-MM-dd"
 
   // 计算属性，对应Java中的getAge方法