feat: ✨ 新增通知公告发送ws消息

新增通知公告发送ws消息

src/components/Notice/index.vue

@@ -40,7 +40,7 @@
           </el-tabs>
           <el-divider />
           <div class="flex-x-between">
-            <el-link type="primary" :underline="false">
+            <el-link type="primary" :underline="false" @click="more">
               <span class="text-xs">查看更多</span>
               <el-icon class="text-xs">
                 <ArrowRight />
@@ -66,10 +66,11 @@ import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
 import NoticeAPI from "@/api/notice";
 import socket from "@/api/socket";
 import NoticeModal from "@/components/NoticeModal/index.vue";
+import router from "@/router";
 
 const activeTab = ref(MessageTypeEnum.MESSAGE);
 const messages = ref<any>([]);
-const noticeModalRef = ref(null);
+const noticeModalRef = ref(NoticeModal);
 const offset = ref<Number[]>([-15, 15]);
 
 const getFilteredMessages = (type: MessageTypeEnum) => {
@@ -131,6 +132,14 @@ function readNotice(id: number) {
   noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
 }
 
+/**
+ * 查看更多
+ */
+function more() {
+  //跳转到我的消息页面
+  router.push({ path: "notice/notice" });
+}
+
 /**
  * 全部已读
  */

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -55,7 +55,7 @@ defineOptions({
 });
 
 import path from "path-browserify";
-import { isExternal } from "@/utils/index";
+import { isExternal } from "@/utils";
 import { RouteRecordRaw } from "vue-router";
 
 const props = defineProps({

src/views/dashboard/index.vue

@@ -391,7 +391,6 @@ const getNoticeLevelTag = (type: number) => {
 
 function connectWebSocket() {
   WebSocketManager.getWebSocketClient("/topic/onlineUserCount", (message) => {
-    console.log("收到消息：", message);
     onlineUserCount.value = JSON.parse(message);
   });
 }

src/views/notice/index.vue

@@ -29,8 +29,8 @@
         v-loading="loading"
         :data="pageData"
         highlight-current-row
-        @selection-change="handleSelectionChange"
       >
+        <el-table-column type="index" label="序号" width="60" />
         <el-table-column
           align="center"
           key="title"
@@ -69,7 +69,7 @@
           align="center"
           key="releaseTime"
           label="发布时间"
-          prop="sendTime"
+          prop="releaseTime"
           min-width="100"
         />
         <el-table-column align="center" fixed="right" label="操作" width="220">
@@ -95,20 +95,19 @@
         @pagination="handleQuery()"
       />
     </el-card>
+    <NoticeModal ref="noticeModalRef" />
   </div>
 </template>
 
 <script setup lang="ts">
+import NoticeModal from "@/components/NoticeModal/index.vue";
+
 defineOptions({
   name: "MyNotice",
   inheritAttrs: false,
 });
 
-import NoticeAPI, {
-  NoticePageVO,
-  NoticeForm,
-  NoticePageQuery,
-} from "@/api/notice";
+import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/notice";
 
 const queryFormRef = ref(ElForm);
 const pageData = ref<NoticePageVO[]>([]);
@@ -116,6 +115,7 @@ const pageData = ref<NoticePageVO[]>([]);
 const loading = ref(false);
 const ids = ref<number[]>([]);
 const total = ref(0);
+const noticeModalRef = ref(null);
 
 const queryParams = reactive<NoticePageQuery>({
   pageNum: 1,
@@ -142,85 +142,8 @@ function handleResetQuery() {
   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 = "修改通知公告";
-    NoticeAPI.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) {
-        NoticeAPI.update(id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            handleCloseDialog();
-            handleResetQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        NoticeAPI.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 deleteIds = [id || ids.value].join(",");
-  if (!deleteIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      loading.value = true;
-      NoticeAPI.deleteByIds(deleteIds)
-        .then(() => {
-          ElMessage.success("删除成功");
-          handleResetQuery();
-        })
-        .finally(() => (loading.value = false));
-    },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
+function handleOpenDialog(id: number) {
+  noticeModalRef.value?.open(id);
 }
 
 onMounted(() => {

src/views/system/notice/index.vue

@@ -151,6 +151,14 @@
         />
         <el-table-column align="center" fixed="right" label="操作" width="220">
           <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="examine(scope.row.id)"
+            >
+              查看
+            </el-button>
             <el-button
               v-if="scope.row.releaseStatus != 1"
               v-hasPerm="['system:notice:release']"
@@ -159,7 +167,6 @@
               link
               @click="releaseNotice(scope.row.id)"
             >
-              <i-ep-edit />
               发布
             </el-button>
             <el-button
@@ -170,7 +177,6 @@
               link
               @click="recallNotice(scope.row.id)"
             >
-              <i-ep-edit />
               撤回
             </el-button>
             <el-button
@@ -181,7 +187,6 @@
               link
               @click="handleOpenDialog(scope.row.id)"
             >
-              <i-ep-edit />
               编辑
             </el-button>
             <el-button
@@ -192,7 +197,6 @@
               link
               @click="handleDelete(scope.row.id)"
             >
-              <i-ep-delete />
               删除
             </el-button>
           </template>
@@ -278,10 +282,14 @@
         </div>
       </template>
     </el-dialog>
+
+    <NoticeModal ref="noticeModalRef" />
   </div>
 </template>
 
 <script setup lang="ts">
+import NoticeModal from "@/components/NoticeModal/index.vue";
+
 defineOptions({
   name: "Notice",
   inheritAttrs: false,
@@ -323,11 +331,11 @@ const formData = reactive<NoticeForm>({
   tarType: 0, // 默认目标类型为全体
 });
 
+const noticeModalRef = ref(NoticeModal);
+
 // 通知公告表单校验规则
 const rules = reactive({
   title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
-  // content: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
-  // 写一个content的校验规则，去掉html标签如果为空则提示
   content: [
     {
       required: true,
@@ -372,6 +380,10 @@ function handleSelectionChange(selection: any) {
   ids.value = selection.map((item: any) => item.id);
 }
 
+function examine(id: number) {
+  noticeModalRef.value?.open(id, true);
+}
+
 /** 打开通知公告弹窗 */
 function handleOpenDialog(id?: number) {
   getUserOptions();