From c3713a8785a57f3b5a9cd3da896c32138149ab8d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 13 Aug 2026 09:39:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/prescription-slip/index.vue    | 255 ++++++++++++------
 .../src/components/prescription-slip/utils.ts |  24 ++
 2 files changed, 196 insertions(+), 83 deletions(-)

diff --git a/admin/src/components/prescription-slip/index.vue b/admin/src/components/prescription-slip/index.vue
index 46bb64ca1..de26d6f56 100644
--- a/admin/src/components/prescription-slip/index.vue
+++ b/admin/src/components/prescription-slip/index.vue
@@ -9,10 +9,24 @@
                         : '服药前请核对姓名、电话、医生等信息以及医嘱等要点'
                 }}
             </span>
-            <span class="rx-notice-meta">
-                <span>日期：{{ dateText }}</span>
-                <span>编号：{{ serialText }}</span>
-            </span>
+            <div class="rx-notice-meta">
+                <div class="rx-meta-item">
+                    <span class="rx-meta-label">日期</span>
+                    <span class="rx-meta-value">{{ dateText }}</span>
+                </div>
+                <div class="rx-meta-item">
+                    <span class="rx-meta-label">处方编号</span>
+                    <span class="rx-meta-value">{{ prescriptionSnText }}</span>
+                </div>
+                <div class="rx-meta-item">
+                    <span class="rx-meta-label">流转编号（挂号）</span>
+                    <span class="rx-meta-value">{{ appointmentFlowText }}</span>
+                </div>
+                <div v-if="businessOrderNoText" class="rx-meta-item">
+                    <span class="rx-meta-label">业务单号</span>
+                    <span class="rx-meta-value">{{ businessOrderNoText }}</span>
+                </div>
+            </div>
         </div>
 
         <div class="rx-info">
@@ -92,7 +106,6 @@
                         </div>
                     </template>
                 </template>
-                <!-- 处方联：保留主方/辅方分区，用量展示单剂克数 -->
                 <template v-else>
                     <template v-if="mainHerbs.length">
                         <div class="rx-herb-section-label">主方</div>
@@ -142,8 +155,8 @@
 
         <div class="rx-bottom">
             <div class="rx-bot-row rx-bot-row-1" :class="{ 'rx-bot-row-1--user': !isInternal }">
-                <div class="rx-bot-cell rx-bot-stack rx-bot-doctor">
-                    <div class="rx-bot-label">医师</div>
+                <div class="rx-bot-cell rx-bot-doctor">
+                    <div class="rx-bot-label rx-bot-label--doctor">医师</div>
                     <div class="rx-bot-doctor-body">
                         <img
                             v-if="data?.doctor_signature"
@@ -151,9 +164,9 @@
                             alt="医师签名"
                             class="rx-bot-sign-img"
                         />
-                        <div v-if="!data?.doctor_signature" class="rx-bot-doctor-name">
+                        <span v-if="!data?.doctor_signature" class="rx-bot-doctor-name">
                             {{ data?.doctor_name || '—' }}
-                        </div>
+                        </span>
                     </div>
                 </div>
                 <div v-if="isInternal" class="rx-bot-cell rx-bot-meta">
