fix(测试跟踪): 修复功能用例执行时翻页偶尔不显示下一条用例的缺陷

--bug=1010551 --user=宋天阳 测试计划-功能用例执行用例时，翻页时不显示下一页用例名称
https://www.tapd.cn/55049933/s/1109274

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanTestCaseMapper.java

@@ -19,6 +19,8 @@ public interface ExtTestPlanTestCaseMapper {
 
     List<TestPlanCaseDTO> list(@Param("request") QueryTestPlanCaseRequest request);
 
+    List<String> nameList(@Param("request") QueryTestPlanCaseRequest request);
+
     List<TestPlanCaseDTO> listByPlanId(@Param("request") QueryTestPlanCaseRequest request);
 
     List<TestPlanCaseDTO> listByNode(@Param("request") QueryTestPlanCaseRequest request);
@@ -37,6 +39,7 @@ public interface ExtTestPlanTestCaseMapper {
 
     /**
      * 根据项目 ids 查询 TestPlanCaseDTO 列表
+     *
      * @param ids project id list
      * @return List<TestPlanCaseDTO>
      */

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

@@ -267,6 +267,34 @@
             </foreach>
         </if>
     </select>
+
+    <select id="nameList" resultType="java.lang.String">
+        select test_case.name
+        from test_plan_test_case
+        inner join test_case on test_plan_test_case.case_id = test_case.id
+        left join test_case_node on test_case_node.id = test_case.node_id
+        inner join project on project.id = test_case.project_id
+        left join project_version on project_version.id = test_case.version_id and project.id =
+        project_version.project_id
+        <include refid="queryWhereCondition"/>
+        <if test="request.orders != null and request.orders.size() > 0">
+            order by
+            <foreach collection="request.orders" separator="," item="order">
+                <choose>
+                    <when test="order.name == 'custom_num'">
+                        customNum ${order.type}
+                    </when>
+                    <when test="order.name == 'name'">
+                        test_case.name ${order.type}
+                    </when>
+                    <otherwise>
+                        test_plan_test_case.${order.name} ${order.type}
+                    </otherwise>
+                </choose>
+            </foreach>
+        </if>
+    </select>
+
     <select id="selectIds" resultType="java.lang.String">
         select distinct test_plan_test_case.id as id
         from test_plan_test_case

backend/src/main/java/io/metersphere/track/controller/TestPlanTestCaseController.java

@@ -33,6 +33,11 @@ public class TestPlanTestCaseController {
         return PageUtils.setPageInfo(page, testPlanTestCaseService.list(request));
     }
 
+    @PostMapping("/nameList")
+    public List<String> getTestPlanCaseNames(@RequestBody QueryTestPlanCaseRequest request) {
+        return testPlanTestCaseService.getTestPlanCaseNames(request);
+    }
+
     /*jenkins测试计划下全部用例*/
     @GetMapping("/list/{planId}")
     public List<TestPlanCaseDTO> getTestPlanCaseByPlanId(@PathVariable String planId) {

backend/src/main/java/io/metersphere/track/service/TestPlanTestCaseService.java

@@ -434,4 +434,10 @@ public class TestPlanTestCaseService {
                 extTestPlanTestCaseMapper::getLastOrder,
                 testPlanTestCaseMapper::updateByPrimaryKeySelective);
     }
+
+    public List<String> getTestPlanCaseNames(QueryTestPlanCaseRequest request) {
+        request.setOrders(ServiceUtils.getDefaultSortOrder(request.getOrders()));
+        List<String> list = extTestPlanTestCaseMapper.nameList(request);
+        return list;
+    }
 }

frontend/src/business/components/common/components/MsPreviousNextButton.vue

@@ -1,17 +1,17 @@
 <template>
   <span class="previous-next-button">
     <span class="head-right-tip" v-if="countNum === total">
-      {{ $t('test_track.plan_view.pre_case') }} : {{list[index - 1] ? list[index - 1].name : ''}}
+      {{ $t('test_track.plan_view.pre_case') }} : {{ testCaseNameArr[countNum - 1] ? testCaseNameArr[countNum - 1] : '' }}
     </span>
     <span class="head-right-tip" v-if="countNum !== total">
-      {{ $t('test_track.plan_view.next_case') }} : {{list[index + 1] ? list[index + 1].name : ''}}
+      {{ $t('test_track.plan_view.next_case') }} : {{ testCaseNameArr[countNum] ? testCaseNameArr[countNum] : '' }}
     </span>
 
     <el-button plain size="mini" icon="el-icon-arrow-up" :disabled="countNum <= 1" @click="handlePre()"/>
     <span>
       {{ countNum }}/{{ total }}
     </span>
-    <el-button plain size="mini" icon="el-icon-arrow-down" :disabled="countNum >= total" @click="handleNext()"/>
+    <el-button plain size="mini" icon="el-icon-arrow-down" :disabled="(countNum+1) >= total" @click="handleNext()"/>
   </span>
 </template>
 
@@ -54,6 +54,9 @@
         return 0
       }
     },
