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

<template>
  <el-card v-loading="loading">
    <div style="text-align: center; font-size: 30px; padding: 8px; font-weight: 700">{{ props.rowData.departmentName }}-胜德体育对账单</div>
    <div style="text-align: center; font-size: 18px; padding-bottom: 8px; font-weight: 700">( 对账时间: {{ rowData.timePeriod }} )</div>
    <div style="height: calc(100vh - 235px - 88px); 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="20" :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: 4px; text-align: center">
      <el-button @click="clickCancel">关 闭</el-button>
      <el-button type="primary" @click="deriveExcel()" v-preReClick>导 出</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { cloneVNode } from "vue";

const { proxy } = getCurrentInstance();
const props = defineProps({
  rowData: Object,
  activeName: String,
  tabsCard: Number,
});
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].total) {
        total = Number(Math.round((total + data[i].total) * 100) / 100);
      }
    }
  }
  return total;
};
watch(
  () => props.activeName,
  (val) => {
    if (val === "order" && !(tableData.value && tableData.value.length > 0)) {
      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++) {
                    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 indexOne = 0;
                        if (j === 0 && y === 0) {
                          for (let z = 0; z < res[i].skuSpecList.length; z++) {
                            if (res[i].skuSpecList[z].bomSpecList && res[i].skuSpecList[z].bomSpecList.length > 0) {
                              indexOne = Number(indexOne + res[i].skuSpecList[z].bomSpecList.length);
                            }
                          }
                        }
                        let indexTwo = 0;
                        if (y === 0) {
                          indexTwo = 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,
                          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,
                          outerBoxPackingFee: res[i].outerBoxPackingFee,
                          total: res[i].total,
                          indexOne: indexOne,
                          indexTwo: indexTwo,
                        });
                      }
                    }
                  }
                }
              }
            }
            list.push({
              indexOne: 1,
              indexTwo: 1,
              total: total,
              wlnCreateTime: "总计:",
            });
            tableData.value = Object.freeze(list);
            loading.value = false;
          },
          (err) => {
            console.log(err);
            loading.value = false;
          }
        );
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const emit = defineEmits(["clickCancel"]);
const clickCancel = () => {
  emit("clickCancel", "");
};
const deriveExcel = () => {
  loading.value = true;
  proxy.getFile("/statementOfAccount/exportDocumentByOrder", { id: props.rowData.id }).then(
    () => {
      emit("clickCancel", true);
      // proxy.downloadFile(res, "订单对账单.xlsx");
      loading.value = false;
    },
    (err) => {
      console.log(err);
      loading.value = false;
    }
  );
};
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 mergeColumnOne = [0, 1, 2, 18];
const mergeColumnTwo = [3, 4, 5, 16, 17];
const Row = ({ rowData, cells }) => {
  if (rowData.indexOne > 1) {
    for (let i = 0; i < mergeColumnOne.length; i++) {
      const cell = cells[mergeColumnOne[i]];
      const style = {
        ...cell.props.style,
        backgroundColor: "#fff",
        height: `${rowData.indexOne * 35 - 1}px`,
        alignSelf: "flex-start",
        zIndex: 1,
      };
      cells[mergeColumnOne[i]] = cloneVNode(cell, { style });
    }
  }
  if (rowData.indexTwo > 1) {
    for (let i = 0; i < mergeColumnTwo.length; i++) {
      const cell = cells[mergeColumnTwo[i]];
      const style = {
        ...cell.props.style,
        backgroundColor: "#fff",
        height: `${rowData.indexTwo * 35 - 1}px`,
        alignSelf: "flex-start",
        zIndex: 1,
      };
      cells[mergeColumnTwo[i]] = cloneVNode(cell, { style });
    }
  }
  return cells;
};
</script>

<style lang="scss" scoped>
::v-deep(.el-table-v2__header-cell) {
  background-color: #eeeeee !important;
}
::v-deep(.el-card__body) {
  padding: 10px !important;
}
</style>