导出BOM对账单

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

@@ -122,7 +122,9 @@
         <el-tab-pane label="SKU对账单" name="sku">
           <PrintSKU :rowData="rowData" @clickCancel="openPrint = false" v-if="activeName === 'sku'"></PrintSKU>
         </el-tab-pane>
-        <el-tab-pane label="BOM对账单" name="bom"> </el-tab-pane>
+        <el-tab-pane label="BOM对账单" name="bom">
+          <PrintBOM :rowData="rowData" @clickCancel="openPrint = false" v-if="activeName === 'bom'"></PrintBOM>
+        </el-tab-pane>
         <el-tab-pane label="订单对账单" name="order"> </el-tab-pane>
       </el-tabs>
     </el-dialog>
@@ -135,6 +137,7 @@ import byForm from "@/components/byForm/index";
 import { ElMessage, ElMessageBox } from "element-plus";
 import SelectOrder from "@/views/group/order/management/index";
 import PrintSKU from "./printSKU.vue";
+import PrintBOM from "./printBOM.vue";
 
 const { proxy } = getCurrentInstance();
 const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);

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

@@ -0,0 +1,207 @@
+<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.timePeriodBegin }} - {{ rowData.timePeriodEnd }} )
+              </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" 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>
+</template>
+
+<script setup>
+import $ from "jquery";
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  rowData: Object,
+});
+const loading = ref(false);
+const tableData = ref([]);
+onMounted(() => {
+  if (props.rowData && props.rowData.id) {
+    loading.value = true;
+    proxy.post("/statementOfAccount/getDocumentByBom", { id: props.rowData.id }).then(
+      (res) => {
+        tableData.value = Object.freeze(res);
+        loading.value = false;
+      },
+      (err) => {
+        console.log(err);
+        loading.value = false;
+      }
+    );
+  }
+});
+const labelList = ref({
+  2: "quantity",
+  4: "laserLogoSummary",
+  5: "laserMitochondrialSummary",
+  6: "lssueFeeSummary",
+  7: "deliveryMaterialsFeeSummary",
+  8: "packingLaborSummary",
+  9: "subtotal",
+  10: "total",
+});
+const textList = ref({
+  1: "胜德体育总经理:",
+  2: "申请日期:",
+});
+const getSummaries = ({ columns, data }) => {
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h("div", { class: "" }, [
+        h("div", {
+          style: { "text-align": "center", "border-style": "solid", "border-width": "0 1px 1px 0", "border-color": "#ebeef5", padding: "0 12px" },
+          innerHTML: "总计:",
+        }),
+        h("div", {
+          style: { "text-align": "center", "border-style": "solid", "border-width": "0 1px 1px 0", "border-color": "#ebeef5", padding: "0 12px" },
+          innerHTML: "备注:",
+        }),
+        h("div", {
+          style: { "text-align": "center", "border-style": "solid", "border-width": "0 1px 1px 0", "border-color": "#ebeef5", padding: "0 12px" },
+          innerHTML: "交货地点:",
+        }),
+        h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px" }, innerHTML: "申请人:" }),
+      ]);
+      return;
+    } else {
+      sums[index] = h("div", { class: "" }, [
+        [1, 3].includes(index)
+          ? h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 1px 1px 0",
+                "border-color": "#ebeef5",
+                color: "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: ".",
+            })
+          : h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 1px 1px 0",
+                "border-color": "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: getTotal(labelList.value[index]),
+            }),
+        h("div", {
+          style: {
+            "text-align": "center",
+            "border-style": "solid",
+            "border-width": "0 0 1px 0",
+            "border-color": "#ebeef5",
+            color: "#ebeef5",
+            padding: "0 12px",
+            height: "35px",
+          },
+          innerHTML: ".",
+        }),
+        h("div", {
+          style: {
+            "text-align": "center",
+            "border-style": "solid",
+            "border-width": "0 0 1px 0",
+            "border-color": "#ebeef5",
+            color: "#ebeef5",
+            padding: "0 12px",
+            height: "35px",
+          },
+          innerHTML: ".",
+        }),
+        [1, 2].includes(index)
+          ? h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px", "text-align": "left" }, innerHTML: textList.value[index] })
+          : h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 0 1px 0",
+                "border-color": "#ebeef5",
+                color: "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: ".",
+            }),
+      ]);
+      return;
+    }
+  });
+  return sums;
+};
+const getTotal = (label) => {
+  let list = tableData.value.map((item) => item[label]);
+  return Number(Math.round(list.reduce((acc, curr) => acc + curr, 0) * 100) / 100);
+};
+const emit = defineEmits(["clickCancel"]);
+const clickCancel = () => {
+  emit("clickCancel", "");
+};
+const deriveExcel = () => {
+  $("#tableId").table2excel({
+    exclude: ".noExl",
+    sheetName: "BOM对账单",
+    filename: "BOM对账单",
+    exclude_img: false,
+    exclude_links: false,
+    exclude_inputs: true,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-table thead.is-group th.el-table__cell) {
+  background-color: white !important;
+}
+::v-deep(.el-table__footer-wrapper tbody td.el-table__cell) {
+  background-color: white !important;
+}
+::v-deep(.el-table .el-table__cell) {
+  padding: 0;
+}
+::v-deep(.el-table__footer .cell) {
+  padding: 0;
+}
+::v-deep(.el-table__footer .el-table__cell) {
+  border-right: 0px;
+}
+</style>

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

@@ -59,6 +59,14 @@ onMounted(() => {
     );
   }
 });
