yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use table actions

pull/105/head^2
xingyu4j 2025-05-15 14:47:19 +08:00
parent ff5358da4b
commit 007faab168
6 changed files with 104 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web-antd/src/views/system/tenant/data.ts
View File

@ -1,8 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantApi } from '#/api/system/tenant';
import { useAccess } from '@vben/access';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { getTenantPackageList } from '#/api/system/tenant-package';
@ -13,8 +10,6 @@ import {
getRangePickerDefaultProps,
} from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -162,8 +157,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemTenantApi.Tenant>(
onActionClick: OnActionClickFn<T>,
export function useGridColumns(
getPackageName?: (packageId: number) => string | undefined,
): VxeTableGridOptions['columns'] {
return [
@ -227,29 +221,10 @@ export function useGridColumns<T = SystemTenantApi.Tenant>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 130,
align: 'center',
width: 130,
fixed: 'right',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '租户',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['system:tenant:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:tenant:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}

48
apps/web-antd/src/views/system/tenant/index.vue
View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantApi } from '#/api/system/tenant';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
@ -75,29 +72,12 @@ async function onDelete(row: SystemTenantApi.Tenant) {
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemTenantApi.Tenant>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick, getPackageName),
columns: useGridColumns(getPackageName),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -153,6 +133,30 @@ onMounted(async () => {
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
auth: ['system:role:update'],
onClick: onEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
auth: ['system:role:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: onDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

34
apps/web-antd/src/views/system/tenantPackage/data.ts
View File

@ -1,8 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { useAccess } from '@vben/access';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import {
@ -12,8 +9,6 @@ import {
getRangePickerDefaultProps,
} from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -91,9 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemTenantPackageApi.TenantPackage>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -126,29 +119,10 @@ export function useGridColumns<T = SystemTenantPackageApi.TenantPackage>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 130,
align: 'center',
width: 130,
fixed: 'right',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '套餐',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['system:tenant-package:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:tenant-package:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}

48
apps/web-antd/src/views/system/tenantPackage/index.vue
View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { Page, useVbenModal } from '@vben/common-ui';
@ -57,30 +54,13 @@ async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemTenantPackageApi.TenantPackage>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
// TODO @芋艿：时间筛选，后续处理；
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -123,6 +103,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
{{ $t('ui.actionTitle.create', ['套餐']) }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
auth: ['system:role:update'],
onClick: onEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
auth: ['system:role:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: onDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

41
apps/web-antd/src/views/system/user/data.ts
View File

@ -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 { handleTree } from '@vben/utils';
import { z } from '#/adapter/form';
@ -16,8 +15,6 @@ import {
getRangePickerDefaultProps,
} from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -262,7 +259,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns<T = SystemUserApi.User>(
onActionClick: OnActionClickFn<T>,
onStatusChange?: (
newStatus: number,
row: T,
@ -315,41 +311,10 @@ export function useGridColumns<T = SystemUserApi.User>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 160,
width: 160,
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' },
},
];
}

68
apps/web-antd/src/views/system/user/index.vue
View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import type { SystemUserApi } from '#/api/system/user';
@ -22,6 +19,7 @@ import {
updateUserStatus,
} from '#/api/system/user';
import { DocAlert } from '#/components/doc-alert';
import { TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { DICT_TYPE, getDictLabel } from '#/utils';
@ -137,34 +135,12 @@ async function onStatusChange(
});
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<SystemUserApi.User>) {
switch (code) {
case 'assign-role': {
onAssignRole(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'reset-password': {
onResetPassword(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick, onStatusChange),
columns: useGridColumns(onStatusChange),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -242,6 +218,44 @@ const [Grid, gridApi] = useVbenVxeGrid({
{{ $t('ui.actionTitle.import', ['用户']) }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: 'ant-design:edit-outlined',
auth: ['system:user:update'],
onClick: onEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: 'ant-design:delete-outlined',
auth: ['system:user:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: onDelete.bind(null, row),
},
},
]"
:drop-down-actions="[
{
label: '数据权限',
type: 'link',
auth: ['system:permission:assign-user-role'],
onClick: onAssignRole.bind(null, row),
},
{
label: '菜单权限',
type: 'link',
auth: ['system:user:update-password'],
onClick: onResetPassword.bind(null, row),
},
]"
/>
</template>
</Grid>
</div>
</div>