refactor: 记住排序优化

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"
@@ -489,10 +489,7 @@ export default {
     if(this.trashEnable){
       this.condition.orders = [{"name":"delete_time","type":"desc"}];
     }else {
-      let orderArr = this.getSortField();
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-      if (orderArr) {
-        this.condition.orders = orderArr;
-      }
     }
 
     this.search();
@@ -1022,21 +1019,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, () => {

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();
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-    if (orderArr) {
-      this.condition.orders = orderArr;
-    }
 
     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) {

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
+        :total="total" enableSelection
-                :batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
+        :batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
-                :operators="tableOperatorButtons" operator-width="200px"
+        :operators="tableOperatorButtons" operator-width="200px"
-                @refresh="initTable"
+        :remember-order="true"
-                :fields.sync="fields"
+        @refresh="initTable"
-                :table-is-loading="this.result.loading"
+        :fields.sync="fields"
-                :field-key="tableHeaderKey"
+        :table-is-loading="this.result.loading"
-                @saveSortField="saveSortField"
+        :field-key="tableHeaderKey"
-                ref="table">
+        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();
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-    if (orderArr) {
+
-      this.condition.orders = orderArr;
-    }
     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>

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() {

frontend/src/business/components/performance/report/PerformanceTestReportList.vue

@@ -249,10 +249,8 @@ export default {
       } else {
         this.condition.testId = null;
       }
-      let orderArr = this.getSortField();
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-      if(orderArr){
+
-        this.condition.orders = orderArr;
-      }
       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 => {

frontend/src/business/components/performance/test/PerformanceTestList.vue

@@ -179,10 +179,8 @@ export default {
       });
     },
     initTableData() {
-      let orderArr = this.getSortField();
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-      if(orderArr){
+
-        this.condition.orders = orderArr;
-      }
       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;
     }
   }
 };

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();
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-    if(orderArr){
+
-      this.condition.orders = orderArr;
-    }
     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;
     }
   }
 };

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();
+      this.page.condition.orders = getLastTableSortField(this.tableHeaderKey);
-      if(orderArr){
+
-        this.page.condition.orders = orderArr;
-      }
       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;
     }
   }
 };

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();
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-    if(orderArr){
+
-      this.condition.orders = orderArr;
-    }
     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":

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();
+      this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-      if(orderArr){
+
-        this.condition.orders = orderArr;
-      }
       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>

frontend/src/business/components/track/review/components/TestCaseReviewList.vue

@@ -178,10 +178,8 @@ export default {
   },
   created() {
     this.isTestManagerOrTestUser = true;
-    let orderArr = this.getSortField();
+    this.condition.orders = getLastTableSortField(this.tableHeaderKey);
-    if(orderArr){
+
-      this.condition.orders = orderArr;
-    }
     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>

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");
+  let orderJsonStr = localStorage.getItem(key+"_SORT");
-  return fieldStr;
+  if(orderJsonStr){
+    try {
+      return JSON.parse(orderJsonStr);
+    }catch (e){
+      return [];
+    }
+  }
+  return [];
 }