reactor:【system 系统管理】area、dept、dict、loginlog 进一步统一代码风格

pull/210/head
YunaiV 2025-09-06 09:39:09 +08:00
parent 84e32a0884
commit fcaa81ff3b
15 changed files with 135 additions and 175 deletions

View File

@ -15,7 +15,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -60,7 +60,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
</template>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction

View File

@ -32,13 +32,13 @@ function getLeaderName(userId: number) {
/** 切换树形展开/收缩状态 */
const isExpanded = ref(true);
function toggleExpand() {
function handleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -66,7 +66,7 @@ async function handleDelete(row: SystemDeptApi.Dept) {
try {
await deleteDept(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -83,7 +83,7 @@ async function handleDeleteBatch() {
await deleteDeptList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -142,7 +142,7 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
@ -157,7 +157,7 @@ onMounted(async () => {
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
onClick: handleExpand,
},
{
label: '批量删除',

View File

@ -34,7 +34,7 @@ const [DataFormModal, dataFormModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -61,9 +61,9 @@ async function handleDelete(row: SystemDictDataApi.DictData) {
duration: 0,
});
try {
await deleteDictData(row.id);
await deleteDictData(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.label]));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -80,7 +80,7 @@ async function handleDeleteBatch() {
await deleteDictDataList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -135,7 +135,7 @@ watch(
() => props.dictType,
() => {
if (props.dictType) {
onRefresh();
handleRefresh();
}
},
);
@ -143,7 +143,7 @@ watch(
<template>
<div class="flex h-full flex-col">
<DataFormModal @success="onRefresh" />
<DataFormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>

View File

@ -32,7 +32,7 @@ const [TypeFormModal, typeFormModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -59,9 +59,9 @@ async function handleDelete(row: SystemDictTypeApi.DictType) {
duration: 0,
});
try {
await deleteDictType(row.id);
await deleteDictType(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -78,7 +78,7 @@ async function handleDeleteBatch() {
await deleteDictTypeList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -134,7 +134,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<div class="h-full">
<TypeFormModal @success="onRefresh" />
<TypeFormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction

View File

@ -49,10 +49,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '日志编号',
minWidth: 100,
},
{
field: 'logType',
title: '操作类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_LOGIN_TYPE },
@ -61,18 +63,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'username',
title: '用户名称',
minWidth: 180,
},
{
field: 'userIp',
title: '登录地址',
minWidth: 180,
},
{
field: 'userAgent',
title: '浏览器',
minWidth: 200,
},
{
field: 'result',
title: '登录结果',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_LOGIN_RESULT },
@ -81,11 +87,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'createTime',
title: '登录日期',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 80,
width: 120,
fixed: 'right',
slots: { default: 'actions' },
},

View File

@ -18,7 +18,7 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -54,6 +54,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -69,7 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction

View File

@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -50,7 +50,7 @@ async function handleDelete(row: SystemNoticeApi.Notice) {
try {
await deleteNotice(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -67,7 +67,7 @@ async function handleDeleteBatch() {
await deleteNoticeList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction

View File

@ -15,12 +15,12 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 查询 IP */
function onQueryIp() {
function handleQueryIp() {
formModalApi.setData(null).open();
}
@ -60,7 +60,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
</template>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: 'IP 查询',
type: 'primary',
icon: ACTION_ICON.SEARCH,
onClick: onQueryIp,
onClick: handleQueryIp,
},
]"
/>

View File

@ -32,13 +32,13 @@ function getLeaderName(userId: number) {
/** 切换树形展开/收缩状态 */
const isExpanded = ref(true);
function toggleExpand() {
function handleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -65,7 +65,7 @@ async function handleDelete(row: SystemDeptApi.Dept) {
try {
await deleteDept(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -81,7 +81,7 @@ async function handleDeleteBatch() {
await deleteDeptList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -140,7 +140,7 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
@ -155,7 +155,7 @@ onMounted(async () => {
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
onClick: handleExpand,
},
{
label: '批量删除',

View File

@ -34,7 +34,7 @@ const [DataFormModal, dataFormModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -60,9 +60,9 @@ async function handleDelete(row: SystemDictDataApi.DictData) {
text: $t('ui.actionMessage.deleting', [row.label]),
});
try {
await deleteDictData(row.id);
await deleteDictData(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.label]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -78,7 +78,7 @@ async function handleDeleteBatch() {
await deleteDictDataList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -133,7 +133,7 @@ watch(
() => props.dictType,
() => {
if (props.dictType) {
onRefresh();
handleRefresh();
}
},
);
@ -141,7 +141,7 @@ watch(
<template>
<div class="flex h-full flex-col">
<DataFormModal @success="onRefresh" />
<DataFormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>

View File

@ -29,7 +29,7 @@ const [TypeFormModal, typeFormModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -57,7 +57,7 @@ async function handleDelete(row: SystemDictTypeApi.DictType) {
try {
await deleteDictType(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -73,7 +73,7 @@ async function handleDeleteBatch() {
await deleteDictTypeList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -129,7 +129,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<div class="h-full">
<TypeFormModal @success="onRefresh" />
<TypeFormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction

View File

@ -1,14 +1,10 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useAccess } from '@vben/access';
import { DICT_TYPE } from '@vben/constants';
import { getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -43,9 +39,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemLoginLogApi.LoginLog>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -92,26 +86,10 @@ export function useGridColumns<T = SystemLoginLogApi.LoginLog>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 120,
align: 'center',
width: 120,
fixed: 'right',
cellRender: {
attrs: {
nameField: 'username',
nameTitle: '登录日志',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'detail',
text: '详情',
show: hasAccessByCodes(['system:login-log:query']),
},
],
},
slots: { default: 'actions' },
},
];
}

View File

@ -1,19 +1,13 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { $t } from '@vben/locales';
import { downloadFileFromBlobPart } from '@vben/utils';
import { ElButton } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
@ -24,40 +18,27 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
async function handleExport() {
const data = await exportLoginLog(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '登录日志.xls', source: data });
}
/** 查看登录日志详情 */
function onDetail(row: SystemLoginLogApi.LoginLog) {
function handleDetail(row: SystemLoginLogApi.LoginLog) {
detailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemLoginLogApi.LoginLog>) {
switch (code) {
case 'detail': {
onDetail(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -73,6 +54,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -88,18 +70,34 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<ElButton
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:login-log:export']"
>
<Download class="mr-2 size-5" />
{{ $t('ui.actionTitle.export') }}
</ElButton>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:login-log:export'],
onClick: handleExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'primary',
link: true,
icon: ACTION_ICON.VIEW,
auth: ['system:login-log:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>

View File

@ -1,11 +1,10 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNoticeApi } from '#/api/system/notice';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps, } from '#/utils';
import { z } from '#/adapter/form';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
@ -21,38 +20,44 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'title',
label: '公告标题',
rules: 'required',
component: 'Input',
rules: 'required',
},
{
fieldName: 'type',
label: '公告类型',
component: 'RadioGroup',
componentProps: {
placeholder: '请输入公告标题',
options: getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: 'required',
},
{
fieldName: 'content',
label: '公告内容',
rules: 'required',
component: 'RichTextarea',
},
{
fieldName: 'type',
label: '公告类型1通知 2公告',
rules: 'required',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE, 'number'),
placeholder: '请选择公告类型1通知 2公告',
},
},
{
fieldName: 'status',
label: '公告状态0正常 1关闭',
rules: 'required',
label: '公告状态',
component: 'RadioGroup',
componentProps: {
options: [],
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
@ -65,45 +70,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '公告标题',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入公告标题',
},
},
{
fieldName: 'content',
label: '公告内容',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入公告内容',
},
},
{
fieldName: 'type',
label: '公告类型1通知 2公告',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE, 'number'),
placeholder: '请选择公告类型1通知 2公告',
},
},
{
fieldName: 'status',
label: '公告状态0正常 1关闭',
label: '公告状态',
component: 'Select',
componentProps: {
allowClear: true,
options: [],
placeholder: '请选择公告状态0正常 1关闭',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择公告状态',
allowClear: true,
},
},
@ -111,28 +88,23 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<SystemNoticeApi.Notice>['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '公告ID',
minWidth: 120,
title: '公告编号',
minWidth: 100,
},
{
field: 'title',
title: '公告标题',
minWidth: 120,
},
{
field: 'content',
title: '公告内容',
minWidth: 120,
minWidth: 200,
},
{
field: 'type',
title: '公告类型1通知 2公告',
minWidth: 120,
title: '公告类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_NOTICE_TYPE },
@ -140,18 +112,22 @@ export function useGridColumns(): VxeTableGridOptions<SystemNoticeApi.Notice>['c
},
{
field: 'status',
title: '公告状态0正常 1关闭',
minWidth: 120,
title: '公告状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
minWidth: 120,
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 200,
width: 220,
fixed: 'right',
slots: { default: 'actions' },
},

View File

@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -49,7 +49,7 @@ async function handleDelete(row: SystemNoticeApi.Notice) {
try {
await deleteNotice(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -65,7 +65,7 @@ async function handleDeleteBatch() {
await deleteNoticeList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@ -130,7 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction