模块树转脑图

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

+<template>
+  <div class="minder">
+    <minder-editor v-if="isActive"
+      class="minder-container"
+      :import-json="importJson"
+      @save="save"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "MsModuleMinder",
+  components: {},
+  props: {
+    treeNodes: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      importJsonTest: {
+        "root": {
+          "data": {
+            "text": "test111"
+          },
+          "children": [
+            { "data": { "text": "新闻"}},
+            { "data": { "text": "网页"} },
+            { "data": { "text": "贴吧"} },
+            { "data": { "text": "知道"} },
+            { "data": { "text": "音乐" } },
+            { "data": { "text": "图片"} },
+            { "data": { "text": "视频"} },
+            { "data": { "text": "地图" } },
+            { "data": { "text": "百科","expandState":"collapse"}}
+          ]
+        },
+        "template":"default"
+      },
+      importJson: {
+        root: {
+          data: {
+            text: "全部用例",
+            disable: true
+          },
+          children: []
+        },
+        "template":"default"
+      },
+      isActive: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.parse(this.importJson.root, this.treeNodes);
+      this.reload();
+    })
+  },
+  methods: {
+    save(data) {
+      console.log(data);
+      // console.log(this.treeNodes);
+    },
+    parse(root, children) {
+      if (children == null || children.length < 1) {
+        return;
+      }
+      root.children = [];
+      children.forEach((item) => {
+        let node = {
+          data: {
+            text: item.name,
+            id: item.id,
+            disable: true,
+            // resource: ['#']
+          },
+        }
+        root.children.push(node);
+        this.parse(node, item.children);
+      })
+    },
+    reload() {
+      this.isActive = false;
+      this.$nextTick(() => {
+        this.isActive = true;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -17,8 +17,8 @@
           <ms-tab-button
             :active-dom.sync="activeDom"
             :left-tip="'用例列表'"
-            :left-content="'CAS'"
-            :right-tip="'E脑图'"
+            :left-content="'CASE'"
+            :right-tip="'脑图'"
             :right-content="'脑图'"
             :middle-button-enable="false">
           <test-case-list
@@ -38,6 +38,7 @@
             ref="testCaseList">
           </test-case-list>
           <testcase-minder
+            :tree-nodes="treeNodes"
             v-if="activeDom === 'right'"
             ref="testCaseList"/>
           </ms-tab-button>
@@ -97,7 +98,7 @@ import MsMainContainer from "../../common/components/MsMainContainer";
 import {checkoutTestManagerOrTestUser, getCurrentProjectID, getUUID, hasRoles} from "../../../../common/js/utils";
 import TestCaseNodeTree from "../common/TestCaseNodeTree";
 import {TrackEvent,LIST_CHANGE} from "@/business/components/common/head/ListEvent";
-import TestcaseMinder from "@/business/components/track/case/components/minder/TestcaseMinder";
+import TestcaseMinder from "@/business/components/common/components/MsModuleMinder";
 import MsTabButton from "@/business/components/common/components/MsTabButton";
 
 export default {
@@ -365,4 +366,8 @@ export default {
   padding: 15px;
 }
 
+/deep/ .el-button-group>.el-button:first-child {
+  padding: 4px 1px !important;
+}
+
 </style>

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

-<template>
-$END$
-</template>
-
-<script>
-export default {
-name: "TestcaseMinder"
-}
-</script>
-
-<style scoped>
-
-</style>

frontend/src/business/components/track/case/components/minder/TestcaseMinder.vue

 <template>
-  <div class="minder">
-    <minder-editor class="minder-container" :import-json="importJson"/>
-  </div>
+  <ms-module-minder
+    :tree-nodes="treeNodes"/>
 </template>
 
 <script>
-
+import MsModuleMinder from "@/business/components/common/components/MsModuleMinder";
 export default {
-  name: "TestcaseMinder",
-  components: {},
-  data() {
-    return {
-      importJson: {
-        "root": {
-          "data": {
-            "text": "test111"
-          },
-          "children": [
-            { "data": { "text": "新闻"}},
-            { "data": { "text": "网页"} },
-            { "data": { "text": "贴吧"} },
-            { "data": { "text": "知道"} },
-            { "data": { "text": "音乐" } },
-            { "data": { "text": "图片"} },
-            { "data": { "text": "视频"} },
-            { "data": { "text": "地图" } },
-            { "data": { "text": "百科","expandState":"collapse"}}
-          ]
-        },
-        "template":"default"
+name: "TestcaseMinder",
+  components: {MsModuleMinder},
+  props: {
+    treeNodes: {
+      type: Array,
+      default() {
+        return []
       }
     }
   },
-  mounted() {
-  }
+
 }
 </script>
 
 <style scoped>
+
 </style>