|
|
@@ -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">
|
|
|
+ <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="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>
|
|
|
+ </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/getDocumentBySku", { id: props.rowData.id }).then(
|
|
|
+ (res) => {
|
|
|
+ tableData.value = Object.freeze(res);
|
|
|
+ loading.value = false;
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+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;
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ 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: ".",
|
|
|
+ }),
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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 = () => {
|
|
|
+ $("#tableId").table2excel({
|
|
|
+ exclude: ".noExl",
|
|
|
+ sheetName: "SKU对账单",
|
|
|
+ filename: "SKU对账单",
|
|
|
+ exclude_img: false,
|
|
|
+ exclude_links: false,
|
|
|
+ exclude_inputs: true,
|
|
|
+ });
|
|
|
+ // emit("clickCancel", "");
|
|
|
+};
|
|
|
+</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>
|
