refactor: 记住排序优化

2021-09-06 10:54:54 +08:00 · 2021-09-06 10:54:54 +08:00 · 3c39f84476
parent f63ff4efc8
commit 3c39f84476
12 changed files with 71 additions and 202 deletions
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@ -14,11 +14,11 @@
        :total="total"
        :fields.sync="fields"
        :field-key=tableHeaderKey
+        :remember-order="true"
        operator-width="200"
        @refresh="search(projectId)"
        @callBackSelectAll="callBackSelectAll"
        @callBackSelect="callBackSelect"
-        @saveSortField="saveSortField"
        ref="scenarioTable">
        <ms-table-column
          prop="deleteTime"
@ -486,10 +486,7 @@ export default {
    if(this.trashEnable){
      this.condition.orders = [{"name":"delete_time","type":"desc"}];
    }else {
-      let orderArr = this.getSortField();
-      if (orderArr) {
-        this.condition.orders = orderArr;
-      }
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
    }

    this.search();
@ -1019,21 +1016,6 @@ export default {
        }
      });
    },
-    saveSortField(key, orders) {
-      saveLastTableSortField(key, JSON.stringify(orders));
-    },
-    getSortField() {
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if (orderJsonStr) {
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        } catch (e) {
-          return null;
-        }
-      }
-      return returnObj;
-    },
    stop(row) {
      let url = "/api/automation/stop/" + this.reportId;
      this.$get(url, () => {
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@ -19,7 +19,7 @@
        :screenHeight="screenHeight"
        :fields.sync="fields"
        :field-key="tableHeaderKey"
-        @saveSortField="saveSortField"
+        :remember-order="true"
        operator-width="190px"
        @refresh="initTable"
        ref="caseTable"
@ -213,7 +213,7 @@ import {
  _filter,
  _sort,
  getCustomTableHeader,
-  getCustomTableWidth, saveLastTableSortField, getLastTableSortField
+  getCustomTableWidth, getLastTableSortField
 } from "@/common/js/tableUtils";
 import {API_CASE_LIST} from "@/common/js/constants";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
@ -374,10 +374,7 @@ export default {
    planId: String
  },
  created: function () {
-    let orderArr = this.getSortField();
-    if (orderArr) {
-      this.condition.orders = orderArr;
-    }
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);

    if (this.trashEnable) {
      this.operators = this.trashOperators;
@ -914,21 +911,6 @@ export default {
      column.width = finalWidth;
      column.realWidth = finalWidth;
    },
-    saveSortField(key, orders) {
-      saveLastTableSortField(key, JSON.stringify(orders));
-    },
-    getSortField() {
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if (orderJsonStr) {
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        } catch (e) {
-          return null;
-        }
-      }
-      return returnObj;
-    },
    stop(id) {
      for (let item of this.tableData) {
        if (id && id === item.id) {
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@ -9,15 +9,15 @@

      <ms-table
        :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
-                :total="total" enableSelection
-                :batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
-                :operators="tableOperatorButtons" operator-width="200px"
-                @refresh="initTable"
-                :fields.sync="fields"
-                :table-is-loading="this.result.loading"
-                :field-key="tableHeaderKey"
-                @saveSortField="saveSortField"
-                ref="table">
+        :total="total" enableSelection
+        :batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
+        :operators="tableOperatorButtons" operator-width="200px"
+        :remember-order="true"
+        @refresh="initTable"
+        :fields.sync="fields"
+        :table-is-loading="this.result.loading"
+        :field-key="tableHeaderKey"
+        ref="table">
        <ms-table-column
          prop="deleteTime"
          sortable
@ -429,10 +429,8 @@ export default {
      this.tableOperatorButtons = this.tableUsualOperatorButtons;
      this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
    }
-    let orderArr = this.getSortField();
-    if (orderArr) {
-      this.condition.orders = orderArr;
-    }
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
    this.initTable();
    this.getMaintainerOptions();
  },
@ -824,21 +822,6 @@ export default {
        return false;
      }
    },
-    saveSortField(key, orders) {
-      saveLastTableSortField(key, JSON.stringify(orders));
-    },
-    getSortField() {
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if (orderJsonStr) {
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        } catch (e) {
-          return null;
-        }
-      }
-      return returnObj;
-    }
  },
 };
 </script>
--- a/frontend/src/business/components/common/components/table/MsTable.vue
+++ b/frontend/src/business/components/common/components/table/MsTable.vue
@ -9,6 +9,7 @@
      @select="handleSelect"
      @header-dragend="headerDragend"
      @cell-mouse-enter="showPopover"
+      :default-sort="defaultSort"
      class="test-content adjust-table ms-table"
      :class="{'ms-select-all-fixed': showSelectAll}"
      :height="screenHeight"
@ -75,14 +76,13 @@
 import {
  _filter,
  _handleSelect,
-  _handleSelectAll, _sort, getLabel,
+  _handleSelectAll, _sort,
  getSelectDataCounts,
  setUnSelectIds,
  toggleAllSelection,
-  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth,
+  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth, saveLastTableSortField,
 } from "@/common/js/tableUtils";
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
-import {TEST_CASE_LIST} from "@/common/js/constants";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
 import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
@ -116,7 +116,8 @@ export default {
      selectRows: new Set(),
      selectIds: [],
      tableActive: true,
-      hasBatchTipShow: false
+      hasBatchTipShow: false,
+      defaultSort: {}
    };
  },
  props: {
@ -198,14 +199,19 @@ export default {
    fieldKey: String,
    customFields: Array,
    highlightCurrentRow: Boolean,
+    // 是否记住排序
+    rememberOrder: Boolean
  },
  mounted() {
-    getLabel(this, TEST_CASE_LIST);
+    this.setDefaultOrders();
  },
  watch: {
    selectNodeIds() {
      this.selectDataCounts = 0;
    },
+    'condition.orders'() {
+
+    }
  },
  methods: {
    // 批量操作提示, 第一次勾选提示, 之后不提示
@ -238,6 +244,20 @@ export default {
      let columnTop = column.getBoundingClientRect().top;
      return columnTop - tableTop > 30;
    },
+    setDefaultOrders() {
+      let orders = this.condition.orders;
+      if (orders) {
+        orders.forEach(item => {
+          this.defaultSort = {};
+          this.defaultSort.prop = item.name;
+          if (item.type === 'asc') {
+            this.defaultSort.order = 'ascending';
+          } else {
+            this.defaultSort.order = 'descending';
+          }
+        });
+      }
+    },
    handleSelectAll(selection) {
      _handleSelectAll(this, selection, this.data, this.selectRows, this.condition);
      setUnSelectIds(this.data, this.condition, this.selectRows);
@ -303,7 +323,9 @@ export default {
        this.condition.orders = [];
      }
      _sort(column, this.condition);
-      this.$emit("saveSortField", this.fieldKey,this.condition.orders);
+      if (this.rememberOrder) {
+        saveLastTableSortField(this.fieldKey, JSON.stringify(this.condition.orders));
+      }
      this.handleRefresh();
    },
    handleBatchEdit() {
--- a/frontend/src/business/components/performance/report/PerformanceTestReportList.vue
+++ b/frontend/src/business/components/performance/report/PerformanceTestReportList.vue
@ -249,10 +249,8 @@ export default {
      } else {
        this.condition.testId = null;
      }
-      let orderArr = this.getSortField();
-      if(orderArr){
-        this.condition.orders = orderArr;
-      }
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
      if (!getCurrentProjectID()) {
        return;
      }
@ -351,18 +349,6 @@ export default {
    saveSortField(key,orders){
      saveLastTableSortField(key,JSON.stringify(orders));
    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
-    },
    handleSelectAll(selection) {
      if (selection.length > 0) {
        this.tableData.forEach(item => {
--- a/frontend/src/business/components/performance/test/PerformanceTestList.vue
+++ b/frontend/src/business/components/performance/test/PerformanceTestList.vue
@ -179,10 +179,8 @@ export default {
      });
    },
    initTableData() {
-      let orderArr = this.getSortField();
-      if(orderArr){
-        this.condition.orders = orderArr;
-      }
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
      this.condition.projectId = getCurrentProjectID();
      this.condition.workspaceId = getCurrentWorkspaceId();
      this.result = this.$post(this.buildPagePath('/performance/list'), this.condition, response => {
@ -243,7 +241,7 @@ export default {
        this.condition.orders = [];
      }
      _sort(column, this.condition);
-      this.saveSortField(this.tableHeaderKey,this.condition.orders);
+      saveLastTableSortField(this.tableHeaderKey, JSON.stringify(this.condition.orders));
      this.initTableData();
    },
    filter(filters) {
@ -266,21 +264,6 @@ export default {
        return;
      }
      this.$router.push('/performance/test/create');
-    },
-    saveSortField(key,orders){
-      saveLastTableSortField(key,JSON.stringify(orders));
-    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
    }
  }
 };
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@ -14,12 +14,12 @@
      :operators="operators"
      :screen-height="screenHeight"
      :batch-operators="batchButtons"
+      :remember-order="true"
      @handlePageChange="initTableData"
      @handleRowClick="handleEdit"
      :fields.sync="fields"
      :field-key="tableHeaderKey"
      @refresh="initTableData"
-      @saveSortField="saveSortField"
      :custom-fields="testCaseTemplate.customFields"
      ref="table">

@ -199,7 +199,7 @@ import {
  getCustomTableWidth, getLastTableSortField,
  getPageInfo,
  getTableHeaderWithCustomFields,
-  initCondition, saveLastTableSortField,
+  initCondition,
 } from "@/common/js/tableUtils";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
@ -378,10 +378,8 @@ export default {
    }else {
      this.condition.filters = {reviewStatus: ["Prepare", "Pass", "UnPass"]};
    }
-    let orderArr = this.getSortField();
-    if(orderArr){
-      this.condition.orders = orderArr;
-    }
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
    this.initTableData();
    let redirectParam = this.$route.query.dataSelectRange;
    this.checkRedirectEditPage(redirectParam);
@ -791,21 +789,6 @@ export default {
        this.$refs.testBatchMove.close();
        this.refresh();
      });
-    },
-    saveSortField(key,orders){
-      saveLastTableSortField(key,JSON.stringify(orders));
-    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
    }
  }
 };
--- a/frontend/src/business/components/track/issue/IssueList.vue
+++ b/frontend/src/business/components/track/issue/IssueList.vue
@ -25,10 +25,10 @@
          :operators="operators"
          :show-select-all="false"
          :screen-height="screenHeight"
+          :remember-order="true"
          @handlePageChange="getIssues"
          :fields.sync="fields"
          :field-key="tableHeaderKey"
-          @saveSortField="saveSortField"
          @refresh="getIssues"
          :custom-fields="issueTemplate.customFields"
          ref="table"
@ -290,10 +290,8 @@ export default {
    },
    getIssues() {
      this.page.condition.projectId = this.projectId;
-      let orderArr = this.getSortField();
-      if(orderArr){
-        this.page.condition.orders = orderArr;
-      }
+      this.page.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
      this.page.result = getIssues(this.page);
    },
    handleEdit(data) {
@ -321,25 +319,10 @@ export default {
      }
      return true;
    },
-    saveSortField(key,orders){
-      saveLastTableSortField(key,JSON.stringify(orders));
-    },
    syncIssues() {
      this.page.result = syncIssues(() => {
        this.getIssues();
      });
-    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
    }
  }
 };
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@ -326,10 +326,8 @@ export default {
      this.projectId = getCurrentProjectID();
    }
    this.hasEditPermission = hasPermission('PROJECT_TRACK_PLAN:READ+EDIT');
