feat: 【ele】增加 TableAction 组件
This commit is contained in:
puhui999
@@ -1,8 +1,7 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { $t } from '@vben/locales';
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
@@ -17,8 +16,6 @@ import {
|
||||
getRangePickerDefaultProps,
|
||||
} from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
@@ -282,7 +279,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = SystemUserApi.User>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
onStatusChange?: (
|
||||
newStatus: number,
|
||||
row: T,
|
||||
@@ -335,41 +331,10 @@ export function useGridColumns<T = SystemUserApi.User>(
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 130,
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'username',
|
||||
nameTitle: '用户',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
// TODO @芋艿：后续把 delete、assign-role、reset-password 搞成"更多"
|
||||
options: [
|
||||
{
|
||||
code: 'edit',
|
||||
show: hasAccessByCodes(['system:user:update']),
|
||||
},
|
||||
{
|
||||
code: 'delete',
|
||||
show: hasAccessByCodes(['system:user:delete']),
|
||||
},
|
||||
{
|
||||
code: 'assign-role',
|
||||
text: '分配角色',
|
||||
show: hasAccessByCodes(['system:permission:assign-user-role']),
|
||||
'v-access:code': 'system:user:assign-role1',
|
||||
},
|
||||
{
|
||||
code: 'reset-password',
|
||||
text: '重置密码',
|
||||
show: hasAccessByCodes(['system:user:update-password']),
|
||||
},
|
||||
],
|
||||
},
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -9,10 +9,9 @@ import type { SystemUserApi } from '#/api/system/user';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { confirm, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { Download, Plus, Upload } from '@vben/icons';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { ElButton, ElLoading, ElMessage } from 'element-plus';
|
||||
import { ElLoading, ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
@@ -22,6 +21,7 @@ import {
|
||||
updateUserStatus,
|
||||
} from '#/api/system/user';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { ACTION_ICON, TableAction } from '#/components/table-action';
|
||||
import { $t } from '#/locales';
|
||||
import { DICT_TYPE, getDictLabel } from '#/utils';
|
||||
|
||||
@@ -216,32 +216,69 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
<div class="w-5/6">
|
||||
<Grid table-title="用户列表">
|
||||
<template #toolbar-tools>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="onCreate"
|
||||
v-access:code="['system:user:create']"
|
||||
>
|
||||
<Plus class="mr-2 size-5" />
|
||||
{{ $t('ui.actionTitle.create', ['用户']) }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
class="ml-2"
|
||||
@click="onExport"
|
||||
v-access:code="['system:user:export']"
|
||||
>
|
||||
<Download class="mr-2 size-5" />
|
||||
{{ $t('ui.actionTitle.export') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
class="ml-2"
|
||||
@click="onImport"
|
||||
v-access:code="['system:user:import']"
|
||||
>
|
||||
<Upload class="mr-2 size-5" />
|
||||
{{ $t('ui.actionTitle.import', ['用户']) }}
|
||||
</ElButton>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['用户']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['system:user:create'],
|
||||
onClick: onCreate,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['system:user:export'],
|
||||
onClick: onExport,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.import', ['用户']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.UPLOAD,
|
||||
auth: ['system:user:import'],
|
||||
onClick: onImport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'text',
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['system:user:update'],
|
||||
onClick: onEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'danger',
|
||||
text: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['system:user:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
|
||||
confirm: onDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
:drop-down-actions="[
|
||||
{
|
||||
label: '分配角色',
|
||||
type: 'text',
|
||||
auth: ['system:permission:assign-user-role'],
|
||||
onClick: onAssignRole.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: '重置密码',
|
||||
type: 'text',
|
||||
auth: ['system:user:update-password'],
|
||||
onClick: onResetPassword.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user