1

src/views/group/data-board/inventory-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">危险库存</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="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="当前库存" prop="inventoryQuantity" align="center" width="100" />
+            <el-table-column label="预计维持天数" prop="predictOutStorageDays" align="center" width="110" />
+          </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">在途物料</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="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="在途数量" prop="inTransitQuantity" align="center" width="100" />
+            <el-table-column label="预计到达时间" prop="nextDeliveryDays" align="center" width="110" />
+          </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">库存周转率排名（升序）</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="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="周转率" prop="turnoverRate" align="center" width="100" />
+          </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">库存周转率排名（降序）</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="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="周转率" prop="turnoverRate" align="center" width="100" />
+          </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">采购入库排名</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="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="入库数量" prop="quantity" align="center" width="100" />
+          </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">生产出库排名</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="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+            <el-table-column label="出库数量" prop="quantity" align="center" width="100" />
+          </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="BOM品号" prop="bomSpecCode" width="140" />
+        <el-table-column label="BOM品名" prop="bomSpecName" min-width="200" />
+        <el-table-column label="数量" prop="quantity" align="center" width="100" />
+      </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("/inventoryBoard/getInOutStoragePage", { type: 1, ...sourceList.value.pagination, sortBy: sortBy }).then((res) => {
+    threeLData.value = res.rows;
+    threeLeft.value = false;
+  });
+};
+const getThreeRightData = (sortBy) => {
+  threeRight.value = true;
+  proxy.post("/inventoryBoard/getInOutStoragePage", { type: 0, ...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("/inventoryBoard/getHazardousInventoryPage", sourceList.value.pagination).then((res) => {
+    oneLData.value = res.rows;
+    oneLeft.value = false;
+  });
+  oneRight.value = true;
+  proxy.post("/inventoryBoard/getInTransitBomPage", sourceList.value.pagination).then((res) => {
+    oneRData.value = res.rows;
+    oneRight.value = false;
+  });
+  twoLeft.value = true;
+  proxy.post("/inventoryBoard/getTurnoverRatePage", { sortBy: 1, ...sourceList.value.pagination }).then((res) => {
+    twoLData.value = res.rows;
+    twoLeft.value = false;
+  });
+  twoRight.value = true;
+  proxy.post("/inventoryBoard/getTurnoverRatePage", { 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: "/inventoryBoard/hazardousInventoryExportExcel",
+    pagination: {},
+    fileName: "危险库存",
+    routerPath: "/group/group-data-board/material-control-purchasing",
+  },
+  oneR: {
+    path: "/inventoryBoard/inTransitBomExportExcel",
+    pagination: {},
+    fileName: "在途物料",
+    routerPath: "/group/group-data-board/material-in-transit",
+  },
+  twoL: {
+    path: "/inventoryBoard/turnoverRateExportExcel",
+    pagination: {
+      sortBy: 1,
+    },
+    fileName: "库存周转率排名（升序）",
+    routerPath: "/group/group-data-board/turnover-rate",
+  },
+  twoR: {
+    path: "/inventoryBoard/turnoverRateExportExcel",
+    pagination: {
+      sortBy: 2,
+    },
+    fileName: "库存周转率排名（降序）",
+    routerPath: "/group/group-data-board/turnover-rate",
+  },
+  threeL: {
+    path: "/inventoryBoard/inOutStorageExportExcel",
+    pagination: {
+      type: 1,
+      sortBy: sortByThreeLeft.value,
+    },
+    fileName: "采购入库排名",
+  },
+  threeR: {
+    path: "/inventoryBoard/inOutStorageExportExcel",
+    pagination: {
+      type: 0,
+      sortBy: sortByThreeRight.value,
+    },
+    fileName: "生产出库排名",
+  },
+});
+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].path, { ...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 clickSeeMore = (label) => {
+  if (["oneL", "oneR", "twoL", "twoR"].includes(label)) {
+    proxy.$router.replace({ path: download.value[label].routerPath });
+  } else {
+    if (label === "threeL") {
+      download.value[label].pagination.sortBy = sortByThreeLeft.value;
+    }
+    if (label === "threeR") {
+      download.value[label].pagination.sortBy = sortByThreeRight.value;
+    }
+    title.value = download.value[label].fileName;
+    tableList.value = [];
+    loadingSeeMore.value = true;
+    openSeeMore.value = true;
+    proxy.post("/inventoryBoard/getInOutStoragePage", { 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>