From 844eb8b9e2f71ee14ad447aad9fafb52e6537caf Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 22 Apr 2020 15:51:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/track/case/TestCase.vue        |  93 +++---
 .../track/case/components/TestCaseEdit.vue    | 272 ++++++++++--------
 .../track/case/components/TestCaseImport.vue  |   3 +-
 .../track/case/components/TestCaseList.vue    |  16 +-
 .../components/track/common/NodeEdit.vue      | 101 +++++++
 .../{case/components => common}/NodeTree.vue  | 144 +++-------
 .../components => common}/PlanNodeTree.vue    |   0
 .../components/track/plan/TestPlanView.vue    |  54 ++--
 .../plan/components/TestCaseRelevance.vue     |  72 +++--
 .../plan/components/TestPlanTestCaseList.vue  |   3 +-
 10 files changed, 413 insertions(+), 345 deletions(-)
 create mode 100644 frontend/src/business/components/track/common/NodeEdit.vue
 rename frontend/src/business/components/track/{case/components => common}/NodeTree.vue (54%)
 rename frontend/src/business/components/track/{plan/components => common}/PlanNodeTree.vue (100%)

diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index 93927ead4..e0b4e9f14 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -9,16 +9,19 @@
               @dataChange="changeProject">
             </select-menu>
             <node-tree class="node-tree"
-                       :current-project="currentProject"
+                       v-loading="result.loading"
                        @nodeSelectEvent="nodeChange"
-                       @refresh="refreshTable"
-                       ref="nodeTree">
-            </node-tree>
+                       @refresh="refresh"
+                       :tree-nodes="treeNodes"
+                       :type="'edit'"
+                       ref="nodeTree"/>
           </el-aside>
 
           <el-main class="test-case-list">
             <test-case-list
               :current-project="currentProject"
+              :selectNodeIds="selectNodeIds"
+              :selectNodeNames="selectNodeNames"
               @openTestCaseEditDialog="openTestCaseEditDialog"
               @testCaseEdit="openTestCaseEditDialog"
               @refresh="refresh"
@@ -29,17 +32,17 @@
 
         <test-case-edit
           @refresh="refreshTable"
+          :tree-nodes="treeNodes"
           ref="testCaseEditDialog">
         </test-case-edit>
-
-      </div>
+    </div>
 </template>
 
 <script>
 
-  import NodeTree from './components/NodeTree';
+  import NodeTree from '../common/NodeTree';
   import TestCaseEdit from './components/TestCaseEdit';
-  import {CURRENT_PROJECT, WORKSPACE_ID} from '../../../../common/js/constants';
+  import {CURRENT_PROJECT} from '../../../../common/js/constants';
   import TestCaseList from "./components/TestCaseList";
   import SelectMenu from "../common/SelectMenu";
 
@@ -50,20 +53,19 @@
     data() {
       return {
         result: {},
-        tableData: [],
-        multipleSelection: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
         projects: [],
         currentProject: null,
-        treeNodes: []
+        treeNodes: [],
+        selectNodeIds: [],
+        selectNodeNames: []
       }
     },