@@ -183,15 +196,17 @@ import {
     getAuxHerbs,
     getMainHerbs,
     rxAdviceText,
+    rxAppointmentFlowText,
     rxAuxUsageText,
+    rxBusinessOrderNoText,
     rxDateText,
     rxHerbTotal,
     rxOutPelletText,
     rxPerDoseAmount,
     rxPharmacyRemarkText,
+    rxPrescriptionSnText,
     rxRecipientText,
     rxRemarkText,
-    rxSerialText,
     rxTypeText,
     rxUsageText,
     slipAgeText,
@@ -224,7 +239,9 @@ const isInternal = computed(() => props.variant !== 'user')
 const slipTitle = computed(() => props.title || '成都双流甄养堂互联网医院 处方笺')
 
 const dateText = computed(() => rxDateText(props.data))
-const serialText = computed(() => rxSerialText(props.data))
+const prescriptionSnText = computed(() => rxPrescriptionSnText(props.data))
+const appointmentFlowText = computed(() => rxAppointmentFlowText(props.data))
+const businessOrderNoText = computed(() => rxBusinessOrderNoText(props.data))
 const recipientText = computed(() => rxRecipientText(props.data))
 const genderLabel = computed(() => slipGenderLabel(props.data?.gender))
 const ageText = computed(() => slipAgeText(props.data?.age))
@@ -266,7 +283,7 @@ defineExpose({
 <style lang="scss" scoped>
 /* ============================================================
  * 处方笺（A4 药房联 / 处方联）样式
- * 严格按 A4：210mm × 297mm，padding 8mm 10mm
+ * 与 Desktop order_list.vue 笺面样式保持一致
  * ============================================================ */
 .rx-paper {
     width: 210mm;
@@ -284,44 +301,98 @@ defineExpose({
     overflow: visible;
 }
 
-.rx-title {
-    text-align: center;
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: 0.12em;
-    margin: 0 0 8px;
-    color: #1f1f1f;
-}
-
+/* === 顶部告知（上下分块，避免左右 flex 把左侧提示挤成竖条）=== */
 .rx-notice {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
     background: #f3f4f6;
     border: 1px solid #e5e7eb;
-    padding: 10px 12px;
+    padding: 14px 12px;
     border-radius: 2px;
     font-size: 12px;
     color: #1f1f1f;
     margin-bottom: 6px;
-    line-height: 1.85;
-    overflow: visible;
 
     .rx-notice-text {
-        flex: 1;
-        line-height: 1.85;
-        padding: 1px 0;
+        flex: none;
+        width: 100%;
+        line-height: 1.55;
+        word-break: break-word;
     }
 
     .rx-notice-meta {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: 4px 14px;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 4px;
+        padding: 8px 2px 2px;
+        border-top: 1px solid #e5e7eb;
+        font-size: 10px;
+        line-height: 2.35;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .rx-notice-meta .rx-meta-item {
         display: inline-flex;
-        gap: 24px;
+        flex: 0 0 auto;
+        align-items: baseline;
+        gap: 2px;
+        min-width: 0;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        border-radius: 0;
         white-space: nowrap;
-        line-height: 1.85;
-        padding: 1px 0;
+        line-height: 2.35;
+        height: 20px;
+    }
+
+    .rx-notice-meta .rx-meta-item:not(:first-child) {
+        border-left: 1px solid #d1d5db;
+        padding-left: 14px;
+        margin-left: 2px;
+        line-height: 2.35;
+    }
+
+    .rx-notice-meta .rx-meta-label {
+        font-weight: 600;
+        color: #6b7280;
+        line-height: 1.35;
+        flex-shrink: 0;
+    }
+
+    .rx-notice-meta .rx-meta-label::after {
+        content: '：';
+        font-weight: 500;
+        color: #9ca3af;
+    }
+
+    .rx-notice-meta .rx-meta-value {
+        color: #111827;
+        line-height: 1.35;
+        font-variant-numeric: tabular-nums;
     }
 }
 
+.rx-title {
+    text-align: center;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 10px 0 35px;
+    letter-spacing: 0.08em;
+    color: #1f1f1f;
+}
+
+/* === 患者信息表 === */
 .rx-info {
     border: 1px solid #c8c8c8;
     border-bottom: none;
@@ -341,13 +412,10 @@ defineExpose({
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 10px 12px;
+    padding: 16px 10px;
     font-size: 13px;
     border-right: 1px solid #c8c8c8;
-    min-height: 40px;
-    line-height: 1.85;
-    overflow: visible;
-    box-sizing: border-box;
+    min-height: 32px;
 
     &:last-child {
         border-right: none;
@@ -356,20 +424,16 @@ defineExpose({
     .rx-key {
         color: #1f1f1f;
         flex-shrink: 0;
-        line-height: 1.85;
-        padding: 1px 0;
     }
 
     .rx-val {
         flex: 1;
         min-width: 0;
         word-break: break-all;
-        line-height: 1.85;
-        padding: 1px 0;
-        overflow: visible;
     }
 }
 
+/* === Rp 区域 + 水印 === */
 .rx-rp {
     position: relative;
     border-left: 1px solid #c8c8c8;
@@ -382,6 +446,7 @@ defineExpose({
 
 .rx-watermark {
     position: absolute;
+    /* 不使用 inset 简写：html2canvas 对 inset 解析不稳定 */
     top: 0;
     right: 0;
     bottom: 0;
@@ -411,6 +476,7 @@ defineExpose({
     z-index: 1;
     width: 100%;
     box-sizing: border-box;
+    padding: 10px;
 }
 
 .rx-rp-label {
@@ -418,6 +484,7 @@ defineExpose({
     font-weight: 700;
     color: #1f1f1f;
     line-height: 1;
+    padding-bottom: 15px;
 }
 
 .rx-rp-cols-head {
@@ -429,6 +496,9 @@ defineExpose({
     min-width: 0;
 }
 
+/* 注意：列内 1fr 64px 与 .rx-herb-cell 完全一致，
+ * 配合 .rx-herbs 与 .rx-rp-cols-head 同样的左侧 44px 缩进，
+ * 即可保证「用药 (单剂)」与药材名、「总量」与总量数字精确对齐。 */
 .rx-rp-col-head {
     display: grid;
     grid-template-columns: 1fr 64px;
@@ -436,6 +506,7 @@ defineExpose({
     font-size: 13px;
     color: #1f1f1f;
     min-width: 0;
+    padding-bottom: 15px;
 
     & > span:last-child {
         text-align: right;
@@ -443,11 +514,12 @@ defineExpose({
 }
 
 .rx-herbs {
+    /* 与 .rx-rp-head 中 Rp. 列(36px) + column-gap(8px) 等宽缩进 */
     padding-left: 44px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 24px;
-    row-gap: 10px;
+    row-gap: 6px;
     position: relative;
     z-index: 1;
     width: 100%;
@@ -477,8 +549,7 @@ defineExpose({
     grid-template-columns: 1fr 64px;
     column-gap: 8px;
     font-size: 13px;
-    /* 略加高：预览与 html2canvas 导出时中文字不易挤叠/切边 */
-    line-height: 2.35;
+    line-height: 2.5;
     min-width: 0;
 }
 
@@ -497,6 +568,7 @@ defineExpose({
     white-space: nowrap;
 }
 
+/* === 服法 / 备注 文本块 === */
 .rx-text {
     border: 1px solid #c8c8c8;
     border-top: none;
@@ -514,6 +586,7 @@ defineExpose({
     }
 }
 
+/* === 底部表格 === */
 .rx-bottom {
     border: 1px solid #c8c8c8;
     border-top: none;
@@ -529,28 +602,48 @@ defineExpose({
 }
 
 .rx-bot-row-1 {
-    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr;
-    min-height: 78px;
+    /* 类型/剂数/单剂量 三个 meta 列适当加宽，
+     * 避免"浓缩丸-浓缩水丸"被强制折行后把整行挤错位 */
+    grid-template-columns: 1.6fr 0.6fr 0.6fr 0.6fr 0.6fr 1.7fr 0.95fr 1.25fr;
+    min-height: 70px;
 }
 
 .rx-bot-row-1--user {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 1.6fr 0.6fr;
 }
 
+.rx-hospital-row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 2px;
+    padding: 10px 12px;
+    min-height: 52px;
+    text-align: left;
+}
+
+.rx-hospital-line {
+    font-size: 12px;
+    color: #374151;
+    line-height: 1.6;
+}
+
+/* 默认：单行内容左对齐、上下居中（适配 类型/剂数/单剂量/费用 等格子）。
+ * 需要"标题置顶 + 签名留白"的格子（医师/审方/配药/复核/发药）请加 .rx-bot-stack。
+ * 这样无需任何 !important 反向覆盖，html2canvas/原生渲染表现一致。 */
 .rx-bot-cell {
     border-right: 1px solid #c8c8c8;
-    /* 上下多留空：html2canvas 对中文字体 baseline 偏紧，易切掉字脚/字头 */
-    padding: 10px 12px;
+    padding: 6px 10px;
     font-size: 12px;
     color: #1f1f1f;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    min-height: 40px;
+    min-height: 32px;
     box-sizing: border-box;
-    line-height: 1.6;
-    overflow: visible;
+    line-height: 2.5;
 
     &:last-child {
         border-right: none;
@@ -567,71 +660,67 @@ defineExpose({
     font-size: 13px;
     color: #1f1f1f;
     margin-bottom: 4px;
-    line-height: 1.5;
+}
+
+.rx-bot-label--doctor {
+    flex-shrink: 0;
+    margin-bottom: 0;
+    margin-right: 6px;
+    line-height: 1.2;
+    align-self: center;
 }
 
 .rx-bot-doctor {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+
     .rx-bot-doctor-body {
         flex: 1;
         display: flex;
+        flex-direction: row;
         align-items: center;
-        gap: 6px;
-        min-height: 40px;
-        overflow: visible;
+        justify-content: flex-start;
+        flex-wrap: nowrap;
+        gap: 8px;
+        min-height: 0;
     }
 
     .rx-bot-doctor-name {
         font-size: 13px;
         color: #1f1f1f;
-        line-height: 1.5;
+        line-height: 1.2;
+        white-space: nowrap;
     }
 
     .rx-bot-sign-img {
-        max-height: 44px;
-        max-width: 120px;
+        flex-shrink: 0;
+        max-height: 40px;
+        max-width: 110px;
         object-fit: contain;
-        display: block;
     }
 }
 
 .rx-bot-meta {
     flex-wrap: nowrap;
-    overflow: visible;
 
     .rx-bot-meta-key {
         color: #1f1f1f;
         margin-right: 6px;
         white-space: nowrap;
         flex-shrink: 0;
-        line-height: 1.6;
-        padding: 2px 0;
+        line-height: 1.4;
     }
 
     .rx-bot-meta-val {
         font-weight: 500;
         white-space: nowrap;
-        /* 勿用 overflow:hidden：导出时易把「30天」等字脚下缘裁掉 */
-        overflow: visible;
+        overflow: hidden;
+        text-overflow: ellipsis;
         min-width: 0;
-        line-height: 1.6;
-        padding: 2px 0;
+        line-height: 2.5;
     }
 }
-
-.rx-hospital-row {
-    display: block;
-    /* 与上方边框拉开，避免院名/地址字头被横线切掉 */
-    padding: 12px 12px 14px;
-    background: #fafafa;
-    overflow: visible;
-}
-
-.rx-hospital-line {
-    font-size: 12px;
-    color: #606266;
-    line-height: 1.85;
-    padding: 1px 0;
-}
 </style>
 
 <!-- 全局打印样式：body * 选择器不能放进 scoped -->
diff --git a/admin/src/components/prescription-slip/utils.ts b/admin/src/components/prescription-slip/utils.ts
index f7f0deb57..a1f1d0f23 100644
--- a/admin/src/components/prescription-slip/utils.ts
+++ b/admin/src/components/prescription-slip/utils.ts
@@ -173,6 +173,30 @@ export function rxSerialText(data: Record<string, any> | null | undefined): stri
     )
 }
 
+/** 处方笺「处方编号」：处方 sn，缺省 visit_no */
+export function rxPrescriptionSnText(data: Record<string, any> | null | undefined): string {
+    if (!data) return '—'
+    const sn = String(data.sn ?? '').trim()
+    if (sn) return sn
+    const vn = String(data.visit_no ?? '').trim()
+    if (vn) return vn
+    return '—'
+}
+
+/** 流转编号（挂号）：预约/挂号主键 */
+export function rxAppointmentFlowText(data: Record<string, any> | null | undefined): string {
+    if (!data) return '—'
+    const aid = Number(data.appointment_id)
+    if (Number.isFinite(aid) && aid > 0) return String(aid)
+    return '—'
+}
+
+/** 业务订单号（从打开详情的订单行合并，便于笺面核对） */
+export function rxBusinessOrderNoText(data: Record<string, any> | null | undefined): string {
+    if (!data) return ''
+    return String(data.order_no ?? '').trim()
+}
+
 export function rxRecipientText(data: Record<string, any> | null | undefined): string {
     if (!data) return '—'
     if (data.recipient_text) return data.recipient_text