对账单虚拟列表

src/views/group/finance/check-bill/index.vue

@@ -120,13 +120,13 @@
     <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="94%">
       <el-tabs v-model="activeName" class="demo-tabs">
         <el-tab-pane label="SKU对账单" name="sku">
-          <PrintSKU :rowData="rowData" @clickCancel="openPrint = false" v-if="activeName === 'sku'"></PrintSKU>
+          <PrintSKU :rowData="rowData" @clickCancel="openPrint = false"></PrintSKU>
         </el-tab-pane>
         <el-tab-pane label="BOM对账单" name="bom">
-          <PrintBOM :rowData="rowData" @clickCancel="openPrint = false" v-if="activeName === 'bom'"></PrintBOM>
+          <PrintBOM :rowData="rowData" @clickCancel="openPrint = false"></PrintBOM>
         </el-tab-pane>
         <el-tab-pane label="订单对账单" name="order">
-          <PrintOrder :rowData="rowData" @clickCancel="openPrint = false" v-if="activeName === 'order'"></PrintOrder>
+          <PrintOrder :rowData="rowData" :activeName="activeName" @clickCancel="openPrint = false"></PrintOrder>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>

src/views/group/finance/check-bill/printBOM.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
+  <el-card v-loading="loading">
+    <div id="tableId">
+      <div style="height: calc(100vh - 264px); overflow-y: auto; overflow-x: hidden">
         <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
           <el-table-column align="center">
             <template #header>
@@ -31,12 +31,12 @@
           </el-table-column>
         </el-table>
       </div>
-      <div style="padding: 8px; text-align: center">
-        <el-button @click="clickCancel" size="large">关 闭</el-button>
-        <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
-      </div>
-    </el-card>
-  </div>
+    </div>
+    <div style="padding: 8px; text-align: center">
+      <el-button @click="clickCancel" size="large">关 闭</el-button>
+      <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
+    </div>
+  </el-card>
 </template>
 
 <script setup>

src/views/group/finance/check-bill/printOrder.vue

@@ -1,81 +1,30 @@
 <template>
-  <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-    <div style="zoom: 0.8">
-      <table class="tableOne" border="0" cellpadding="0" cellspacing="0">
-        <tr>
-          <th colspan="19" style="border-right: 0; border-top: 0">
-            <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="19" style="border-bottom: 1px solid black; border-right: 0">
-            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} )</div>
-          </th>
-        </tr>
-        <tr>
-          <th style="width: 90px">订单时间</th>
-          <th style="width: 134px">订单号</th>
-          <th style="width: 130px">万里牛单号</th>
-          <th style="width: 100px">SKU品号</th>
-          <th style="min-width: 200px">SKU品名</th>
-          <th style="width: 80px">SKU数量</th>
-          <th style="width: 100px">BOM品号</th>
-          <th style="min-width: 300px">BOM品名</th>
-          <th style="width: 65px">BOM数量</th>
-          <th style="width: 65px">单价</th>
-          <th style="width: 65px">激光LOGO</th>
-          <th style="width: 65px">激光体位线</th>
-          <th style="width: 65px">代发费</th>
-          <th style="width: 70px">快递包材费</th>
-          <th style="width: 70px">包装人工费</th>
-          <th style="width: 70px">管理费</th>
-          <th style="width: 80px">SKU单价</th>
-          <th style="width: 80px">小计</th>
-          <th style="border-right: 0; width: 90px">合计</th>
-        </tr>
-        <tbody v-for="(item, index) in tableData" :key="index">
-          <tr v-for="(itemBom, indexBom) in item.bomSpecList" :key="indexBom">
-            <td v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.wlnCreateTime }}</td>
-            <td style="text-align: left" v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.code }}</td>
-            <td style="text-align: left" v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.wlnCode }}</td>
-            <td style="text-align: left" v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.skuSpecCode }}</td>
-            <td style="text-align: left" v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.skuSpecName }}</td>
-            <td v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.quantity }}</td>
-            <td style="text-align: left">{{ itemBom.bomSpecCode }}</td>
-            <td style="text-align: left">{{ itemBom.bomSpecName }}</td>
-            <td>{{ itemBom.quantity }}</td>
-            <td>{{ itemBom.unitPrice }}</td>
-            <td>{{ itemBom.laserLogoSummary }}</td>
-            <td>{{ itemBom.laserMitochondrialSummary }}</td>
-            <td>{{ itemBom.lssueFeeSummary }}</td>
-            <td>{{ itemBom.deliveryMaterialsFeeSummary }}</td>
-            <td>{{ itemBom.packingLaborSummary }}</td>
-            <td>{{ itemBom.managementFeeSummary }}</td>
-            <td v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ item.unitPrice }}</td>
-            <td v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ moneyFormat(item.subtotal) }}</td>
-            <td style="border-right: 0" v-if="indexBom === 0" :rowspan="item.bomSpecList.length">{{ moneyFormat(item.total) }}</td>
-          </tr>
-        </tbody>
-        <tr>
-          <td>总计:</td>
-          <td colspan="17"></td>
-          <td style="border-right: 0">
-            <span>{{ getAggregate() }}</span>
-          </td>
-        </tr>
-      </table>
-      <div style="padding: 8px; text-align: center">
-        <el-button @click="clickCancel" size="large">关 闭</el-button>
-        <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
-      </div>
+  <el-card v-loading="loading">
+    <div style="height: calc(100vh - 264px); overflow-y: auto; overflow-x: hidden">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed :cache="10">
+            <template #row="props">
+              <Row v-bind="props" />
+            </template>
+          </el-table-v2>
+        </template>
+      </el-auto-resizer>
+    </div>
+    <div style="padding: 8px; text-align: center">
+      <el-button @click="clickCancel" size="large">关 闭</el-button>
+      <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
     </div>
   </el-card>
 </template>
 
 <script setup>
