对账单,对账单列表 打印整改

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

@@ -126,7 +126,7 @@
           <PrintBOM :rowData="rowData" @clickCancel="openPrint = false"></PrintBOM>
         </el-tab-pane>
         <el-tab-pane label="订单对账单" name="order">
-          <PrintOrder :rowData="rowData" :activeName="activeName" @clickCancel="openPrint = false"></PrintOrder>
+          <PrintOrder :rowData="rowData" @clickCancel="openPrint = false"></PrintOrder>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>

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

@@ -1,36 +1,34 @@
 <template>
   <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>
-              <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
-              <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+    <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>
+            <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
+            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+          </template>
+          <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
+          <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
+          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
+          <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
+          <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
+          <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
+          <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
+          <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
+          <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
+          <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
+          <el-table-column label="小计" align="center" width="120">
+            <template #default="{ row }">
+              {{ moneyFormat(row.subtotal) }}
             </template>
-            <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
-            <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
-            <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
-            <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
-            <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
-            <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
-            <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
-            <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
-            <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
-            <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
-            <el-table-column label="小计" align="center" width="120">
-              <template #default="{ row }">
-                {{ moneyFormat(row.subtotal) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="合计" align="center" width="120">
-              <template #default="{ row }">
-                {{ moneyFormat(row.total) }}
-              </template>
-            </el-table-column>
           </el-table-column>
-        </el-table>
-      </div>
+          <el-table-column label="合计" align="center" width="120">
+            <template #default="{ row }">
+              {{ moneyFormat(row.total) }}
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
     </div>
     <div style="padding: 8px; text-align: center">
       <el-button @click="clickCancel" size="large">关 闭</el-button>
@@ -40,8 +38,6 @@
 </template>
 
 <script setup>
-// import $ from "jquery";
-
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
@@ -180,14 +176,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentByBom", { id: props.rowData.id }).then((res) => {
     proxy.downloadFile(res, "BOM对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "BOM对账单",
-  //   filename: "BOM对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

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

@@ -3,7 +3,7 @@
     <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">
+          <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed :cache="10" :header-height="35" :row-height="35">
             <template #row="props">
               <Row v-bind="props" />
             </template>
@@ -24,7 +24,6 @@ import { cloneVNode } from "vue";
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
-  activeName: String,
 });
 const loading = ref(false);
 const tableData = ref([]);
@@ -49,7 +48,6 @@ onMounted(() => {
     proxy.post("/statementOfAccount/getDocumentByOrder", { id: props.rowData.id }).then(
       (res) => {
         let total = getAggregate(proxy.deepClone(res));
-        console.log(getAggregate(proxy.deepClone(res)));
         let list = [];
         if (res && res.length > 0) {
           for (let i = 0; i < res.length; i++) {
@@ -240,7 +238,7 @@ const Row = ({ rowData, cells }) => {
       const style = {
         ...cell.props.style,
         backgroundColor: "#fff",
-        height: `${rowData.index * 50 - 1}px`,
+        height: `${rowData.index * 35 - 1}px`,
         alignSelf: "flex-start",
         zIndex: 1,
       };
@@ -252,23 +250,7 @@ const Row = ({ rowData, cells }) => {
 </script>
 
 <style lang="scss" scoped>
-.tableOne {
-  border: 1px solid black;
-  line-height: 20px;
-  overflow: auto;
-  width: 100%;
-  // transform: scale(0.8);
-  // transform-origin: 0 0;
-}
-.tableOne th {
-  font-weight: 700;
-  border-right: 1px solid black;
-}
-.tableOne td {
-  border-right: 1px solid black;
-  border-top: 1px solid black;
-  padding: 4px;
-  text-align: center;
-  word-break: break-all;
+::v-deep(.el-table-v2__header-cell) {
+  background-color: #eeeeee !important;
 }
 </style>

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

@@ -1,30 +1,28 @@
 <template>
   <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>
-              <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
-              <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+    <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>
+            <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
+            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+          </template>
+          <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
+          <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
+          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
+          <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
+          <el-table-column label="小计" align="center" width="180">
+            <template #default="{ row }">
+              {{ moneyFormat(row.subtotal) }}
             </template>
-            <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
-            <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
-            <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
-            <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
-            <el-table-column label="小计" align="center" width="180">
-              <template #default="{ row }">
-                {{ moneyFormat(row.subtotal) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="合计" align="center" width="180">
-              <template #default="{ row }">
-                {{ moneyFormat(row.total) }}
-              </template>
-            </el-table-column>
           </el-table-column>
-        </el-table>
-      </div>
+          <el-table-column label="合计" align="center" width="180">
+            <template #default="{ row }">
+              {{ moneyFormat(row.total) }}
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
     </div>
     <div style="padding: 8px; text-align: center">
       <el-button @click="clickCancel" size="large">关 闭</el-button>
@@ -34,8 +32,6 @@
 </template>
 
 <script setup>
-// import $ from "jquery";
-
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
@@ -167,14 +163,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentBySku", { id: props.rowData.id }).then((res) => {
     proxy.downloadFile(res, "SKU对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "SKU对账单",
-  //   filename: "SKU对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

src/views/group/finance/summary/index.vue

@@ -16,13 +16,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 :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'sku'"></PrintSKU>
+          <PrintSKU :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false"></PrintSKU>
         </el-tab-pane>
         <el-tab-pane label="BOM对账单" name="bom">
-          <PrintBOM :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'bom'"></PrintBOM>
+          <PrintBOM :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false"></PrintBOM>
         </el-tab-pane>
         <el-tab-pane label="订单对账单" name="order">
-          <PrintOrder :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'order'"></PrintOrder>
+          <PrintOrder :idGroupConcat="idGroupConcat" :activeName="activeName" @clickCancel="openPrint = false"></PrintOrder>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>

src/views/group/finance/summary/printBOM.vue

@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
-          <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
-          <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
-          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
-          <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
-          <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
-          <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
-          <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
-          <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
-          <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
-          <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
-          <el-table-column label="小计" align="center" width="120">
-            <template #default="{ row }">
-              {{ moneyFormat(row.subtotal) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="合计" align="center" width="120">
-            <template #default="{ row }">
-              {{ moneyFormat(row.total) }}
-            </template>
-          </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>
+  <el-card v-loading="loading">
+    <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 label="E10品号" prop="bomSpecCode" width="140" />
+        <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
+        <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
+        <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
+        <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
+        <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
+        <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
+        <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
+        <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
+        <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
+        <el-table-column label="小计" align="center" width="120">
+          <template #default="{ row }">
+            {{ moneyFormat(row.subtotal) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" width="120">
+          <template #default="{ row }">
+            {{ moneyFormat(row.total) }}
+          </template>
+        </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>
 </template>
 
 <script setup>
@@ -172,14 +170,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentByBom", { idGroupConcat: props.idGroupConcat }).then((res) => {
     proxy.downloadFile(res, "BOM对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "BOM对账单",
-  //   filename: "BOM对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

src/views/group/finance/summary/printOrder.vue

@@ -1,94 +1,97 @@
 <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 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" :header-height="35" :row-height="35">
+            <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({
   idGroupConcat: String,
 });
 const loading = ref(false);
 const tableData = ref([]);
+const getAggregate = (data) => {
+  let total = 0;
+  if (data && data.length > 0) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].skuSpecList && data[i].skuSpecList.length > 0) {
+        for (let j = 0; j < data[i].skuSpecList.length; j++) {
+          if (data[i].skuSpecList[j].total) {
+            total = Number(Math.round((total + data[i].skuSpecList[j].total) * 100) / 100);
+          }
+        }
+      }
+    }
+  }
+  return total;
+};
 onMounted(() => {
   if (props.idGroupConcat) {
     loading.value = true;
     proxy.post("/statementOfAccountMerge/getDocumentByOrder", { idGroupConcat: props.idGroupConcat }).then(
       (res) => {
+        let total = getAggregate(proxy.deepClone(res));
         let list = [];
         if (res && res.length > 0) {
           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,
+                    });
+                  }
+                }
               }
             }
           }
         }
+        list.push({
+          index: 1,
+          total: total,
+          wlnCreateTime: "总计:",
+        });
         tableData.value = Object.freeze(list);
         loading.value = false;
       },
@@ -108,37 +111,146 @@ 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: "#fff",
+        height: `${rowData.index * 35 - 1}px`,
+        alignSelf: "flex-start",
+        zIndex: 1,
+      };
+      cells[mergeColumn[i]] = cloneVNode(cell, { style });
     }
   }
-  return total;
+  return cells;
 };
 </script>
 
 <style lang="scss" scoped>
-.tableOne {
-  border: 1px solid black;
-  line-height: 20px;
-  overflow: auto;
-  width: 100%;
-  // transform: scale(0.8);
-  // transform-origin: 0 0;
-}
-.tableOne th {
-  font-weight: 700;
-  border-right: 1px solid black;
-}
-.tableOne td {
-  border-right: 1px solid black;
-  border-top: 1px solid black;
-  padding: 4px;
-  text-align: center;
-  word-break: break-all;
+::v-deep(.el-table-v2__header-cell) {
+  background-color: #eeeeee !important;
 }
 </style>

src/views/group/finance/summary/printSKU.vue

@@ -1,30 +1,28 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
-          <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
-          <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
-          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
-          <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
-          <el-table-column label="小计" align="center" width="180">
-            <template #default="{ row }">
-              {{ moneyFormat(row.subtotal) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="合计" align="center" width="180">
-            <template #default="{ row }">
-              {{ moneyFormat(row.total) }}
-            </template>
-          </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>
+  <el-card v-loading="loading">
+    <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 label="SKU品号" prop="skuSpecCode" width="180" />
+        <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
+        <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
+        <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
+        <el-table-column label="小计" align="center" width="180">
+          <template #default="{ row }">
+            {{ moneyFormat(row.subtotal) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" width="180">
+          <template #default="{ row }">
+            {{ moneyFormat(row.total) }}
+          </template>
+        </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>
 </template>
 
 <script setup>
@@ -159,14 +157,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccountMerge/exportDocumentBySku", { idGroupConcat: props.idGroupConcat }).then((res) => {
     proxy.downloadFile(res, "SKU对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "SKU对账单",
-  //   filename: "SKU对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

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

@@ -46,13 +46,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" @clickCancel="openPrint = false"></PrintOrder>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>

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

@@ -1,47 +1,43 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <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>
-              <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
-              <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+  <el-card v-loading="loading">
+    <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>
+            <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
+            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+          </template>
+          <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
+          <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
+          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
+          <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
+          <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
+          <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
+          <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
+          <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
+          <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
+          <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
+          <el-table-column label="小计" align="center" width="120">
+            <template #default="{ row }">
+              {{ moneyFormat(row.subtotal) }}
             </template>
-            <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
-            <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
-            <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
-            <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
-            <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
-            <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
-            <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
-            <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
-            <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
-            <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
-            <el-table-column label="小计" align="center" width="120">
-              <template #default="{ row }">
-                {{ moneyFormat(row.subtotal) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="合计" align="center" width="120">
-              <template #default="{ row }">
-                {{ moneyFormat(row.total) }}
-              </template>
-            </el-table-column>
           </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>
+          <el-table-column label="合计" align="center" width="120">
+            <template #default="{ row }">
+              {{ moneyFormat(row.total) }}
+            </template>
+          </el-table-column>
+        </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>
 </template>
 
 <script setup>
-// import $ from "jquery";
-
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
@@ -180,14 +176,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentByBom", { id: props.rowData.id }).then((res) => {
     proxy.downloadFile(res, "BOM对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "BOM对账单",
-  //   filename: "BOM对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

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

@@ -1,104 +1,97 @@
 <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" :header-height="35" :row-height="35">
+            <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,
 });
 const loading = ref(false);
 const tableData = ref([]);
+const getAggregate = (data) => {
+  let total = 0;
+  if (data && data.length > 0) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].skuSpecList && data[i].skuSpecList.length > 0) {
+        for (let j = 0; j < data[i].skuSpecList.length; j++) {
+          if (data[i].skuSpecList[j].total) {
+            total = Number(Math.round((total + data[i].skuSpecList[j].total) * 100) / 100);
+          }
+        }
+      }
+    }
+  }
+  return total;
+};
 onMounted(() => {
   if (props.rowData && props.rowData.id) {
     loading.value = true;
     proxy.post("/statementOfAccount/getDocumentByOrder", { id: props.rowData.id }).then(
       (res) => {
+        let total = getAggregate(proxy.deepClone(res));
         let list = [];
         if (res && res.length > 0) {
           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,
+                    });
+                  }
+                }
               }
             }
           }
         }
+        list.push({
+          index: 1,
+          total: total,
+          wlnCreateTime: "总计:",
+        });
         tableData.value = Object.freeze(list);
         loading.value = false;
       },
@@ -118,37 +111,146 @@ 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: "#fff",
+        height: `${rowData.index * 35 - 1}px`,
+        alignSelf: "flex-start",
+        zIndex: 1,
+      };
+      cells[mergeColumn[i]] = cloneVNode(cell, { style });
     }
   }
-  return total;
+  return cells;
 };
 </script>
 
 <style lang="scss" scoped>
-.tableOne {
-  border: 1px solid black;
-  line-height: 20px;
-  overflow: auto;
-  width: 100%;
-  // transform: scale(0.8);
-  // transform-origin: 0 0;
-}
-.tableOne th {
-  font-weight: 700;
-  border-right: 1px solid black;
-}
-.tableOne td {
-  border-right: 1px solid black;
-  border-top: 1px solid black;
-  padding: 4px;
-  text-align: center;
-  word-break: break-all;
+::v-deep(.el-table-v2__header-cell) {
+  background-color: #eeeeee !important;
 }
 </style>

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

@@ -1,41 +1,37 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <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>
-              <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
-              <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+  <el-card v-loading="loading">
+    <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>
+            <div style="text-align: center; font-size: 30px; padding: 8px">{{ props.rowData.departmentName }}-胜德体育对账单</div>
+            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.timePeriod }} - {{ rowData.timePeriod }} )</div>
+          </template>
+          <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
+          <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
+          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
+          <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
+          <el-table-column label="小计" align="center" width="180">
+            <template #default="{ row }">
+              {{ moneyFormat(row.subtotal) }}
             </template>
-            <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
-            <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
-            <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
-            <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
-            <el-table-column label="小计" align="center" width="180">
-              <template #default="{ row }">
-                {{ moneyFormat(row.subtotal) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="合计" align="center" width="180">
-              <template #default="{ row }">
-                {{ moneyFormat(row.total) }}
-              </template>
-            </el-table-column>
           </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>
+          <el-table-column label="合计" align="center" width="180">
+            <template #default="{ row }">
+              {{ moneyFormat(row.total) }}
+            </template>
+          </el-table-column>
+        </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>
 </template>
 
 <script setup>
-// import $ from "jquery";
-
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   rowData: Object,
@@ -167,14 +163,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentBySku", { id: props.rowData.id }).then((res) => {
     proxy.downloadFile(res, "SKU对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "SKU对账单",
-  //   filename: "SKU对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

src/views/subsidiary/finance/summary/index.vue

@@ -16,13 +16,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 :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'sku'"></PrintSKU>
+          <PrintSKU :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false"></PrintSKU>
         </el-tab-pane>
         <el-tab-pane label="BOM对账单" name="bom">
-          <PrintBOM :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'bom'"></PrintBOM>
+          <PrintBOM :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false"></PrintBOM>
         </el-tab-pane>
         <el-tab-pane label="订单对账单" name="order">
-          <PrintOrder :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false" v-if="activeName === 'order'"></PrintOrder>
+          <PrintOrder :idGroupConcat="idGroupConcat" @clickCancel="openPrint = false"></PrintOrder>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>

src/views/subsidiary/finance/summary/printBOM.vue

@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
-          <el-table-column label="E10品号" prop="bomSpecCode" width="140" />
-          <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
-          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
-          <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
-          <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
-          <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
-          <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
-          <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
-          <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
-          <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
-          <el-table-column label="小计" align="center" width="120">
-            <template #default="{ row }">
-              {{ moneyFormat(row.subtotal) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="合计" align="center" width="120">
-            <template #default="{ row }">
-              {{ moneyFormat(row.total) }}
-            </template>
-          </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>
+  <el-card v-loading="loading">
+    <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 label="E10品号" prop="bomSpecCode" width="140" />
+        <el-table-column label="SKU品名" prop="bomSpecName" min-width="220" />
+        <el-table-column label="数量（PCS）" align="center" prop="quantity" width="130" />
+        <el-table-column label="BOM单价" align="center" prop="unitPrice" width="110" />
+        <el-table-column label="激光LOGO汇总" align="center" prop="laserLogoSummary" width="130" />
+        <el-table-column label="激光体位线汇总" align="center" prop="laserMitochondrialSummary" width="130" />
+        <el-table-column label="代发费汇总" align="center" prop="lssueFeeSummary" width="110" />
+        <el-table-column label="快递包材费汇总" align="center" prop="deliveryMaterialsFeeSummary" width="130" />
+        <el-table-column label="包装人工费汇总" align="center" prop="packingLaborSummary" width="130" />
+        <el-table-column label="管理费汇总" align="center" prop="managementFeeSummary" width="130" />
+        <el-table-column label="小计" align="center" width="120">
+          <template #default="{ row }">
+            {{ moneyFormat(row.subtotal) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" width="120">
+          <template #default="{ row }">
+            {{ moneyFormat(row.total) }}
+          </template>
+        </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>
 </template>
 
 <script setup>
@@ -172,14 +170,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccount/exportDocumentByBom", { idGroupConcat: props.idGroupConcat }).then((res) => {
     proxy.downloadFile(res, "BOM对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "BOM对账单",
-  //   filename: "BOM对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>
 

src/views/subsidiary/finance/summary/printOrder.vue

@@ -1,94 +1,97 @@
 <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 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" :header-height="35" :row-height="35">
+            <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({
   idGroupConcat: String,
 });
 const loading = ref(false);
 const tableData = ref([]);
+const getAggregate = (data) => {
+  let total = 0;
+  if (data && data.length > 0) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].skuSpecList && data[i].skuSpecList.length > 0) {
+        for (let j = 0; j < data[i].skuSpecList.length; j++) {
+          if (data[i].skuSpecList[j].total) {
+            total = Number(Math.round((total + data[i].skuSpecList[j].total) * 100) / 100);
+          }
+        }
+      }
+    }
+  }
+  return total;
+};
 onMounted(() => {
   if (props.idGroupConcat) {
     loading.value = true;
     proxy.post("/statementOfAccountMerge/getDocumentByOrder", { idGroupConcat: props.idGroupConcat }).then(
       (res) => {
+        let total = getAggregate(proxy.deepClone(res));
         let list = [];
         if (res && res.length > 0) {
           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,
+                    });
+                  }
+                }
               }
             }
           }
         }
+        list.push({
+          index: 1,
+          total: total,
+          wlnCreateTime: "总计:",
+        });
         tableData.value = Object.freeze(list);
         loading.value = false;
       },
@@ -108,37 +111,146 @@ 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: "#fff",
+        height: `${rowData.index * 35 - 1}px`,
+        alignSelf: "flex-start",
+        zIndex: 1,
+      };
+      cells[mergeColumn[i]] = cloneVNode(cell, { style });
     }
   }
