fix(测试跟踪): 测试计划及用例评审依赖关系的显示问题 (#18277)

--bug=1017148 --user=宋昌昌 【测试跟踪】测试计划-查看功能用例的依赖关系图显示评论框 https://www.tapd.cn/55049933/s/1251156

Co-authored-by: song-cc-rock <changchang.song@fit2cloud.com>

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

@@ -117,7 +117,10 @@
             <foreach collection="request.orders" separator="," item="order">
                 <choose>
                     <when test="order.name == 'custom_num'">
-                        customNum ${order.type}
+                        test_case.custom_num ${order.type}
+                    </when>
+                    <when test="order.name == 'num'">
+                        test_case.num ${order.type}
                     </when>
                     <when test="order.name == 'priority'">
                         test_case.priority ${order.type}

frontend/src/business/components/common/components/graph/DependenciesList.vue

@@ -25,7 +25,7 @@
       </el-tooltip>
     </div>
 
-    <relationship-graph-drawer v-xpack v-permission :graph-data="graphData" ref="relationshipGraph"/>
+    <relationship-graph-drawer v-xpack v-permission :graph-data="graphData" @closeRelationGraph="closeRelationGraph" ref="relationshipGraph"/>
 
   </div>
 </template>
@@ -67,8 +67,12 @@ export default {
       getRelationshipGraph(this.resourceId, this.resourceType,  (data) => {
         this.graphData = data;
         this.$refs.relationshipGraph.open();
+        this.$emit("openDependGraphDrawer", true);
       });
     },
+    closeRelationGraph() {
+      this.$emit("openDependGraphDrawer", false);
+    },
     setPreCount(count) {
       this.preCount = count;
       this.$emit('setCount', this.preCount + this.postCount);

frontend/src/business/components/track/case/components/TestCaseEditOtherInfo.vue

@@ -50,6 +50,7 @@
         <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
       </template>
       <dependencies-list @setCount="setRelationshipCount" :read-only="readOnly" :resource-id="caseId"
+                         @openDependGraphDrawer="setRelationshipGraph"
                          :version-enable="versionEnable" resource-type="TEST_CASE" ref="relationship"/>
     </el-tab-pane>
 
@@ -218,6 +219,9 @@ export default {
     setRelationshipCount(count) {
       this.relationshipCount = count;
     },
+    setRelationshipGraph(val) {
+      this.$emit("syncRelationGraphOpen", val);
+    },
     reset() {
       this.tabActiveName = "remark";
     },

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

@@ -115,7 +115,7 @@
 
                       <el-form-item :label="$t('test_track.case.other_info')" :label-width="formLabelWidth">
                         <test-case-edit-other-info :plan-id="testCase.planId" v-if="otherInfoActive" @openTest="openTest"
-                                                   :is-test-plan-edit="true"
+                                                   :is-test-plan-edit="true" @syncRelationGraphOpen="syncRelationGraphOpen"
                                                    :read-only="true" :is-test-plan="true" :project-id="testCase.projectId"
                                                    :form="testCase" :case-id="testCase.caseId" ref="otherInfo"/>
                       </el-form-item >
@@ -126,7 +126,7 @@
               </el-card>
             </div>
           </el-col>
-          <el-col :span="7" v-if="!fold">
+          <el-col :span="7" v-if="!fold || !relationGraphOpen">
             <div class="comment-card">
             <el-card>
               <template slot="header">
@@ -520,6 +520,9 @@ export default {
         }
       }
     },
+    syncRelationGraphOpen(val) {
+      this.relationGraphOpen = val;
+    },
     openTestTestCase(item) {
       let TestCaseData = this.$router.resolve(
         {path: '/track/case/all', query: {redirectID: getUUID(), dataType: "testCase", dataSelectRange: item.caseId}}
@@ -644,6 +647,11 @@ p {
   z-index: 1;
 }
 
+/deep/ .el-scrollbar__bar.is-vertical {
+  z-index: 0;
+  width: 0;
+}
+
 .head-bar {
   z-index: 1;
 }

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

@@ -120,7 +120,7 @@
                                          v-if="testCase.stepModel === 'STEP'" :form="testCase"/>
 
                     <el-form-item :label="$t('test_track.case.other_info')" :label-width="formLabelWidth">
-                      <test-case-edit-other-info @openTest="openTest" :read-only="true" :is-test-plan="true"
+                      <test-case-edit-other-info @openTest="openTest" :read-only="true"
                                                  :project-id="projectId" :form="testCase" :case-id="testCase.caseId"
                                                  ref="otherInfo"/>
                     </el-form-item>
@@ -281,6 +281,9 @@ export default {
         }
       }
     },
+    syncRelationGraphOpen(val) {
+      this.relationGraphOpen = val;
+    },
     handleClose() {
       removeGoBackListener(this.handleClose);
       this.showDialog = false;