-    created() {
-      this.getProjects();
-    },
     mounted() {
+      this.getProjects();
+      this.refresh();
       if (this.$route.params.projectId){
         this.getProjectById(this.$route.params.projectId)
       }
@@ -77,11 +79,16 @@
         let path = to.path;
         if (to.params.projectId){
           this.getProjectById(to.params.projectId)
+          this.getProjects();
         }
         if (path.indexOf("/track/case/edit") >= 0){
           this.openRecentTestCaseEditDialog();
           this.$router.push('/track/case/all');
+          this.getProjects();
         }
+      },
+      currentProject() {
+        this.refresh();
       }
     },
     methods: {
@@ -90,7 +97,7 @@
             this.projects = response.data;
             let lastProject = JSON.parse(localStorage.getItem(CURRENT_PROJECT));
             if (lastProject) {
-              let hasCurrentProject   = false;
+              let hasCurrentProject = false;
               for (let i = 0; i < this.projects.length; i++) {
                 if (this.projects[i].id == lastProject.id) {
                   this.currentProject = lastProject;
@@ -123,40 +130,14 @@
         this.setCurrentProject(project);
       },
       nodeChange(nodeIds, nodeNames) {
-        this.$refs.testCaseList.selectNodeNames = nodeNames;
-        this.$refs.testCaseList.initTableData(nodeIds);
+        this.selectNodeIds = nodeIds;
+        this.selectNodeNames = nodeNames;
       },
-      refreshTable(data) {
-        this.$refs.testCaseList.initTableData(data);
-      },
-      openTestCaseEditDialog(data) {
-        this.setNodePathOption(this.$refs.nodeTree.treeNodes);
-        this.setMaintainerOptions();
-        this.$refs.testCaseEditDialog.openTestCaseEditDialog(data);
-      },
-      setNodePathOption(nodes) {
-        let moduleOptions = [];
-        nodes.forEach(node => {
-          this.buildNodePath(node, {path: ''}, moduleOptions);
-        });
-        this.$refs.testCaseEditDialog.moduleOptions = moduleOptions;
-      },
-      buildNodePath(node, option, moduleOptions) {
-        //递归构建节点路径
-        option.id = node.id;
-        option.path = option.path + '/' + node.name;
-        moduleOptions.push(option);
-        if (node.children) {
-          for (let i = 0; i < node.children.length; i++){
-            this.buildNodePath(node.children[i], { path: option.path }, moduleOptions);
-          }
-        }
+      refreshTable() {
+        this.$refs.testCaseList.initTableData();
       },
-      setMaintainerOptions() {
-        let workspaceId = localStorage.getItem(WORKSPACE_ID);
-        this.$post('/user/ws/member/list/all', {workspaceId:workspaceId}, response => {
-          this.$refs.testCaseEditDialog.maintainerOptions = response.data;
-        });
+      openTestCaseEditDialog(testCase) {
+        this.$refs.testCaseEditDialog.open(testCase);
       },
       getProjectByCaseId(caseId) {
         return this.$get('/test/case/project/' + caseId, async response => {
@@ -164,9 +145,10 @@
         });
       },
       refresh() {
+        this.selectNodeIds = [];
+        this.selectNodeNames = [];
         this.$refs.testCaseList.initTableData();
-        this.$refs.nodeTree.getNodeTree();
-        this.getProjects();
+        this.getNodeTree();
       },
       openRecentTestCaseEditDialog() {
         let caseId = this.$route.params.caseId;
@@ -194,8 +176,14 @@
           localStorage.setItem(CURRENT_PROJECT, JSON.stringify(project));
         }
         this.refresh();
+      },
+      getNodeTree() {
+        if (this.currentProject) {
+          this.result = this.$get("/case/node/list/" + this.currentProject.id, response => {
+            this.treeNodes = response.data;
+          });
+        }
       }
-
     }
   }
 </script>
@@ -220,13 +208,8 @@
     margin-left: 0;
   }
 
-  .main-content {
-    /*background: white;*/
-  }
-
   .test-case-list {
     padding: 15px;
   }
 
-
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 742e2210b..157cc741e 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -167,18 +167,11 @@
       </el-form>
 
       <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button
-            @click="dialogFormVisible = false">
-            {{$t('test_track.cancel')}}
-          </el-button>
-          <el-button
-            type="primary"
-            @click="saveCase">
-            {{$t('test_track.confirm')}}
-          </el-button>
-        </div>
+        <ms-dialog-footer
+          @cancel="dialogFormVisible = false"
+          @confirm="saveCase"/>
       </template>
+
     </el-dialog>
 
   </div>
@@ -188,126 +181,163 @@
 
 <script>
 
-  import {CURRENT_PROJECT} from '../../../../../common/js/constants';
+  import {CURRENT_PROJECT, WORKSPACE_ID} from '../../../../../common/js/constants';
+  import MsDialogFooter from '../../../common/components/MsDialogFooter'
+
 
   export default {
-      name: "TestCaseEdit",
-      data() {
-        return {
-          dialogFormVisible: false,
-          form: {
-            name: '',
-            module: '',
-            maintainer: '',
-            priority: '',
-            type: '',
-            method: '',
-            prerequisite: '',
-            steps: [{
-              num: 1 ,
-              desc: '',
-              result: ''
-            }],
-            remark: '',
-          },
-          moduleOptions: [],
-          maintainerOptions: [],
-          rules:{
-            name :[
-              {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-              { max: 30, message: this.$t('test_track.length_less_than') + '30', trigger: 'blur' }
-            ],
-            module :[{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-            maintainer :[{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-            priority :[{required: true, message: this.$t('test_track.case.input_priority'), trigger: 'change'}],
-            type :[{required: true, message: this.$t('test_track.case.input_type'), trigger: 'change'}],
-            method :[{required: true, message: this.$t('test_track.case.input_method'), trigger: 'change'}]
-          },
-          formLabelWidth: "120px",
-          operationType: ''
-        };
-      },
-      methods: {
-        openTestCaseEditDialog(testCase) {
-          this.resetForm();
-          this.operationType = 'add';
-          if(testCase){
-            //修改
-            this.operationType = 'edit';
-            let tmp = {};
-            Object.assign(tmp, testCase);
-            tmp.steps = JSON.parse(testCase.steps);
-            Object.assign(this.form, tmp);
-            this.form.module = testCase.nodeId;
-          }
-          this.dialogFormVisible = true;
-        },
-        handleAddStep(index, data) {
-          let step = {};
-          step.num = data.num + 1;
-          step.desc = null;
-          step.result = null;
-          this.form.steps.forEach(step => {
-            if(step.num > data.num){
-              step.num ++;
-            }
-          });
-          this.form.steps.push(step);
+    name: "TestCaseEdit",
+    components: {MsDialogFooter},
+    data() {
+      return {
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          module: '',
+          maintainer: '',
+          priority: '',
+          type: '',
+          method: '',
+          prerequisite: '',
+          steps: [{
+            num: 1 ,
+            desc: '',
+            result: ''
+          }],
+          remark: '',
         },
-        handleDeleteStep(index, data) {
-          this.form.steps.splice(index, 1);
-          this.form.steps.forEach(step => {
-            if(step.num > data.num){
-              step.num --;
-            }
-          });
+        moduleOptions: [],
+        maintainerOptions: [],
+        workspaceId: '',
+        rules:{
+          name :[
+            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+            { max: 30, message: this.$t('test_track.length_less_than') + '30', trigger: 'blur' }
+          ],
+          module :[{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
+          maintainer :[{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+          priority :[{required: true, message: this.$t('test_track.case.input_priority'), trigger: 'change'}],
+          type :[{required: true, message: this.$t('test_track.case.input_type'), trigger: 'change'}],
+          method :[{required: true, message: this.$t('test_track.case.input_method'), trigger: 'change'}]
         },
-        saveCase(){
-          this.$refs['caseFrom'].validate((valid) => {
-            if (valid) {
-              let param = {};
-              Object.assign(param, this.form);
-              param.steps = JSON.stringify(this.form.steps);
-              param.nodeId = this.form.module;
-              this.moduleOptions.forEach(item => {
-                if(this.form.module === item.id){
-                  param.nodePath = item.path;
-                }
-              });
-              if(localStorage.getItem(CURRENT_PROJECT)) {
-                param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
+        formLabelWidth: "120px",
+        operationType: ''
+      };
+    },
+    props: {
+      treeNodes: {
+        type: Array
+      }
+    },
+    methods: {
+      open(testCase) {
+        this.resetForm();
+        this.getSelectOptions();
+        this.operationType = 'add';
+        if(testCase){
+          //修改
+          this.operationType = 'edit';
+          let tmp = {};
+          Object.assign(tmp, testCase);
+          tmp.steps = JSON.parse(testCase.steps);
+          Object.assign(this.form, tmp);
+          this.form.module = testCase.nodeId;
+        }
+        this.dialogFormVisible = true;
+      },
+      handleAddStep(index, data) {
+        let step = {};
+        step.num = data.num + 1;
+        step.desc = null;
+        step.result = null;
+        this.form.steps.forEach(step => {
+          if(step.num > data.num){
+            step.num ++;
+          }
+        });
+        this.form.steps.push(step);
+      },
+      handleDeleteStep(index, data) {
+        this.form.steps.splice(index, 1);
+        this.form.steps.forEach(step => {
+          if(step.num > data.num){
+            step.num --;
+          }
+        });
+      },
+      saveCase(){
+        this.$refs['caseFrom'].validate((valid) => {
+          if (valid) {
+            let param = {};
+            Object.assign(param, this.form);
+            param.steps = JSON.stringify(this.form.steps);
+            param.nodeId = this.form.module;
+            this.moduleOptions.forEach(item => {
+              if(this.form.module === item.id){
+                param.nodePath = item.path;
               }
-              this.$post('/test/case/' + this.operationType, param, () => {
-                this.$message.success(this.$t('commons.save_success'));
-                this.dialogFormVisible = false;
-                this.$emit("refresh");
-              });
-            } else {
-              return false;
+            });
+            if(localStorage.getItem(CURRENT_PROJECT)) {
+              param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
             }
-          });
-        }
-        ,
-        resetForm() {
-          if (this.$refs['caseFrom']) {
-            this.$refs['caseFrom'].resetFields();
+            this.$post('/test/case/' + this.operationType, param, () => {
+              this.$message.success(this.$t('commons.save_success'));
+              this.dialogFormVisible = false;
+              this.$emit("refresh");
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      getModuleOptions() {
+        let moduleOptions = [];
+        this.treeNodes.forEach(node => {
+          this.buildNodePath(node, {path: ''}, moduleOptions);
+        });
+        this.moduleOptions = moduleOptions;
+      },
+      getMaintainerOptions() {
+        let workspaceId = localStorage.getItem(WORKSPACE_ID);
+        this.$post('/user/ws/member/list/all', {workspaceId:workspaceId}, response => {
+          this.maintainerOptions = response.data;
+        });
+      },
+      getSelectOptions() {
+        this.getModuleOptions();
+        this.getMaintainerOptions();
+      },
+      buildNodePath(node, option, moduleOptions) {
+        //递归构建节点路径
+        option.id = node.id;
+        option.path = option.path + '/' + node.name;
+        moduleOptions.push(option);
+        if (node.children) {
+          for (let i = 0; i < node.children.length; i++){
+            this.buildNodePath(node.children[i], { path: option.path }, moduleOptions);
           }
-          this.form.name = '';
-          this.form.module = '';
-          this.form.type = '';
-          this.form.method = '';
-          this.form.maintainer = '';
-          this.form.priority = '';
-          this.form.prerequisite = '';
-          this.form.remark = '';
-          this.form.steps = [{
-            num: 1 ,
-            desc: '',
-            result: ''
-          }];
         }
+      },
+      resetForm() {
+        if (this.$refs['caseFrom']) {
+          this.$refs['caseFrom'].resetFields();
+        }
+        this.form.name = '';
+        this.form.module = '';
+        this.form.type = '';
+        this.form.method = '';
+        this.form.maintainer = '';
+        this.form.priority = '';
+        this.form.prerequisite = '';
+        this.form.remark = '';
+        this.form.steps = [{
+          num: 1 ,
+          desc: '',
+          result: ''
+        }];
       }
     }
+  }
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/track/case/components/TestCaseImport.vue b/frontend/src/business/components/track/case/components/TestCaseImport.vue
index aaa7acdba..6dc796dda 100644
--- a/frontend/src/business/components/track/case/components/TestCaseImport.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseImport.vue
@@ -37,7 +37,8 @@
           <li v-for="errFile in errList" :key="errFile.rowNum">
             {{errFile.errMsg}}
           </li>
-        </ul></el-row>
+        </ul>
+      </el-row>
 
     </el-dialog>
 
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 3000cafae..b8a24b8e2 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -104,7 +104,6 @@
         deletePath: "/test/case/delete",
         condition: {},
         tableData: [],
-        selectNodeNames: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
@@ -113,6 +112,12 @@
       props: {
         currentProject: {
           type: Object
+        },
+        selectNodeIds: {
+          type: Array
+        },
+        selectNodeNames: {
+          type: Array
         }
       },
       created: function () {
@@ -121,12 +126,14 @@
       watch: {
         currentProject() {
           this.initTableData();
+        },
+        selectNodeIds() {
+          this.initTableData();
         }
       },
       methods: {
-        initTableData(nodeIds) {
-
-          this.condition.nodeIds = nodeIds;
+        initTableData() {
+          this.condition.nodeIds = this.selectNodeIds;
           if (this.currentProject) {
             this.condition.projectId = this.currentProject.id;
             this.result = this.$post(this.buildPagePath('/test/case/list'), this.condition, response => {
@@ -169,7 +176,6 @@
           });
         },
         refresh() {
-          this.selectNodeNames = [];
           this.condition = {};
           this.$emit('refresh');
         }
diff --git a/frontend/src/business/components/track/common/NodeEdit.vue b/frontend/src/business/components/track/common/NodeEdit.vue
new file mode 100644
index 000000000..54a69c2a6
--- /dev/null
+++ b/frontend/src/business/components/track/common/NodeEdit.vue
@@ -0,0 +1,101 @@
+<template>
+
+  <el-dialog :title="$t('test_track.module.add_module')"
+             :visible.sync="dialogFormVisible"
+             width="30%">
+
+    <el-row type="flex" justify="center">
+      <el-col :span="18">
+        <el-form :model="form" :rules="rules">
+          <el-form-item
+            :label="$t('test_track.module.name')"
+            :label-width="formLabelWidth"
+            prop="name">
+            <el-input v-model="form.name" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="dialogFormVisible = false"
+        @confirm="saveNode"/>
+    </template>
+
+
+  </el-dialog>
+
+</template>
+
+<script>
+  import {CURRENT_PROJECT} from '../../../../common/js/constants';
+  import MsDialogFooter from '../../common/components/MsDialogFooter';
+
+    export default {
+      components: {MsDialogFooter},
+      data() {
+        return {
+          name: "NodeEdit",
+          form: {
+            name: '',
+          },
+          rules:{
+            name :[
+              {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+              { max: 30, message: this.$t('test_track.length_less_than') + '30', trigger: 'blur' }
+            ]
+          },
+          type: '',
+          node: {},
+          formLabelWidth: '80px',
+          dialogFormVisible: false,
+        }
+      },
+      methods: {
+        open(type, data) {
+          this.type = type;
+          this.node = data;
+          this.dialogFormVisible = true;
+        },
+        saveNode() {
+          let param = {};
+          let url = this.buildParam(param);
+          this.$post(url, param, () => {
+            this.$message.success(this.$t('commons.save_success'));
+            this.$emit('refresh');
+            this.close();
+          });
+        },
+        buildParam(param, ) {
+          let url = '';
+          if (this.type === 'add') {
+            url = '/case/node/add';
+            param.level = 1;
+            if (this.node) {
+              //非根节点
+              param.pId = this.node.id;
+              param.level = this.node.level + 1;
+            }
+          } else if (this.type === 'edit') {
+            url = '/case/node/edit';
+            param.id = this.node.id
+          }
+          param.name = this.form.name;
+          param.label = this.form.name;
+          if (localStorage.getItem(CURRENT_PROJECT)) {
+            param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
+          }
+          return url;
+        },
+        close() {
+          this.form.name = '';
+          this.dialogFormVisible = false;
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/case/components/NodeTree.vue b/frontend/src/business/components/track/common/NodeTree.vue
similarity index 54%
rename from frontend/src/business/components/track/case/components/NodeTree.vue
rename to frontend/src/business/components/track/common/NodeTree.vue
index 828d603f8..82007f936 100644
--- a/frontend/src/business/components/track/case/components/NodeTree.vue
+++ b/frontend/src/business/components/track/common/NodeTree.vue
@@ -3,7 +3,7 @@
   <div v-loading="result.loading">
     <el-input :placeholder="$t('test_track.module.search')" v-model="filterText"
               size="small">
-      <template v-slot:append>
+      <template v-if="type == 'edit'" v-slot:append>
         <el-button icon="el-icon-folder-add" @click="openEditNodeDialog('add')"></el-button>
       </template>
     </el-input>
@@ -20,47 +20,37 @@
       ref="tree">
 
       <template v-slot:default="{node,data}">
+
         <span class="custom-tree-node father" @click="selectNode(node)">
+
           <span>{{node.label}}</span>
-          <el-dropdown class="node-dropdown child">
+
+          <el-dropdown  v-if="type == 'edit'" class="node-dropdown child">
               <span class="el-dropdown-link">
                 <i class="el-icon-folder-add"></i>
               </span>
-            <el-dropdown-menu v-slot:default>
-              <el-dropdown-item>
-                <div @click="openEditNodeDialog('edit', data)">{{$t('test_track.module.rename')}}</div>
-              </el-dropdown-item>
-              <el-dropdown-item>
-                <div @click="openEditNodeDialog('add', data)">{{$t('test_track.module.add_submodule')}}</div>
-              </el-dropdown-item>
-              <el-dropdown-item>
-                <div @click="remove(node, data)">{{$t('commons.delete')}}</div>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+              <el-dropdown-menu v-slot:default>
+                <el-dropdown-item>
+                  <div @click="openEditNodeDialog('edit', data)">{{$t('test_track.module.rename')}}</div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div @click="openEditNodeDialog('add', data)">{{$t('test_track.module.add_submodule')}}</div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div @click="remove(node, data)">{{$t('commons.delete')}}</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
         </span>
+
+          <!--<span v-if="type == 'view'" class="custom-tree-node" @click="selectNode(node)">-->
+            <!--{{node.label}}$$-->
+          <!--</span>-->
       </template>
     </el-tree>
 
-    <el-dialog :title="$t('test_track.module.add_module')" :visible.sync="dialogFormVisible" width="500px">
-
-      <el-row type="flex" justify="center">
-        <el-col :span="18">
-          <el-form :model="form">
-            <el-form-item :label="$t('test_track.module.name')" :label-width="formLabelWidth">
-              <el-input v-model="form.name" autocomplete="off"></el-input>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-
-      <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogFormVisible = false">{{$t('test_track.cancel')}}</el-button>
-          <el-button type="primary" @click="editNode">{{$t('test_track.confirm')}}</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <node-edit ref="nodeEdit" @refresh="refreshNode"/>
 
   </div>
 
@@ -68,10 +58,11 @@
 
 <script>
 
-  import {CURRENT_PROJECT} from '../../../../../common/js/constants';
+  import NodeEdit from './NodeEdit';
 
   export default {
     name: "NodeTree",
+    components: {NodeEdit},
     data() {
       return {
         result: {},
@@ -80,34 +71,23 @@
           children: 'children',
           label: 'label'
         },
-        form: {
-          name: '',
-        },
-        formLabelWidth: '80px',
-        dialogTableVisible: false,
-        dialogFormVisible: false,
-        editType: '',
-        editData: {},
-        treeNodes: [],
-        defaultKeys: []
+        // treeNodes: [],
       };
     },
     props: {
-      currentProject: {
-        type: Object
+      type: {
+        type: String,
+        default: 'view'
+      },
+      treeNodes: {
+        type: Array
       }
     },
     watch: {
       filterText(val) {
         this.$refs.tree.filter(val);
-      },
-      currentProject() {
-        this.getNodeTree();
       }
     },
-    created() {
-      this.getNodeTree();
-    },
     methods: {
       handleDragEnd(draggingNode, dropNode, dropType, ev) {
         let param = {};
@@ -152,7 +132,6 @@
         this.getChildNodeId(node, nodeIds);
         this.getParentNodeName(node, nodeNames);
         this.$emit("nodeSelectEvent", nodeIds, nodeNames);
-
       },
       getChildNodeId(rootNode, nodeIds) {
         //递归获取所有子节点ID
@@ -173,63 +152,12 @@
         if (!value) return true;
         return data.label.indexOf(value) !== -1;
       },
-      editNode() {
-        this.saveNode(this.editType, this.editData);
-        this.dialogFormVisible = false;
-      },
       openEditNodeDialog(type, data) {
-        this.editType = type;
-        this.editData = data;
-        this.dialogFormVisible = true;
-      },
-      getNodeTree() {
-        if (this.currentProject) {
-          let projectId = this.currentProject.id;
-          this.result = this.$get("/case/node/list/" + projectId, response => {
-            this.treeNodes = response.data;
-          });
-        }
-      },
-      saveNode(type, pNode) {
-        let param = {};
-        let url = '';
-
-        if (type === 'add') {
-          url = '/case/node/add';
-          param.level = 1;
-          if (pNode) {
-            //非根节点
-            param.pId = pNode.id;
-            param.level = pNode.level + 1;
-          }
-        } else if (type === 'edit') {
-          url = '/case/node/edit';
-          param.id = this.editData.id
-        }
-
-        param.name = this.form.name;
-        param.label = this.form.name;
-
-        if (localStorage.getItem(CURRENT_PROJECT)) {
-          param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
-        }
-
-        this.$post(url, param, response => {
-          if (type === 'edit') {
-            this.editData.label = param.label;
-          }
-          if (type === 'add') {
-            param.id = response.data;
-            if (pNode) {
-              this.$refs.tree.append(param, pNode);
-            } else {
-              this.treeNodes.push(param);
-            }
-          }
-          this.$message.success(this.$t('commons.save_success'));
-        });
-        this.form.name = '';
+        this.$refs.nodeEdit.open(type, data);
       },
+      refreshNode() {
+        this.$emit('refresh');
+      }
     }
   }
 </script>
diff --git a/frontend/src/business/components/track/plan/components/PlanNodeTree.vue b/frontend/src/business/components/track/common/PlanNodeTree.vue
similarity index 100%
rename from frontend/src/business/components/track/plan/components/PlanNodeTree.vue
rename to frontend/src/business/components/track/common/PlanNodeTree.vue
diff --git a/frontend/src/business/components/track/plan/TestPlanView.vue b/frontend/src/business/components/track/plan/TestPlanView.vue
index a153b4afc..5ffae674d 100644
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/TestPlanView.vue
@@ -6,16 +6,14 @@
           :data="testPlans"
           :current-data="currentPlan"
           :title="$t('test_track.plan_view.plan')"
-          @dataChange="changePlan">
-        </select-menu>
-
-        <plan-node-tree
-          class="node-tree"
-          :plan-id="planId"
-          @nodeSelectEvent="selectNodeIdsChange"
-          ref="tree">
-        </plan-node-tree>
+          @dataChange="changePlan"/>
 
+        <node-tree class="node-tree"
+                   v-loading="result.loading"
+                   @nodeSelectEvent="nodeChange"
+                   @refresh="refresh"
+                   :tree-nodes="treeNodes"
+                   ref="nodeTree"/>
       </el-aside>
 
       <el-main>
@@ -25,35 +23,36 @@
           :plan-id="planId"
           :select-node-ids="selectNodeIds"
           :select-node-names="selectNodeNames"
-          ref="testCasePlanList"></test-plan-test-case-list>
+          ref="testCasePlanList"/>
       </el-main>
     </el-container>
 
     <test-case-relevance
       @refresh="refresh"
       :plan-id="planId"
-      ref="testCaseRelevance">
-    </test-case-relevance>
+      ref="testCaseRelevance"/>
   </div>
 
 </template>
 
 <script>
 
-    import PlanNodeTree from "./components/PlanNodeTree";
+    import NodeTree from "../common/NodeTree";
     import TestPlanTestCaseList from "./components/TestPlanTestCaseList";
     import TestCaseRelevance from "./components/TestCaseRelevance";
     import SelectMenu from "../common/SelectMenu";
 
     export default {
       name: "TestPlanView",
-      components: {PlanNodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
+      components: {NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
       data() {
         return {
+          result: {},
           testPlans: [],
           currentPlan: {},
           selectNodeIds: [],
-          selectNodeNames: []
+          selectNodeNames: [],
+          treeNodes: []
         }
       },
       computed: {
@@ -61,23 +60,23 @@
           return this.$route.params.planId;
         }
       },
-      created() {
-        this.getTestPlans();
+      mounted() {
+        this.initData();
       },
       watch: {
         planId() {
-          this.getTestPlans();
+          this.initData();
         }
       },
       methods: {
         refresh() {
           this.selectNodeIds = [];
           this.selectNodeNames = [];
-          this.$refs.tree.initTree();
+          this.getNodeTreeByPlanId();
         },
-        selectNodeIdsChange(nodeIds, nodeNames) {
-          this.selectNodeNames = nodeNames;
-          this.selectNodeIds = nodeIds;
+        initData() {
+          this.getTestPlans();
+          this.getNodeTreeByPlanId();
         },
         openTestCaseRelevanceDialog() {
           this.$refs.testCaseRelevance.openTestCaseRelevanceDialog();
@@ -92,9 +91,20 @@
             });
           });
         },
+        nodeChange(nodeIds, nodeNames) {
+          this.selectNodeIds = nodeIds;
+          this.selectNodeNames = nodeNames;
+        },
         changePlan(plan) {
           this.currentPlan = plan;
           this.$router.push('/track/plan/view/' + plan.id);
+        },
+        getNodeTreeByPlanId() {
+          if(this.planId){
+            this.result = this.$get("/case/node/list/plan/" + this.planId, response => {
+              this.treeNodes = response.data;
+            });
+          }
         }
       }
     }
diff --git a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue b/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
index 471f2aa7e..3a20e2dea 100644
--- a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
+++ b/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
@@ -9,12 +9,11 @@
 
       <el-container class="main-content">
         <el-aside class="node-tree" width="250px">
-          <plan-node-tree
-            :tree-nodes="treeNodes"
-            :plan-id="planId"
-            :showAll=true
-            @nodeSelectEvent="getCaseNameByNodeIds"
-            ref="tree"></plan-node-tree>
+          <node-tree class="node-tree"
+                     @nodeSelectEvent="nodeChange"
+                     @refresh="refresh"
+                     :tree-nodes="treeNodes"
+                     ref="nodeTree"/>
         </el-aside>
 
         <el-container>
@@ -45,32 +44,22 @@
       </el-container>
 
       <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button
-            @click="dialogFormVisible = false">
-            {{$t('test_track.cancel')}}
-          </el-button>
-          <el-button
-            type="primary"
-            @click="saveCaseRelevance">
-            {{$t('test_track.confirm')}}
-          </el-button>
-        </div>
+        <ms-dialog-footer @cancel="dialogFormVisible = false" @confirm="saveCaseRelevance"/>
       </template>
-    </el-dialog>
 
+    </el-dialog>
   </div>
 
-
 </template>
 
 <script>
 
-  import PlanNodeTree from './PlanNodeTree';
+  import NodeTree from '../../common/NodeTree';
+  import MsDialogFooter from '../../../common/components/MsDialogFooter'
 
-    export default {
+  export default {
       name: "TestCaseRelevance",
-      components: {PlanNodeTree},
+      components: {NodeTree, MsDialogFooter},
       data() {
         return {
           result: {},
@@ -78,7 +67,9 @@
           isCheckAll: false,
           testCases: [],
           selectIds: new Set(),
-          treeNodes: []
+          treeNodes: [],
+          selectNodeIds: [],
+          selectNodeNames: []
         };
       },
       props: {
@@ -88,12 +79,15 @@
       },
       watch: {
         planId() {
+          this.initData();
+        },
+        selectNodeIds() {
           this.getCaseNames();
         }
       },
       methods: {
         openTestCaseRelevanceDialog() {
-          this.getCaseNames();
+          this.initData();
           this.dialogFormVisible = true;
         },
         saveCaseRelevance(){
@@ -107,13 +101,13 @@
             this.$emit('refresh');
           });
         },
-        getCaseNames(nodeIds) {
+        getCaseNames() {
           let param = {};
           if (this.planId) {
             param.planId = this.planId;
           }
-          if (nodeIds && nodeIds.length > 0){
-            param.nodeIds = nodeIds;
+          if (this.selectNodeIds && this.selectNodeIds.length > 0){
+            param.nodeIds = this.selectNodeIds;
           }
           this.result = this.$post('/test/case/name', param, response => {
             this.testCases = response.data;
@@ -122,10 +116,6 @@
             });
           });
         },
-        getCaseNameByNodeIds(nodeIds) {
-          this.dialogFormVisible = true;
-          this.getCaseNames(nodeIds);
-        },
         handleSelectAll(selection) {
           if(selection.length > 0){
             this.testCases.forEach(item => {
@@ -142,8 +132,28 @@
             this.selectIds.add(row.id);
           }
         },
+        nodeChange(nodeIds, nodeNames) {
+          this.selectNodeIds = nodeIds;
+          this.selectNodeNames = nodeNames;
+        },
+        initData() {
+          this.getCaseNames();
+          this.getAllNodeTreeByPlanId();
+        },
+        refresh() {
+          this.close();
+        },
+        getAllNodeTreeByPlanId() {
+          if (this.planId) {
+            this.result = this.$get("/case/node/list/all/plan/" + this.planId, response => {
+              this.treeNodes = response.data;
+            });
+          }
+        },
         close() {
           this.selectIds.clear();
+          this.selectNodeIds = [];
+          this.selectNodeNames = [];
         }
       }
     }
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
index 6977e9be4..da1e59f7b 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
@@ -156,7 +156,7 @@
 </template>
 
 <script>
-  import PlanNodeTree from './PlanNodeTree';
+  import PlanNodeTree from '../../common/PlanNodeTree';
   import ExecutorEdit from './ExecutorEdit';
   import StatusEdit from './StatusEdit';
   import TestPlanTestCaseEdit from "../components/TestPlanTestCaseEdit";
@@ -303,7 +303,6 @@
     float: right;
   }
 
-
   .el-breadcrumb {
     display: inline-block;
   }
-- 
GitLab