封装表格操作按钮

This commit is contained in:
chenjianxing 2020-04-23 17:25:04 +08:00
parent 2290c94fec
commit d2b65e104e
6 changed files with 83 additions and 14 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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/>
<el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
<ms-table-operator @editClick="edit(scope.row)" @deleteClick="del(scope.row)"/>
</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,

View File

@ -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/>
<el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
<ms-table-operator @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)"/>
</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,

View File

@ -63,12 +63,7 @@
<el-table-column
:label="$t('commons.operating')">
<template v-slot:default="scope">
<el-button @click="handleEdit(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/>
<ms-table-operator @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)"/>
</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: {},

View File

@ -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/>
<el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-unlock" size="mini" circle/>
<ms-table-operator @editClick="handleEdit(scope.row, scope.$index)" @deleteClick="handleDelete(scope.row)"/>
</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,