Kaynağa Gözat

费用清单双列可以打印初版,不影响使用,需要样式再修改,先传一份做基础版本

梁欢 2 ay önce
ebeveyn
işleme
75d4de62b9

+ 155 - 166
src/components/medical-insurance/charge-list/ChargeTable.vue

@@ -179,163 +179,144 @@
         <div class="layout_h-w_max" style="position: relative">
           <div class="layout_h-w_max" style="overflow: auto">
             <div id="printArea" style="width: 100%; height: 100%">
-              <!-- 顶部信息保持单列 -->
-              <table style="width: 100%; margin-bottom: 15px">
-                <thead ref="theadRef2">
-                  <tr>
-                    <td
-                      colspan="8"
-                      style="
-                        width: 96%;
-                        height: 50px;
-                        text-align: center;
-                        vertical-align: center;
-                      "
-                    >
-                      <div style="font-size: 20px; font-weight: bold">
-                        住院病人费用明细清单
-                      </div>
-                      <div style="margin-top: 5px">
-                        机构名称:{{ env.VITE_HOSPITAL_NAME }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机构编码:{{ env.VITE_HOSPITAL_CODE }}
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td colspan="8" style="font-size: 16px; font-weight: bold">
-                      床号:{{ briefPatInfo.bedNo }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="height: 22px">住院号:{{ briefPatInfo.patNo }}</td>
-                    <td colspan="2">姓名:{{ briefPatInfo.name }}</td>
-                    <td colspan="3">性别:{{ briefPatInfo.gender }}</td>
-                    <td colspan="2">科室:{{ briefPatInfo.dept }}</td>
-                  </tr>
-                  <tr>
-                    <td style="height: 22px">入院日期:{{ briefPatInfo.admdate }}</td>
-                    <td colspan="2">医疗类别:{{ briefPatInfo.medtype }}</td>
-                    <td colspan="3">可用余额:{{ briefPatInfo.balance }}</td>
-                    <td colspan="2">总费用:{{ briefPatInfo.totalCost }}</td>
-                  </tr>
-                  <tr>
-                    <td style="border-bottom: 2px solid black; height: 22px">
-                      开始日期:{{ briefPatInfo.begndate }}
-                    </td>
-                    <td colspan="2" style="border-bottom: 2px solid black">
-                      结束日期:{{ briefPatInfo.enddate }}
-                    </td>
-                    <td colspan="3" style="border-bottom: 2px solid black">
-                      天数:{{ briefPatInfo.days }}
-                    </td>
-                    <td colspan="2" style="border-bottom: 2px solid black">
-                      账页号:{{ briefPatInfo.ledger }}
-                    </td>
-                  </tr>
-                </thead>
-              </table>
+                <!-- 单个table包含所有内容 -->
+                       <table style="width: 95%; border-collapse: collapse; table-layout: fixed;">
+                         <!-- 顶部信息区域 -->
+                         <tr>
+                           <td colspan="14" style="height: 50px; text-align: center; vertical-align: center;">
+                             <div style="font-size: 20px; font-weight: bold">住院病人费用明细清单</div>
+                             <div style="margin-top: 5px">
+                               机构名称:{{ env.VITE_HOSPITAL_NAME }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机构编码:{{ env.VITE_HOSPITAL_CODE }}
+                             </div>
+                           </td>
+                         </tr>
+                         <tr>
+                           <td colspan="14" style="font-size: 16px; font-weight: bold">
+                             床号:{{ briefPatInfo.bedNo }}
+                           </td>
+                         </tr>
+                         <tr>
+                           <td style="height: 22px" colspan="4">住院号:{{ briefPatInfo.patNo }}</td>
+                           <td colspan="3">姓名:{{ briefPatInfo.name }}</td>
+                           <td colspan="3">性别:{{ briefPatInfo.gender }}</td>
+                           <td colspan="4">科室:{{ briefPatInfo.dept }}</td>
+                         </tr>
+                         <tr>
+                           <td style="height: 22px" colspan="4">入院日期:{{ briefPatInfo.admdate }}</td>
+                           <td colspan="3">医疗类别:{{ briefPatInfo.medtype }}</td>
+                           <td colspan="3">可用余额:{{ briefPatInfo.balance }}</td>
+                           <td colspan="4">总费用:{{ briefPatInfo.totalCost }}</td>
+                         </tr>
+                         <tr>
+                           <td style="border-bottom: 2px solid black; height: 22px" colspan="4">
+                             开始日期:{{ briefPatInfo.begndate }}
+                           </td>
+                           <td colspan="3" style="border-bottom: 2px solid black">
+                             结束日期:{{ briefPatInfo.enddate }}
+                           </td>
+                           <td colspan="3" style="border-bottom: 2px solid black">
+                             天数:{{ briefPatInfo.days }}
+                           </td>
+                           <td colspan="4" style="border-bottom: 2px solid black">
+                             账页号:{{ briefPatInfo.ledger }}
+                           </td>
+                         </tr>
 
-              <!-- 双列显示区域 -->
-              <div class="two-column-container">
-                <!-- 左侧列 -->
-                <div class="column">
-                  <table style="width: 100%">
-                    <thead>
-                      <tr>
-                        <td style="width: 20%; border-bottom: 1px solid lightgray">项目名称</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">规格</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">单位</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">单价</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">数量</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">金额</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">执行科室</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">类型</td>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <!-- 左侧列内容 - 取前半部分数据 -->
-                      <template v-for="(val, key) in leftChargeListMap" :key="key">
-                        <tr>
-                          <td style="height: 28px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #333">
-                            {{ key }}
-                          </td>
-                        </tr>
-                        <tr v-for="(item, index) in val" :key="index">
-                          <td style="width: 20%; height: 28px; padding: 4px 12px 4px 0">{{ item.name }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.specification }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.unit }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.priceString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.quantityString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.costString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.execDept }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.chrgitmLv }}</td>
-                        </tr>
-                        <tr>
-                          <td colspan="7" style="border-bottom: 1px solid lightgray"></td>
-                          <td style="text-align: left; font-size: 15px; font-weight: bold; border-bottom: 1px solid lightgray">
-                            小计:{{ sumsMap[key] }}
-                          </td>
-                        </tr>
-                      </template>
-                    </tbody>
-                  </table>
-                </div>
-
-                <!-- 右侧列 -->
-                <div class="column">
-                  <table style="width: 100%">
-                    <thead>
-                      <tr>
-                        <td style="width: 20%; border-bottom: 1px solid lightgray">项目名称</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">规格</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">单位</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">单价</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">数量</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">金额</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">执行科室</td>
-                        <td style="width: 8%; border-bottom: 1px solid lightgray">类型</td>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <!-- 右侧列内容 - 取后半部分数据 -->
-                      <template v-for="(val, key) in rightChargeListMap" :key="key">
-                        <tr>
-                          <td style="height: 28px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #333">
-                            {{ key }}
-                          </td>
-                        </tr>
-                        <tr v-for="(item, index) in val" :key="index">
-                          <td style="width: 20%; height: 28px; padding: 4px 12px 4px 0">{{ item.name }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.specification }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.unit }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.priceString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.quantityString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.costString }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.execDept }}</td>
-                          <td style="width: 8%; height: 28px; padding: 4px 12px 4px 0">{{ item.chrgitmLv }}</td>
-                        </tr>
-                        <tr>
-                          <td colspan="7" style="border-bottom: 1px solid lightgray"></td>
-                          <td style="text-align: left; font-size: 15px; font-weight: bold; border-bottom: 1px solid lightgray">
-                            小计:{{ sumsMap[key] }}
-                          </td>
-                        </tr>
-                      </template>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <!-- 总计信息 -->
-              <table style="width: 100%; margin-top: 15px">
-                <tbody>
-                  <tr>
-                    <td colspan="7" style="height: 36px; border-bottom: 2px solid black"></td>
-                    <td style="text-align: left; font-size: 15px; font-weight: bold; border-bottom: 2px solid black">
-                      总计:{{ sumsMap["总计"] }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                         <!-- 双列标题行 - 移除执行科室列 -->
+                         <tr>
+                           <!-- 左侧表头 -->
+                           <td style="width: 25%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">项目名称</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">规格</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">单位</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">单价</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">数量</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">金额</td>
+                           <td style="width: 8%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">类型</td>
+
+                           <!-- 右侧表头(与左侧完全相同的宽度设置) -->
+                           <td style="width: 25%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">项目名称</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">规格</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">单位</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">单价</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">数量</td>
+                           <td style="width: 4%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">金额</td>
+                           <td style="width: 8%; border-bottom: 1px solid lightgray; padding: 4px 0; text-align: left; padding-left: 8px">类型</td>
+                         </tr>
+
+                         <!-- 双列内容区域 -->
+                         <template v-for="i in Math.max(leftKeys.length, rightKeys.length)" :key="i">
+                           <!-- 左侧分类标题 -->
+                           <tr>
+                             <td colspan="7" style="height: 28px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #333; padding: 4px 0; padding-left: 8px">
+                               {{ leftKeys[i-1] || '' }}
+                             </td>
+                             <!-- 右侧分类标题 -->
+                             <td colspan="7" style="height: 28px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #333; padding: 4px 0; padding-left: 8px">
+                               {{ rightKeys[i-1] || '' }}
+                             </td>
+                           </tr>
+
+                           <!-- 左侧分类内容 -->
+                           <template v-if="leftKeys[i-1]">
+                             <tr v-for="(item, idx) in leftChargeListMap[leftKeys[i-1]]" :key="`left-${i}-${idx}`">
+                               <!-- 左侧数据  -->
+                               <td style="width: 25%; height: 28px; padding: 4px 8px; text-align: left">{{ item.name }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.specification }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.unit }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.priceString }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.quantityString }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.costString }}</td>
+                               <td style="width: 8%; height: 28px; padding: 4px 8px; text-align: left">{{ item.chrgitmLv }}</td>
+
+                               <!-- 右侧对应行数据(空值处理) -->
+                               <template v-if="rightKeys[i-1] && idx < rightChargeListMap[rightKeys[i-1]].length">
+                                 <td style="width: 25%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].name }}</td>
+                                 <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].specification }}</td>
+                                 <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].unit }}</td>
+                                 <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].priceString }}</td>
+                                 <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].quantityString }}</td>
+                                 <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].costString }}</td>
+                                 <td style="width: 8%; height: 28px; padding: 4px 8px; text-align: left">{{ rightChargeListMap[rightKeys[i-1]][idx].chrgitmLv }}</td>
+                               </template>
+                               <template v-else>
+                                 <td colspan="7" style="height: 28px;"></td>
+                               </template>
+                             </tr>
+                           </template>
+
+                           <!-- 右侧单独有数据的情况 -->
+                           <template v-else-if="rightKeys[i-1] && !leftKeys[i-1]">
+                             <tr v-for="(item, idx) in rightChargeListMap[rightKeys[i-1]]" :key="`right-${i}-${idx}`">
+                               <td colspan="7" style="height: 28px;"></td>
+                               <td style="width: 25%; height: 28px; padding: 4px 8px; text-align: left">{{ item.name }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.specification }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.unit }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.priceString }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.quantityString }}</td>
+                               <td style="width: 4%; height: 28px; padding: 4px 8px; text-align: left">{{ item.costString }}</td>
+                               <td style="width: 8%; height: 28px; padding: 4px 8px; text-align: left">{{ item.chrgitmLv }}</td>
+                             </tr>
+                           </template>
+
+                           <!-- 小计行 -->
+                           <tr>
+                             <td colspan="7" style="width: 6%; text-align: right; font-size: 15px; font-weight: bold; border-bottom: 1px solid lightgray; height: 28px; padding: 4px 8px">
+                               {{ leftKeys[i-1] ? `小计:${sumsMap[leftKeys[i-1]]}` : '' }}
+                             </td>
+
+                             <td colspan="7" style="width: 6%; text-align: right; font-size: 15px; font-weight: bold; border-bottom: 1px solid lightgray; height: 28px; padding: 4px 8px">
+                               {{ rightKeys[i-1] ? `小计:${sumsMap[rightKeys[i-1]]}` : '' }}
+                             </td>
+                           </tr>
+                         </template>
+
+                         <!-- 总计信息 -->
+                         <tr>
+                           <td colspan="14" style="width: 6%; text-align: right; font-size: 15px; font-weight: bold; border-bottom: 2px solid black; height: 36px; padding: 4px 8px">
+                             总计:{{ sumsMap["总计"] }}
+                           </td>
+                         </tr>
+                       </table>
             </div>
           </div>
         </div>
