refactor(测试用例): 添加预览列#1002986

--story=1002986 --user=lyh 14.测试用例增加预览 ，鼠标移到标题展示 前置条件、步骤描述、预期结果
https://www.tapd.cn/55049933/s/1044475

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

@@ -108,4 +108,6 @@ public interface ExtTestCaseMapper {
     void checkOriginalStatusByIds(@Param("ids") List<String> ids);
 
     List<String> selectIdsByNodeIds(@Param("ids")List<String> nodeIds);
+
+    TestCaseWithBLOBs getTestCaseStep(@Param("id") String id);
 }

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

@@ -527,6 +527,9 @@
             </foreach>
         </where>
     </select>
+    <select id="getTestCaseStep" resultType="io.metersphere.base.domain.TestCaseWithBLOBs">
+        select id, prerequisite, steps, step_description, expected_result, step_model from test_case where id = #{id}
+    </select>
 
     <update id="deleteToGc">
         update test_case set original_status=status,

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

@@ -165,6 +165,11 @@ public class TestCaseController {
         return testCaseService.getTestCase(testCaseId);
     }
 
+    @GetMapping("/get/step/{testCaseId}")
+    public TestCaseWithBLOBs getTestCaseStep(@PathVariable String testCaseId) {
+        return testCaseService.getTestCaseStep(testCaseId);
+    }
+
     @GetMapping("/project/{testCaseId}")
     public Project getProjectByTestCaseId(@PathVariable String testCaseId) {
         checkPermissionService.checkTestCaseOwner(testCaseId);

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

@@ -1905,4 +1905,8 @@ public class TestCaseService {
     public List<LoadTestDTO> getTestCaseLoadCaseRelateList(LoadCaseRequest request) {
         return testCaseTestMapper.relevanceLoadList(request);
     }
+
+    public TestCaseWithBLOBs getTestCaseStep(String testCaseId) {
+        return extTestCaseMapper.getTestCaseStep(testCaseId);
+    }
 }

frontend/src/business/components/common/components/table/MsTable.vue

@@ -337,8 +337,8 @@ export default {
     handleBatchMove() {
       this.$refs.testBatchMove.open(this.treeNodes, Array.from(this.selectRows).map(row => row.id), this.moduleOptions);
     },
-    handleRowClick(row) {
-      this.$emit("handleRowClick", row);
+    handleRowClick(row, column) {
+      this.$emit("handleRowClick", row, column);
     },
     handleRefresh() {
       this.clear();

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

@@ -69,6 +69,12 @@
           min-width="120"
         />
 
+        <ms-table-column :label="$t('test_track.case.case_desc')" prop="desc" :field="item">
+          <template v-slot:default="scope">
+            <el-link @click.stop="getCase(scope.row.id)" style="color:#783887;">{{$t('commons.preview')}}</el-link>
+          </template>
+        </ms-table-column>
+
         <ms-table-column
           prop="createUser"
           :field="item"
@@ -164,6 +170,8 @@
                 :typeArr="typeArr" :value-arr="valueArr" :dialog-title="$t('test_track.case.batch_edit_case')"/>
 
     <batch-move @refresh="refresh" @moveSave="moveSave" ref="testBatchMove"/>
+
+    <test-case-preview ref="testCasePreview" :loading="rowCaseResult.loading"/>
   </div>
 
 </template>
@@ -210,10 +218,12 @@ import MsTable from "@/business/components/common/components/table/MsTable";
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
 import BatchMove from "@/business/components/track/case/components/BatchMove";
 import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
+import TestCasePreview from "@/business/components/track/case/components/TestCasePreview";
 
 export default {
   name: "TestCaseList",
   components: {
+    TestCasePreview,
     BatchMove,
     MsTableColumn,
     MsTable,
@@ -340,7 +350,9 @@ export default {
       page: getPageInfo(),
       fields: [],
       fieldsWidth: getCustomTableWidth('TRACK_TEST_CASE'),
-      memberMap: new Map()
+      memberMap: new Map(),
+      rowCase: {},
+      rowCaseResult: {}
     };
   },
   props: {
@@ -579,10 +591,41 @@ export default {
     testCaseCreate() {
       this.$emit('testCaseEdit');
     },
-    handleEdit(testCase) {
-      this.$get('test/case/get/' + testCase.id, response => {
-        let testCase = response.data;
-        this.$emit('testCaseEdit', testCase);
+    handleEdit(testCase, column) {
+      if (column.label !== this.$t('test_track.case.case_desc')) {
+        this.$get('test/case/get/' + testCase.id, response => {
+          let testCase = response.data;
+          this.$emit('testCaseEdit', testCase);
+        });
+      }
+
+    },
+    getCase(id) {
+      this.$refs.testCasePreview.open();
+      this.rowCaseResult.loading = true;
+      if (this.rowCase && this.rowCase.id === id) {
+        this.$refs.testCasePreview.setData(this.rowCase);
+        this.rowCaseResult.loading = false;
+        return;
+      } else {
+        this.rowCase = {};
+        this.$refs.testCasePreview.setData({});
+      }
+
+      this.rowCaseResult = this.$get('test/case/get/step/' + id, response => {
+        this.rowCase = response.data;
+        this.rowCase.steps = JSON.parse(this.rowCase.steps);
+        if (!this.rowCase.steps || this.rowCase.length < 1) {
+          this.rowCase.steps = [{
+            num: 1,
+            desc: '',
+            result: ''
+          }];
+        }
+        if (!this.rowCase.stepModel) {
+          this.rowCase.stepModel = "STEP";
+        }
+        this.$refs.testCasePreview.setData(this.rowCase);
       });
     },
     handleCopy(testCase) {

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

@@ -0,0 +1,63 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="66%" top="5vh"
+             @close="close" class="case-desc">
+    <template v-slot:title>
+      <ms-form-divider :title="$t('test_track.case.step_info')"/>
+    </template>
+    <div v-loading="loading" style="height: 70vh; overflow: auto">
+      <el-form :model="data">
+
+        <form-rich-text-item :disabled="true" :label-width="formLabelWidth"
+                             :title="$t('test_track.case.prerequisite')" :data="data" prop="prerequisite"/>
+        <step-change-item :label-width="formLabelWidth" :form="data"/>
+        <form-rich-text-item :disabled="true" :label-width="formLabelWidth" v-if="data.stepModel === 'TEXT'"
+                             :title="$t('test_track.case.step_desc')" :data="data" prop="stepDescription"/>
+        <form-rich-text-item :disabled="true" :label-width="formLabelWidth" v-if="data.stepModel === 'TEXT'"
+                             :title="$t('test_track.case.expected_results')" :data="data" prop="expectedResult"/>
+        <test-case-step-item :label-width="formLabelWidth" v-if="data.stepModel === 'STEP' || !data.stepModel"
+                             :form="data" :read-only="true"/>
+      </el-form>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+import StepChangeItem from "@/business/components/track/case/components/StepChangeItem";
+import TestCaseStepItem from "@/business/components/track/case/components/TestCaseStepItem";
+
+export default {
+  name: "TestCasePreview",
+  components: {
+    MsFormDivider,
+    FormRichTextItem,
+    StepChangeItem,
+    TestCaseStepItem,
+  },
+  props: ['loading'],
+  data() {
+    return {
+      result: {},
+      formLabelWidth: "100px",
+      visible: false,
+      data: {}
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    setData(data) {
+      this.data = data;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -37,7 +37,7 @@
             clearable/>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('commons.input_content')" min-width="25%">
+      <el-table-column :label="$t('commons.input_content')" min-width="30%">
         <template v-slot:default="scope">
           <el-button
             type="primary"

frontend/src/common/js/default-table-header.js

@@ -179,6 +179,7 @@ export let CUSTOM_TABLE_HEADER = {
     {id: 'updateTime', key: '6', label: 'commons.update_time'},
     {id: 'createUser', key: '7', label: 'commons.create_user'},
     {id: 'createTime', key: '8', label: 'commons.create_time'},
+    {id: 'desc', key: '9', label: 'test_track.case.case_desc'},
   ],
   //缺陷列表
   ISSUE_LIST: [

frontend/src/i18n/en-US.js

@@ -1516,7 +1516,8 @@ export default {
       export: {
         export: "Export cases",
         export_tip: "Switch to Interface List and check Use Case Export"
-      }
+      },
+      case_desc: "Case Desc"
     },
     plan: {
       test_plan: "Plan",

frontend/src/i18n/zh-CN.js

@@ -1524,7 +1524,8 @@ export default {
       export: {
         export: "导出用例",
         export_tip: "请切换成接口列表勾选用例导出！"
-      }
+      },
+      case_desc: "用例描述"
     },
     plan: {
       test_plan: "测试计划",

frontend/src/i18n/zh-TW.js

@@ -1525,7 +1525,8 @@ export default {
       export: {
         export: "導出用例",
         export_tip: "請切換成接口列表勾選用例導出！"
-      }
+      },
+      case_desc: "用例描述"
     },
     plan: {
       test_plan: "測試計劃",