订单对账单

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

@@ -0,0 +1,307 @@
+<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"
+          :span-method="objectSpanMethod"
+          max-height="calc(100vh - 79px)">
+          <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="订单时间" prop="wlnCreateTime" align="center" width="160" />
+            <el-table-column label="订单号" prop="code" width="180" />
+            <el-table-column label="万里牛单号" prop="wlnCode" width="140" />
+            <el-table-column label="SKU单号" prop="skuSpecCode" width="140" />
+            <el-table-column label="SKU品号" prop="skuSpecName" width="180" />
+            <el-table-column label="SKU数量" prop="quantitySKU" width="100" />
+            <el-table-column label="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" width="240" />
+            <el-table-column label="BOM数量" prop="quantityBOM" width="100" />
+            <el-table-column label="单价" prop="unitPriceBOM" width="100" />
+            <el-table-column label="激光LOGO" prop="laserLogoSummary" width="100" />
+            <el-table-column label="激光体位线" prop="laserMitochondrialSummary" width="100" />
+            <el-table-column label="代发费" prop="lssueFeeSummary" width="100" />
+            <el-table-column label="快递包材费" prop="deliveryMaterialsFeeSummary" width="100" />
+            <el-table-column label="包装人工费" prop="packingLaborSummary" width="100" />
+            <el-table-column label="SKU单价" prop="unitPriceSKU" width="100" />
+            <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/getDocumentByOrder", { id: props.rowData.id }).then(
+      (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++) {
+                if (res[i].skuSpecList[j].bomSpecList && res[i].skuSpecList[j].bomSpecList.length > 0) {
+                  for (let x = 0; x < res[i].skuSpecList[j].bomSpecList.length; x++) {
+                    list.push({
+                      orderId: res[i].orderId,
+                      wlnCreateTime: res[i].wlnCreateTime,
+                      code: res[i].code,
+                      wlnCode: res[i].wlnCode,
+                      orderSkuId: res[i].skuSpecList[j].orderSkuId,
+                      skuSpecId: res[i].skuSpecList[j].skuSpecId,
+                      skuSpecCode: res[i].skuSpecList[j].skuSpecCode,
+                      skuSpecName: res[i].skuSpecList[j].skuSpecName,
+                      quantitySKU: res[i].skuSpecList[j].quantity,
+                      unitPriceSKU: res[i].skuSpecList[j].unitPrice,
+                      subtotal: res[i].skuSpecList[j].subtotal,
+                      total: res[i].skuSpecList[j].total,
+                      bomSpecCode: res[i].skuSpecList[j].bomSpecList[x].bomSpecCode,
+                      bomSpecName: res[i].skuSpecList[j].bomSpecList[x].bomSpecName,
+                      quantityBOM: res[i].skuSpecList[j].bomSpecList[x].quantity,
+                      unitPriceBOM: res[i].skuSpecList[j].bomSpecList[x].unitPrice,
+                      laserLogoSummary: res[i].skuSpecList[j].bomSpecList[x].laserLogoSummary,
+                      laserMitochondrialSummary: res[i].skuSpecList[j].bomSpecList[x].laserMitochondrialSummary,
+                      lssueFeeSummary: res[i].skuSpecList[j].bomSpecList[x].lssueFeeSummary,
+                      deliveryMaterialsFeeSummary: res[i].skuSpecList[j].bomSpecList[x].deliveryMaterialsFeeSummary,
+                      packingLaborSummary: res[i].skuSpecList[j].bomSpecList[x].packingLaborSummary,
+                    });
+                  }
+                }
+              }
+            }
+          }
+        }
+        tableData.value = Object.freeze(mergeRow(list));
+        loading.value = false;
+      },
+      (err) => {
+        console.log(err);
+        loading.value = false;
+      }
+    );
+  }
+});
+const mergeRow = (list) => {
+  for (let field in list[0]) {
+    let k = 0;
+    let i = 0;
+    while (k < list.length) {
+      list[k][field + "Span"] = 1;
+      list[k][field + "Dis"] = false;
+      for (i = k + 1; i <= list.length - 1; i++) {
+        if (
+          list[k][field] === list[i][field] &&
+          list[k].orderSkuId === list[i].orderSkuId &&
+          list[k].orderSkuId === list[i].orderSkuId &&
+          list[k].orderId === list[i].orderId
+        ) {
+          list[k][field + "Span"]++;
+          list[k][field + "Dis"] = false;
+          list[i][field + "Span"] = 1;
+          list[i][field + "Dis"] = true;
+        } else {
+          break;
+        }
+      }
+      k = i;
+    }
+  }
+  return list;
+};
+const textList = ref({
+  4: "胜德体育总经理:",
+  7: "申请日期:",
+});
+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: "" }, [
+        index !== 17
+          ? 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("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: ".",
+        }),
+        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: ".",
+        }),
+        [4, 7].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,
+  });
+};
+const objectSpanMethod = ({ rowIndex, columnIndex }) => {
+  if ([0, 1, 2, 3, 4, 5, 15, 16, 17].includes(columnIndex)) {
+    let spanName = [
+      "wlnCreateTime",
+      "code",
+      "wlnCode",
+      "skuSpecCode",
+      "skuSpecName",
+      "quantitySKU",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "unitPriceSKU",
+      "subtotal",
+      "total",
+    ];
+    // 第一列的合并方法
+    const row1 = tableData.value[rowIndex][spanName[columnIndex] + "Span"];
+    const colspan = tableData.value[rowIndex][spanName[columnIndex] + "Dis"] ? 0 : 1;
+    const rowspan = colspan === 1 ? row1 : 0;
+    return {
+      rowspan: rowspan,
+      colspan: colspan,
+    };
+  }
+};
+</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>