|
|
@@ -1,268 +1,361 @@
|
|
|
<template>
|
|
|
- <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%">
|
|
|
- <thead ref="theadRef">
|
|
|
- <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>
|
|
|
- <tr>
|
|
|
- <td
|
|
|
- style="
|
|
|
- height: 28px;
|
|
|
- width: 20%;
|
|
|
- border-bottom: 1px solid lightgray;
|
|
|
- "
|
|
|
- >
|
|
|
- 医保编码
|
|
|
- </td>
|
|
|
- <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: 20%; border-bottom: 1px solid lightgray">
|
|
|
- 执行科室
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody v-for="(val, key) in chargeListMap" :id="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.code }}
|
|
|
- </td>
|
|
|
- <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: 20%; height: 28px; padding: 4px 12px 4px 0">
|
|
|
- {{ item.execDept }}
|
|
|
- </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>
|
|
|
- </tbody>
|
|
|
- <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>
|
|
|
+ <div class="tab-container">
|
|
|
+ <!-- 标签页导航 -->
|
|
|
+ <div class="tab-header">
|
|
|
+ <div
|
|
|
+ v-for="(tab, index) in tabs"
|
|
|
+ :key="index"
|
|
|
+ :class="['tab-item', { active: activeTab === index }]"
|
|
|
+ @click="activeTab = index"
|
|
|
+ >
|
|
|
+ {{ tab.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="position: absolute; top: 0; left: 0; width: calc(100% - 15px)">
|
|
|
- <div style="width: 100%; height: max-content; background: white">
|
|
|
- <table style="width: 100%">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <td
|
|
|
- colspan="8"
|
|
|
- style="
|
|
|
- width: 96%;
|
|
|
- height: 50px;
|
|
|
- text-align: center;
|
|
|
- vertical-align: center;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="font-size: 20px; font-weight: bold">
|
|
|
- 住院病人费用明细清单
|
|
|
+
|
|
|
+ <!-- 标签页内容区域 -->
|
|
|
+ <div class="tab-content">
|
|
|
+ <!-- 第一标签页：原始单列布局 -->
|
|
|
+ <div v-if="activeTab === 0" class="tab-pane">
|
|
|
+ <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%">
|
|
|
+ <thead ref="theadRef1">
|
|
|
+ <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>
|
|
|
+ <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 v-for="(val, key) in chargeListMap" :id="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>
|
|
|
+ </tbody>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第二标签页：您提供的双列布局页面 -->
|
|
|
+ <div v-if="activeTab === 1" class="tab-pane">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 双列显示区域 -->
|
|
|
+ <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 style="margin-top: 5px">
|
|
|
- 机构名称：{{
|
|
|
- env.VITE_HOSPITAL_NAME
|
|
|
- }} 机构编码：{{
|
|
|
- env.VITE_HOSPITAL_CODE
|
|
|
- }}
|
|
|
+
|
|
|
+ <!-- 右侧列 -->
|
|
|
+ <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>
|
|
|
- </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>
|
|
|
- <tr>
|
|
|
- <td
|
|
|
- style="
|
|
|
- height: 28px;
|
|
|
- width: 20%;
|
|
|
- border-bottom: 1px solid lightgray;
|
|
|
- "
|
|
|
- >
|
|
|
- 医保编码
|
|
|
- </td>
|
|
|
- <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: 20%; border-bottom: 1px solid lightgray">
|
|
|
- 执行科室
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- </table>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { ref, computed } from 'vue';
|
|
|
import env from "@/utils/setting";
|
|
|
|
|
|
+// 标签页配置
|
|
|
+const tabs = [
|
|
|
+ { name: '单列明细清单' },
|
|
|
+ { name: '双列明细清单' }
|
|
|
+];
|
|
|
+const activeTab = ref(0); // 默认显示第一标签页
|
|
|
+
|
|
|
+// 接收父组件传递的参数
|
|
|
const props = defineProps({
|
|
|
briefPatInfo: {
|
|
|
type: Object,
|
|
|
@@ -278,10 +371,78 @@ 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;
|
|
|
+ }, {});
|
|
|
+});
|
|
|
+
|
|
|
+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;
|
|
|
+ }, {});
|
|
|
+});
|
|
|
+
|
|
|
+// 表头引用
|
|
|
+const theadRef1 = ref();
|
|
|
+const theadRef2 = ref();
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+/* 标签页样式 */
|
|
|
+.tab-container {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header {
|
|
|
+ display: flex;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-bottom: 1px solid #e0e0e0;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item {
|
|
|
+ padding: 12px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-right: 1px solid #e0e0e0;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item:last-child {
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item.active {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #1890ff;
|
|
|
+ border-top: 2px solid #1890ff;
|
|
|
+ margin-top: -1px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-pane {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 原有样式 */
|
|
|
.flex-header {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
@@ -297,4 +458,15 @@ table * {
|
|
|
padding: 0;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
+
|
|
|
+/* 双列布局样式（仅用于第二标签页） */
|
|
|
+.two-column-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px; /* 两列之间的间距 */
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.column {
|
|
|
+ flex: 1; /* 两列平均分配宽度 */
|
|
|
+}
|
|
|
</style>
|
yeguodong