1

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

@@ -1,6 +1,109 @@
 <template>
   <el-card class="box-card">
-    <el-row :gutter="10">
+    <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: '刷新',
+                  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-tab-pane label="瑜伽砖" :name="'2'"> </el-tab-pane>
+    </el-tabs>
+    <!-- <el-row :gutter="10">
       <el-col :span="12">
         <byTable
           :hidePagination="true"
@@ -47,7 +150,7 @@
           </template>
         </byTable>
       </el-col>
-    </el-row>
+    </el-row> -->
   </el-card>
 </template>
 
@@ -55,13 +158,18 @@
 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 [
@@ -69,48 +177,45 @@ const config = computed(() => {
       attrs: {
         label: "品号",
         prop: "bomSpecCode",
-        width: 140,
+        width: 120,
       },
     },
     {
       attrs: {
         label: "品名",
-        prop: "bomSpecName",
-        "min-width": 220,
+        slot: "bomSpecName",
       },
     },
     {
       attrs: {
         label: "周转率",
         prop: "turnoverRate",
-        width: 100,
+        width: 80,
       },
     },
     {
       attrs: {
         label: "库存数量",
         prop: "quantity",
-        width: 100,
+        width: 80,
       },
     },
   ];
 });
-const getList = () => {
-  loading.value = true;
-  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: "1" }).then((res) => {
-    sourceList.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(() => {
-      loading.value = false;
-    }, 200);
-  });
-  loadingTwo.value = true;
-  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: "2" }).then((res) => {
-    sourceListTwo.value.data = res;
-    setTimeout(() => {
-      loadingTwo.value = false;
+      sourceList.value["loading" + days] = false;
     }, 200);
   });
 };
+const getList = () => {
+  getData("30");
+  getData("60");
+  getData("90");
+};
 getList();
 const deriveExcel = () => {
   proxy.postFile("/turnoverRateBoard/exportExcel", { bomClassify: "1" }).then((res) => {