refactor: 试计划场景用例添加排序筛选 (#3106)

Co-authored-by: Nchenjianxing <jianxing.chen@fit2cloud.com>

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanLoadCaseMapper.xml

@@ -70,7 +70,12 @@
         <if test="request.orders != null and request.orders.size() > 0">
             order by
             <foreach collection="request.orders" separator="," item="order">
-                tplc.${order.name} ${order.type}
+                <if test="order.name == 'num'">
+                    lt.${order.name} ${order.type}
+                </if>
+                <if test="order.name != 'num'">
+                    tplc.${order.name} ${order.type}
+                </if>
             </foreach>
         </if>
     </select>
@@ -145,4 +150,4 @@
     <select id="getStatusByTestPlanId" resultType="java.lang.String">
         select status from test_plan_load_case tplc where tplc.test_plan_id = #{planId}
     </select>
-</mapper>
\ No newline at end of file
+</mapper>

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanScenarioCaseMapper.xml

@@ -60,20 +60,8 @@
         #{nodeId}
       </foreach>
     </if>
-    <if test="request.filters != null and request.filters.size() > 0">
-      <foreach collection="request.filters.entrySet()" index="key" item="values">
-        <if test="values != null and values.size() > 0">
-          <choose>
-            <when test="key == 'priority'">
-              and c.priority in
-              <foreach collection="values" item="value" separator="," open="(" close=")">
-                #{value}
-              </foreach>
-            </when>
-          </choose>
-        </if>
-      </foreach>
-    </if>
+
+    <include refid="filers"/>
     <if test="request.orders != null and request.orders.size() > 0">
       order by
       <foreach collection="request.orders" separator="," item="order">
@@ -133,20 +121,7 @@
         #{nodeId}
       </foreach>
     </if>
-    <if test="request.filters != null and request.filters.size() > 0">
-      <foreach collection="request.filters.entrySet()" index="key" item="values">
-        <if test="values != null and values.size() > 0">
-          <choose>
-            <when test="key == 'priority'">
-              and c.priority in
-              <foreach collection="values" item="value" separator="," open="(" close=")">
-                #{value}
-              </foreach>
-            </when>
-          </choose>
-        </if>
-      </foreach>
-    </if>
+    <include refid="filers"/>
     <if test="request.orders != null and request.orders.size() > 0">
       order by
       <foreach collection="request.orders" separator="," item="order">
@@ -162,6 +137,23 @@
     </if>
   </select>
 
+  <sql id="filers">
+    <if test="request.filters != null and request.filters.size() > 0">
+      <foreach collection="request.filters.entrySet()" index="key" item="values">
+        <if test="values != null and values.size() > 0">
+          <choose>
+            <when test="key == 'level'">
+              and c.level in
+              <foreach collection="values" item="value" separator="," open="(" close=")">
+                #{value}
+              </foreach>
+            </when>
+          </choose>
+        </if>
+      </foreach>
+    </if>
+  </sql>
+
     <select id="getExecResultByPlanId" resultType="java.lang.String">
       select last_result
       from
@@ -188,4 +180,4 @@
       where t.test_plan_id = #{planId}
     </select>
 
-</mapper>
\ No newline at end of file
+</mapper>

frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue

 <template>
   <div>
     <el-card class="table-card-nopadding" v-loading="result.loading">
-      <!--      <template v-slot:header>-->
       <ms-table-header :condition.sync="condition" @search="selectByParam" title=""
                        :show-create="false" :tip="$t('commons.search_by_id_name_tag')"/>
-      <!--      </template>-->
 
       <el-table ref="scenarioTable" border :data="tableData" class="adjust-table ms-select-all-fixed"
                 @sort-change="sort"
@@ -62,7 +60,7 @@
           <el-table-column v-if="item.id == 'level'" prop="level"
                            sortable="custom"
                            column-key="level"
-                           :filters="levelFilters"
+                           :filters="LEVEL_FILTERS"
                            min-width="130px"
                            :label="$t('api_test.automation.case_level')"
                            show-overflow-tooltip :key="index">
@@ -73,7 +71,7 @@
           <el-table-column v-if="item.id == 'status'" prop="status" :label="$t('test_track.plan.plan_status')"
                            sortable="custom"
                            column-key="status"
-                           :filters="statusFilters"
+                           :filters="STATUS_FILTERS"
                            show-overflow-tooltip min-width="120px" :key="index">
             <template v-slot:default="scope">
               <plan-status-table-item :value="scope.row.status"/>
@@ -113,7 +111,7 @@
                            show-overflow-tooltip :key="index"/>
           <el-table-column v-if="item.id == 'lastResult'" prop="lastResult"
                            :label="$t('api_test.automation.last_result')"
-                           :filters="resultFilters"
+                           :filters="RESULT_FILTERS"
 
                            sortable="custom" column-key="last_result" min-width="130px" :key="index">
             <template v-slot:default="{row}">
@@ -219,6 +217,7 @@ import {
 import {Api_Scenario_List} from "@/business/components/common/model/JsonData";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
+import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
 
 export default {
   name: "MsApiScenarioList",
@@ -348,6 +347,7 @@ export default {
       isSelectAllDate: false,
       selectRows: new Set(),
       selectDataCounts: 0,
+      ...API_SCENARIO_FILTERS,
       typeArr: [
         {id: 'level', name: this.$t('test_track.case.priority')},
         {id: 'status', name: this.$t('test_track.plan.plan_status')},
@@ -359,22 +359,6 @@ export default {
         // {id: 'environmentId', name: this.$t('api_test.definition.request.run_env'), optionMethod: this.getEnvsOptions},
         {id: 'projectEnv', name: this.$t('api_test.definition.request.run_env')},
       ],
-      statusFilters: [
-        {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
-        {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
-        {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
-        {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
-      ],
-      levelFilters: [
-        {text: 'P0', value: 'P0'},
-        {text: 'P1', value: 'P1'},
-        {text: 'P2', value: 'P2'},
-        {text: 'P3', value: 'P3'}
-      ],
-      resultFilters: [
-        {text: 'Fail', value: 'Fail'},
-        {text: 'Success', value: 'Success'}
-      ],
       valueArr: {
         level: [
           {name: 'P0', id: 'P0'},

frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue

@@ -27,10 +27,7 @@
         <el-table-column prop="level" :label="$t('api_test.automation.case_level')"
                          show-overflow-tooltip>
           <template v-slot:default="scope">
-            <ms-tag v-if="scope.row.level == 'P0'" type="info" effect="plain" content="P0"/>
-            <ms-tag v-if="scope.row.level == 'P1'" type="warning" effect="plain" content="P1"/>
-            <ms-tag v-if="scope.row.level == 'P2'" type="success" effect="plain" content="P2"/>
-            <ms-tag v-if="scope.row.level == 'P3'" type="danger" effect="plain" content="P3"/>
+            <priority-table-item :value="scope.row.level" ref="level"/>
           </template>
 
         </el-table-column>
@@ -74,10 +71,12 @@
   import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
   import {_handleSelect, _handleSelectAll} from "../../../../../../../common/js/tableUtils";
   import EnvPopover from "@/business/components/track/common/EnvPopover";
+  import PriorityTableItem from "@/business/components/track/common/tableItems/planview/PriorityTableItem";
 
   export default {
     name: "RelevanceScenarioList",
     components: {
+      PriorityTableItem,
       EnvPopover,
       TestPlanScenarioListHeader,
       MsTablePagination, MsTableMoreBtn, ShowMoreBtn, MsTableHeader, MsTag, MsApiReportDetail, MsTestPlanList},

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue

@@ -10,6 +10,8 @@
 
       <el-table ref="scenarioTable" border :data="tableData" class="test-content adjust-table ms-select-all-fixed"
                 @select-all="handleSelectAll"
+                @sort-change="sort"
+                @filter-change="filter"
                 :height="screenHeight"
                 @select="handleSelect">
         <el-table-column width="50" type="selection"/>
@@ -26,6 +28,7 @@
         <template v-for="(item, index) in tableLabel">
           <el-table-column
             v-if="item.id == 'num'"
+            sortable="custom"
             prop="customNum"
             min-width="80px"
             label="ID"
@@ -33,12 +36,12 @@
           <el-table-column v-if="item.id == 'name'" prop="name" :label="$t('api_test.automation.scenario_name')" min-width="120px"
                            show-overflow-tooltip :key="index"/>
           <el-table-column v-if="item.id == 'level'" prop="level" :label="$t('api_test.automation.case_level')" min-width="100px"
+                           column-key="level"
+                           sortable="custom"
+                           :filters="LEVEL_FILTERS"
                            show-overflow-tooltip :key="index">
             <template v-slot:default="scope">
-              <ms-tag v-if="scope.row.level == 'P0'" type="info" effect="plain" content="P0"/>
-              <ms-tag v-if="scope.row.level == 'P1'" type="warning" effect="plain" content="P1"/>
-              <ms-tag v-if="scope.row.level == 'P2'" type="success" effect="plain" content="P2"/>
-              <ms-tag v-if="scope.row.level == 'P3'" type="danger" effect="plain" content="P3"/>
+              <priority-table-item :value="scope.row.level" ref="level"/>
             </template>
 
           </el-table-column>
@@ -51,7 +54,10 @@
           </el-table-column>
           <el-table-column v-if="item.id == 'userId'" prop="userId" :label="$t('api_test.automation.creator')" min-width="100px"
                            show-overflow-tooltip :key="index"/>
-          <el-table-column v-if="item.id == 'updateTime'" prop="updateTime" min-width="120px"
+          <el-table-column v-if="item.id == 'updateTime'"
+                           prop="updateTime"
+                           min-width="120px"
+                           sortable="custom"
                            :label="$t('api_test.automation.update_time')" width="180" :key="index">
             <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@@ -60,6 +66,7 @@
           <el-table-column v-if="item.id == 'stepTotal'" prop="stepTotal" :label="$t('api_test.automation.step')" min-width="80px"
                            show-overflow-tooltip :key="index"/>
           <el-table-column v-if="item.id == 'lastResult'" prop="lastResult" min-width="100px"
+                           :filters="RESULT_FILTERS"
                            :label="$t('api_test.automation.last_result')" :key="index">
             <template v-slot:default="{row}">
               <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
@@ -114,7 +121,7 @@ import MsTableHeader from "@/business/components/common/components/MsTableHeader
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
 import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
 import MsTag from "../../../../../common/components/MsTag";
-import {getCurrentProjectID, getUUID, strMapToObj} from "@/common/js/utils";
+import {getUUID, strMapToObj} from "@/common/js/utils";
 import MsApiReportDetail from "../../../../../api/automation/report/ApiReportDetail";
 import MsTableMoreBtn from "../../../../../api/automation/scenario/TableMoreBtn";
 import MsScenarioExtendButtons from "@/business/components/api/automation/scenario/ScenarioExtendBtns";
@@ -141,10 +148,13 @@ import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOpe
 import BatchEdit from "@/business/components/track/case/components/BatchEdit";
 import MsPlanRunMode from "../../../common/PlanRunMode";
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
+import PriorityTableItem from "@/business/components/track/common/tableItems/planview/PriorityTableItem";
+import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
 
 export default {
   name: "MsTestPlanApiScenarioList",
   components: {
+    PriorityTableItem,
     HeaderLabelOperate,
     HeaderCustom,
     MsTableOperatorButton,
@@ -192,6 +202,7 @@ export default {
       infoDb: false,
       runVisible: false,
       runData: [],
+      ...API_SCENARIO_FILTERS,
       buttons: [
         {
           name: this.$t('test_track.case.batch_unlink'), handleClick: this.handleDeleteBatch
@@ -368,6 +379,18 @@ export default {
       this.infoDb = true;
       this.reportId = row.reportId;
     },
+    sort(column) {
+      // 每次只对一个字段排序
+      if (this.condition.orders) {
+        this.condition.orders = [];
+      }
+      _sort(column, this.condition);
+      this.search();
+    },
+    filter(filters) {
+      _filter(filters, this.condition);
+      this.search();
+    },
     remove(row) {
       if (this.planId) {
         this.$get('/test/plan/scenario/case/delete/' + row.id, () => {

frontend/src/business/components/track/plan/view/comonents/load/TestPlanLoadCaseList.vue

@@ -29,7 +29,7 @@
           </template>
         </el-table-column>
         <template v-for="(item, index) in tableLabel">
-          <el-table-column v-if="item.id == 'num'" prop="num" min-width="80" label="ID" show-overflow-tooltip :key="index"/>
+          <el-table-column v-if="item.id == 'num'" prop="num" sortable min-width="80" label="ID" show-overflow-tooltip :key="index"/>
           <el-table-column
               v-if="item.id == 'caseName'"
               prop="caseName"

frontend/src/business/components/track/review/view/components/ReviewRelevanceScenarioList.vue

@@ -13,10 +13,7 @@
         <el-table-column prop="level" :label="$t('api_test.automation.case_level')"
                          show-overflow-tooltip>
           <template v-slot:default="scope">
-            <ms-tag v-if="scope.row.level == 'P0'" type="info" effect="plain" content="P0"/>
-            <ms-tag v-if="scope.row.level == 'P1'" type="warning" effect="plain" content="P1"/>
-            <ms-tag v-if="scope.row.level == 'P2'" type="success" effect="plain" content="P2"/>
-            <ms-tag v-if="scope.row.level == 'P3'" type="danger" effect="plain" content="P3"/>
+            <priority-table-item :value="scope.row.level" ref="level"/>
           </template>
 
         </el-table-column>
@@ -58,10 +55,11 @@ import {_handleSelect, _handleSelectAll} from "@/common/js/tableUtils";
 import MsTag from "@/business/components/common/components/MsTag";
 import EnvPopover from "@/business/components/track/common/EnvPopover";
 import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+import PriorityTableItem from "@/business/components/track/common/tableItems/planview/PriorityTableItem";
 
 export default {
   name: "ReviewRelevanceScenarioList",
-  components: {MsTablePagination, EnvPopover, MsTag},
+  components: {PriorityTableItem, MsTablePagination, EnvPopover, MsTag},
   props: {
     referenced: {
       type: Boolean,

frontend/src/common/js/table-constants.js

 // 模板
+import i18n from "@/i18n/i18n";
+
 export const CUSTOM_FIELD_TYPE_OPTION = [
   {value: 'input',text: '输入框'},
   {value: 'textarea',text: '文本框'},
@@ -69,6 +71,25 @@ export const ISSUE_STATUS_MAP = {
   'delete': '已删除'
 }
 
+export const API_SCENARIO_FILTERS = {
+  LEVEL_FILTERS: [
+    {text: 'P0', value: 'P0'},
+    {text: 'P1', value: 'P1'},
+    {text: 'P2', value: 'P2'},
+    {text: 'P3', value: 'P3'}
+  ],
+  RESULT_FILTERS: [
+    {text: 'Fail', value: 'Fail'},
+    {text: 'Success', value: 'Success'}
+  ],
+  STATUS_FILTERS: [
+    {text: i18n.t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
+    {text: i18n.t('test_track.plan.plan_status_running'), value: 'Underway'},
+    {text: i18n.t('test_track.plan.plan_status_completed'), value: 'Completed'},
+    {text: i18n.t('test_track.plan.plan_status_trash'), value: 'Trash'},
+  ],
+}
+
 export const USER_GROUP_SCOPE = {
   // todo i18n
   'SYSTEM': '系统',