+const labelList = ref({
+  2: "quantity",
+  5: "total",
+});
+const textList = ref({
+  1: "胜德体育总经理:",
+  2: "申请日期:",
+});
 const getSummaries = ({ columns, data }) => {
   const sums = [];
   columns.forEach((column, index) => {
@@ -79,168 +87,32 @@ const getSummaries = ({ columns, data }) => {
         h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px" }, innerHTML: "申请人:" }),
       ]);
       return;
-    }
-    if (index === 1) {
-      sums[index] = h("div", { class: "" }, [
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 1px 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px" }, innerHTML: "胜德体育总经理:" }),
-      ]);
-      return;
-    }
-    if (index === 2) {
+    } else {
       sums[index] = h("div", { class: "" }, [
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 1px 1px 0",
-            "border-color": "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: getTotal("quantity"),
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px", "text-align": "left" }, innerHTML: "申请日期:" }),
-      ]);
-      return;
-    }
-    if ([1, 3, 4].includes(index)) {
-      sums[index] = h("div", { class: "" }, [
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 1px 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
-      ]);
-      return;
-    }
-    if (index === 5) {
-      sums[index] = h("div", { class: "" }, [
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 1px 1px 0",
-            "border-color": "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: getTotal("total"),
-        }),
-        h("div", {
-          style: {
-            "text-align": "center",
-            "border-style": "solid",
-            "border-width": "0 0 1px 0",
-            "border-color": "#ebeef5",
-            color: "#ebeef5",
-            padding: "0 12px",
-            height: "35px",
-          },
-          innerHTML: ".",
-        }),
+        [1, 3, 4].includes(index)
+          ? h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 1px 1px 0",
+                "border-color": "#ebeef5",
+                color: "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: ".",
+            })
+          : h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 1px 1px 0",
+                "border-color": "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: getTotal(labelList.value[index]),
+            }),
         h("div", {
           style: {
             "text-align": "center",
@@ -265,6 +137,20 @@ const getSummaries = ({ columns, data }) => {
           },
           innerHTML: ".",
         }),
+        [3, 4, 5].includes(index)
+          ? h("div", {
+              style: {
+                "text-align": "center",
+                "border-style": "solid",
+                "border-width": "0 0 1px 0",
+                "border-color": "#ebeef5",
+                color: "#ebeef5",
+                padding: "0 12px",
+                height: "35px",
+              },
+              innerHTML: ".",
+            })
+          : h("div", { style: { "font-size": "16px", "font-weight": 700, padding: "0 12px", "text-align": "left" }, innerHTML: textList.value[index] }),
       ]);
       return;
     }