From 9bb190f224ffc3bd14c346acaf1aae7f2ec7edee Mon Sep 17 00:00:00 2001
From: Theo <971366405@qq.com>
Date: Sun, 8 Sep 2024 02:21:58 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20:construction:=20=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

通知公告临时提交，快结束了，css实在得学一波
---
 src/api/notice-status.ts                   |  95 -------
 src/api/notice.ts                          |  56 +++-
 src/api/{WebSocketManager.ts => socket.ts} |   4 +-
 src/components/Notice/index.vue            | 202 +++++++------
 src/components/NoticeModal/index.vue       |  99 +++++++
 src/enums/MessageTypeEnum.ts               |   2 +-
 src/types/components.d.ts                  |   1 +
 src/views/dashboard/index.vue              |   2 +-
 src/views/system/notice-status/index.vue   | 316 ---------------------
 9 files changed, 275 insertions(+), 502 deletions(-)
 delete mode 100644 src/api/notice-status.ts
 rename src/api/{WebSocketManager.ts => socket.ts} (97%)
 create mode 100644 src/components/NoticeModal/index.vue
 delete mode 100644 src/views/system/notice-status/index.vue

diff --git a/src/api/notice-status.ts b/src/api/notice-status.ts
deleted file mode 100644
index 93873cab..00000000
--- a/src/api/notice-status.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import request from "@/utils/request";
-
-const NOTICESTATUS_BASE_URL = "/api/v1/noticeStatuss";
-
-class NoticeStatusAPI {
-  /** 获取用户公告状态分页数据 */
-  static getPage(queryParams?: NoticeStatusPageQuery) {
-    return request<any, PageResult<NoticeStatusPageVO[]>>({
-      url: `${NOTICESTATUS_BASE_URL}/page`,
-      method: "get",
-      params: queryParams,
-    });
-  }
-
-  /**
-   * 获取用户公告状态表单数据
-   *
-   * @param id NoticeStatusID
-   * @returns NoticeStatus表单数据
-   */
-  static getFormData(id: number) {
-    return request<any, NoticeStatusForm>({
-      url: `${NOTICESTATUS_BASE_URL}/${id}/form`,
-      method: "get",
-    });
-  }
-
-  /** 添加用户公告状态*/
-  static add(data: NoticeStatusForm) {
-    return request({
-      url: `${NOTICESTATUS_BASE_URL}`,
-      method: "post",
-      data: data,
-    });
-  }
-
-  /**
-   * 更新用户公告状态
-   *
-   * @param id NoticeStatusID
-   * @param data NoticeStatus表单数据
-   */
-  static update(id: number, data: NoticeStatusForm) {
-    return request({
-      url: `${NOTICESTATUS_BASE_URL}/${id}`,
-      method: "put",
-      data: data,
-    });
-  }
-
-  /**
-   * 批量删除用户公告状态，多个以英文逗号(,)分割
-   *
-   * @param ids 用户公告状态ID字符串，多个以英文逗号(,)分割
-   */
-  static deleteByIds(ids: string) {
-    return request({
-      url: `${NOTICESTATUS_BASE_URL}/${ids}`,
-      method: "delete",
-    });
-  }
-}
-
-export default NoticeStatusAPI;
-
-/** 用户公告状态分页查询参数 */
-export interface NoticeStatusPageQuery extends PageQuery {
-  /** id */
-  id?: bigint;
-  /** 公共通知id */
-  noticeId?: bigint;
-  /** 用户id */
-  userId?: number;
-  /** 读取状态，0未读，1已读取 */
-  readStatus?: bigint;
-  /** 用户阅读时间 */
-  readTiem?: [string, string];
-}
-
-/** 用户公告状态表单对象 */
-export interface NoticeStatusForm {}
-
-/** 用户公告状态分页对象 */
-export interface NoticeStatusPageVO {
-  /** id */
-  id?: bigint;
-  /** 公共通知id */
-  noticeId?: bigint;
-  /** 用户id */
-  userId?: number;
-  /** 读取状态，0未读，1已读取 */
-  readStatus?: bigint;
-  /** 用户阅读时间 */
-  readTiem?: Date;
-}
diff --git a/src/api/notice.ts b/src/api/notice.ts
index a395fff0..6ccd44b0 100644
--- a/src/api/notice.ts
+++ b/src/api/notice.ts
@@ -83,7 +83,7 @@ class NoticeAPI {
    * @param id 撤回的通知id
    * @returns
    */
-  static recallNotice(id: number) {
+  static recallNotice(id: number): Promise<[]> {
     return request({
       url: `${NOTICE_BASE_URL}/recall/${id}`,
       method: "patch",
@@ -91,15 +91,47 @@ class NoticeAPI {
   }
 
   /**
-   * 获取我的通知公告n条
+   * 获取未读消息
    * @returns 消息
    */
-  static listNotice() {
+  static listUnreadNotice() {
     return request({
-      url: `${NOTICE_BASE_URL}/notice/5`,
+      url: `${NOTICE_BASE_URL}/unread`,
       method: "get",
     });
   }
+
+  /**
+   * 查看通知
+   * @param id
+   */
+  static readNotice(id: number): Promise<NoticeDetailVO> {
+    return request({
+      url: `${NOTICE_BASE_URL}/read/${id}`,
+      method: "PATCH",
+    });
+  }
+
+  /**
+   * 查看通知详情
+   * @param id
+   */
+  static getDetail(id: number): Promise<NoticeDetailVO> {
+    return request({
+      url: `${NOTICE_BASE_URL}/detail/${id}`,
+      method: "get",
+    });
+  }
+
+  /**
+   * 全部已读
+   */
+  static readAllNotice() {
+    return request({
+      url: `${NOTICE_BASE_URL}/readAll`,
+      method: "PATCH",
+    });
+  }
 }
 
 export default NoticeAPI;
@@ -151,3 +183,19 @@ export interface NoticePageVO {
   /** 撤回时间 */
   recallTime?: Date;
 }
+
+export interface NoticeDetailVO {
+  id?: string;
+  /** 通知标题 */
+  title?: string;
+  /** 通知内容 */
+  content?: string;
+  /** 通知类型 */
+  noticeTypeLabel?: number;
+  /** 发布人 */
+  releaseBy?: string;
+  /** 优先级(0-低 1-中 2-高) */
+  priority?: number;
+  /** 发布时间 */
+  releaseTime?: Date;
+}
diff --git a/src/api/WebSocketManager.ts b/src/api/socket.ts
similarity index 97%
rename from src/api/WebSocketManager.ts
rename to src/api/socket.ts
index bc943e37..37038076 100644
--- a/src/api/WebSocketManager.ts
+++ b/src/api/socket.ts
@@ -5,7 +5,7 @@ const MAX_RETRIES = 3; // 最大重试次数
 const RETRY_DELAY_MS = 5000; // 重试延迟时间，单位：毫秒
 const HEARTBEAT_INTERVAL = 30000; // 心跳间隔时间，单位：毫秒
 
-class WebSocketManager {
+class Socket {
   private clients: Map<string, Client> = new Map();
   private retryCountMap: Map<string, number> = new Map();
   private subscriptions: Map<string, ((message: string) => void)[]> = new Map();
@@ -110,4 +110,4 @@ class WebSocketManager {
   }
 }
 
-export default new WebSocketManager();
+export default new Socket();
diff --git a/src/components/Notice/index.vue b/src/components/Notice/index.vue
index 5c6603e9..aa3d68be 100644
--- a/src/components/Notice/index.vue
+++ b/src/components/Notice/index.vue
@@ -1,107 +1,143 @@
 <template>
-  <el-dropdown class="message nav-action-item" trigger="click">
-    <el-badge is-dot>
-      <div class="flex-center h100% p10px">
-        <i-ep-bell />
-      </div>
-    </el-badge>
-    <template #dropdown>
-      <div class="px-5 py-2">
-        <el-tabs v-model="activeTab">
-          <el-tab-pane
-            v-for="(label, key) in MessageTypeLabels"
-            :label="label"
-            :name="key"
-            :key="key"
-          >
-            <div
-              class="w-[380px] py-2"
-              v-for="message in getFilteredMessages(key)"
-              :key="message.id"
-            >
-              <el-link type="primary">
-                <el-text class="w-350px" size="default" truncated>
-                  {{ message.title }}
-                </el-text>
-              </el-link>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-        <el-divider />
-        <div class="flex-x-between">
-          <el-link type="primary" :underline="false">
-            <span class="text-xs">查看更多</span>
-            <el-icon class="text-xs">
-              <ArrowRight />
-            </el-icon>
-          </el-link>
-          <el-link type="primary" :underline="false">
-            <span class="text-xs">全部已读</span>
-          </el-link>
+  <div class="nav-action-item" style="display: flex; justify-content: center">
+    <el-dropdown trigger="hover">
+      <el-badge :is-dot="messages.length > 0" :offset="offset">
+        <div class="flex-center h100% p10px">
+          <i-ep-bell />
         </div>
-      </div>
-    </template>
-  </el-dropdown>
+      </el-badge>
+      <template #dropdown>
+        <div class="px-5 py-2">
+          <el-tabs v-model="activeTab">
+            <el-tab-pane
+              v-for="(label, key) in MessageTypeLabels"
+              :label="label"
+              :name="key"
+              :key="key"
+            >
+              <template v-if="messages.length > 0">
+                <div
+                  class="w-[380px] py-2"
+                  v-for="(item, index) in messages"
+                  :key="index"
+                >
+                  <el-link type="primary" @click="readNotice(item.id)">
+                    <el-badge is-dot />
+                    <el-text class="w-350px" size="default" truncated>
+                      {{ item.title }}
+                    </el-text>
+                  </el-link>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h-150px w-350px">
+                  <el-text class="w-350px" size="default" truncated>
+                    <el-empty :image-size="30" description="暂无消息" />
+                  </el-text>
+                </div>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+          <el-divider />
+          <div class="flex-x-between">
+            <el-link type="primary" :underline="false">
+              <span class="text-xs">查看更多</span>
+              <el-icon class="text-xs">
+                <ArrowRight />
+              </el-icon>
+            </el-link>
+            <el-link
+              v-if="messages.length > 0"
+              type="primary"
+              :underline="false"
+              @click="readAllNotice()"
+            >
+              <span class="text-xs">全部已读</span>
+            </el-link>
+          </div>
+        </div>
+      </template>
+    </el-dropdown>
+    <NoticeModal ref="noticeModalRef" />
+  </div>
 </template>
 <script setup lang="ts">
 import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
 import NoticeAPI from "@/api/notice";
-import { getWebSocketClient, WebSocketService } from "@/api/socket";
-import WebSocketManager from "@/api/WebSocketManager";
+import socket from "@/api/socket";
+import NoticeModal from "@/components/NoticeModal/index.vue";
 
 const activeTab = ref(MessageTypeEnum.MESSAGE);
+const messages = ref<any>([]);
+const noticeModalRef = ref(null);
+const offset = ref<["number", "number"]>([-15, 15] as ["number", "number"]);
 
-const messages = ref([
-  {
-    id: 1,
-    title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  {
-    id: 2,
-    title: "新功能发布：我们的应用程序现在支持多语言功能。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  {
-    id: 3,
-    title: "重要提醒：请定期更改您的密码以保证账户安全。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  // {
-  //   id: 4,
-  //   title: "通知：您有一条未读的系统消息，请及时查看。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // {
-  //   id: 5,
-  //   title: "新订单通知：您有一笔新的订单需要处理。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // {
-  //   id: 6,
-  //   title: "审核提醒：您的审核请求已被批准。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
-  // { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
-  // { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
-]);
 const getFilteredMessages = (type: MessageTypeEnum) => {
   return messages.value.filter((message) => message.type === type);
 };
 
+/**'
+ * 连接WebSocket
+ */
 function connectWebSocket() {
-  WebSocketManager.getWebSocketClient("/user/queue/message", (message) => {
-    console.log("收到消息：", message);
+  socket.getWebSocketClient("/user/queue/message", (message) => {
+    // 这里是不是可以获取到消息之后，直接调用接口获取消息列表呢？？？
+    let parse = JSON.parse(message);
+    // 如果是消息类型
+    if (parse.noticeType === MessageTypeEnum.MESSAGE) {
+      let content = JSON.parse(parse.content);
+      //是发布消息
+      if (content.type === "release") {
+        //获取到id
+        let id = content.id;
+        //确认messages里面是否有这个id
+        let index = messages.value.findIndex((item) => item.id === id);
+        if (index < 0) {
+          let messageContent = {
+            id: id,
+            title: content.title,
+            type: MessageTypeEnum.MESSAGE,
+          };
+          messages.value.unshift(messageContent);
+        }
+      }
+    }
   });
 }
 
+/**
+ * 获取消息列表
+ * @returns
+ */
 function listNotice() {
-  NoticeAPI.listNotice().then((res) => {});
+  NoticeAPI.listUnreadNotice().then((res) => {
+    messages.value = res;
+  });
+}
+
+/**
+ * 阅读通知公告
+ * @param id
+ */
+function readNotice(id: number) {
+  let index = messages.value.findIndex((item) => item.id === id);
+  if (index >= 0) {
+    messages.value.splice(index, 1);
+  }
+  noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
+}
+
+/**
+ * 全部已读
+ */
+function readAllNotice() {
+  NoticeAPI.readAllNotice().then(() => {
+    messages.value = [];
+  });
 }
 
 onMounted(() => {
-  // listNotice();
+  listNotice();
   connectWebSocket();
 });
 </script>
diff --git a/src/components/NoticeModal/index.vue b/src/components/NoticeModal/index.vue
new file mode 100644
index 00000000..62575329
--- /dev/null
+++ b/src/components/NoticeModal/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :show-close="false"
+    append-to-body
+    :fullscreen="fullscreen"
+    style="z-index: revert"
+  >
+    <template #header="{ close }">
+      <div class="my-header">
+        <h3>{{ message.title }}</h3>
+        <div class="icon-content">
+          <el-icon
+            class="icon"
+            @click="
+              () => {
+                fullscreen = !fullscreen;
+              }
+            "
+          >
+            <FullScreen />
+          </el-icon>
+          <el-icon @click="close" class="icon">
+            <Close />
+          </el-icon>
+        </div>
+      </div>
+    </template>
+    <div style="width: auto; text-align: left">
+      {{ message.noticeTypeLabel }} 优先级 {{ message.priority }} 发布人：{{
+        message.releaseBy
+      }}
+      发布时间：{{ message.releaseTime }}
+    </div>
+    <el-divider />
+    <div
+      v-html="message.content"
+      style="width: auto; min-height: 400px; text-align: left"
+    ></div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+/**
+ * 这里可能存在一个问题，因为上面展示方式我是用了v-html，所以这里可能会有xss攻击，后续可以考虑使用其他方式
+ * 或者是用 npm install dompurify 来处理
+ * 示例代码
+ * import DOMPurify from 'dompurify';
+ * const rawHtmlContent = '<p>Some HTML content</p>'; // 这可能来自不可信的源
+ * const safeHtmlContent = DOMPurify.sanitize(rawHtmlContent);
+ */
+import { ref } from "vue";
+import { defineExpose } from "vue";
+import NoticeAPI, { NoticeDetailVO } from "@/api/notice";
+
+const message = ref<NoticeDetailVO>({});
+const visible = ref(false);
+const fullscreen = ref(false);
+const open = (id: number, read: boolean) => {
+  fullscreen.value = false;
+  getNoticeDetail(id, !read);
+};
+
+/**
+ * 获取消息详情
+ * @param id 通知id
+ * @param read 是否是阅读，因为存在管理员查看通知管理中的消息，所以这里需要区分
+ */
+function getNoticeDetail(id: number, read: boolean) {
+  if (read) {
+    NoticeAPI.readNotice(id).then((res) => {
+      visible.value = true;
+      message.value = res;
+    });
+  } else {
+    NoticeAPI.getDetail(id).then((res) => {
+      visible.value = true;
+      message.value = res;
+    });
+  }
+}
+defineExpose({ open });
+</script>
+<style scoped>
+.my-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.my-header .icon-content {
+  display: flex;
+  gap: 20px;
+  justify-content: right;
+}
+
+.icon {
+  cursor: pointer;
+}
+</style>
diff --git a/src/enums/MessageTypeEnum.ts b/src/enums/MessageTypeEnum.ts
index 5dbefb41..071f1b26 100644
--- a/src/enums/MessageTypeEnum.ts
+++ b/src/enums/MessageTypeEnum.ts
@@ -1,7 +1,7 @@
 /* 消息类型枚举 */
 export const enum MessageTypeEnum {
   /* 消息 */
-  MESSAGE = "MESSAGE",
+  MESSAGE = "SYSTEM_MESSAGE",
   /* 通知 */
   NOTICE = "NOTICE",
   /* 待办 */
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index cd71a592..f947408e 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -75,6 +75,7 @@ declare module "vue" {
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
     MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
     Notice: (typeof import("./../components/Notice/index.vue"))["default"];
+    NoticeModal: (typeof import("./../components/NoticeModal/index.vue"))["default"];
     LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     MultiUpload: (typeof import("./../components/Upload/MultiUpload.vue"))["default"];
     NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"];
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 54c72c0a..bfa301c1 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -188,7 +188,7 @@
 </template>
 
 <script setup lang="ts">
-import WebSocketManager from "@/api/WebSocketManager";
+import WebSocketManager from "@/api/socket";
 
 defineOptions({
   name: "Dashboard",
diff --git a/src/views/system/notice-status/index.vue b/src/views/system/notice-status/index.vue
deleted file mode 100644
index 70a6a452..00000000
--- a/src/views/system/notice-status/index.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="search-container">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item label="id" prop="id">
-          <el-input
-            v-model="queryParams.id"
-            placeholder="id"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="公共通知id" prop="noticeId">
-          <el-input
-            v-model="queryParams.noticeId"
-            placeholder="公共通知id"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input
-            v-model="queryParams.userId"
-            placeholder="用户id"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="读取状态，0未读，1已读取" prop="readStatus">
-          <el-input
-            v-model="queryParams.readStatus"
-            placeholder="读取状态，0未读，1已读取"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="用户阅读时间" prop="readTiem">
-          <el-date-picker
-            v-model="queryParams.readTiem"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery()">
-            <i-ep-search />
-            搜索
-          </el-button>
-          <el-button @click="handleResetQuery()">
-            <i-ep-refresh />
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <el-card shadow="never" class="table-container">
-      <template #header>
-        <el-button
-          v-hasPerm="['system:noticeStatus:add']"
-          type="success"
-          @click="handleOpenDialog()"
-        >
-          <i-ep-plus />
-          新增
-        </el-button>
-        <el-button
-          v-hasPerm="['system:noticeStatus:delete']"
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-        >
-          <i-ep-delete />
-          删除
-        </el-button>
-      </template>
-
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        highlight-current-row
-        border
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column key="id" label="id" prop="id" min-width="100" />
-        <el-table-column
-          key="noticeId"
-          label="公共通知id"
-          prop="noticeId"
-          min-width="100"
-        />
-        <el-table-column
-          key="userId"
-          label="用户id"
-          prop="userId"
-          min-width="100"
-        />
-        <el-table-column
-          key="readStatus"
-          label="读取状态，0未读，1已读取"
-          prop="readStatus"
-          min-width="100"
-        />
-        <el-table-column
-          key="readTiem"
-          label="用户阅读时间"
-          prop="readTiem"
-          min-width="100"
-        />
-        <el-table-column fixed="right" label="操作" width="220">
-          <template #default="scope">
-            <el-button
-              v-hasPerm="['system:noticeStatus:edit']"
-              type="primary"
-              size="small"
-              link
-              @click="handleOpenDialog(scope.row.id)"
-            >
-              <i-ep-edit />
-              编辑
-            </el-button>
-            <el-button
-              v-hasPerm="['system:noticeStatus:delete']"
-              type="danger"
-              size="small"
-              link
-              @click="handleDelete(scope.row.id)"
-            >
-              <i-ep-delete />
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="handleQuery()"
-      />
-    </el-card>
-
-    <!-- 用户公告状态表单弹窗 -->
-    <el-dialog
-      v-model="dialog.visible"
-      :title="dialog.title"
-      width="500px"
-      @close="handleCloseDialog"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      />
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmit()">确定</el-button>
-          <el-button @click="handleCloseDialog()">取消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: "NoticeStatus",
-  inheritAttrs: false,
-});
-
-import NoticeStatusAPI, {
-  NoticeStatusPageVO,
-  NoticeStatusForm,
-  NoticeStatusPageQuery,
-} from "@/api/notice-status";
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const loading = ref(false);
-const ids = ref<number[]>([]);
-const total = ref(0);
-
-const queryParams = reactive<NoticeStatusPageQuery>({
-  pageNum: 1,
-  pageSize: 10,
-});
-
-// 用户公告状态表格数据
-const pageData = ref<NoticeStatusPageVO[]>([]);
-
-// 弹窗
-const dialog = reactive({
-  title: "",
-  visible: false,
-});
-
-// 用户公告状态表单数据
-const formData = reactive<NoticeStatusForm>({});
-
-// 用户公告状态表单校验规则
-const rules = reactive({});
-
-/** 查询用户公告状态 */
-function handleQuery() {
-  loading.value = true;
-  NoticeStatusAPI.getPage(queryParams)
-    .then((data) => {
-      pageData.value = data.list;
-      total.value = data.total;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/** 重置用户公告状态查询 */
-function handleResetQuery() {
-  queryFormRef.value!.resetFields();
-  queryParams.pageNum = 1;
-  handleQuery();
-}
-
-/** 行复选框选中记录选中ID集合 */
-function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id);
-}
-
-/** 打开用户公告状态弹窗 */
-function handleOpenDialog(id?: number) {
-  dialog.visible = true;
-  if (id) {
-    dialog.title = "修改用户公告状态";
-    NoticeStatusAPI.getFormData(id).then((data) => {
-      Object.assign(formData, data);
-    });
-  } else {
-    dialog.title = "新增用户公告状态";
-  }
-}
-
-/** 提交用户公告状态表单 */
-function handleSubmit() {
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      loading.value = true;
-      const id = formData.id;
-      if (id) {
-        NoticeStatusAPI.update(id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            handleCloseDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        NoticeStatusAPI.add(formData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            handleCloseDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
-  });
-}
-
-/** 关闭用户公告状态弹窗 */
-function handleCloseDialog() {
-  dialog.visible = false;
-  dataFormRef.value.resetFields();
-  dataFormRef.value.clearValidate();
-  formData.id = undefined;
-}
-
-/** 删除用户公告状态 */
-function handleDelete(id?: number) {
-  const ids = [id || ids.value].join(",");
-  if (!ids) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      loading.value = true;
-      NoticeStatusAPI.deleteByIds(ids)
-        .then(() => {
-          ElMessage.success("删除成功");
-          handleResetQuery();
-        })
-        .finally(() => (loading.value = false));
-    },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>