73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<BasicTable @register="registerTable">
|
|
<template #toolbar>
|
|
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<div class="flex items-center justify-center">
|
|
<TableAction
|
|
:actions="[
|
|
{ label: '编辑', onClick: handleEdit.bind(null, record) },
|
|
{
|
|
label: '删除',
|
|
popConfirm: {
|
|
title: '是否确认删除',
|
|
placement: 'topRight',
|
|
confirm: handleDelete.bind(null, record),
|
|
},
|
|
},
|
|
]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
<RoleDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
|
import { getRoles, deleteRoles } from '/@/api/sys/user'
|
|
import { useDrawer } from '/@/components/Drawer'
|
|
import RoleDrawer from './RoleDrawer.vue'
|
|
import { message } from 'ant-design-vue'
|
|
import { columns, searchFormSchema } from './role.data'
|
|
const [registerDrawer, { openDrawer }] = useDrawer()
|
|
const [registerTable, { reload }] = useTable({
|
|
title: '角色列表',
|
|
api: getRoles,
|
|
columns,
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
showIndexColumn: true,
|
|
})
|
|
const handleSuccess = () => {
|
|
message.success('操作成功')
|
|
reload()
|
|
}
|
|
const handleCreate = () => {
|
|
openDrawer(true, {
|
|
isUpdate: false,
|
|
})
|
|
}
|
|
const handleEdit = (record: Recordable) => {
|
|
openDrawer(true, {
|
|
id: record.id,
|
|
isUpdate: true,
|
|
})
|
|
}
|
|
const handleDelete = async (record: Recordable) => {
|
|
await deleteRoles(record.id)
|
|
message.success('删除成功')
|
|
reload()
|
|
}
|
|
</script>
|
|
<style></style>
|