+import { cloneVNode } from "vue";
+
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
+  activeName: String,
 });
 const loading = ref(false);
 const tableData = ref([]);
@@ -89,12 +38,36 @@ onMounted(() => {
           for (let i = 0; i < res.length; i++) {
             if (res[i].skuSpecList && res[i].skuSpecList.length > 0) {
               for (let j = 0; j < res[i].skuSpecList.length; j++) {
-                list.push({
-                  code: res[i].code,
-                  wlnCode: res[i].wlnCode,
-                  wlnCreateTime: res[i].wlnCreateTime,
-                  ...res[i].skuSpecList[j],
-                });
+                if (res[i].skuSpecList[j].bomSpecList && res[i].skuSpecList[j].bomSpecList.length > 0) {
+                  for (let y = 0; y < res[i].skuSpecList[j].bomSpecList.length; y++) {
+                    let index = 0;
+                    if (y === 0) {
+                      index = res[i].skuSpecList[j].bomSpecList.length;
+                    }
+                    list.push({
+                      wlnCreateTime: res[i].wlnCreateTime,
+                      code: res[i].code,
+                      wlnCode: res[i].wlnCode,
+                      skuSpecCode: res[i].skuSpecList[j].skuSpecCode,
+                      skuSpecName: res[i].skuSpecList[j].skuSpecName,
+                      quantitySKU: res[i].skuSpecList[j].quantity,
+                      subtotal: res[i].skuSpecList[j].subtotal,
+                      total: res[i].skuSpecList[j].total,
+                      bomSpecCode: res[i].skuSpecList[j].bomSpecList[y].bomSpecCode,
+                      bomSpecName: res[i].skuSpecList[j].bomSpecList[y].bomSpecName,
+                      quantityBOM: res[i].skuSpecList[j].bomSpecList[y].quantity,
+                      unitPriceBOM: res[i].skuSpecList[j].bomSpecList[y].unitPrice,
+                      laserLogoSummary: res[i].skuSpecList[j].bomSpecList[y].laserLogoSummary,
+                      laserMitochondrialSummary: res[i].skuSpecList[j].bomSpecList[y].laserMitochondrialSummary,
+                      lssueFeeSummary: res[i].skuSpecList[j].bomSpecList[y].lssueFeeSummary,
+                      deliveryMaterialsFeeSummary: res[i].skuSpecList[j].bomSpecList[y].deliveryMaterialsFeeSummary,
+                      packingLaborSummary: res[i].skuSpecList[j].bomSpecList[y].packingLaborSummary,
+                      managementFeeSummary: res[i].skuSpecList[j].bomSpecList[y].managementFeeSummary,
+                      unitPriceSKU: res[i].skuSpecList[j].unitPrice,
+                      index: index,
+                    });
+                  }
+                }
               }
             }
           }
@@ -118,16 +91,141 @@ const deriveExcel = () => {
     proxy.downloadFile(res, "订单对账单.xlsx");
   });
 };
