refactor: 用例评审添加脑图

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

@@ -97,10 +97,13 @@
     </sql>
 
     <select id="list" resultType="io.metersphere.track.dto.TestReviewCaseDTO">
-        select test_case_review_test_case.id as id, test_case.id as caseId, test_case.name, test_case.priority,
+        select test_case_review_test_case.id as id, test_case_review_test_case.reviewer,
-        test_case.type, test_case.node_path, test_case.method, test_case.num, test_case_review_test_case.reviewer,
+        test_case_review_test_case.update_time, test_case_review_test_case.review_id as reviewId,
-        test_case.review_status, test_case_review_test_case.update_time, test_case_node.name as model,
+        test_case.id as caseId, test_case.name, test_case.priority,  test_case.test_id as testId,
-        project.name as projectName, test_case_review_test_case.review_id as reviewId,test_case.test_id as testId
+        test_case.type, test_case.node_path, test_case.method, test_case.num, test_case.review_status,
+        test_case.remark as remark,  test_case.steps as steps, test_case.node_id as nodeId,
+        test_case_node.name as model,
+        project.name as projectName
         from test_case_review_test_case
         inner join test_case on test_case_review_test_case.case_id = test_case.id
         left join test_case_node on test_case_node.id=test_case.node_id

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

@@ -212,11 +212,14 @@ public class TestCaseNodeService extends NodeTreeService<TestCaseNodeDTO> {
             List<String> caseIds = testCaseReviewTestCases.stream().map(TestCaseReviewTestCase::getCaseId).collect(Collectors.toList());
 
             List<TestCaseNodeDTO> nodeList = getReviewNodeDTO(id, caseIds);
-            TestCaseNodeDTO testCaseNodeDTO = new TestCaseNodeDTO();
+            if (!CollectionUtils.isEmpty(nodeList)) {
-            testCaseNodeDTO.setName(name);
+                TestCaseNodeDTO testCaseNodeDTO = new TestCaseNodeDTO();
-            testCaseNodeDTO.setLabel(name);
+                testCaseNodeDTO.setName(name);
-            testCaseNodeDTO.setChildren(nodeList);
+                testCaseNodeDTO.setLabel(name);
-            list.add(testCaseNodeDTO);
+                testCaseNodeDTO.setChildren(nodeList);
+                testCaseNodeDTO.setProjectId(id);
+                list.add(testCaseNodeDTO);
+            }
         });
         return list;
 

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

@@ -5,6 +5,7 @@
       class="minder-container"
       :import-json="importJson"
       :height="700"
+      :progress-enable="false"
       @save="save"
     />
   </div>

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

@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <div class="ms-table-header">
     <el-row v-if="title" class="table-title" type="flex" justify="space-between" align="middle">
       <slot name="title">
         {{title}}

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

@@ -102,7 +102,7 @@ import {checkoutTestManagerOrTestUser, getCurrentProjectID, getUUID} from "../..
 import TestCaseNodeTree from "../common/TestCaseNodeTree";
 
 import MsTabButton from "@/business/components/common/components/MsTabButton";
-import TestCaseMinder from "@/business/components/track/case/components/minder/TestCaseMinder";
+import TestCaseMinder from "@/business/components/track/common/minder/TestCaseMinder";
 
 export default {
   name: "TestCase",

frontend/src/business/components/track/common/minder/TestCaseMinder.vue

@@ -9,6 +9,7 @@
 
 <script>
 import MsModuleMinder from "@/business/components/common/components/MsModuleMinder";
+import {getTestCaseDataMap} from "@/business/components/track/common/minder/minderUtils";
 export default {
 name: "TestCaseMinder",
   components: {MsModuleMinder},
@@ -39,7 +40,7 @@ name: "TestCaseMinder",
       if (this.projectId) {
         this.result = this.$get('/test/case/list/detail/' + this.projectId,response => {
           this.testCase = response.data;
-          this.parse();
+          this.dataMap = getTestCaseDataMap(this.testCase);
         });
       }
     },
@@ -113,63 +114,7 @@ name: "TestCaseMinder",
         saveCases.push(testCase);
       }
     },
