fix(测试跟踪): 修复功能用例版本对比页面数据显示不全问题

--bug=1023474 --user=郭雨琦
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001023474

test-track/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml

@@ -258,7 +258,7 @@
         project_version.name as versionName,
         project_version.id as versionId,
         test_case.last_execute_result,
-        test_case.prerequisite, test_case.steps, remark,
+        test_case.prerequisite, test_case.steps, remark, test_case.expected_result, test_case.step_description,
         <if test="request.selectFields != null and request.selectFields.size() > 0">
             <foreach collection="request.selectFields" item="field" separator=",">
                 ${field}

test-track/frontend/src/business/case/components/case/CaseAttachmentItem.vue

@@ -405,10 +405,13 @@ export default {
       }
       .file-info-row {
         display: flex;
-        font-size: px2rem(12);
         line-height: px2rem(20);
         height: px2rem(20);
         color: #8f959e;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+
         .size {
         }
 

test-track/frontend/src/business/case/components/case/diff/CaseDiffRelationship.vue

@@ -1,5 +1,5 @@
 
-<!-- 
+<!--
     依赖关系 容器
  -->
  <template>
@@ -42,7 +42,7 @@
           ref="postRelationshipList"
         ></case-relationship-list>
       </div>
-  
+
       <mx-relationship-graph-drawer
         v-xpack
         v-permission
@@ -52,13 +52,13 @@
       />
     </div>
   </template>
-  
-  <script>
+
+<script>
   import MxRelationshipGraphDrawer from "metersphere-frontend/src/components/graph/RelationshipGraphDrawer";
   import RelationshipList from "@/business/common/RelationshipList";
   import { getRelationshipGraph } from "@/api/graph";
   import CaseRelationshipList from "./CaseDiffRelationshipList";
-  
+
   export default {
     name: "CaseDiffRelationship",
     components: {
@@ -104,8 +104,8 @@
     },
   };
   </script>
-  
-  <style scoped>
+
+<style scoped>
   .left-icon {
     width: 4%;
     display: inline-block;
@@ -116,7 +116,6 @@
   <style scoped lang="scss">
   @import "@/business/style/index.scss";
   .dependencies-container {
-    overflow: hidden;
     .dep-header-wrap {
       margin-top: 24px;
       width: 98px;
@@ -141,11 +140,11 @@
             height: 100%;
           }
         }
-  
+
         .dep-label {
         }
       }
-  
+
       .dep-pre-wrap {
         max-height: px2rem(269);
       }
@@ -155,4 +154,4 @@
     }
   }
   </style>
-  
+

test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue

@@ -133,17 +133,14 @@
                   <!-- 添加附件 -->
                   <!-- tip -->
                   <div class="opt-btn">
-                    <div class="attachment-preview">
+                    <div class="attachment-preview" v-if="showAttachment">
                       <case-attachment-viewer
                         :tableData="attachmentDiffData"
                         :isCopy="false"
                         :readOnly="true"
                         :is-delete="false"
-                        v-if="
-                          attachmentDiffData && attachmentDiffData.lenght > 0
-                        "
                       ></case-attachment-viewer>
-                      <div v-else>{{ $t("case.none") }}</div>
+                      <div v-if="!showAttachment">{{ $t("case.none") }}</div>
                     </div>
                   </div>
                 </div>
@@ -324,6 +321,7 @@ export default {
       contentDiffData: {},
       customDiffData: {},
       attachmentDiffData: [],
+      showAttachment: false,
       baseInfoDiffData: {},
       tagDiffData: {},
       originCase: {},
@@ -447,11 +445,11 @@ export default {
       this.fillCustomValue();
       this.diffCustomData();
 
-      this.diffAttachment();
-      this.diffTestRelate();
-      this.diffComments();
-      this.diffRelationship();
-      this.diffIssues();
+      await this.diffAttachment();
+      await this.diffTestRelate();
+      await this.diffComments();
+      await this.diffRelationship();
+      await this.diffIssues();
       // 初始化
       this.initContent();
     },
@@ -521,6 +519,9 @@ export default {
         origin,
         target
       );
+      if (this.attachmentDiffData && this.attachmentDiffData.length > 0) {
+        this.showAttachment = true
+      }
     },
     async fetchTestRelate(id) {
       let res = await getRelateTest(id);
@@ -911,16 +912,21 @@ export default {
 .content-body-wrap {
   // 1024 减去左右padding 各24 和 1px右边框
   width: px2rem(1024);
-  height: 1044px;
+  height: 100%;
   display: flex;
+
   .tab-pane-wrap {
     width: px2rem(896);
     height: 100%;
-    overflow-y: scroll;
     border-right: 1px solid rgba(31, 35, 41, 0.15);
+
     :deep(.el-tabs__item) {
       padding-left: px2rem(24);
     }
+
+    :deep(.el-tabs__content) {
+      overflow: auto;
+    }
   }
   .base-info-wrap {
     width: px2rem(304);
@@ -934,6 +940,7 @@ export default {
   .content-conatiner {
     padding-left: px2rem(24);
     padding-right: px2rem(24);
+    height: calc(100vh - 130px);
   }
 }
 .case-content-wrap {

test-track/frontend/src/business/case/components/case/diff/version_diff.js

@@ -277,6 +277,12 @@ class DiffUtil {
   static diffArray(arr1, arr2) {
     let resArr = [];
     //矫正参数
+    if (typeof arr1 === 'string') {
+      arr1 = JSON.parse(arr1);
+    }
+    if (typeof arr2 === 'string') {
+      arr2 = JSON.parse(arr2);
+    }
     if (!Array.isArray(arr1)) {
       arr1 = [];
     }

test-track/frontend/src/business/case/components/common/CaseVersionHistory.vue

@@ -197,7 +197,7 @@ export default {
       return this.versionLeftId && this.versionRightId;
     },
     compareDisable() {
-      return this.versionCompareOptions || this.versionCompareOptions.length < 2;
+      return !this.versionCompareOptions || this.versionCompareOptions.length < 2;
     }
   },
   beforeDestroy() {