|
|
@@ -1,68 +1,82 @@
|
|
|
<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.timePeriod }} - {{ rowData.timePeriod }} )</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>
|
|
|
+ <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="18" 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="18" 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: 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 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="16"></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>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-// import $ from "jquery";
|
|
|
-
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const props = defineProps({
|
|
|
rowData: Object,
|
|
|
});
|
|
|
const loading = ref(false);
|
|
|
const tableData = ref([]);
|
|
|
-const total = ref(0);
|
|
|
onMounted(() => {
|
|
|
if (props.rowData && props.rowData.id) {
|
|
|
loading.value = true;
|
|
|
@@ -73,41 +87,17 @@ onMounted(() => {
|
|
|
for (let i = 0; i < res.length; i++) {
|
|
|
if (res[i].skuSpecList && res[i].skuSpecList.length > 0) {
|
|
|
for (let j = 0; j < res[i].skuSpecList.length; j++) {
|
|
|
- if (res[i].skuSpecList[j].total) {
|
|
|
- total.value = Number(Math.round((total.value + res[i].skuSpecList[j].total) * 100) / 100);
|
|
|
- }
|
|
|
- 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,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ list.push({
|
|
|
+ code: res[i].code,
|
|
|
+ wlnCode: res[i].wlnCode,
|
|
|
+ wlnCreateTime: res[i].wlnCreateTime,
|
|
|
+ ...res[i].skuSpecList[j],
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- tableData.value = Object.freeze(mergeRow(list));
|
|
|
+ tableData.value = Object.freeze(list);
|
|
|
loading.value = false;
|
|
|
},
|
|
|
(err) => {
|
|
|
@@ -117,127 +107,6 @@ onMounted(() => {
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
-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: total.value,
|
|
|
- }),
|
|
|
- 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 emit = defineEmits(["clickCancel"]);
|
|
|
const clickCancel = () => {
|
|
|
emit("clickCancel", "");
|
|
|
@@ -246,63 +115,38 @@ const deriveExcel = () => {
|
|
|
proxy.getFile("/statementOfAccount/exportDocumentByOrder", { id: props.rowData.id }).then((res) => {
|
|
|
proxy.downloadFile(res, "订单对账单.xlsx");
|
|
|
});
|
|
|
- // $("#tableId").table2excel({
|
|
|
- // exclude: ".noExl",
|
|
|
- // sheetName: "订单对账单",
|
|
|
- // filename: "订单对账单",
|
|
|
- // 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,
|
|
|
- };
|
|
|
+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);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ return total;
|
|
|
};
|
|
|
</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;
|
|
|
+.tableOne {
|
|
|
+ border: 1px solid black;
|
|
|
+ line-height: 20px;
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ // transform: scale(0.8);
|
|
|
+ // transform-origin: 0 0;
|
|
|
}
|
|
|
-::v-deep(.el-table__footer .cell) {
|
|
|
- padding: 0;
|
|
|
+.tableOne th {
|
|
|
+ font-weight: 700;
|
|
|
+ border-right: 1px solid black;
|
|
|
}
|
|
|
-::v-deep(.el-table__footer .el-table__cell) {
|
|
|
- border-right: 0px;
|
|
|
+.tableOne td {
|
|
|
+ border-right: 1px solid black;
|
|
|
+ border-top: 1px solid black;
|
|
|
+ padding: 4px;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
</style>
|
lxf