站内信模块：我的站内信 vue3

yudao-ui-admin-vue3/src/views/system/notify/my/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：标记已读 -->
+        <XButton type="primary" preIcon="ep:zoom-in" title="标记已读" @click="handleUpdateList" />
+        <!-- 操作：全部已读 -->
+        <XButton type="primary" preIcon="ep:zoom-in" title="全部已读" @click="handleUpdateAll" />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：已读 -->
+        <XTextButton
+          preIcon="ep:view"
+          title="已读"
+          v-hasPermi="['system:notify-message:query']"
+          v-if="!row.readStatus"
+          @click="handleUpdate([row.id])"
+        />
+      </template>
+    </XTable>
+  </ContentWrap>
+</template>
+<script setup lang="ts" name="MyNotifyMessage">
+// 业务相关的 import
+import { allSchemas } from './my.data'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+
+const message = useMessage() // 消息
+
+// 列表相关的变量
+const [registerTable, { reload, getCheckboxRecords }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: NotifyMessageApi.getMyNotifyMessagePage
+})
+
+const handleUpdateList = async () => {
+  const list = getCheckboxRecords()
+  if (list.length === 0) {
+    return
+  }
+  await handleUpdate(list.map((v) => v.id))
+}
+
+// 标记指定 id 已读
+const handleUpdate = async (ids) => {
+  await NotifyMessageApi.updateNotifyMessageRead(ids)
+  message.success('标记已读成功！')
+  reload()
+}
+
+// 标记全部已读
+const handleUpdateAll = async () => {
+  await NotifyMessageApi.updateAllNotifyMessageRead()
+  message.success('全部已读成功！')
+  reload()
+}
+</script>

yudao-ui-admin-vue3/src/views/system/notify/my/my.data.ts

@@ -0,0 +1,58 @@
+import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryTitle: ' ',
+  primaryType: 'checkbox',
+  action: true,
+  actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
+  columns: [
+    {
+      title: '发送人名称',
+      field: 'templateNickname',
+      table: {
+        width: 120
+      }
+    },
+    {
+      title: '发送时间',
+      field: 'createTime',
+      isForm: false,
+      formatter: 'formatDate',
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      },
+      table: {
+        width: 180
+      }
+    },
+    {
+      title: '类型',
+      field: 'templateType',
+      dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+      dictClass: 'number',
+      table: {
+        width: 80
+      }
+    },
+    {
+      title: '内容',
+      field: 'templateContent'
+    },
+    {
+      title: '是否已读',
+      field: 'readStatus',
+      dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
+      dictClass: 'boolean',
+      table: {
+        width: 80
+      },
+      isSearch: true
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)