表头组件

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

@@ -0,0 +1,43 @@
+<template>
+  <el-button @click="exec()" plain :type="type" :icon="icon" :size="size">
+    {{content}}
+  </el-button>
+</template>
+
+<script>
+    export default {
+      name: "MsTableButton",
+      props: {
+        content: String,
+        icon: {
+          type: String,
+          default: 'el-icon-question'
+        },
+        type: {
+          type: String,
+          default: null
+        },
+        effect: {
+          type: String,
+          default: 'dark'
+        },
+        size: {
+          type: String,
+          default: 'mini'
+        },
+        disabled: {
+          type: Boolean,
+          default: false
+        }
+      },
+      methods: {
+        exec() {
+          this.$emit('click');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+
+  <div>
+    <el-row class="title" type="flex" justify="space-between" align="middle">
+      <slot name="title">
+         {{title}}
+      </slot>
+    </el-row>
+    <el-row type="flex" justify="space-between" align="middle">
+      <span class="operate-button">
+        <ms-table-button v-if="showCreate" icon="el-icon-circle-plus-outline" :content="createTip" @click="create"/>
+        <slot name="button"></slot>
+      </span>
+      <span>
+        <ms-table-search-bar :condition.sync="condition" @change="search"/>
+      </span>
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+  import MsTableSearchBar from './MsTableSearchBar';
+  import MsTableButton from './MsTableButton';
+
+    export default {
+      name: "MsTableHeader",
+      components: {MsTableSearchBar, MsTableButton},
+      props: {
+        title: {
+          type: String,
+          default() {
+            return this.$t('commons.name');
+          }
+        },
+        showCreate: {
+          type: Boolean,
+          default: true
+        },
+        condition: {
+          type: Object
+        },
+        createTip: {
+          type: String,
+          default() {
+            return this.$t('commons.create');
+          }
+        }
+      },
+      methods: {
+        search() {
+          this.$emit('update:condition', this.condition);
+          this.$emit('search');
+        },
+        create() {
+          this.$emit('create');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .title {
+    height: 40px;
+    font-weight: bold;
+  }
+
+</style>

frontend/src/business/components/project/MsProject.vue

@@ -3,18 +3,8 @@
     <div class="main-content">
       <el-card v-loading="result.loading">
         <template v-slot:header>
-          <el-row type="flex" justify="space-between" align="middle">
+          <ms-table-header :condition.sync="condition" @search="search" @create="create"
-            <span class="title">
+                           :create-tip="btnTips" :title="title"/>
-              {{$t('commons.project')}}
-              <ms-create-box :tips="btnTips" :exec="create"/>
-            </span>
-            <span class="search">
-                    <el-input type="text" size="small" :placeholder="$t('project.search_by_name')"
-                              prefix-icon="el-icon-search"
-                              @change="search"
-                              maxlength="60" v-model="condition" clearable/>
-                </span>
-          </el-row>
         </template>
         <el-table :data="items" style="width: 100%">
           <el-table-column prop="name" :label="$t('commons.name')"/>
@@ -57,17 +47,18 @@
   import {Message} from "element-ui";
   import {TokenKey} from "../../../common/js/constants";
   import MsTablePagination from "../common/pagination/TablePagination";
+  import MsTableHeader from "../common/components/MsTableHeader";
 
   export default {
     name: "MsProject",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     data() {
       return {
         createVisible: false,
         result: {},
         btnTips: this.$t('project.create'),
         title: this.$t('project.create'),
-        condition: "",
+        condition: {},
         items: [],
         form: {},
         currentPage: 1,
@@ -166,7 +157,7 @@
       },
       list() {
         let url = "/project/list/" + this.currentPage + '/' + this.pageSize;
-        this.result = this.$post(url, {name: this.condition}, (response) => {
+        this.result = this.$post(url, this.condition, (response) => {
           let data = response.data;
           this.items = data.listObject;
           this.total = data.itemCount;

frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue

@@ -1,43 +1,23 @@
 <template>
-
+  <el-card v-loading="result.loading">
-  <div>
-    <el-card v-loading="result.loading">
       <template v-slot:header>
-        <div>
+        <ms-table-header :condition.sync="condition" @search="initTableData" :show-create="false">
-          <el-row type="flex" justify="space-between" align="middle">
+          <template v-slot:title>
-            <span class="title">
+            <node-breadcrumb :node-names="selectNodeNames" @refresh="refresh"/>
-              <node-breadcrumb
+          </template>
-                :node-names="selectNodeNames"
+          <template v-slot:button>
-                @refresh="refresh"/>&nbsp;
+            <ms-table-button v-if="!showMyTestCase" icon="el-icon-s-custom" :content="$t('test_track.plan_view.my_case')" @click="searchMyTestCase"/>
-
+            <ms-table-button v-if="showMyTestCase" icon="el-icon-files" :content="$t('test_track.plan_view.all_case')" @click="searchMyTestCase"/>
-              <ms-tip-button v-if="!showMyTestCase"
+            <ms-table-button icon="el-icon-connection" :content="$t('test_track.plan_view.relevance_test_case')" @click="$emit('openTestCaseRelevanceDialog')"/>
-                            :tip="$t('test_track.plan_view.my_case')"
+            <ms-table-button icon="el-icon-edit-outline" :content="$t('test_track.plan_view.change_execution_results')" @click="handleBatch('status')"/>
-                            icon="el-icon-s-custom" @click="searchMyTestCase"/>
+            <ms-table-button icon="el-icon-user" :content="$t('test_track.plan_view.change_executor')" @click="handleBatch('executor')"/>
-              <ms-tip-button v-if="showMyTestCase"
+          </template>
-                           :tip="$t('test_track.plan_view.all_case')"
+        </ms-table-header>
-                           icon="el-icon-files" @click="searchMyTestCase"/>
-            </span>
-
-            <span class="operate-button">
-              <el-button icon="el-icon-connection" size="small" round
-                         @click="$emit('openTestCaseRelevanceDialog')" >{{$t('test_track.plan_view.relevance_test_case')}}</el-button>
-
-              <el-button icon="el-icon-edit-outline" size="small" round
-                         @click="handleBatch('status')" >{{$t('test_track.plan_view.change_execution_results')}}</el-button>
-
-              <el-button icon="el-icon-user" size="small" round
-                         @click="handleBatch('executor')" >{{$t('test_track.plan_view.change_executor')}}</el-button>
-
-              <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"/>
-
-        </div>
       </template>
 
+      <executor-edit ref="executorEdit" :select-ids="selectIds" @refresh="initTableData"/>
+      <status-edit ref="statusEdit" :select-ids="selectIds" @refresh="initTableData"/>
+
       <el-table
         @select-all="handleSelectAll"
         @select="handleSelectionChange"
@@ -152,7 +132,6 @@
         @refresh="refresh"/>
 
     </el-card>
-  </div>
 </template>
 
 <script>
@@ -162,7 +141,8 @@
   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 MsTableHeader from '../../../../components/common/components/MsTableHeader';
+  import MsTableButton from '../../../../components/common/components/MsTableButton';
   import NodeBreadcrumb from '../../common/NodeBreadcrumb';
 
   import {TokenKey} from '../../../../../common/js/constants';
@@ -170,7 +150,7 @@
   export default {
       name: "TestPlanTestCaseList",
       components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination,
-        TestPlanTestCaseEdit, MsTableSearchBar, NodeBreadcrumb},
+        TestPlanTestCaseEdit, MsTableHeader, NodeBreadcrumb, MsTableButton},
       data() {
         return {
           result: {},
@@ -299,12 +279,8 @@
     width: 240px;
   }
 
-  .operate-button {
+  .title {
-    float: right;
+    height: 50px;
-  }
-
-  .el-breadcrumb {
-    display: inline-block;
   }
 
 </style>