-const getAggregate = () => {
-  let total = 0;
-  if (tableData.value && tableData.value.length > 0) {
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (tableData.value[i].total) {
-        total = Number(Math.round((total + tableData.value[i].total) * 100) / 100);
-      }
+const columns = computed(() => {
+  return [
+    {
+      dataKey: "wlnCreateTime",
+      key: "column-0",
+      title: "订单时间",
+      width: 150,
+      rowIndex: 1,
+    },
+    {
+      dataKey: "code",
+      key: "column-1",
+      title: "订单号",
+      width: 160,
+    },
+    {
+      dataKey: "wlnCode",
+      key: "column-2",
+      title: "万里牛单号",
+      width: 140,
+    },
+    {
+      dataKey: "skuSpecCode",
+      key: "column-3",
+      title: "SKU品号",
+      width: 140,
+    },
+    {
+      dataKey: "skuSpecName",
+      key: "column-4",
+      title: "SKU品名",
+      width: 220,
+    },
+    {
+      dataKey: "quantitySKU",
+      key: "column-5",
+      title: "SKU数量",
+      width: 80,
+    },
+    {
+      dataKey: "bomSpecCode",
+      key: "column-6",
+      title: "BOM品号",
+      width: 140,
+    },
+    {
+      dataKey: "bomSpecName",
+      key: "column-7",
+      title: "BOM品名",
+      width: 260,
+    },
+    {
+      dataKey: "quantityBOM",
+      key: "column-8",
+      title: "BOM数量",
+      width: 80,
+    },
+    {
+      dataKey: "unitPriceBOM",
+      key: "column-9",
+      title: "单价",
+      width: 100,
+    },
+    {
+      dataKey: "laserLogoSummary",
+      key: "column-10",
+      title: "激光LOGO",
+      width: 100,
+    },
+    {
+      dataKey: "laserMitochondrialSummary",
+      key: "column-11",
+      title: "激光体位线",
+      width: 100,
+    },
+    {
+      dataKey: "lssueFeeSummary",
+      key: "column-12",
+      title: "代发费",
+      width: 100,
+    },
+    {
+      dataKey: "deliveryMaterialsFeeSummary",
+      key: "column-13",
+      title: "快递包材费",
+      width: 100,
+    },
+    {
+      dataKey: "packingLaborSummary",
+      key: "column-14",
+      title: "包装人工费",
+      width: 100,
+    },
+    {
+      dataKey: "managementFeeSummary",
+      key: "column-15",
+      title: "管理费",
+      width: 100,
+    },
+    {
+      dataKey: "unitPriceSKU",
+      key: "column-16",
+      title: "SKU单价",
+      width: 100,
+    },
+    {
+      dataKey: "subtotal",
+      key: "column-17",
+      title: "小计",
+      width: 120,
+    },
+    {
+      dataKey: "total",
+      key: "column-18",
+      title: "合计",
+      width: 120,
+    },
+  ];
+});
+const mergeColumn = [0, 1, 2, 3, 4, 5, 16, 17, 18];
+const Row = ({ rowData, cells }) => {
+  if (rowData.index > 1) {
+    for (let i = 0; i < mergeColumn.length; i++) {
+      const cell = cells[mergeColumn[i]];
+      const style = {
+        ...cell.props.style,
+        backgroundColor: "var(--el-color-primary-light-3)",
+        height: `${rowData.index * 50 - 1}px`,
+        alignSelf: "flex-start",
+        zIndex: 1,
+      };
+      cells[mergeColumn[i]] = cloneVNode(cell, { style });
     }
   }
-  return total;
+  return cells;
 };
 </script>
 

src/views/group/finance/check-bill/printSKU.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
+  <el-card v-loading="loading">
+    <div id="tableId">
+      <div style="height: calc(100vh - 264px); overflow-y: auto; overflow-x: hidden">
         <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
           <el-table-column align="center">
             <template #header>
@@ -25,12 +25,12 @@
           </el-table-column>
         </el-table>
       </div>
-      <div style="padding: 8px; text-align: center">
-        <el-button @click="clickCancel" size="large">关 闭</el-button>
-        <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
-      </div>
-    </el-card>
-  </div>
+    </div>
+    <div style="padding: 8px; text-align: center">
+      <el-button @click="clickCancel" size="large">关 闭</el-button>
+      <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
+    </div>
+  </el-card>
 </template>
 
 <script setup>