结算费用明细

src/components/medical-insurance/charge-list/Charge.vue

@@ -8,7 +8,11 @@ import {
   selectPatOverviews,
 } from "@/api/inpatient/charge-list";
 import { getLodop } from "@/utils/c-lodop";
-import {formatDate, formatDatetime ,getDateRangeFormatDate} from "@/utils/date";
+import {
+  formatDate,
+  formatDatetime,
+  getDateRangeFormatDate,
+} from "@/utils/date";
 
 const props = defineProps({
   patNo: {
@@ -45,7 +49,7 @@ const fetchOverview = () => {
     return;
   }
   selectPatOverviews(currentPatNo.value).then(res => {
-    dateRange.value = []
+    dateRange.value = [];
     patList.value = res;
   });
 };
@@ -54,35 +58,39 @@ const ajustDisdate = disdate => {
   return disdate ? disdate : '<span style="color: green">● 在院</span>';
 };
 
-const showDateRange = ref(false)
-const dateRange = ref([])
-const currentRow = ref({})
+const showDateRange = ref(false);
+const dateRange = ref([]);
+const currentRow = ref({});
 function openDateRange(row) {
-  if (dateRange.value.length === 0 || row.patNo !== currentRow.value.patNo || row.times !== currentRow.value.times) {
-    dateRange.value[0] = new Date(row.admdate)
-    dateRange.value[1] = row.disdate ? new Date(row.disdate) : new Date()
+  if (
+    dateRange.value.length === 0 ||
+    row.patNo !== currentRow.value.patNo ||
+    row.times !== currentRow.value.times
+  ) {
+    dateRange.value[0] = new Date(row.admdate);
+    dateRange.value[1] = row.disdate ? new Date(row.disdate) : new Date();
   }
-  currentRow.value = row
+  currentRow.value = row;
   showDateRange.value = true;
 }
 
 function cancelDateRange() {
-  showDateRange.value = false
+  showDateRange.value = false;
 }
 
 function confirmDateRange() {
-  console.log(dateRange.value)
-  currentRow.value.begndate = formatDatetime(dateRange.value[0])
-  currentRow.value.enddate = formatDatetime(dateRange.value[1])
+  console.log(dateRange.value);
+  currentRow.value.begndate = formatDatetime(dateRange.value[0]);
+  currentRow.value.enddate = formatDatetime(dateRange.value[1]);
   // currentRow.value.begndate = formatDate(dateRange.value[0])
   // currentRow.value.enddate = formatDate(dateRange.value[1])
-  fetchBriefPatInfo()
+  fetchBriefPatInfo();
 }
 
 const fetchBriefPatInfo = () => {
   selectBriefPatInfo(currentRow.value).then(res => {
     briefPatInfo.value = res;
-    showDateRange.value = false
+    showDateRange.value = false;
     selectChargeList(currentRow.value).then(rslt => {
       chargeListMap.value = rslt.chargeList;
       sumsMap.value = rslt.sumsMap;
@@ -202,18 +210,25 @@ defineExpose({
     </div>
 
     <el-dialog
-        v-model="showDateRange"
-        width="30%"
-        title="请选择时间范围"
-        :close-on-press-escape="false"
-        :close-on-click-modal="false"
-        :show-close="false"
+      v-model="showDateRange"
+      width="30%"
+      title="请选择时间范围"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      :show-close="false"
     >
-      <el-date-picker size="default" v-model="dateRange" type="datetimerange" style="width: 100%" />
+      <el-date-picker
+        size="default"
+        v-model="dateRange"
+        type="datetimerange"
+        style="width: 100%"
+      />
       <template #footer>
         <div style="margin-top: 50px">
           <el-button size="default" @click="cancelDateRange">取消</el-button>
-          <el-button size="default" type="primary" @click="confirmDateRange">确定</el-button>
+          <el-button size="default" type="primary" @click="confirmDateRange"
+            >确定</el-button
+          >
         </div>
       </template>
     </el-dialog>

src/components/medical-insurance/charge-list/ChargeTable.vue

@@ -3,10 +3,10 @@
     <!-- 标签页导航 -->
     <div class="tab-header">
       <div
-          v-for="(tab, index) in tabs"
-          :key="index"
-          :class="['tab-item', { active: activeTab === index }]"
-          @click="activeTab = index"
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :class="['tab-item', { active: activeTab === index }]"
+        @click="activeTab = index"
       >
         {{ tab.name }}
       </div>
@@ -22,8 +22,8 @@
             <div id="printArea" style="width: 100%; height: 100%">
               <table style="width: 100%">
                 <thead ref="theadRef1">
-                <tr>
-                  <td
+                  <tr>
+                    <td
                       colspan="8"
                       style="
                         width: 96%;
@@ -31,143 +31,172 @@
                         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>
-                <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>
+                    >
+                      <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="height: 22px">
+                      开始日期：{{ briefPatInfo.begndate }}
+                    </td>
+                    <td colspan="2">结束日期：{{ briefPatInfo.enddate }}</td>
+                    <td colspan="3">天数：{{ briefPatInfo.days }}</td>
+                    <td colspan="2">范围内费用：{{ sumsMap["总计"] }}</td>
+                  </tr>
+                  <tr>
+                    <td
+                      colspan="8"
+                      style="border-bottom: 2px solid black; height: 22px"
+                    >
+                      账页号：{{ 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
+                  <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
+                    >
+                      {{ 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>
+                    >
+                      小计：{{ sumsMap[key] }}
+                    </td>
+                  </tr>
                 </tbody>
                 <tbody>
-                <tr>
-                  <td
+                  <tr>
+                    <td
                       colspan="7"
                       style="height: 36px; border-bottom: 2px solid black"
-                  ></td>
-                  <td
+                    ></td>
+                    <td
                       style="
                         text-align: left;
                         font-size: 15px;
                         font-weight: bold;
                         border-bottom: 2px solid black;
                       "
-                  >
-                    总计：{{ sumsMap["总计"] }}
-                  </td>
-                </tr>
+                    >
+                      总计：{{ sumsMap["总计"] }}
+                    </td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -179,79 +208,278 @@
       <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%; padding: 0 15px;">
+            <div
+              id="printArea"
+              style="width: 100%; height: 100%; padding: 0 15px"
+            >
               <!-- 仅保留顶部患者信息 + 双列数据 + 总计 -->
-              <table style="width: 100%; border-collapse: collapse;">
+              <table style="width: 100%; border-collapse: collapse">
                 <!-- 1. 顶部患者基础信息（必要信息保留，样式紧凑） -->
                 <tr>
-                  <td colspan="14" style="height: 45px; text-align: center; vertical-align: middle;">
-                    <div style="font-size: 18px; font-weight: bold">住院病人费用明细清单</div>
-                    <div style="margin-top: 3px; font-size: 12px;">
-                      机构名称：{{ env.VITE_HOSPITAL_NAME }}&nbsp;&nbsp;机构编码：{{ env.VITE_HOSPITAL_CODE }}
+                  <td
+                    colspan="14"
+                    style="
+                      height: 45px;
+                      text-align: center;
+                      vertical-align: middle;
+                    "
+                  >
+                    <div style="font-size: 18px; font-weight: bold">
+                      住院病人费用明细清单
+                    </div>
+                    <div style="margin-top: 3px; font-size: 12px">
+                      机构名称：{{
+                        env.VITE_HOSPITAL_NAME
+                      }}&nbsp;&nbsp;机构编码：{{ env.VITE_HOSPITAL_CODE }}
                     </div>
                   </td>
                 </tr>
-                <tr style="border-bottom: 1px solid #eee;">
-                  <td colspan="3" style="padding: 4px 8px;">住院号：{{ briefPatInfo.patNo }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">姓名：{{ briefPatInfo.name }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">性别：{{ briefPatInfo.gender }}</td>
-                  <td colspan="3" style="padding: 4px 8px;">科室：{{ briefPatInfo.dept }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">床号：{{ briefPatInfo.bedNo }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">天数：{{ briefPatInfo.days }}</td>
+                <tr style="border-bottom: 1px solid #eee">
+                  <td colspan="3" style="padding: 4px 8px">
+                    住院号：{{ briefPatInfo.patNo }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    姓名：{{ briefPatInfo.name }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    性别：{{ briefPatInfo.gender }}
+                  </td>
+                  <td colspan="3" style="padding: 4px 8px">
+                    科室：{{ briefPatInfo.dept }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    床号：{{ briefPatInfo.bedNo }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    天数：{{ briefPatInfo.days }}
+                  </td>
                 </tr>
-                <tr style="border-bottom: 2px solid #333;">
-                  <td colspan="4" style="padding: 4px 8px;">入院日期：{{ briefPatInfo.admdate }}</td>
-                  <td colspan="3" style="padding: 4px 8px;">费用区间：{{ briefPatInfo.begndate }}-{{ briefPatInfo.enddate }}</td>
-                  <td colspan="3" style="padding: 4px 8px;">医疗类别：{{ briefPatInfo.medtype }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">可用余额：{{ briefPatInfo.balance }}</td>
-                  <td colspan="2" style="padding: 4px 8px;">账页号：{{ briefPatInfo.ledger }}</td>
+                <tr style="border-bottom: 2px solid #333">
+                  <td colspan="4" style="padding: 4px 8px">
+                    入院日期：{{ briefPatInfo.admdate }}
+                  </td>
+                  <td colspan="3" style="padding: 4px 8px">
+                    费用区间：{{ briefPatInfo.begndate }}-{{
+                      briefPatInfo.enddate
+                    }}
+                  </td>
+                  <td colspan="3" style="padding: 4px 8px">
+                    医疗类别：{{ briefPatInfo.medtype }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    可用余额：{{ briefPatInfo.balance }}
+                  </td>
+                  <td colspan="2" style="padding: 4px 8px">
+                    账页号：{{ briefPatInfo.ledger }}
+                  </td>
                 </tr>
 
                 <!-- 2. 双列表头（精简，与数据列对齐） -->
-                <tr style="background-color: #f5f5f5;">
+                <tr style="background-color: #f5f5f5">
                   <!-- 左列表头 -->
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">项目名称</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">规格</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">单位</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">单价</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">数量</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">金额</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">类型</td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    项目名称
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    规格
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    单位
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    单价
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    数量
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    金额
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    类型
+                  </td>
                   <!-- 右列表头 -->
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">项目名称</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">规格</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">单位</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">单价</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">数量</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">金额</td>
-                  <td style="padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left;">类型</td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    项目名称
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    规格
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    单位
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    单价
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    数量
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    金额
+                  </td>
+                  <td
+                    style="
+                      padding: 6px 8px;
+                      border-bottom: 1px solid #ddd;
+                      text-align: left;
+                    "
+                  >
+                    类型
+                  </td>
                 </tr>
 
                 <!-- 3. 核心双列数据（均匀显示，无空白） -->
-                <template v-for="(row, rowIndex) in balancedTwoColumnData" :key="rowIndex">
-                  <tr style="border-bottom: 1px dashed #eee;" :class="rowIndex % 2 === 0 ? 'even-row' : 'odd-row'">
+                <template
+                  v-for="(row, rowIndex) in balancedTwoColumnData"
+                  :key="rowIndex"
+                >
+                  <tr
+                    style="border-bottom: 1px dashed #eee"
+                    :class="rowIndex % 2 === 0 ? 'even-row' : 'odd-row'"
+                  >
                     <!-- 左列数据 -->
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.name || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.specification || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.unit || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.priceString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.quantityString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left; color: #e64a19;">{{ row.left.costString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.left.chrgitmLv || '' }}</td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.name || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.specification || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.unit || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.priceString || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.quantityString || "" }}
+                    </td>
+                    <td
+                      style="padding: 5px 8px; text-align: left; color: #e64a19"
+                    >
+                      {{ row.left.costString || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.left.chrgitmLv || "" }}
+                    </td>
                     <!-- 右列数据 -->
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.name || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.specification || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.unit || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.priceString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.quantityString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left; color: #e64a19;">{{ row.right.costString || '' }}</td>
-                    <td style="padding: 5px 8px; text-align: left;">{{ row.right.chrgitmLv || '' }}</td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.name || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.specification || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.unit || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.priceString || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.quantityString || "" }}
+                    </td>
+                    <td
+                      style="padding: 5px 8px; text-align: left; color: #e64a19"
+                    >
+                      {{ row.right.costString || "" }}
+                    </td>
+                    <td style="padding: 5px 8px; text-align: left">
+                      {{ row.right.chrgitmLv || "" }}
+                    </td>
                   </tr>
                 </template>
 
                 <!-- 4. 总计（醒目，居中显示） -->
                 <tr>
-                  <td colspan="14" style="height: 40px; text-align: center; font-size: 16px; font-weight: bold; border-top: 2px solid #333; border-bottom: 2px solid #333; padding: 8px 0;">
+                  <td
+                    colspan="14"
+                    style="
+                      height: 40px;
+                      text-align: center;
+                      font-size: 16px;
+                      font-weight: bold;
+                      border-top: 2px solid #333;
+                      border-bottom: 2px solid #333;
+                      padding: 8px 0;
+                    "
+                  >
                     总费用：{{ sumsMap["总计"] || 0 }}
                   </td>
                 </tr>
@@ -265,14 +493,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 import env from "@/utils/setting";
 
 // 标签页配置
-const tabs = [
-  { name: '单列明细清单' },
-  { name: '双列明细清单' }
-];
+const tabs = [{ name: "单列明细清单" }, { name: "双列明细清单" }];
 const activeTab = ref(0);
 
 // 接收父组件参数
@@ -290,9 +515,12 @@ const props = defineProps({
  */
 const balancedTwoColumnData = computed(() => {
   // 步骤1：合并所有分类的费用项（移除分类层级，仅保留平级数据）
-  const allChargeItems = Object.values(props.chargeListMap).reduce((total, currentItems) => {
-    return total.concat(currentItems || []);
-  }, [] as any[]);
+  const allChargeItems = Object.values(props.chargeListMap).reduce(
+    (total, currentItems) => {
+      return total.concat(currentItems || []);
+    },
+    [] as any[]
+  );
 
   // 步骤2：拆分左右两列（按总长度的一半拆分，确保均匀）
   const totalCount = allChargeItems.length;
@@ -304,7 +532,7 @@ const balancedTwoColumnData = computed(() => {
   const maxLength = Math.max(leftColumn.length, rightColumn.length);
   const balancedData = Array.from({ length: maxLength }, (_, index) => ({
     left: leftColumn[index] || {}, // 左列有数据用数据，无则空对象
-    right: rightColumn[index] || {} // 右列有数据用数据，无则空对象
+    right: rightColumn[index] || {}, // 右列有数据用数据，无则空对象
   }));
 
   return balancedData;
@@ -335,7 +563,9 @@ const theadRef2 = ref();
   font-size: 14px;
   transition: all 0.3s;
 }
-.tab-item:last-child { border-right: none; }
+.tab-item:last-child {
+  border-right: none;
+}
 .tab-item.active {
   background-color: #fff;
   color: #1890ff;
@@ -343,17 +573,34 @@ const theadRef2 = ref();
   margin-top: -1px;
   font-weight: 500;
 }
-.tab-content { width: 100%; }
-.tab-pane { padding: 16px; }
+.tab-content {
+  width: 100%;
+}
+.tab-pane {
+  padding: 16px;
+}
 
 /* 表格优化样式 */
-table { width: 100%; border-collapse: collapse; }
-td { word-wrap: break-word; word-break: break-all; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+td {
+  word-wrap: break-word;
+  word-break: break-all;
+}
 
 /* 双列数据行交替背景（增强可读性，无多余空白） */
-.even-row { background-color: #fff; }
-.odd-row { background-color: #fafafa; }
+.even-row {
+  background-color: #fff;
+}
+.odd-row {
+  background-color: #fafafa;
+}
 
 /* 移除原始固定布局限制，让表格自适应内容 */
-.layout_h-w_max { width: 100%; height: auto; }
+.layout_h-w_max {
+  width: 100%;
+  height: auto;
+}
 </style>