-    parse() {
+
-      let dataMap = new Map();
-      this.testCase.forEach(item => {
-        item.steps = JSON.parse(item.steps);
-        // if (item.tags && item.tags.length > 0) {
-        //   item.tags = JSON.parse(item.tags);
-        // }
-        let mapItem = dataMap.get(item.nodeId);
-        let nodeItem = {
-          data: {
-            id: item.id,
-            text: item.name,
-            priority: Number.parseInt(item.priority.substring(item.priority.length - 1 )),
-            resource: ["用例"],
-            type: item.type,
-            method: item.method,
-            maintainer: item.maintainer
-          }
-        }
-        this.parseChildren(nodeItem, item);
-        if (mapItem) {
-          mapItem.push(nodeItem);
-        } else {
-          mapItem = [];
-          mapItem.push(nodeItem);
-          dataMap.set(item.nodeId, mapItem);
-        }
-      })
-      this.dataMap = dataMap;
-    },
-    parseChildren(nodeItem, item) {
-      nodeItem.children = [];
-      let children = [];
-      this._parseChildren(children, item.prerequisite, "前置条件");
-      item.steps.forEach((step) => {
-        let descNode = this._parseChildren(children, step.desc, "测试步骤");
-        if (descNode) {
-          descNode.data.num = step.num;
-          descNode.children = [];
-          this._parseChildren(descNode.children, step.result, "预期结果");
-        }
-      });
-      this._parseChildren(children, item.remark, "备注");
-      nodeItem.children = children;
-    },
-    _parseChildren(children, k, v) {
-      if (k) {
-        let node = {
-          data: {
-            text: k,
-            resource: [v]
-          }
-        }
-        children.push(node);
-        return node;
-      }
-    }
   }
 }
 </script>

frontend/src/business/components/track/common/minder/TestReviewMinder.vue

