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

<template>
  <el-card v-loading="loading">
    <div style="height: calc(100vh - 235px); overflow-y: auto; overflow-x: hidden">
      <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.timePeriod }} )</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" prop="checkFee" width="140" />
          <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: 4px; text-align: center">
      <el-button type="primary" v-if="judgeOneKeyStatus()" @click="clickOneKeyStatus()" :loading="loadingOneKey" v-preReClick>一键出库</el-button>
      <el-button @click="clickCancel">关 闭</el-button>
      <el-button type="primary" @click="deriveExcel()" v-preReClick>导 出</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { ElMessage } from "element-plus";
import moment from "moment";

const { proxy } = getCurrentInstance();
const props = defineProps({
  rowData: Object,
  tabValues: Object,
});
const loading = ref(false);
const tableData = ref([]);
const tabsCard = ref();
watch(
  () => props.tabValues,
  (val) => {
    if (val.activeName === "sku" && val.tabsCard != tabsCard.value) {
      tabsCard.value = val.tabsCard;
      if (props.rowData && props.rowData.id) {
        loading.value = true;
        proxy.post("/statementOfAccount/getDocumentBySku", { id: props.rowData.id, orderClassify: props.tabValues.tabsCard }).then(
          (res) => {
            tableData.value = Object.freeze(res);
            loading.value = false;
          },
          (err) => {
            console.log(err);
            loading.value = false;
          }
        );
      }
    }
    if (val.activeName === "sku" && val.tabsCard === 5) {
      getOrder();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const labelList = ref({
  2: "quantity",
  4: "checkFee",
  5: "subtotal",
  6: "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: ".",
        }),
        [3, 4, 5, 6].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;
    }
  });
  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 = () => {
  ElMessage("导出文件中,请稍后");
  loading.value = true;
  proxy.getFile("/statementOfAccount/exportDocumentBySku", { id: props.rowData.id, orderClassify: props.tabValues.tabsCard }).then(
    (res) => {
      if (res.type === "application/json") {
        const fileReader = new FileReader();
        fileReader.onloadend = () => {
          const jsonData = JSON.parse(fileReader.result);
          ElMessage({ message: jsonData.msg, type: "error" });
        };
        fileReader.readAsText(res);
      } else {
        proxy.downloadFile(res, "SKU对账单-" + moment().format("yyyy-MM-DD") + ".xlsx");
        loading.value = false;
      }
    },
    (err) => {
      console.log(err);
      loading.value = false;
    }
  );
};
const orderList = ref([]);
const loadingOneKey = ref(false);
const judgeOneKeyStatus = () => {
  let status = true;
  if (proxy.useUserStore().user.userId !== "1") {
    status = false;
  } else {
    if (!(props.tabValues.tabsCard === 5 && orderList.value && orderList.value.length > 0)) {
      status = false;
    }
  }
  return status;
};
const getOrder = () => {
  proxy.post("/statementOfAccountMerge/getNotSalesOutOfWarehouseOrder", { idGroupConcat: props.rowData.id }).then((res) => {
    if (res && res.length > 0) {
      orderList.value = res;
    } else {
      orderList.value = [];
    }
  });
};
const clickOneKeyStatus = () => {
  loadingOneKey.value = true;
  proxy.post("/statementOfAccountMerge/salesOutOfWarehouse", orderList.value).then(
    () => {
      ElMessage({ message: "操作完成", type: "success" });
      getOrder();
      loadingOneKey.value = false;
    },
    (err) => {
      console.log(err);
      loadingOneKey.value = false;
    }
  );
};
</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;
}
::v-deep(.el-card__body) {
  padding: 10px !important;
}
</style>