feat: use action buttons

pull/49/MERGE
xingyu4j 2024-11-26 17:21:54 +08:00
parent 0dcfa13d3b
commit b1553923fd
3 changed files with 62 additions and 37 deletions

View File

@ -2,6 +2,7 @@
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { createPost, getPost, updatePost } from '#/api/system/post';
@ -29,14 +30,15 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (isOpen) {
const { id } = modalApi.getData<Record<string, any>>();
isUpdate.value = !!id;
isUpdate.value = !isEmpty(id);
if (id) {
const values = await getPost(id);
formApi.setValues(values);
}
modalApi.setState({ title: isUpdate.value ? '编辑岗位' : '新增岗位' });
}
},
title: isUpdate.value ? '新增岗位' : '编辑岗位',
});
async function onSubmit(values: Record<string, any>) {
@ -48,7 +50,7 @@ async function onSubmit(values: Record<string, any>) {
}
</script>
<template>
<Modal class="w-1/2">
<Modal class="w-1/3">
<Form />
</Modal>
</template>

View File

@ -5,10 +5,11 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { Button, message } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
import { ActionButtons, IconEnum } from '#/components/action-buttons';
import { columns, formSchema } from './post.data';
import PostModal from './PostModal.vue';
@ -54,9 +55,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
function handleCreate() {
formModalApi.setData({
valuse: {},
});
formModalApi.setData({});
formModalApi.open();
}
async function handleEdit(id: number) {
@ -77,37 +76,44 @@ async function handleExport() {
<Page auto-content-height>
<Grid>
<template #toolbar-actions>
<Button
type="primary"
v-access:code="['system:post:create']"
@click="handleCreate"
>
{{ $t('page.action.add') }}
</Button>
<Button
class="ml-4"
v-access:code="['system:post:export']"
@click="handleExport"
>
{{ $t('page.action.export') }}
</Button>
<ActionButtons
:actions="[
{
type: 'primary',
label: $t('page.action.add'),
preIcon: IconEnum.ADD,
auth: ['system:post:create'],
onClick: handleCreate.bind(null),
},
{
label: $t('page.action.export'),
preIcon: IconEnum.EXPORT,
auth: ['system:post:export'],
onClick: handleExport.bind(null),
},
]"
/>
</template>
<template #action="{ row }">
<Button
type="link"
v-access:code="['system:post:update']"
@click="handleEdit(row.id)"
>
{{ $t('page.action.edit') }}
</Button>
<Button
danger
type="link"
v-access:code="['system:post:delete']"
@click="handleDelete(row.id)"
>
{{ $t('page.action.delete') }}
</Button>
<ActionButtons
:actions="[
{
type: 'link',
label: $t('page.action.edit'),
preIcon: IconEnum.EDIT,
auth: ['system:post:update'],
onClick: handleEdit.bind(null, row.id),
},
{
type: 'link',
danger: true,
label: $t('page.action.delete'),
preIcon: IconEnum.DELETE,
auth: ['system:post:delete'],
onClick: handleDelete.bind(null, row.id),
},
]"
/>
</template>
</Grid>
<FormModal />

View File

@ -15,4 +15,21 @@ interface AuthPermissionInfo {
user: ExUserInfo;
}
export type { AuthPermissionInfo, ExUserInfo };
/** 用户信息 */
interface UserInfo extends BasicUserInfo {
/**
*
*/
desc: string;
/**
*
*/
homePath: string;
/**
* accessToken
*/
token: string;
}
export type { AuthPermissionInfo, ExUserInfo, UserInfo };