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

apps/web-antd/src/views/system/area/index.vue

@@ -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

apps/web-antd/src/views/system/dept/index.vue

@@ -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: '批量删除',

apps/web-antd/src/views/system/dict/modules/data-grid.vue

@@ -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>

apps/web-antd/src/views/system/dict/modules/type-grid.vue

@@ -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

apps/web-antd/src/views/system/loginlog/data.ts

@@ -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' },
     },

apps/web-antd/src/views/system/loginlog/index.vue

@@ -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

apps/web-antd/src/views/system/notice/index.vue

@@ -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

apps/web-ele/src/views/system/area/index.vue

@@ -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,
             },
           ]"
         />

apps/web-ele/src/views/system/dept/index.vue

@@ -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: '批量删除',

apps/web-ele/src/views/system/dict/modules/data-grid.vue

@@ -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>

apps/web-ele/src/views/system/dict/modules/type-grid.vue

@@ -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

apps/web-ele/src/views/system/loginlog/data.ts

@@ -1,14 +1,10 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 
-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>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -92,26 +86,10 @@ export function useGridColumns<T = SystemLoginLogApi.LoginLog>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 120,
+      width: 120,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'username',
-          nameTitle: '登录日志',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            text: '详情',
-            show: hasAccessByCodes(['system:login-log:query']),
-          },
-        ],
-      },
     },
   ];
 }

apps/web-ele/src/views/system/loginlog/index.vue

@@ -1,19 +1,13 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-
-import { 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
+        <TableAction
-          type="primary"
+          :actions="[
-          class="ml-2"
+            {
-          @click="onExport"
+              label: $t('ui.actionTitle.export'),
-          v-access:code="['system:login-log:export']"
+              type: 'primary',
-        >
+              icon: ACTION_ICON.DOWNLOAD,
-          <Download class="mr-2 size-5" />
+              auth: ['system:login-log:export'],
-          {{ $t('ui.actionTitle.export') }}
+              onClick: handleExport,
-        </ElButton>
+            },
+          ]"
+        />
+      </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>

apps/web-ele/src/views/system/notice/data.ts

@@ -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关闭）',
+      label: '公告状态',
-      rules: 'required',
       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: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        options: [],
+        placeholder: '请选择公告状态',
-        placeholder: '请选择公告状态（0正常 1关闭）',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
         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',
+      title: '公告编号',
-      minWidth: 120,
+      minWidth: 100,
     },
     {
       field: 'title',
       title: '公告标题',
-      minWidth: 120,
+      minWidth: 200,
-    },
-    {
-      field: 'content',
-      title: '公告内容',
-      minWidth: 120,
     },
     {
       field: 'type',
-      title: '公告类型（1通知 2公告）',
+      title: '公告类型',
-      minWidth: 120,
+      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关闭）',
+      title: '公告状态',
-      minWidth: 120,
+      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' },
     },

apps/web-ele/src/views/system/notice/index.vue

@@ -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