feat：完善我的站内信 50%（列表界面）

apps/web-antd/src/api/system/notify/message/index.ts

@@ -15,8 +15,8 @@ export namespace SystemNotifyMessageApi {
     templateType: number;
     templateParams: string;
     readStatus: boolean;
-    readTime: string;
+    readTime: Date;
-    createTime: string;
+    createTime: Date;
   }
 }
 
@@ -38,7 +38,9 @@ export function getMyNotifyMessagePage(params: PageParam) {
 
 /** 批量标记已读 */
 export function updateNotifyMessageRead(ids: number[]) {
-  return requestClient.put('/system/notify-message/update-read', { ids });
+  return requestClient.put('/system/notify-message/update-read', {}, {
+    params: { ids },
+  });
 }
 
 /** 标记所有站内信为已读 */

apps/web-antd/src/router/routes/modules/infra.ts

@@ -17,10 +17,9 @@ const routes: RouteRecordRaw[] = [
     path: '/codegen',
     name: 'CodegenEdit',
     meta: {
+      title: '代码生成',
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
-      order: 1000,
-      title: '代码生成',
       hideInMenu: true,
     },
     children: [

apps/web-antd/src/router/routes/modules/system.ts

@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/system/notify-message',
+    component: () => import('#/views/system/notify/my/index.vue'),
+    name: 'MyNotifyMessage',
+    meta: {
+      title: '我的站内信',
+      icon: 'ant-design:message-filled',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes; 

apps/web-antd/src/views/system/notify/my/data.ts

@@ -4,9 +4,6 @@ import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-import { useAccess } from '@vben/access';
-
-const { hasAccessByCodes } = useAccess();
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -16,8 +13,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否已读',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        allowClear: true,
         placeholder: '请选择是否已读',
       },
     },
@@ -38,6 +35,11 @@ export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
+    {
+      title: '',
+      width: 40,
+      type: 'checkbox',
+    },
     {
       field: 'templateNickname',
       title: '发送人',
@@ -94,8 +96,13 @@ export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
         options: [
           {
             code: 'detail',
-            text: '详情',
+            text: '查看',
-            show: hasAccessByCodes(['system:notify-message:query']),
+            show: (row: any) => row.readStatus,
+          },
+          {
+            code: 'read',
+            text: '已读',
+            show: (row: any) => !row.readStatus,
           },
         ],
       },

apps/web-antd/src/views/system/notify/my/index.vue

@@ -33,17 +33,27 @@ function onRefresh() {
 
 /** 查看站内信详情 */
 function onDetail(row: SystemNotifyMessageApi.SystemNotifyMessage) {
-  // 标记已读
-  if (!row.readStatus) {
-    handleReadOne(row.id);
-  }
   detailModalApi.setData(row).open();
 }
 
 /** 标记一条站内信已读 */
-async function handleReadOne(id: number) {
+async function onRead(row: SystemNotifyMessageApi.SystemNotifyMessage) {
-  await updateNotifyMessageRead([id]);
+  message.loading({
+    content: '正在标记已读...',
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  // 执行标记已读操作
+  await updateNotifyMessageRead([row.id]);
+  // 提示成功
+  message.success({
+    content: '标记已读成功',
+    key: 'action_process_msg',
+  });
   onRefresh();
+
+  // 打开详情
+  onDetail(row);
 }
 
 /** 标记选中的站内信为已读 */
@@ -58,42 +68,38 @@ async function onMarkRead() {
   }
 
   const ids = rows.map((row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id);
-  const hideLoading = message.loading({
+  message.loading({
     content: '正在标记已读...',
     duration: 0,
     key: 'action_process_msg',
   });
-
+  // 执行标记已读操作
-  try {
+  await updateNotifyMessageRead(ids);
-    await updateNotifyMessageRead(ids);
+  // 提示成功
-    message.success({
+  message.success({
-      content: '标记已读成功',
+    content: '标记已读成功',
-      key: 'action_process_msg',
+    key: 'action_process_msg',
-    });
+  });
-    onRefresh();
+  await gridApi.grid.setAllCheckboxRow(false);
-  } finally {
+  onRefresh();
-    hideLoading();
-  }
 }
 
 /** 标记所有站内信为已读 */
 async function onMarkAllRead() {
-  const hideLoading = message.loading({
+  message.loading({
     content: '正在标记全部已读...',
     duration: 0,
     key: 'action_process_msg',
   });
-
+  // 执行标记已读操作
-  try {
+  await updateAllNotifyMessageRead();
-    await updateAllNotifyMessageRead();
+  // 提示成功
-    message.success({
+  message.success({
-      content: '全部标记已读成功',
+    content: '全部标记已读成功',
-      key: 'action_process_msg',
+    key: 'action_process_msg',
-    });
+  });
-    onRefresh();
+  await gridApi.grid.setAllCheckboxRow(false);
-  } finally {
+  onRefresh();
-    hideLoading();
-  }
 }
 
 /** 表格操作按钮的回调函数 */
@@ -106,14 +112,13 @@ function onActionClick({
       onDetail(row);
       break;
     }
+    case 'read': {
+      onRead(row);
+      break;
+    }
   }
 }
 
-// 是否允许勾选的过滤函数（只允许未读的消息被选择）
-function checkboxConfig(params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) {
-  return !params.row.readStatus;
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -141,23 +146,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
     checkboxConfig: {
-      checkMethod: checkboxConfig,
+      checkMethod: (params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) => !params.row.readStatus,
+      highlight: true,
     },
   } as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,
 });
 </script>
 <template>
   <Page auto-content-height>
-    <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    <DocAlert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
 
     <DetailModal @success="onRefresh" />
     <Grid table-title="我的站内信">
       <template #toolbar-tools>
-        <Button type="primary" @click="onMarkRead" v-access:code="['system:notify-message:update-read']">
+        <Button type="primary" @click="onMarkRead">
           <MdiCheckboxMarkedCircleOutline />
           标记已读
         </Button>
-        <Button type="primary" class="ml-2" @click="onMarkAllRead" v-access:code="['system:notify-message:update-all-read']">
+        <Button type="primary" class="ml-2" @click="onMarkAllRead">
           <MdiCheckboxMarkedCircleOutline />
           全部已读
         </Button>

apps/web-antd/src/views/system/notify/my/modules/detail.vue

@@ -32,31 +32,15 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="我的站内信">
+  <Modal title="消息详情" :show-cancel-button="false" :show-confirm-button="false">
     <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
+      <Descriptions.Item label="发送人">
-      <Descriptions.Item label="用户类型">
-        <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
-      </Descriptions.Item>
-      <Descriptions.Item label="用户编号">
-        {{ formData?.userId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="模版编号">
-        {{ formData?.templateId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="模板编码">
-        {{ formData?.templateCode }}
-      </Descriptions.Item>
-      <Descriptions.Item label="发送人名称">
         {{ formData?.templateNickname }}
       </Descriptions.Item>
-      <Descriptions.Item label="模版内容">
+      <Descriptions.Item label="发送时间">
-        {{ formData?.templateContent }}
+        {{ formatDateTime(formData?.createTime) }}
       </Descriptions.Item>
-      <Descriptions.Item label="模版参数">
+      <Descriptions.Item label="消息类型">
-        {{ formData?.templateParams }}
-      </Descriptions.Item>
-      <Descriptions.Item label="模版类型">
         <DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
       </Descriptions.Item>
       <Descriptions.Item label="是否已读">
@@ -65,8 +49,8 @@ const [Modal, modalApi] = useVbenModal({
       <Descriptions.Item label="阅读时间">
         {{ formatDateTime(formData?.readTime || '') }}
       </Descriptions.Item>
-      <Descriptions.Item label="创建时间">
+      <Descriptions.Item label="消息内容">
-        {{ formatDateTime(formData?.createTime || '') }}
+        {{ formData?.templateContent }}
       </Descriptions.Item>
     </Descriptions>
   </Modal>