+    testCaseNameArr: {
+      type: Array
+    },
     pageSize: {
       type: Number,
       default() {
@@ -66,6 +69,9 @@
       this.countNum = this.pageSize * (this.pageNum - 1) + this.index + 1;
     }
   },
+  mounted() {
+    this.countNum = this.pageSize * (this.pageNum - 1) + this.index + 1;
+  },
   methods: {
     handlePre() {
       this.$emit('pre');

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue

@@ -32,11 +32,13 @@
                         :page-num="pageNum"
                         :page-size="pageSize"
                         :page-total="pageTotal"
+                        :test-case-name-arr="testCaseNames"
                         :total="total"
                         @pre="handlePre"
                         @next="saveCase(true, true)"
                         :list="testCases"/>
-                      <el-button class="save-btn" type="primary" size="mini" :disabled="isReadOnly" @click="saveCase(true)">
+                      <el-button class="save-btn" type="primary" size="mini" :disabled="isReadOnly"
+                                 @click="saveCase(true)">
                         {{ $t('test_track.save') }} & {{ $t('test_track.next') }}
                       </el-button>
                     </el-col>
@@ -46,7 +48,9 @@
                   <el-row class="head-bar">
                     <el-col>
                       <el-divider content-position="left">
-                        <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">{{ testCase.name }}</el-button>
+                        <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">
+                          {{ testCase.name }}
+                        </el-button>
                       </el-divider>
                     </el-col>
                   </el-row>
@@ -58,12 +62,14 @@
 
                     <el-row>
                       <el-col :span="7">
-                        <el-form-item :label="$t('test_track.case.module')" prop="nodePath" :label-width="formLabelWidth">
+                        <el-form-item :label="$t('test_track.case.module')" prop="nodePath"
+                                      :label-width="formLabelWidth">
                           {{ testCase.nodePath }}
                         </el-form-item>
                       </el-col>
                       <el-col :span="7">
-                        <el-form-item :label="$t('test_track.plan.plan_project')" prop="projectName" :label-width="formLabelWidth">
+                        <el-form-item :label="$t('test_track.plan.plan_project')" prop="projectName"
+                                      :label-width="formLabelWidth">
                           {{ testCase.projectName }}
                         </el-form-item>
                       </el-col>
@@ -164,7 +170,8 @@ import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
 import IssueDescriptionTableItem from "@/business/components/track/issue/IssueDescriptionTableItem";
 import StepChangeItem from "@/business/components/track/case/components/StepChangeItem";
 import TestCaseStepItem from "@/business/components/track/case/components/TestCaseStepItem";
-import TestPlanCaseStepResultsItem from "@/business/components/track/plan/view/comonents/functional/TestPlanCaseStepResultsItem";
+import TestPlanCaseStepResultsItem
+  from "@/business/components/track/plan/view/comonents/functional/TestPlanCaseStepResultsItem";
 
 export default {
   name: "FunctionalTestCaseEdit",
@@ -224,6 +231,9 @@ export default {
     searchParam: {
       type: Object
     },
+    testCaseNames: {
+      type: Array
+    },
     pageNum: Number,
     pageSize: {
       type: Number,
@@ -482,7 +492,10 @@ export default {
           break;
         }
         case "testcase": {
-          let caseData = this.$router.resolve({name:'ApiDefinition',params:{redirectID:getUUID(),dataType:"apiTestCase",dataSelectRange:'single:'+id}});
+          let caseData = this.$router.resolve({
+            name: 'ApiDefinition',
+            params: {redirectID: getUUID(), dataType: "apiTestCase", dataSelectRange: 'single:' + id}
+          });
           window.open(caseData.href, '_blank');
           break;
         }

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue

@@ -231,7 +231,8 @@
                          :prop="field.name">
           <template v-slot="scope">
               <span v-if="field.name === '用例等级'">
-                  <priority-table-item :value="getCustomFieldValue(scope.row, field) ? getCustomFieldValue(scope.row, field) : scope.row.priority"/>
+                  <priority-table-item
+                    :value="getCustomFieldValue(scope.row, field) ? getCustomFieldValue(scope.row, field) : scope.row.priority"/>
               </span>
             <span v-else>
                 {{ getCustomFieldValue(scope.row, field) }}
@@ -253,6 +254,7 @@
       @nextPage="nextPage"
       @prePage="prePage"
       @refresh="initTableData"
+      :test-case-names="testCaseNameArr"
       :test-cases="tableData"
       :is-read-only="isReadOnly"
       :total="total"
@@ -324,6 +326,7 @@ export default {
       fieldsWidth: getCustomTableWidth('TEST_PLAN_FUNCTION_TEST_CASE'),
       screenHeight: 'calc(100vh - 275px)',
       tableLabel: [],
+      testCaseNameArr: [],
       result: {},
       deletePath: "/test/case/delete",
       condition: {
@@ -536,8 +539,15 @@ export default {
             callback();
           }
         });
+        this.selectTestCaseName(this.condition);
       }
     },
+    selectTestCaseName(condition){
+      this.result = this.$post("/test/plan/case/nameList", this.condition, response => {
+        let data = response.data;
+        this.testCaseNameArr = data;
+      });
+    },
     autoCheckStatus() {
       if (!this.planId) {
         return;