feat: websocket前端代码部分

还在完善websocket的前端通知代码部分。以及在思考怎么跟后端的用户状态表关联问题

src/api/notice-status.ts

@@ -64,10 +64,32 @@ class NoticeStatusAPI {
 export default NoticeStatusAPI;
 
 /** 用户公告状态分页查询参数 */
-export interface NoticeStatusPageQuery extends PageQuery {}
+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 {}
+export interface NoticeStatusPageVO {
+  /** id */
+  id?: bigint;
+  /** 公共通知id */
+  noticeId?: bigint;
+  /** 用户id */
+  userId?: number;
+  /** 读取状态，0未读，1已读取 */
+  readStatus?: bigint;
+  /** 用户阅读时间 */
+  readTiem?: Date;
+}

src/layout/components/NavBar/components/NavbarAction.vue

@@ -150,24 +150,24 @@ const messages = ref([
     title: "重要提醒：请定期更改您的密码以保证账户安全。",
     type: MessageTypeEnum.MESSAGE,
   },
-  {
+  // {
-    id: 4,
+  //   id: 4,
-    title: "通知：您有一条未读的系统消息，请及时查看。",
+  //   title: "通知：您有一条未读的系统消息，请及时查看。",
-    type: MessageTypeEnum.NOTICE,
+  //   type: MessageTypeEnum.NOTICE,
-  },
+  // },
-  {
+  // {
-    id: 5,
+  //   id: 5,
-    title: "新订单通知：您有一笔新的订单需要处理。",
+  //   title: "新订单通知：您有一笔新的订单需要处理。",
-    type: MessageTypeEnum.NOTICE,
+  //   type: MessageTypeEnum.NOTICE,
-  },
+  // },
-  {
+  // {
-    id: 6,
+  //   id: 6,
-    title: "审核提醒：您的审核请求已被批准。",
+  //   title: "审核提醒：您的审核请求已被批准。",
-    type: MessageTypeEnum.NOTICE,
+  //   type: MessageTypeEnum.NOTICE,
-  },
+  // },
-  { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
+  // { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
-  { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
+  // { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
-  { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
+  // { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
 ]);
 
 const getFilteredMessages = (type: MessageTypeEnum) => {
@@ -212,19 +212,30 @@ function connectWebSocket() {
     onConnect: () => {
       console.log("连接成功");
       isConnected.value = true;
-      messages.value.push({
-        sender: "Server",
-        content: "Websocket 已连接",
-        type: "tip",
-      });
-      // 订阅 /topic/chat 主题
-      stompClient.subscribe("/topic/chat", (res) => {
-        debugger;
-        console.log("收到消息：" + res.body);
       // messages.value.push({
       //   sender: "Server",
-        //   content: res.body,
+      //   content: "Websocket 已连接",
+      //   type: "tip",
       // });
+      // 订阅 /topic/chat 主题
+      while (messages.value.length > 3) {
+        messages.value.shift();
+      }
+      stompClient.subscribe("/topic/chat", (res) => {
+        console.log("收到消息：" + res.body);
+        const message = JSON.parse(res.body);
+        console.log("当前有：" + message.id);
+        console.log("数组已更新，强制重新渲染");
+        messages.value.push({
+          id: message.id,
+          title: message.title,
+          type: MessageTypeEnum.MESSAGE,
+        });
+        while (messages.value.length > 3) {
+          messages.value.shift();
+        }
+        console.log("当前还有：" + messages.value);
+        nextTick(async () => {});
       });
     },
     onStompError: (frame) => {
@@ -233,11 +244,11 @@ function connectWebSocket() {
     },
     onDisconnect: () => {
       isConnected.value = false;
-      messages.value.push({
+      // messages.value.push({
-        sender: "Server",
+      //   sender: "Server",
-        content: "Websocket 已断开",
+      //   content: "Websocket 已断开",
-        type: "tip",
+      //   type: "tip",
-      });
+      // });
     },
   });
 

src/views/system/notice-status/index.vue

@@ -2,6 +2,48 @@
   <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 />
@@ -45,6 +87,31 @@
         @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
@@ -113,7 +180,7 @@ import NoticeStatusAPI, {
   NoticeStatusPageVO,
   NoticeStatusForm,
   NoticeStatusPageQuery,
-} from "@/api/noticeStatus";
+} from "@/api/notice-status";
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);

src/views/system/notice/index.vue

@@ -34,32 +34,40 @@
             @keyup.enter="handleQuery()"
           />
         </el-form-item>
-        <el-form-item label="优先级(0-低 1-中 2-高)" prop="priority">
+        <el-form-item label="优先级" prop="priority">
-          <el-input
+          <el-select
             v-model="queryParams.priority"
-            placeholder="优先级(0-低 1-中 2-高)"
+            class="!w-[100px]"
             clearable
-            @keyup.enter="handleQuery()"
+            placeholder="全部"
-          />
-        </el-form-item>
-        <el-form-item label="目标类型(0-全体 1-指定)" prop="tarType">
-          <el-input
-            v-model="queryParams.tarType"
-            placeholder="目标类型(0-全体 1-指定)"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item
-          label="发布状态(0-未发布 1已发布 2已撤回)"
-          prop="sendStatus"
           >
-          <el-input
+            <el-option :value="0" label="低" />
-            v-model="queryParams.sendStatus"
+            <el-option :value="1" label="中" />
-            placeholder="发布状态(0-未发布 1已发布 2已撤回)"
+            <el-option :value="2" label="高" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="目标类型" prop="tarType">
+          <el-select
+            v-model="queryParams.tarType"
+            class="!w-[100px]"
             clearable
-            @keyup.enter="handleQuery()"
+            placeholder="全部"
-          />
+          >
+            <el-option :value="0" label="全体" />
+            <el-option :value="1" label="指定" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发布状态" prop="sendStatus">
+          <el-select
+            v-model="queryParams.sendStatus"
+            class="!w-[100px]"
+            clearable
+            placeholder="全部"
+          >
+            <el-option :value="0" label="未发布" />
+            <el-option :value="1" label="已发布" />
+            <el-option :value="2" label="已撤回" />
+          </el-select>
         </el-form-item>
         <el-form-item label="发布时间" prop="sendTime">
           <el-date-picker
@@ -120,78 +128,117 @@
         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
+          align="center"
+          key="id"
+          label="id"
+          prop="id"
+          min-width="100"
+        />
+        <el-table-column
+          align="center"
           key="title"
           label="通知标题"
           prop="title"
-          min-width="100"
+          min-width="150"
         />
         <el-table-column
+          align="center"
           key="content"
           label="通知内容"
           prop="content"
-          min-width="100"
+          min-width="150"
         />
         <el-table-column
+          align="center"
           key="noticeType"
           label="通知类型"
           prop="noticeType"
-          min-width="100"
+          min-width="150"
         />
         <el-table-column
+          align="center"
           key="releaseBy"
           label="发布人"
           prop="releaseBy"
           min-width="100"
         />
         <el-table-column
+          align="center"
           key="priority"
-          label="优先级(0-低 1-中 2-高)"
+          label="优先级"
           prop="priority"
           min-width="100"
-        />
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.priority == 0" type="danger">低</el-tag>
+            <el-tag v-if="scope.row.priority == 1" type="success">中</el-tag>
+            <el-tag v-if="scope.row.priority == 2" type="warning">高</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
+          align="center"
           key="tarType"
-          label="目标类型(0-全体 1-指定)"
+          label="目标类型"
           prop="tarType"
           min-width="100"
-        />
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.tarType == 0" type="warning">全体</el-tag>
+            <el-tag v-if="scope.row.tarType == 1" type="success">指定</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
+          align="center"
           key="sendStatus"
-          label="发布状态(0-未发布 1已发布 2已撤回)"
+          label="发布状态"
           prop="sendStatus"
           min-width="100"
-        />
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.sendStatus == 0" type="warning">
+              未发布
+            </el-tag>
+            <el-tag v-if="scope.row.sendStatus == 1" type="success">
+              已发布
+            </el-tag>
+            <el-tag v-if="scope.row.sendStatus == 2" type="primary">
+              已撤回
+            </el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
+          align="center"
           key="sendTime"
           label="发布时间"
           prop="sendTime"
           min-width="100"
         />
         <el-table-column
+          align="center"
           key="recallTime"
           label="撤回时间"
           prop="recallTime"
           min-width="100"
         />
         <el-table-column
+          align="center"
           key="createTime"
           label="创建时间"
           prop="createTime"
           min-width="100"
         />
         <el-table-column
+          align="center"
           key="updateTime"
           label="更新时间"
           prop="updateTime"
           min-width="100"
         />
-        <el-table-column fixed="right" label="操作" width="220">
+        <el-table-column align="center" fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
               v-hasPerm="['system:notice:edit']"
@@ -264,42 +311,57 @@
             @keyup.enter="handleQuery()"
           />
         </el-form-item>
-        <el-form-item label="发布人" prop="releaseBy">
+        <!--        <el-form-item label="发布人" prop="releaseBy">-->
-          <el-input
+        <!--          <el-input-->
-            v-model="formData.releaseBy"
+        <!--            v-model="formData.releaseBy"-->
-            placeholder="发布人"
+        <!--            placeholder="发布人"-->
-            clearable
+        <!--            clearable-->
-            @keyup.enter="handleQuery()"
+        <!--            @keyup.enter="handleQuery()"-->
-          />
+        <!--          />-->
+        <!--        </el-form-item>-->
+        <el-form-item label="优先级" prop="priority">
+          <!--          <el-input-->
+          <!--            v-model="formData.priority"-->
+          <!--            placeholder="优先级(0-低 1-中 2-高)"-->
+          <!--            clearable-->
+          <!--            @keyup.enter="handleQuery()"-->
+          <!--          />-->
+          <el-radio-group v-model="formData.priority">
+            <el-radio :value="0">低</el-radio>
+            <el-radio :value="1">中</el-radio>
+            <el-radio :value="2">高</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="优先级(0-低 1-中 2-高)" prop="priority">
+        <el-form-item label="目标类型" prop="tarType">
-          <el-input
+          <!--          <el-input-->
-            v-model="formData.priority"
+          <!--            v-model="formData.tarType"-->
-            placeholder="优先级(0-低 1-中 2-高)"
+          <!--            placeholder="目标类型(0-全体 1-指定)"-->
-            clearable
+          <!--            clearable-->
-            @keyup.enter="handleQuery()"
+          <!--            @keyup.enter="handleQuery()"-->
-          />
+          <!--          />-->
+          <el-radio-group v-model="formData.tarType">
+            <el-radio :value="0">全体</el-radio>
+            <el-radio :value="1">指定</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="目标类型(0-全体 1-指定)" prop="tarType">
+        <el-form-item label="发布状态" prop="sendStatus">
-          <el-input
+          <!--          <el-input-->
-            v-model="formData.tarType"
+          <!--            v-model="formData.sendStatus"-->
-            placeholder="目标类型(0-全体 1-指定)"
+          <!--            placeholder="发布状态(0-未发布 1已发布 2已撤回)"-->
-            clearable
+          <!--            clearable-->
-            @keyup.enter="handleQuery()"
+          <!--            @keyup.enter="handleQuery()"-->
-          />
+          <!--          />-->
+          <el-radio-group v-model="formData.sendStatus">
+            <el-radio :value="0">未发布</el-radio>
+            <el-radio :value="1">已发布</el-radio>
+            <el-radio :value="2">已撤回</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item
-          label="发布状态(0-未发布 1已发布 2已撤回)"
+          v-if="formData.sendStatus === 1"
-          prop="sendStatus"
+          label="发布时间"
+          prop="sendTime"
         >
-          <el-input
-            v-model="formData.sendStatus"
-            placeholder="发布状态(0-未发布 1已发布 2已撤回)"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="发布时间" prop="sendTime">
           <el-date-picker
             v-model="formData.sendTime"
             type="datetime"
@@ -307,7 +369,11 @@
             value-format="YYYY-MM-DD HH:mm:ss"
           />
         </el-form-item>
-        <el-form-item label="撤回时间" prop="recallTime">
+        <el-form-item
+          v-if="formData.sendStatus === 2"
+          label="撤回时间"
+          prop="recallTime"
+        >
           <el-date-picker
             v-model="formData.recallTime"
             type="datetime"
@@ -360,13 +426,17 @@ const dialog = reactive({
 });
 
 // 通知公告表单数据
-const formData = reactive<NoticeForm>({});
+const formData = reactive<NoticeForm>({
+  sendStatus: 0, // 默认状态为未发布
+  priority: 0, // 默认优先级为低
+  tarType: 0, // 默认目标类型为全体
+});
 
 // 通知公告表单校验规则
 const rules = reactive({
   title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
   content: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
-  releaseBy: [{ required: true, message: "请输入发布人", trigger: "blur" }],
+  // releaseBy: [{ required: true, message: "请输入发布人", trigger: "blur" }],
   sendTime: [{ required: true, message: "请输入发布时间", trigger: "blur" }],
   recallTime: [{ required: true, message: "请输入撤回时间", trigger: "blur" }],
 });