-    let orderArr = this.getSortField();
-    if(orderArr){
-      this.condition.orders = orderArr;
-    }
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
    this.initTableData();
  },
  methods: {
@ -454,18 +452,6 @@ export default {
    saveSortField(key,orders){
      saveLastTableSortField(key,JSON.stringify(orders));
    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
-    },
    handleCommand(cmd, row) {
      switch (cmd) {
        case  "delete":
--- a/frontend/src/business/components/track/report/components/TestPlanReportList.vue
+++ b/frontend/src/business/components/track/report/components/TestPlanReportList.vue
@ -156,10 +156,8 @@ export default {
  methods: {
    initTableData() {
      initCondition(this.condition, this.condition.selectAll);
-      let orderArr = this.getSortField();
-      if(orderArr){
-        this.condition.orders = orderArr;
-      }
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
      this.selectRows = new Set();
      if (this.planId) {
        this.condition.planId = this.planId;
@ -272,18 +270,6 @@ export default {
    saveSortField(key,orders){
      saveLastTableSortField(key,JSON.stringify(orders));
    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
-    }
  }
 }
 </script>
--- a/frontend/src/business/components/track/review/components/TestCaseReviewList.vue
+++ b/frontend/src/business/components/track/review/components/TestCaseReviewList.vue
@ -178,10 +178,8 @@ export default {
  },
  created() {
    this.isTestManagerOrTestUser = true;
-    let orderArr = this.getSortField();
-    if(orderArr){
-      this.condition.orders = orderArr;
-    }
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
+
    this.initTableData();
  },
  computed: {
@ -271,18 +269,6 @@ export default {
    saveSortField(key,orders){
      saveLastTableSortField(key,JSON.stringify(orders));
    },
-    getSortField(){
-      let orderJsonStr = getLastTableSortField(this.tableHeaderKey);
-      let returnObj = null;
-      if(orderJsonStr){
-        try {
-          returnObj = JSON.parse(orderJsonStr);
-        }catch (e){
-          return null;
-        }
-      }
-      return returnObj;
-    }
  }
 };
 </script>
--- a/frontend/src/common/js/tableUtils.js
+++ b/frontend/src/common/js/tableUtils.js
@ -385,8 +385,15 @@ export function saveLastTableSortField(key, field) {
 }

 export function getLastTableSortField(key) {
-  let fieldStr = localStorage.getItem(key+"_SORT");
-  return fieldStr;
+  let orderJsonStr = localStorage.getItem(key+"_SORT");
+  if(orderJsonStr){
+    try {
+      return JSON.parse(orderJsonStr);
+    }catch (e){
+      return [];
+    }
+  }
+  return [];
 }