<script lang="ts" setup>
|
import type { Recordable } from '@vben/types';
|
|
import type {
|
OnActionClickParams,
|
VxeTableGridOptions,
|
} from '#/adapter/vxe-table';
|
import type { SystemRoleApi } from '#/api';
|
|
import { Page, useVbenDrawer } from '@vben/common-ui';
|
import { Plus } from '@vben/icons';
|
|
import { Button, message, Modal } from 'ant-design-vue';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { deleteRole, getRoleList, updateRole } from '#/api';
|
import { $t } from '#/locales';
|
|
import { useColumns, useGridFormSchema } from './data';
|
import Form from './modules/form.vue';
|
|
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
connectedComponent: Form,
|
destroyOnClose: true,
|
});
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
formOptions: {
|
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
schema: useGridFormSchema(),
|
submitOnChange: true,
|
},
|
gridOptions: {
|
columns: useColumns(onActionClick, onStatusChange),
|
height: 'auto',
|
keepSource: true,
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues) => {
|
return await getRoleList({
|
page: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
});
|
},
|
},
|
},
|
rowConfig: {
|
keyField: 'id',
|
},
|
|
toolbarConfig: {
|
custom: true,
|
export: false,
|
refresh: { code: 'query' },
|
search: true,
|
zoom: true,
|
},
|
} as VxeTableGridOptions<SystemRoleApi.SystemRole>,
|
});
|
|
function onActionClick(e: OnActionClickParams<SystemRoleApi.SystemRole>) {
|
switch (e.code) {
|
case 'delete': {
|
onDelete(e.row);
|
break;
|
}
|
case 'edit': {
|
onEdit(e.row);
|
break;
|
}
|
}
|
}
|
|
/**
|
* 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
|
* @param content 提示内容
|
* @param title 提示标题
|
*/
|
function confirm(content: string, title: string) {
|
return new Promise((reslove, reject) => {
|
Modal.confirm({
|
content,
|
onCancel() {
|
reject(new Error('已取消'));
|
},
|
onOk() {
|
reslove(true);
|
},
|
title,
|
});
|
});
|
}
|
|
/**
|
* 状态开关即将改变
|
* @param newStatus 期望改变的状态值
|
* @param row 行数据
|
* @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
|
*/
|
async function onStatusChange(
|
newStatus: number,
|
row: SystemRoleApi.SystemRole,
|
) {
|
const status: Recordable<string> = {
|
0: '禁用',
|
1: '启用',
|
};
|
try {
|
await confirm(
|
`你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
|
`切换状态`,
|
);
|
await updateRole(row.id, { status: newStatus });
|
return true;
|
} catch {
|
return false;
|
}
|
}
|
|
function onEdit(row: SystemRoleApi.SystemRole) {
|
formDrawerApi.setData(row).open();
|
}
|
|
function onDelete(row: SystemRoleApi.SystemRole) {
|
const hideLoading = message.loading({
|
content: $t('ui.actionMessage.deleting', [row.name]),
|
duration: 0,
|
key: 'action_process_msg',
|
});
|
deleteRole(row.id)
|
.then(() => {
|
message.success({
|
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
|
key: 'action_process_msg',
|
});
|
onRefresh();
|
})
|
.catch(() => {
|
hideLoading();
|
});
|
}
|
|
function onRefresh() {
|
gridApi.query();
|
}
|
|
function onCreate() {
|
formDrawerApi.setData({}).open();
|
}
|
</script>
|
<template>
|
<Page auto-content-height>
|
<FormDrawer />
|
<Grid :table-title="$t('system.role.list')">
|
<template #toolbar-tools>
|
<Button type="primary" @click="onCreate">
|
<Plus class="size-5" />
|
{{ $t('ui.actionTitle.create', [$t('system.role.name')]) }}
|
</Button>
|
</template>
|
</Grid>
|
</Page>
|
</template>
|