@@ -371,12 +352,13 @@ const props = defineProps({
   },
 });
 
-// 双列布局所需的计算属性(仅用于第二标签页)
+const theadRef = ref();
+
+// 左右列数据处理
 const leftChargeListMap = computed(() => {
   const keys = Object.keys(props.chargeListMap);
   const middleIndex = Math.ceil(keys.length / 2);
   const leftKeys = keys.slice(0, middleIndex);
-
   return leftKeys.reduce((obj, key) => {
     obj[key] = props.chargeListMap[key];
     return obj;
@@ -387,13 +369,19 @@ const rightChargeListMap = computed(() => {
   const keys = Object.keys(props.chargeListMap);
   const middleIndex = Math.ceil(keys.length / 2);
   const rightKeys = keys.slice(middleIndex);
-
   return rightKeys.reduce((obj, key) => {
     obj[key] = props.chargeListMap[key];
     return obj;
   }, {});
 });
 
+// 左右列keys数组
+const leftKeys = computed(() => Object.keys(leftChargeListMap.value));
+const rightKeys = computed(() => Object.keys(rightChargeListMap.value));
+
+
+
+
 // 表头引用
 const theadRef1 = ref();
 const theadRef2 = ref();
@@ -459,14 +447,15 @@ table * {
   border-collapse: collapse;
 }
 
-/* 双列布局样式(仅用于第二标签页) */
-.two-column-container {
-  display: flex;
-  gap: 20px; /* 两列之间的间距 */
-  width: 100%;
+/* 确保表格布局稳定 */
+table {
+  table-layout: fixed;
 }
 
-.column {
-  flex: 1; /* 两列平均分配宽度 */
+/* 内容自动换行,避免列宽被撑开 */
+td {
+  word-wrap: break-word;
+  word-break: break-all;
+  border: 1px solid transparent;
 }
 </style>