1

src/views/group/data-board/sell-board/index.vue

@@ -0,0 +1,437 @@
+<template>
+  <div class="box-card">
+    <el-card>
+      <byTable
+        :hideTable="true"
+        :hidePagination="true"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :searchConfig="searchConfig"
+        highlight-current-row
+        @get-list="getList"
+        @clickReset="clickReset">
+      </byTable>
+    </el-card>
+    <el-row :gutter="10" style="padding-top: 10px">
+      <el-col :span="12">
+        <el-card v-loading="oneLeft">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">SKU销量排名</div>
+            <div>
+              <el-button type="primary" @click="clickDownload('oneL')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('oneL')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="oneLData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
+            <el-table-column label="SKU品名" prop="skuSpecName" min-width="200" />
+            <el-table-column label="销量" prop="salesQuantity" align="center" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-loading="oneRight">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">BOM销量排名</div>
+            <div>
+              <el-button type="primary" @click="clickDownload('oneR')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('oneR')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="oneRData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="BOM品号" prop="bomSpecCode" width="150" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="销量" prop="salesQuantity" align="center" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10" style="padding-top: 10px">
+      <el-col :span="12">
+        <el-card v-loading="twoLeft">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">SKU销售额排名</div>
+            <div>
+              <el-button type="primary" @click="clickDownload('twoL')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('twoL')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="twoLData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
+            <el-table-column label="SKU品名" prop="skuSpecName" min-width="200" />
+            <el-table-column label="销售额（元）" prop="salesAmount" align="right" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-loading="twoRight">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">BOM销售额排名</div>
+            <div>
+              <el-button type="primary" @click="clickDownload('twoR')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('twoR')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="twoRData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="BOM品号" prop="bomSpecCode" width="150" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="销售额（元）" prop="salesAmount" align="right" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10" style="padding-top: 10px">
+      <el-col :span="12">
+        <el-card v-loading="threeLeft">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">SKU销量地区排名</div>
+            <div>
+              <el-button type="primary" @click="clickSortLeft(sortByThreeLeft === 2 ? 1 : 2)" text v-preReClick>排序</el-button>
+              <el-button type="primary" @click="clickDownload('threeL')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('threeL')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="threeLData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="省份" prop="province" width="160" />
+            <el-table-column label="城市" prop="city" min-width="200" />
+            <el-table-column label="销量" prop="salesQuantity" align="center" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-loading="threeRight">
+          <div style="display: flex; justify-content: space-between">
+            <div class="cardTitle">SKU销售增长率排名</div>
+            <div>
+              <el-button type="primary" @click="clickSortRight(sortByThreeRight === 2 ? 1 : 2)" text v-preReClick>排序</el-button>
+              <el-button type="primary" @click="clickDownload('threeR')" text v-preReClick>下载</el-button>
+              <el-button type="primary" @click="clickSeeMore('threeR')" text v-preReClick>查看更多</el-button>
+            </div>
+          </div>
+          <el-table
+            :data="threeRData"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
+            <el-table-column label="SKU品名" prop="skuSpecName" min-width="200" />
+            <el-table-column label="月同比" prop="monthOverMonthRatio" align="center" width="120" />
+            <el-table-column label="月环比" prop="monthOnMonthRatio" align="center" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-dialog :title="title" v-if="openSeeMore" v-model="openSeeMore" width="1200px">
+      <el-table
+        :data="tableList"
+        :cell-style="{ padding: '0' }"
+        :row-style="{ height: '50px' }"
+        header-row-class-name="tableHeader"
+        height="calc(100vh - 174px)"
+        v-loading="loadingSeeMore">
+        <el-table-column label="序号" align="center" type="index" width="60" />
+        <el-table-column label="SKU品号" v-if="['oneL', 'twoL', 'threeR'].includes(labelText)" prop="skuSpecCode" width="160" />
+        <el-table-column label="SKU品名" v-if="['oneL', 'twoL', 'threeR'].includes(labelText)" prop="skuSpecName" min-width="200" />
+        <el-table-column label="BOM品号" v-if="['oneR', 'twoR'].includes(labelText)" prop="bomSpecCode" width="150" />
+        <el-table-column label="BOM品名" v-if="['oneR', 'twoR'].includes(labelText)" prop="bomSpecName" min-width="200" />
+        <el-table-column label="省份" v-if="['threeL'].includes(labelText)" prop="province" width="160" />
+        <el-table-column label="城市" v-if="['threeL'].includes(labelText)" prop="city" min-width="200" />
+        <el-table-column label="销量" v-if="['oneL', 'oneR', 'threeL'].includes(labelText)" prop="salesQuantity" align="center" width="120" />
+        <el-table-column label="销售额（元）" v-if="['twoL', 'twoR'].includes(labelText)" prop="salesAmount" align="right" width="120" />
+        <el-table-column label="月同比" v-if="['threeR'].includes(labelText)" prop="monthOverMonthRatio" align="center" width="120" />
+        <el-table-column label="月环比" v-if="['threeR'].includes(labelText)" prop="monthOnMonthRatio" align="center" width="120" />
+      </el-table>
+      <div style="text-align: center; margin: 10px">
+        <el-button @click="openSeeMore = false" size="large">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import byTable from "/src/components/byTable/index";
+import { ElMessage } from "element-plus";
+import moment from "moment";
+
+const { proxy } = getCurrentInstance();
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    colour: "",
+    bomSpecWidth: "",
+    bomSpecHeight: "",
+    chromatophore: "",
+    itemSubclass: "",
+    beginTime: "",
+    endTime: "",
+  },
+});
+const searchConfig = computed(() => {
+  return [
+    {
+      type: "select",
+      prop: "itemSubclass",
+      dictKey: "bom_itemSubclass",
+      label: "项目小类",
+    },
+    {
+      type: "select",
+      prop: "bomSpecWidth",
+      dictKey: "width_size",
+      label: "宽度",
+    },
+    {
+      type: "select",
+      prop: "bomSpecHeight",
+      dictKey: "height_size",
+      label: "厚度",
+    },
+    {
+      type: "input",
+      prop: "colour",
+      label: "颜色",
+    },
+    {
+      type: "select",
+      prop: "chromatophore",
+      dictKey: "bom_chromatophore",
+      label: "色层",
+    },
+    {
+      type: "date",
+      propList: ["beginTime", "endTime"],
+      label: "时间",
+    },
+  ];
+});
+const config = computed(() => {
+  return [];
+});
+const oneLeft = ref(false);
+const oneRight = ref(false);
+const twoLeft = ref(false);
+const twoRight = ref(false);
+const threeLeft = ref(false);
+const threeRight = ref(false);
+const oneLData = ref([]);
+const oneRData = ref([]);
+const twoLData = ref([]);
+const twoRData = ref([]);
+const threeLData = ref([]);
+const threeRData = ref([]);
+const sortByThreeLeft = ref(2);
+const sortByThreeRight = ref(2);
+const getThreeLeftData = (sortBy) => {
+  threeLeft.value = true;
+  proxy.post("/salesBoard/getSkuSalesRegionRankingPage", { ...sourceList.value.pagination, sortBy: sortBy }).then((res) => {
+    threeLData.value = res.rows;
+    threeLeft.value = false;
+  });
+};
+const getThreeRightData = (sortBy) => {
+  threeRight.value = true;
+  proxy.post("/salesBoard/getSkuSalesGrowthRateRankingPage", { ...sourceList.value.pagination, sortBy: sortBy }).then((res) => {
+    threeRData.value = res.rows;
+    threeRight.value = false;
+  });
+};
+const getList = (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {};
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  oneLeft.value = true;
+  proxy.post("/salesBoard/getSkuSalesRankingPage", sourceList.value.pagination).then((res) => {
+    oneLData.value = res.rows;
+    oneLeft.value = false;
+  });
+  oneRight.value = true;
+  proxy.post("/salesBoard/getBomSalesRankingPage", sourceList.value.pagination).then((res) => {
+    oneRData.value = res.rows;
+    oneRight.value = false;
+  });
+  twoLeft.value = true;
+  proxy.post("/salesBoard/getSkuSalesAmountRankingPage", { sortBy: 1, ...sourceList.value.pagination }).then((res) => {
+    twoLData.value = res.rows;
+    twoLeft.value = false;
+  });
+  twoRight.value = true;
+  proxy.post("/salesBoard/getBomSalesAmountRankingPage", { sortBy: 2, ...sourceList.value.pagination }).then((res) => {
+    twoRData.value = res.rows;
+    twoRight.value = false;
+  });
+  getThreeLeftData(sortByThreeLeft.value);
+  getThreeRightData(sortByThreeRight.value);
+};
+getList();
+const clickReset = () => {
+  sortByThreeLeft.value = 2;
+  sortByThreeRight.value = 2;
+  getList("", true);
+};
+const clickSortLeft = (val) => {
+  sortByThreeLeft.value = val;
+  getThreeLeftData(sortByThreeLeft.value);
+};
+const clickSortRight = (val) => {
+  sortByThreeRight.value = val;
+  getThreeRightData(sortByThreeRight.value);
+};
+const download = ref({
+  oneL: {
+    path: "/salesBoard/getSkuSalesRankingPage",
+    derivePath: "/salesBoard/skuSalesRankingExportExcel",
+    pagination: {},
+    fileName: "SKU销量排名",
+  },
+  oneR: {
+    path: "/salesBoard/getBomSalesRankingPage",
+    derivePath: "/salesBoard/bomSalesRankingExportExcel",
+    pagination: {},
+    fileName: "BOM销量排名",
+  },
+  twoL: {
+    path: "/salesBoard/getSkuSalesAmountRankingPage",
+    derivePath: "/salesBoard/skuSalesAmountRankingExportExcel",
+    pagination: {
+      sortBy: 1,
+    },
+    fileName: "SKU销售额排名",
+  },
+  twoR: {
+    path: "/salesBoard/getBomSalesAmountRankingPage",
+    derivePath: "/salesBoard/bomSalesAmountRankingExportExcel",
+    pagination: {
+      sortBy: 2,
+    },
+    fileName: "BOM销售额排名",
+  },
+  threeL: {
+    path: "/salesBoard/getSkuSalesRegionRankingPage",
+    derivePath: "/salesBoard/skuSalesRegionRankingExportExcel",
+    pagination: {},
+    fileName: "SKU销量地区排名",
+  },
+  threeR: {
+    path: "/salesBoard/getSkuSalesGrowthRateRankingPage",
+    derivePath: "/salesBoard/skuSalesGrowthRateRankingExportExcel",
+    pagination: {},
+    fileName: "SKU销售增长率排名",
+  },
+});
+const clickDownload = (label) => {
+  if (label === "threeL") {
+    download.value[label].pagination.sortBy = sortByThreeLeft.value;
+  }
+  if (label === "threeR") {
+    download.value[label].pagination.sortBy = sortByThreeRight.value;
+  }
+  proxy.postFile(download.value[label].derivePath, { ...sourceList.value.pagination, ...download.value[label].pagination }).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, download.value[label].fileName + "-" + moment().format("yyyy-MM-DD") + ".xlsx");
+    }
+  });
+};
+const title = ref("");
+const openSeeMore = ref(false);
+const loadingSeeMore = ref(false);
+const tableList = ref([]);
+const labelText = ref("");
+const clickSeeMore = (label) => {
+  labelText.value = label;
+  title.value = download.value[label].fileName;
+  tableList.value = [];
+  loadingSeeMore.value = true;
+  openSeeMore.value = true;
+  if (label === "threeL") {
+    download.value[label].pagination.sortBy = sortByThreeLeft.value;
+  }
+  if (label === "threeR") {
+    download.value[label].pagination.sortBy = sortByThreeRight.value;
+  }
+  proxy.post(download.value[label].path, { pageNum: 1, pageSize: 9999, ...sourceList.value.pagination, ...download.value[label].pagination }).then(
+    (res) => {
+      tableList.value = res.rows;
+      loadingSeeMore.value = false;
+    },
+    (err) => {
+      console.log(err);
+      loadingSeeMore.value = false;
+    }
+  );
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: calc(100vh - 120px);
+  overflow-y: auto;
+}
+::v-deep(.tableHeader th) {
+  background-color: #eeeeee;
+  height: 56px;
+  padding: 0;
+}
+::v-deep(.el-card__body) {
+  padding: 20px !important;
+}
+.cardTitle {
+  border-left: 2px solid #487cff;
+  padding-left: 10px;
+  font-size: 16px !important;
+  height: 32px;
+  line-height: 32px;
+}
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+</style>