feat: use action buttons
parent
0dcfa13d3b
commit
b1553923fd
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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 };
|
||||
|
|
Loading…
Reference in New Issue