Merge branch '周转率' into 测试

src/views/group/data-board/turnover-rate/index.vue

@@ -1,53 +1,207 @@
 <template>
   <el-card class="box-card">
-    <el-row :gutter="10">
-      <el-col :span="12">
-        <byTable
-          :hidePagination="true"
-          :source="sourceList.data"
-          :config="config"
-          :loading="loading"
-          highlight-current-row
-          :action-list="[
-            {
-              text: '刷新',
-              action: () => getList(),
-            },
-            {
-              text: '导出Excel',
-              action: () => deriveExcel(),
-            },
-          ]"
-          @get-list="getList">
-          <template #purchaseCode="{ item }">
-            <div>
-              <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickPurchaseCode(item)">{{ item.purchaseCode }}</a>
-            </div>
-          </template>
-        </byTable>
-      </el-col>
-      <el-col :span="12">
-        <byTable
-          :hidePagination="true"
-          :source="sourceListTwo.data"
-          :config="config"
-          :loading="loadingTwo"
-          highlight-current-row
-          :action-list="[
-            {
-              text: '导出Excel',
-              action: () => deriveExcelTwo(),
-            },
-          ]"
-          @get-list="getList">
-          <template #purchaseCode="{ item }">
-            <div>
-              <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickPurchaseCode(item)">{{ item.purchaseCode }}</a>
-            </div>
-          </template>
-        </byTable>
-      </el-col>
-    </el-row>
+    <el-tabs v-model="activeName" type="card" @tab-change="getList">
+      <el-tab-pane label="瑜伽垫" :name="'1'">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data30"
+              :config="config"
+              :loading="sourceList.loading30"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新（30天）',
+                  action: () => getData('30'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel('30'),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data60"
+              :config="config"
+              :loading="sourceList.loading60"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新（60天）',
+                  action: () => getData('60'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel('30'),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data90"
+              :config="config"
+              :loading="sourceList.loading90"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新（90天）',
+                  action: () => getData('90'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel('30'),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="瑜伽砖" :name="'2'">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data30"
+              :config="config"
+              :loading="sourceList.loading30"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新',
+                  action: () => getData('30'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel(),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data60"
+              :config="config"
+              :loading="sourceList.loading60"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新',
+                  action: () => getData('60'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel(),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+          <el-col :span="8">
+            <byTable
+              :hidePagination="true"
+              :source="sourceList.data90"
+              :config="config"
+              :loading="sourceList.loading90"
+              highlight-current-row
+              :action-list="[
+                {
+                  text: '刷新',
+                  action: () => getData('90'),
+                },
+                {
+                  text: '导出Excel',
+                  action: () => deriveExcel(),
+                },
+              ]"
+              @get-list="getList">
+              <template #bomSpecName="{ item }">
+                <div>
+                  <el-tooltip class="box-item" effect="dark" placement="bottom">
+                    <template #content>
+                      <div style="max-width: 600px; word-break: break-all">{{ item.bomSpecName }}</div>
+                    </template>
+                    <div style="cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+                      {{ item.bomSpecName }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </byTable>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
   </el-card>
 </template>
 
@@ -55,71 +209,68 @@
 import byTable from "/src/components/byTable/index";
 
 const { proxy } = getCurrentInstance();
+const activeName = ref("1");
 const sourceList = ref({
-  data: [],
+  loading30: false,
+  data30: [],
+  loading60: false,
+  data60: [],
+  loading90: false,
+  data90: [],
 });
-const sourceListTwo = ref({
-  data: [],
-});
-const loading = ref(false);
-const loadingTwo = ref(false);
 const config = computed(() => {
   return [
     {
       attrs: {
         label: "品号",
         prop: "bomSpecCode",
-        width: 140,
+        width: 120,
       },
     },
     {
       attrs: {
         label: "品名",
-        prop: "bomSpecName",
-        "min-width": 220,
+        slot: "bomSpecName",
       },
     },
     {
       attrs: {
         label: "周转率",
         prop: "turnoverRate",
-        width: 100,
+        width: 90,
       },
     },
     {
       attrs: {
         label: "库存数量",
         prop: "quantity",
-        width: 100,
+        width: 90,
       },
     },
   ];
 });
-const getList = () => {
-  loading.value = true;
-  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: "1" }).then((res) => {
-    sourceList.value.data = res;
-    setTimeout(() => {
-      loading.value = false;
-    }, 200);
-  });
-  loadingTwo.value = true;
-  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: "2" }).then((res) => {
-    sourceListTwo.value.data = res;
+const getData = (days) => {
+  sourceList.value["loading" + days] = true;
+  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: activeName.value, days: days, sortField: 1 }).then((res) => {
+    sourceList.value["data" + days] = res;
     setTimeout(() => {
-      loadingTwo.value = false;
+      sourceList.value["loading" + days] = false;
     }, 200);
   });
 };
-getList();
-const deriveExcel = () => {
-  proxy.postFile("/turnoverRateBoard/exportExcel", { bomClassify: "1" }).then((res) => {
-    proxy.downloadFile(res, "周转率-裸垫.xlsx");
-  });
+const getList = () => {
+  getData("30");
+  getData("60");
+  getData("90");
 };
-const deriveExcelTwo = () => {
-  proxy.postFile("/turnoverRateBoard/exportExcel", { bomClassify: "2" }).then((res) => {
-    proxy.downloadFile(res, "周转率-裸砖.xlsx");
+getList();
+const deriveExcel = (days) => {
+  proxy.postFile("/turnoverRateBoard/exportExcel", { bomClassify: activeName.value, days: days, sortField: 1 }).then((res) => {
+    if (activeName.value == "1") {
+      proxy.downloadFile(res, "周转率-裸垫-" + days + "天.xlsx");
+    } else {
+      proxy.downloadFile(res, "周转率-裸砖-" + days + "天.xlsx");
+    }
   });
 };
 </script>