From b32a6f13778ae8dbce76024e78990bd1f1301637 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 21 Apr 2020 23:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E9=9D=A2?=
 =?UTF-8?q?=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/MsTableSearchBar.vue    | 34 +++++++++++++
 .../common/components/MsTipButton.vue         |  2 -
 .../components/track/case/TestCase.vue        |  6 ++-
 .../track/case/components/NodeTree.vue        | 12 ++++-
 .../track/case/components/TestCaseList.vue    | 35 +++++++------
 .../track/common/NodeBreadcrumb.vue           | 50 +++++++++++++++++++
 .../components/track/plan/TestPlanView.vue    |  8 ++-
 .../track/plan/components/PlanNodeTree.vue    | 11 +++-
 .../plan/components/TestPlanTestCaseList.vue  | 43 +++++++++-------
 frontend/src/i18n/en-US.js                    |  3 +-
 frontend/src/i18n/zh-CN.js                    |  1 +
 11 files changed, 158 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/business/components/common/components/MsTableSearchBar.vue
 create mode 100644 frontend/src/business/components/track/common/NodeBreadcrumb.vue

diff --git a/frontend/src/business/components/common/components/MsTableSearchBar.vue b/frontend/src/business/components/common/components/MsTableSearchBar.vue
new file mode 100644
index 000000000..dfa158449
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsTableSearchBar.vue
@@ -0,0 +1,34 @@
+<template>
+
+    <el-input
+      class="search"
+      type="text"
+      size="small"
+      :placeholder="$t('commons.search_by_name')"
+      prefix-icon="el-icon-search"
+      @change="search"
+      maxlength="60"
+      v-model="condition.name" clearable/>
+
+</template>
+
+<script>
+    export default {
+      name: "MsTableSearchBar",
+      props: {
+        condition: {
+          type: Object
+        }
+      },
+      methods: {
+        search() {
+          this.$emit('update:condition', this.condition);
+          this.$emit('change');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/common/components/MsTipButton.vue b/frontend/src/business/components/common/components/MsTipButton.vue
index 865630624..e27c6e3b6 100644
--- a/frontend/src/business/components/common/components/MsTipButton.vue
+++ b/frontend/src/business/components/common/components/MsTipButton.vue
@@ -1,11 +1,9 @@
 <template>
 
-
   <el-tooltip :disabled="disabled"
               :content="tip"
               placement="bottom"
               :effect="effect">
-
     <el-button @click="exec()"
                circle
                :type="type"
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index bac839870..93927ead4 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -10,7 +10,7 @@
             </select-menu>
             <node-tree class="node-tree"
                        :current-project="currentProject"
-                       @nodeSelectEvent="refreshTable"
+                       @nodeSelectEvent="nodeChange"
                        @refresh="refreshTable"
                        ref="nodeTree">
             </node-tree>
@@ -122,6 +122,10 @@
       changeProject(project) {
         this.setCurrentProject(project);
       },
+      nodeChange(nodeIds, nodeNames) {
+        this.$refs.testCaseList.selectNodeNames = nodeNames;
+        this.$refs.testCaseList.initTableData(nodeIds);
+      },
       refreshTable(data) {
         this.$refs.testCaseList.initTableData(data);
       },
diff --git a/frontend/src/business/components/track/case/components/NodeTree.vue b/frontend/src/business/components/track/case/components/NodeTree.vue
index 34b7b9ecc..779d17e3b 100644
--- a/frontend/src/business/components/track/case/components/NodeTree.vue
+++ b/frontend/src/business/components/track/case/components/NodeTree.vue
@@ -148,8 +148,11 @@
       },
       selectNode(node) {
         let nodeIds = [];
+        let nodeNames = [];
         this.getChildNodeId(node, nodeIds);
-        this.$emit("nodeSelectEvent", nodeIds);
+        this.getParentNodeName(node, nodeNames);
+        this.$emit("nodeSelectEvent", nodeIds, nodeNames);
+
       },
       getChildNodeId(rootNode, nodeIds) {
         //递归获取所有子节点ID
@@ -157,7 +160,12 @@
         for (let i = 0; i < rootNode.childNodes.length; i++) {
           this.getChildNodeId(rootNode.childNodes[i], nodeIds);
         }
-        return nodeIds;
+      },
+      getParentNodeName(rootNode, nodeNames) {
+        if (rootNode.parent && rootNode.parent.id != 0) {
+          this.getParentNodeName(rootNode.parent, nodeNames)
+        }
+        nodeNames.push(rootNode.data.name);
       },
       filterNode(value, data) {
         if (!value) return true;
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 504590524..3000cafae 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -5,20 +5,18 @@
       <template v-slot:header>
         <div>
           <el-row type="flex" justify="space-between" align="middle">
-            <span class="title">{{$t('test_track.case.test_case')}}
-              <ms-create-box :tips="$t('test_track.case.create')" :exec="testCaseCreate"/></span>
+
+            <node-breadcrumb
+              :node-names="selectNodeNames"
+              @refresh="refresh"/>
 
             <span class="operate-button">
+              <ms-create-box :tips="$t('test_track.case.create')" :exec="testCaseCreate"/>
               <test-case-import :projectId="currentProject == null? null : currentProject.id"
                                 @refresh="refresh"/>
               <test-case-export/>
-              <el-input type="text" size="small"
-                        class="search"
-                        :placeholder="$t('load_test.search_by_name')"
-                        prefix-icon="el-icon-search"
-                        maxlength="60"
-                        v-model="condition"
-                        @change="search" clearable/></span>
+              <ms-table-search-bar :condition.sync="condition" @change="initTableData"/>
+            </span>
           </el-row>
         </div>
       </template>
@@ -94,17 +92,19 @@
   import TestCaseImport from '../components/TestCaseImport';
   import TestCaseExport from '../components/TestCaseExport';
   import MsTablePagination from '../../../../components/common/pagination/TablePagination';
-
+  import MsTableSearchBar from '../../../../components/common/components/MsTableSearchBar';
+  import NodeBreadcrumb from '../../common/NodeBreadcrumb';
 
   export default {
     name: "TestCaseList",
-    components: {MsCreateBox, TestCaseImport, TestCaseExport, MsTablePagination},
+    components: {MsCreateBox, TestCaseImport, TestCaseExport, MsTablePagination, NodeBreadcrumb, MsTableSearchBar},
     data() {
       return {
         result: {},
         deletePath: "/test/case/delete",
-        condition: "",
+        condition: {},
         tableData: [],
+        selectNodeNames: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
@@ -125,14 +125,11 @@
       },
       methods: {
         initTableData(nodeIds) {
-          let param = {
-            name: this.condition,
-          };
-          param.nodeIds = nodeIds;
 
+          this.condition.nodeIds = nodeIds;
           if (this.currentProject) {
-            param.projectId = this.currentProject.id;
-            this.result = this.$post(this.buildPagePath('/test/case/list'), param, response => {
+            this.condition.projectId = this.currentProject.id;
+            this.result = this.$post(this.buildPagePath('/test/case/list'), this.condition, response => {
               let data = response.data;
               this.total = data.itemCount;
               this.tableData = data.listObject;
@@ -172,6 +169,8 @@
           });
         },
         refresh() {
+          this.selectNodeNames = [];
+          this.condition = {};
           this.$emit('refresh');
         }
       }
diff --git a/frontend/src/business/components/track/common/NodeBreadcrumb.vue b/frontend/src/business/components/track/common/NodeBreadcrumb.vue
new file mode 100644
index 000000000..85beccf86
--- /dev/null
+++ b/frontend/src/business/components/track/common/NodeBreadcrumb.vue
@@ -0,0 +1,50 @@
+<template>
+  <el-breadcrumb separator-class="el-icon-arrow-right">
+    <el-breadcrumb-item>
+      <a @click="showAll">
+        <i class="el-icon-s-home"></i>&nbsp;
+        {{$t('test_track.plan_view.all_case')}}
+      </a>
+    </el-breadcrumb-item>
+    <el-breadcrumb-item v-for="nodeName in data" :key="nodeName">{{nodeName}}</el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+    export default {
+      name: "NodeBreadcrumb",
+      data() {
+        return {
+          data: []
+        }
+      },
+      props: {
+        nodeNames: {
+          type: Array
+        }
+      },
+      watch: {
+        nodeNames() {
+          this.filterData();
+        }
+      },
+      methods: {
+        showAll() {
+          this.$emit('refresh');
+        },
+        filterData() {
+          this.data = this.nodeNames;
+          if (this.data.length > 4) {
+            let lastData = this.data[this.data.length - 1];
+            this.data.splice(1, this.data.length);
+            this.data.push('...');
+            this.data.push(lastData);
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/plan/TestPlanView.vue b/frontend/src/business/components/track/plan/TestPlanView.vue
index ec5276d20..a153b4afc 100644
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/TestPlanView.vue
@@ -24,6 +24,7 @@
           @refresh="refresh"
           :plan-id="planId"
           :select-node-ids="selectNodeIds"
+          :select-node-names="selectNodeNames"
           ref="testCasePlanList"></test-plan-test-case-list>
       </el-main>
     </el-container>
@@ -51,7 +52,8 @@
         return {
           testPlans: [],
           currentPlan: {},
-          selectNodeIds: []
+          selectNodeIds: [],
+          selectNodeNames: []
         }
       },
       computed: {
@@ -70,9 +72,11 @@
       methods: {
         refresh() {
           this.selectNodeIds = [];
+          this.selectNodeNames = [];
           this.$refs.tree.initTree();
         },
-        selectNodeIdsChange(nodeIds) {
+        selectNodeIdsChange(nodeIds, nodeNames) {
+          this.selectNodeNames = nodeNames;
           this.selectNodeIds = nodeIds;
         },
         openTestCaseRelevanceDialog() {
diff --git a/frontend/src/business/components/track/plan/components/PlanNodeTree.vue b/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
index 6efcff6bb..5777c890c 100644
--- a/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
+++ b/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
@@ -105,8 +105,10 @@
         },
         selectNode(node) {
           let nodeIds = [];
+          let nodeNames = [];
           this.getChildNodeId(node, nodeIds);
-          this.$emit("nodeSelectEvent", nodeIds);
+          this.getParentNodeName(node, nodeNames);
+          this.$emit("nodeSelectEvent", nodeIds, nodeNames);
         },
         getChildNodeId(rootNode, nodeIds) {
           //递归获取所有子节点ID
@@ -114,7 +116,12 @@
           for (let i = 0; i < rootNode.childNodes.length; i++){
             this.getChildNodeId(rootNode.childNodes[i], nodeIds);
           }
-          return nodeIds;
+        },
+        getParentNodeName(rootNode, nodeNames) {
+          if (rootNode.parent && rootNode.parent.id != 0) {
+            this.getParentNodeName(rootNode.parent, nodeNames)
+          }
+          nodeNames.push(rootNode.data.name);
         },
         filterNode(value, data) {
           if (!value) return true;
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
index 95911aa76..6977e9be4 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
@@ -5,13 +5,18 @@
       <template v-slot:header>
         <div>
           <el-row type="flex" justify="space-between" align="middle">
-            <span class="title">{{$t('test_track.case.test_case')}}
+            <span class="title">
+              <node-breadcrumb
+                :node-names="selectNodeNames"
+                @refresh="refresh"/>&nbsp;
+
               <ms-tip-button v-if="!showMyTestCase"
                             :tip="$t('test_track.plan_view.my_case')"
                             icon="el-icon-s-custom" @click="searchMyTestCase"/>
               <ms-tip-button v-if="showMyTestCase"
                            :tip="$t('test_track.plan_view.all_case')"
-                           icon="el-icon-files" @click="searchMyTestCase"/></span>
+                           icon="el-icon-files" @click="searchMyTestCase"/>
+            </span>
 
             <span class="operate-button">
               <el-button icon="el-icon-connection" size="small" round
@@ -23,23 +28,12 @@
               <el-button icon="el-icon-user" size="small" round
                          @click="handleBatch('executor')" >{{$t('test_track.plan_view.change_executor')}}</el-button>
 
-              <el-input type="text" size="small"
-                        class="search"
-                        :placeholder="$t('load_test.search_by_name')"
-                        prefix-icon="el-icon-search"
-                        maxlength="60"
-                        v-model="condition.name" @change="search" clearable/>
+              <ms-table-search-bar :condition.sync="condition" @change="initTableData"/>
             </span>
           </el-row>
 
-          <executor-edit
-            ref="executorEdit"
-            :select-ids="selectIds"
-            @refresh="refresh"/>
-          <status-edit
-            ref="statusEdit"
-            :select-ids="selectIds"
-            @refresh="refresh"/>
+          <executor-edit ref="executorEdit" :select-ids="selectIds" @refresh="refresh"/>
+          <status-edit ref="statusEdit" :select-ids="selectIds" @refresh="refresh"/>
 
         </div>
       </template>
@@ -168,11 +162,15 @@
   import TestPlanTestCaseEdit from "../components/TestPlanTestCaseEdit";
   import MsTipButton from '../../../../components/common/components/MsTipButton';
   import MsTablePagination from '../../../../components/common/pagination/TablePagination';
+  import MsTableSearchBar from '../../../../components/common/components/MsTableSearchBar';
+  import NodeBreadcrumb from '../../common/NodeBreadcrumb';
+
   import {TokenKey} from '../../../../../common/js/constants';
 
   export default {
       name: "TestPlanTestCaseList",
-      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination, TestPlanTestCaseEdit},
+      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination,
+        TestPlanTestCaseEdit, MsTableSearchBar, NodeBreadcrumb},
       data() {
         return {
           result: {},
@@ -192,6 +190,9 @@
         },
         selectNodeIds: {
           type: Array
+        },
+        selectNodeNames: {
+          type: Array
         }
       },
       watch: {
@@ -199,7 +200,7 @@
           this.initTableData();
         },
         selectNodeIds() {
-          this.refresh();
+          this.search();
         }
       },
       created: function () {
@@ -219,7 +220,7 @@
         },
         refresh() {
           this.condition = {};
-          this.initTableData();
+          this.$emit('refresh');
         },
         search() {
           this.initTableData();
@@ -303,4 +304,8 @@
   }
 
 
+  .el-breadcrumb {
+    display: inline-block;
+  }
+
 </style>
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 3f87a3a0a..212164cb5 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -46,7 +46,8 @@ export default {
     'refresh': 'Refresh',
     'remark': 'Remark',
     'delete': 'Delete',
-    'not_filled': 'Not filled'
+    'not_filled': 'Not filled',
+    'search_by_name': 'Search by name',
   },
   workspace: {
     'create': 'Create Workspace',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 676ee5ac7..728f065e6 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -48,6 +48,7 @@ export default {
     'delete': '删除',
     'not_filled': '未填写',
     'please_select': '请选择',
+    'search_by_name': '根据名称搜索',
   },
   workspace: {
     'create': '创建工作空间',
-- 
GitLab