Merge branch '周转率'

src/components/byTable/index.vue

@@ -119,13 +119,16 @@
         :default-expand-all="defaultExpandAll || false"
         :cell-class-name="cellClassName"
         :span-method="spanMethod"
-        :border="borderStatus">
+        :border="borderStatus"
+        :default-sort="defaultSort">
         <el-table-column
           v-for="(item, index) in config"
           :key="index"
           v-bind="getAttrsValue(item)"
           :type="item.type || ''"
-          :selectable="(rowData, rowIndex) => isSelectable(rowData, rowIndex, item)">
+          :selectable="(rowData, rowIndex) => isSelectable(rowData, rowIndex, item)"
+          :sortable="item.sortable || false"
+          :prop="item.attrs.prop">
           <template #default="scope" v-if="!item.type">
             <slot :name="item.attrs.slot" :item="scope.row" v-if="item.attrs.slot"> 插槽占位符 </slot>
             <div v-else-if="isFunction(getValue(scope, item))">
@@ -270,6 +273,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    // 排序配置
+    defaultSort: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   setup(props) {
     const { proxy } = getCurrentInstance();

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

@@ -0,0 +1,313 @@
+<template>
+  <el-card class="box-card">
+    <el-tabs v-model="activeName" type="card" @tab-change="getList">
+      <el-tab-pane label="瑜伽垫" :name="'1'">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <byTable
+              ref="data30"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data30"
+              :config="config"
+              :loading="sourceList.loading30"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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
+              ref="data60"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data60"
+              :config="config"
+              :loading="sourceList.loading60"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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
+              ref="data90"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data90"
+              :config="config"
+              :loading="sourceList.loading90"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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="20">
+          <el-col :span="8">
+            <byTable
+              ref="data30"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data30"
+              :config="config"
+              :loading="sourceList.loading30"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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
+              ref="data60"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data60"
+              :config="config"
+              :loading="sourceList.loading60"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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
+              ref="data90"
+              :hidePagination="true"
+              :borderStatus="true"
+              :source="sourceList.data90"
+              :config="config"
+              :loading="sourceList.loading90"
+              :defaultSort="{ prop: 'turnoverRate', order: 'ascending' }"
+              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>
+
+<script setup>
+import byTable from "/src/components/byTable/index";
+import { nextTick } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const activeName = ref("1");
+const sourceList = ref({
+  loading30: false,
+  data30: [],
+  loading60: false,
+  data60: [],
+  loading90: false,
+  data90: [],
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "品号",
+        prop: "bomSpecCode",
+        width: 120,
+      },
+    },
+    {
+      attrs: {
+        label: "品名",
+        slot: "bomSpecName",
+      },
+    },
+    {
+      attrs: {
+        label: "周转率",
+        prop: "turnoverRate",
+        width: 100,
+      },
+      sortable: true,
+    },
+    {
+      attrs: {
+        label: "库存数量",
+        prop: "quantity",
+        width: 90,
+      },
+    },
+  ];
+});
+const getData = (days) => {
+  sourceList.value["loading" + days] = true;
+  proxy.post("/turnoverRateBoard/getTurnoverRateStatisticsList", { bomClassify: activeName.value, days: days, sortField: 1 }).then(async (res) => {
+    sourceList.value["data" + days] = res;
+    setTimeout(() => {
+      sourceList.value["loading" + days] = false;
+    }, 200);
+    await nextTick();
+    proxy.$refs["data" + days].hocElTable.sort("turnoverRate", "ascending");
+  });
+};
+const getList = () => {
+  getData("30");
+  getData("60");
+  getData("90");
+};
+getList();
+const deriveExcel = (days) => {
+  ElMessageBox.confirm("你是否确认此操作", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      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");
+        }
+      });
+    })
+    .catch(() => {});
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.colorDim) {
+  color: red;
+}
+</style>