|
|
@@ -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 }} 机构编码:{{ 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 }} 机构编码:{{ 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>
|