封装表格操作按钮

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

@@ -0,0 +1,35 @@
+<template>
+  <span>
+    <ms-table-operator-button icon="el-icon-edit"
+                              @click="editClick" @click.stop="editClickStop"/>
+    <ms-table-operator-button icon="el-icon-delete" type="danger"
+                              @click="deletClick" @click.stop="deleteClickStop"/>
+  </span>
+
+</template>
+
+<script>
+    import MsTableOperatorButton from "./MsTableOperatorButton";
+    export default {
+      name: "MsTableOperator",
+      components: {MsTableOperatorButton},
+      methods: {
+        editClick() {
+          this.$emit('editClick');
+        },
+        editClickStop() {
+          this.$emit('editClickStop');
+        },
+        deletClick() {
+          this.$emit('deleteClick');
+        },
+        deleteClickStop() {
+          this.$emit('deleteClickStop');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <el-button @click="click"
+             @click.stop="clickStop" :type="type"
+             :icon="icon" size="mini" circle/>
+</template>
+
+<script>
+  import MsTableButton from "./MsTableButton";
+  export default {
+    name: "MsTableOperatorButton",
+    components: {MsTableButton},
+    props: {
+      icon: {
+        type: String,
+        default: 'el-icon-question'
+      },
+      type: {
+        type: String,
+        default: 'primary'
+      }
+    },
+    methods: {
+      click() {
+        this.$emit('click');
+      },
+      clickStop() {
+        this.$emit('clickStop');
+      }
+    }
+  }
+</script>
+
+<style scoped>
+</style>

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

@@ -12,8 +12,7 @@
           <el-table-column prop="workspaceName" label="所属工作空间"/>
           <el-table-column>
             <template v-slot:default="scope">
-              <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+              <ms-table-operator @editClick="edit(scope.row)" @deleteClick="del(scope.row)"/>
-              <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
           </el-table-column>
         </el-table>
@@ -48,10 +47,11 @@
   import {TokenKey} from "../../../common/js/constants";
   import MsTablePagination from "../common/pagination/TablePagination";
   import MsTableHeader from "../common/components/MsTableHeader";
+  import MsTableOperator from "../common/components/MsTableOperator";
 
   export default {
     name: "MsProject",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader},
     data() {
       return {
         createVisible: false,

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

@@ -79,8 +79,7 @@
         <el-table-column
           :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            <ms-table-operator @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)"/>
-            <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
         </el-table-column>
       </el-table>
@@ -103,10 +102,12 @@
   import PriorityTableItem from "../../common/TableItems/PriorityTableItem";
   import TypeTableItem from "../../common/TableItems/TypeTableItem";
   import MethodTableItem from "../../common/TableItems/MethodTableItem";
+  import MsTableOperator from "../../../common/components/MsTableOperator";
 
   export default {
     name: "TestCaseList",
     components: {
+      MsTableOperator,
       MethodTableItem,
       TypeTableItem,
       PriorityTableItem,

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

@@ -63,12 +63,7 @@
           <el-table-column
             :label="$t('commons.operating')">
             <template v-slot:default="scope">
-              <el-button @click="handleEdit(scope.row)"
+              <ms-table-operator @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)"/>
-                         @click.stop="deleteVisible = true" type="primary"
-                         icon="el-icon-edit" size="mini" circle/>
-              <el-button @click="handleDelete(scope.row)"
-                         @click.stop="deleteVisible = true" type="danger"
-                         icon="el-icon-delete" size="mini" circle/>
             </template>
           </el-table-column>
         </el-table>
@@ -85,10 +80,13 @@
   import MsCreateBox from '../../../settings/CreateBox';
   import MsTablePagination from '../../../../components/common/pagination/TablePagination';
   import MsTableHeader from "../../../common/components/MsTableHeader";
+  import MsDialogFooter from "../../../common/components/MsDialogFooter";
+  import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
+  import MsTableOperator from "../../../common/components/MsTableOperator";
 
   export default {
       name: "TestPlanList",
-      components: {MsTableHeader, MsCreateBox, MsTablePagination},
+      components: {MsTableOperator, MsTableOperatorButton, MsDialogFooter, MsTableHeader, MsCreateBox, MsTablePagination},
       data() {
         return {
           result: {},

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

@@ -89,8 +89,7 @@
         <el-table-column
           :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="handleEdit(scope.row, scope.$index)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            <ms-table-operator @editClick="handleEdit(scope.row, scope.$index)" @deleteClick="handleDelete(scope.row)"/>
-            <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-unlock" size="mini" circle/>
           </template>
         </el-table-column>
       </el-table>
@@ -122,10 +121,12 @@
   import StatusTableItem from "../../../common/TableItems/StatusTableItem";
   import TypeTableItem from "../../../common/TableItems/TypeTableItem";
   import MethodTableItem from "../../../common/TableItems/MethodTableItem";
+  import MsTableOperator from "../../../../common/components/MsTableOperator";
 
   export default {
       name: "TestPlanTestCaseList",
       components: {
+        MsTableOperator,
         MethodTableItem,
         TypeTableItem,
         StatusTableItem,