-  return total;
+  return cells;
 };
 </script>
 
 <style lang="scss" scoped>
-.tableOne {
-  border: 1px solid black;
-  line-height: 20px;
-  overflow: auto;
-  width: 100%;
-  // transform: scale(0.8);
-  // transform-origin: 0 0;
-}
-.tableOne th {
-  font-weight: 700;
-  border-right: 1px solid black;
-}
-.tableOne td {
-  border-right: 1px solid black;
-  border-top: 1px solid black;
-  padding: 4px;
-  text-align: center;
-  word-break: break-all;
+::v-deep(.el-table-v2__header-cell) {
+  background-color: #eeeeee !important;
 }
 </style>

src/views/subsidiary/finance/summary/printSKU.vue

@@ -1,30 +1,28 @@
 <template>
-  <div>
-    <el-card style="height: calc(100vh - 168px); overflow-y: auto; overflow-x: hidden" v-loading="loading">
-      <div id="tableId">
-        <el-table :data="tableData" border :row-style="{ height: '35px' }" header-row-class-name="tableHeader" show-summary :summary-method="getSummaries">
-          <el-table-column label="SKU品号" prop="skuSpecCode" width="180" />
-          <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
-          <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
-          <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
-          <el-table-column label="小计" align="center" width="180">
-            <template #default="{ row }">
-              {{ moneyFormat(row.subtotal) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="合计" align="center" width="180">
-            <template #default="{ row }">
-              {{ moneyFormat(row.total) }}
-            </template>
-          </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>
+  <el-card v-loading="loading">
+    <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 label="SKU品号" prop="skuSpecCode" width="180" />
+        <el-table-column label="SKU品名" prop="skuSpecName" min-width="220" />
+        <el-table-column label="数量（PCS）" align="center" prop="quantity" width="160" />
+        <el-table-column label="SKU单价" align="center" prop="unitPrice" width="160" />
+        <el-table-column label="小计" align="center" width="180">
+          <template #default="{ row }">
+            {{ moneyFormat(row.subtotal) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" width="180">
+          <template #default="{ row }">
+            {{ moneyFormat(row.total) }}
+          </template>
+        </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>
 </template>
 
 <script setup>
@@ -159,14 +157,6 @@ const deriveExcel = () => {
   proxy.getFile("/statementOfAccountMerge/exportDocumentBySku", { idGroupConcat: props.idGroupConcat }).then((res) => {
     proxy.downloadFile(res, "SKU对账单.xlsx");
   });
-  // $("#tableId").table2excel({
-  //   exclude: ".noExl",
-  //   sheetName: "SKU对账单",
-  //   filename: "SKU对账单",
-  //   exclude_img: false,
-  //   exclude_links: false,
-  //   exclude_inputs: true,
-  // });
 };
 </script>