109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<template>
|
|
<page-header-wrapper>
|
|
<a-card class="my-card">
|
|
<AntQueryTable
|
|
ref="role-table"
|
|
height="100%"
|
|
:queryConfig="queryConfig"
|
|
:tableConfig="tableConfig"
|
|
:pageConfig="pageConfig"
|
|
:showTool="showTool"
|
|
>
|
|
<template #toolbar-left>
|
|
<a-button icon="plus" type="primary" style="margin-right: 10px" @click="handleOpenAddModal">新增</a-button>
|
|
</template>
|
|
<template #tablecell-action="{ record }">
|
|
<a-button size="small" type="primary" @click="handleOpenEditModal(record)">编辑</a-button>
|
|
<a-button size="small" type="danger" @click="handleDelete(record)" style="margin-left: 15px">删除</a-button>
|
|
</template>
|
|
</AntQueryTable>
|
|
</a-card>
|
|
<AntFormModal
|
|
:visible.sync="AEModal.visible"
|
|
:title="AEModal.title"
|
|
:formItems="AEModal.formItems"
|
|
:formRules="AEModal.formRules"
|
|
:formData="AEModal.formData"
|
|
:onSubmit="handleSubmitAE"
|
|
@success="handleSubmitAESuccess"
|
|
>
|
|
</AntFormModal>
|
|
</page-header-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
|
|
export default {
|
|
name: 'Role',
|
|
data() {
|
|
return {
|
|
queryConfig: {
|
|
items: [{ label: '关键字', prop: 'filter' }],
|
|
},
|
|
tableConfig: {
|
|
table: { rowKey: 'id' },
|
|
query: (params) => getAction('/system/role/getList', params),
|
|
columns: [
|
|
{ dataIndex: 'serial' },
|
|
{ title: '角色名称', dataIndex: 'roleName', width: 'auto' },
|
|
{ title: '排序', dataIndex: 'sortCode', width: 'auto' },
|
|
{ dataIndex: 'action' },
|
|
],
|
|
},
|
|
pageConfig: true,
|
|
showTool: true,
|
|
|
|
AEModal: {
|
|
visible: false,
|
|
title: '',
|
|
mode: '',
|
|
formItems: [
|
|
{ label: '角色名称', prop: 'roleName' },
|
|
{ label: '排序', prop: 'sortCode', options: { type: 'number' } },
|
|
],
|
|
formRules: {},
|
|
formData: {},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpenAddModal() {
|
|
this.AEModal.title = '新增角色'
|
|
this.AEModal.mode = 'add'
|
|
this.AEModal.formData = {}
|
|
this.AEModal.visible = true
|
|
},
|
|
handleOpenEditModal(record) {
|
|
this.AEModal.title = '编辑角色'
|
|
this.AEModal.mode = 'edit'
|
|
this.AEModal.formData = { ...record }
|
|
this.AEModal.visible = true
|
|
},
|
|
handleSubmitAE(formData) {
|
|
if (this.AEModal.mode === 'add') {
|
|
return postAction('/system/role/add', formData)
|
|
}
|
|
if (this.AEModal.mode === 'edit') {
|
|
return putAction('/system/role/edit', formData)
|
|
}
|
|
},
|
|
handleSubmitAESuccess() {
|
|
this.$refs['role-table'].commitAction('query')
|
|
},
|
|
async handleDelete(record) {
|
|
try {
|
|
await this.$confirm({ title: '温馨提示', content: '确定要删除该角色吗？' })
|
|
const res = await deleteAction('/system/role/remove?roleId=' + record.id)
|
|
this.$message.success(res.message)
|
|
this.$refs['role-table'].commitAction('query')
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
</style>
|