@@ -0,0 +1,128 @@
+<template>
+  <ms-module-minder
+    v-loading="result.loading"
+    :tree-nodes="treeNodes"
+    :data-map="dataMap"
+    @save="save"
+  />
+</template>
+
+<script>
+import MsModuleMinder from "@/business/components/common/components/MsModuleMinder";
+import {getTestCaseDataMap} from "@/business/components/track/common/minder/minderUtils";
+export default {
+name: "TestReviewMinder",
+  components: {MsModuleMinder},
+  data() {
+    return{
+      testCase: [],
+      dataMap: new Map(),
+      result: {}
+    }
+  },
+  props: {
+    treeNodes: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    selectNodeIds: {
+      type: Array
+    },
+    reviewId: {
+      type: String
+    },
+    projectId: String
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getTestCases();
+    })
+  },
+  methods: {
+    getTestCases() {
+      if (this.projectId) {
+        this.result = this.$post('/test/review/case/list/all', {reviewId: this.reviewId}, response => {
+          this.testCase = response.data;
+          this.dataMap = getTestCaseDataMap(this.testCase);
+        });
+      }
+    },
+    save(data) {
+      // let saveCases = [];
+      // this.buildSaveCase(data.root, saveCases, undefined);
+      // console.log(saveCases);
+      // let param = {
+      //   projectId: this.projectId,
+      //   data: saveCases
+      // }
+      // this.result = this.$post('/test/case/minder/edit', param, () => {
+      //   this.$success(this.$t('commons.save_success'));
+      // });
+    },
+    buildSaveCase(root, saveCases, parent) {
+      let data = root.data;
+      if (data.resource && data.resource.indexOf("用例") > -1) {
+        this._buildSaveCase(root, saveCases, parent);
+      } else {
+        if (root.children) {
+          root.children.forEach((childNode) => {
+            this.buildSaveCase(childNode, saveCases, root.data);
+          })
+        }
+      }
+    },
+    _buildSaveCase(node, saveCases, parent) {
+      let data = node.data;
+      let isChange = false;
+      let testCase = {
+        id: data.id,
+        name: data.text,
+        nodeId: parent ? parent.id : "",
+        nodePath: parent ? parent.path : "",
+        type: data.type ? data.type : 'functional',
+        method: data.method ? data.method : 'manual',
+        maintainer: data.maintainer,
+        priority: 'P' + data.priority,
+      };
+      if (data.changed) isChange = true;
+      let steps = [];
+      let stepNum = 1;
+      if (node.children) {
+        node.children.forEach((childNode) => {
+          let childData = childNode.data;
+          if (childData.resource && childData.resource.indexOf('前置条件') > -1) {
+            testCase.prerequisite = childData.text;
+          } else if (childData.resource && childData.resource.indexOf('备注') > -1) {
+            testCase.remark = childData.text;
+          } else {
+            // 测试步骤
+            let step = {};
+            step.num = stepNum++;
+            step.desc = childData.text;
+            if (childNode.children) {
+              let result = "";
+              childNode.children.forEach((child) => {
+                result += child.data.text;
+                if (child.data.changed) isChange = true;
+              })
+              step.result = result;
+            }
+            steps.push(step);
+          }
+          if (childData.changed) isChange = true;
+        })
+      }
+      testCase.steps = JSON.stringify(steps);
+      if (isChange) {
+        saveCases.push(testCase);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/track/common/minder/minderUtils.js

@@ -0,0 +1,59 @@
+export function getTestCaseDataMap(testCase) {
+  let dataMap = new Map();
+  testCase.forEach(item => {
+    item.steps = JSON.parse(item.steps);
+    // if (item.tags && item.tags.length > 0) {
+    //   item.tags = JSON.parse(item.tags);
+    // }
+    let mapItem = dataMap.get(item.nodeId);
+    let nodeItem = {
+      data: {
+        id: item.id,
+        text: item.name,
+        priority: Number.parseInt(item.priority.substring(item.priority.length - 1 )),
+        resource: ["用例"],
+        type: item.type,
+        method: item.method,
+        maintainer: item.maintainer
+      }
+    }
+    parseChildren(nodeItem, item);
+    if (mapItem) {
+      mapItem.push(nodeItem);
+    } else {
+      mapItem = [];
+      mapItem.push(nodeItem);
+      dataMap.set(item.nodeId, mapItem);
+    }
+  })
+  return dataMap;
+}
+
+function parseChildren(nodeItem, item) {
+  nodeItem.children = [];
+  let children = [];
+  _parseChildren(children, item.prerequisite, "前置条件");
+  item.steps.forEach((step) => {
+    let descNode = _parseChildren(children, step.desc, "测试步骤");
+    if (descNode) {
+      descNode.data.num = step.num;
+      descNode.children = [];
+      _parseChildren(descNode.children, step.result, "预期结果");
+    }
+  });
+  _parseChildren(children, item.remark, "备注");
+  nodeItem.children = children;
+}
+
+function _parseChildren(children, k, v) {
+  if (k) {
+    let node = {
+      data: {
+        text: k,
+        resource: [v]
+      }
+    }
+    children.push(node);
+    return node;
+  }
+}

frontend/src/business/components/track/review/components/TestCaseReviewList.vue

@@ -1,12 +1,9 @@
 <template>
-  <el-card class="table-card" v-loading="result.loading">
+  <div class="table-card" v-loading="result.loading">
-    <template v-slot:header>
       <ms-table-header :is-tester-permission="true" :condition.sync="condition"
                        @search="initTableData" @create="testCaseReviewCreate"
                        :create-tip="$t('test_track.review.create_review')"
                        :title="$t('test_track.review.test_review')"/>
-    </template>
-
     <el-table
       border
       class="adjust-table"
@@ -106,8 +103,7 @@
     <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                          :total="total"/>
     <ms-delete-confirm :title="$t('test_track.review.delete')" @delete="_handleDelete" ref="deleteConfirm"/>
-
+  </div>
-  </el-card>
 </template>
 
 <script>

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

@@ -10,15 +10,30 @@
         ref="nodeTree"/>
     </template>
     <template v-slot:main>
-      <test-review-test-case-list
+      <ms-tab-button
-        class="table-list"
+        :active-dom.sync="activeDom"
-        @openTestReviewRelevanceDialog="openTestReviewRelevanceDialog"
+        :left-tip="'用例列表'"
-        @refresh="refresh"
+        :left-content="'CASE'"
-        :review-id="reviewId"
+        :right-tip="'脑图'"
-        :select-node-ids="selectNodeIds"
+        :right-content="'脑图'"
-        :select-parent-nodes="selectParentNodes"
+        :middle-button-enable="false">
-        :clickType="clickType"
+        <test-review-test-case-list
-        ref="testPlanTestCaseList"/>
+          class="table-list"
+          v-if="activeDom === 'left'"
+          @openTestReviewRelevanceDialog="openTestReviewRelevanceDialog"
+          @refresh="refresh"
+          :review-id="reviewId"
+          :select-node-ids="selectNodeIds"
+          :select-parent-nodes="selectParentNodes"
+          :clickType="clickType"
+          ref="testPlanTestCaseList"/>
+        <test-review-minder
+          :tree-nodes="treeNodes"
+          :project-id="projectId"
+          :review-id="reviewId"
+          v-if="activeDom === 'right'"
+        />
+      </ms-tab-button>
     </template>
     <test-review-relevance
       @refresh="refresh"
@@ -33,10 +48,15 @@ import FunctionalTestCaseList from "@/business/components/track/plan/view/comone
 import MsNodeTree from "@/business/components/track/common/NodeTree";
 import TestReviewRelevance from "@/business/components/track/review/view/components/TestReviewRelevance";
 import TestReviewTestCaseList from "@/business/components/track/review/view/components/TestReviewTestCaseList";
+import MsTabButton from "@/business/components/common/components/MsTabButton";
+import TestReviewMinder from "@/business/components/track/common/minder/TestReviewMinder";
+import {getCurrentProjectID} from "@/common/js/utils";
 
 export default {
   name: "TestReviewFunction",
   components: {
+    TestReviewMinder,
+    MsTabButton,
     TestReviewTestCaseList,
     TestReviewRelevance, MsNodeTree, FunctionalTestCaseList, MsTestPlanCommonComponent
   },
@@ -49,15 +69,18 @@ export default {
       selectParentNodes: [],
       treeNodes: [],
       isMenuShow: true,
+      activeDom: 'left',
+      projectId: ""
     }
   },
   props: [
     'reviewId',
     'redirectCharType',
-    'clickType'
+    'clickType',
   ],
   mounted() {
     this.getNodeTreeByReviewId()
+    this.projectId = getCurrentProjectID();
   },
   activated() {
     this.getNodeTreeByReviewId()
@@ -89,5 +112,7 @@ export default {
 </script>
 
 <style scoped>
-
+/deep/ .el-button-group>.el-button:first-child {
+  padding: 4px 1px !important;
+}
 </style>

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

@@ -1,7 +1,5 @@
 <template>
   <div class="card-container">
-    <el-card class="card-content" v-loading="result.loading">
-      <template v-slot:header>
         <ms-table-header :is-tester-permission="true" :condition.sync="condition" @search="initTableData"
                          :show-create="false" :tip="$t('commons.search_by_name_or_id')">
           <template v-slot:title>
@@ -16,7 +14,6 @@
                              @click="$emit('openTestReviewRelevanceDialog')"/>
           </template>
         </ms-table-header>
-      </template>
 
       <executor-edit ref="executorEdit" :select-ids="new Set(Array.from(this.selectRows).map(row => row.id))"
                      @refresh="initTableData"/>
@@ -176,7 +173,6 @@
         :is-read-only="isReadOnly"
         @refreshTable="search"/>
 
-    </el-card>
 
     <batch-edit ref="batchEdit" @batchEdit="batchEdit"
                 :type-arr="typeArr" :value-arr="valueArr" :dialog-title="$t('test_track.case.batch_edit_case')"/>
@@ -472,6 +468,8 @@ export default {
 </script>
 
 <style scoped>
-
+.ms-table-header {
+  margin: 20px;
+}
 </style>