From fdd4b9a4dfcb600e8455c5c402fc6f818b6f1507 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sun, 19 May 2024 22:58:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/system/index.ts            |   1 +
 src/apis/system/message.ts          |  19 ++++
 src/apis/system/type.ts             |  22 +++++
 src/apis/system/user-center.ts      |   2 +-
 src/router/index.ts                 |   6 ++
 src/views/setting/message/index.vue | 140 ++++++++++++++++++++++++++++
 6 files changed, 189 insertions(+), 1 deletion(-)
 create mode 100644 src/apis/system/message.ts
 create mode 100644 src/views/setting/message/index.vue

diff --git a/src/apis/system/index.ts b/src/apis/system/index.ts
index 27d9408..bbf216d 100644
--- a/src/apis/system/index.ts
+++ b/src/apis/system/index.ts
@@ -8,3 +8,4 @@ export * from './file'
 export * from './storage'
 export * from './option'
 export * from './user-center'
+export * from './message'
diff --git a/src/apis/system/message.ts b/src/apis/system/message.ts
new file mode 100644
index 0000000..85bce64
--- /dev/null
+++ b/src/apis/system/message.ts
@@ -0,0 +1,19 @@
+import type * as System from './type'
+import http from '@/utils/http'
+
+const BASE_URL = '/system/message'
+
+/** @desc 查询消息列表 */
+export function listMessage(query: System.MessagePageQuery) {
+  return http.get<PageRes<System.MessageResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 删除消息 */
+export function deleteMessage(ids: string | Array<string>) {
+  return http.del(`${BASE_URL}/${ids}`)
+}
+
+/** @desc 标记已读 */
+export function readMessage(ids: string | Array<string>) {
+  return http.patch(`${BASE_URL}/read`, ids)
+}
diff --git a/src/apis/system/type.ts b/src/apis/system/type.ts
index 68e3f3c..395a9d9 100644
--- a/src/apis/system/type.ts
+++ b/src/apis/system/type.ts
@@ -297,3 +297,25 @@ export interface BindSocialAccountRes {
   source: string
   description: string
 }
+
+/** 系统消息类型 */
+export interface MessageResp {
+  id: string
+  title: string
+  content: string
+  type: number
+  isRead: boolean
+  readTime: string
+  createUserString: string
+  createTime: string
+}
+
+export interface MessageQuery {
+  title?: string
+  type?: number
+  isRead?: boolean
+  sort: Array<string>
+}
+
+export interface MessagePageQuery extends MessageQuery, PageQuery {
+}
diff --git a/src/apis/system/user-center.ts b/src/apis/system/user-center.ts
index 22a65e7..a80e084 100644
--- a/src/apis/system/user-center.ts
+++ b/src/apis/system/user-center.ts
@@ -1,5 +1,5 @@
+import type * as System from './type'
 import http from '@/utils/http'
-import type * as System from '@/apis/system/type'
 
 const BASE_URL = '/system/user'
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 4f813fb..931d223 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -63,6 +63,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'SettingProfile',
         component: () => import('@/views/setting/profile/index.vue'),
         meta: { title: '个人中心', showInTabs: false }
+      },
+      {
+        path: '/setting/message',
+        name: 'SettingMessage',
+        component: () => import('@/views/setting/message/index.vue'),
+        meta: { title: '消息中心', showInTabs: false }
       }
     ]
   }
diff --git a/src/views/setting/message/index.vue b/src/views/setting/message/index.vue
new file mode 100644
index 0000000..eb19d45
--- /dev/null
+++ b/src/views/setting/message/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="消息中心"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size', 'setting']"
+      :disabled-column-keys="['name']"
+      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
+      :selected-keys="selectedKeys"
+      @select-all="selectAll"
+      @select="select"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.title" placeholder="请输入标题" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.isRead"
+          placeholder="请选择状态"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        >
+          <a-option :value="false">未读</a-option>
+          <a-option :value="true">已读</a-option>
+        </a-select>
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button type="primary" status="danger" :disabled="!selectedKeys.length" @click="onDelete">
+          <template #icon><icon-delete /></template>
+          <span>删除</span>
+        </a-button>
+        <a-button type="primary" :disabled="!selectedKeys.length" @click="onRead">
+          <span>标记为已读</span>
+        </a-button>
+        <a-button type="primary" :disabled="selectedKeys.length" @click="onReadAll">全部已读</a-button>
+      </template>
+      <template #title="{ record }">
+        <a-tooltip :content="record.content"><span>{{ record.title }}</span></a-tooltip>
+      </template>
+      <template #isRead="{ record }">
+        <a-tag v-if="record.isRead">已读</a-tag>
+        <a-tag v-else color="arcoblue">未读</a-tag>
+      </template>
+      <template #type="{ record }">
+        <GiCellTag :value="record.type" :dict="message_type" />
+      </template>
+    </GiTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message, Modal } from '@arco-design/web-vue'
+import { type MessageQuery, deleteMessage, listMessage, readMessage } from '@/apis'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { useDict } from '@/hooks/app'
+
+defineOptions({ name: 'SystemMessage' })
+
+const { message_type } = useDict('message_type')
+
+const queryForm = reactive<MessageQuery>({
+  sort: ['createTime,desc']
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  selectedKeys,
+  select,
+  selectAll,
+  search,
+  handleDelete
+} = useTable((page) => listMessage({ ...queryForm, ...page }), { immediate: true })
+
+const columns: TableInstanceColumns[] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
+  },
+  { title: '标题', dataIndex: 'title', slotName: 'title', ellipsis: true, tooltip: true },
+  { title: '状态', dataIndex: 'isRead', slotName: 'isRead', align: 'center', width: 80 },
+  { title: '时间', dataIndex: 'createTime', width: 180 },
+  { title: '类型', dataIndex: 'type', slotName: 'type', width: 180, ellipsis: true, tooltip: true }
+]
+
+// 重置
+const reset = () => {
+  queryForm.title = undefined
+  queryForm.type = undefined
+  queryForm.isRead = undefined
+  search()
+}
+
+// 删除
+const onDelete = () => {
+  if (!selectedKeys.value.length) {
+    return Message.warning('请选择数据')
+  }
+  return handleDelete(() => deleteMessage(selectedKeys.value), { showModal: false })
+}
+
+// 标记为已读
+const onRead = async () => {
+  if (!selectedKeys.value.length) {
+    return Message.warning('请选择数据')
+  }
+  await readMessage(selectedKeys.value)
+  Message.success('操作成功')
+  search()
+}
+
+// 全部已读
+const onReadAll = async () => {
+  Modal.warning({
+    title: '全部已读',
+    content: '确定要标记全部消息为已读吗？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: async () => {
+      await readMessage([])
+      Message.success('操作成功')
+      search()
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>