From 58e8fbb9b48286095776ad5e1999e6351c162da2 Mon Sep 17 00:00:00 2001
From: lccsw <805383944@qq.com>
Date: Sat, 29 Nov 2025 09:58:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B6=88=E6=81=AF=E6=8E=A8?=
 =?UTF-8?q?=E9=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/header-notice.vue   | 429 +++++++++---------
 .../user/notice/components/message-notice.vue | 240 +++++-----
 2 files changed, 349 insertions(+), 320 deletions(-)

diff --git a/pingan/src/layout/components/header-notice.vue b/pingan/src/layout/components/header-notice.vue
index 14417f0..e060f83 100644
--- a/pingan/src/layout/components/header-notice.vue
+++ b/pingan/src/layout/components/header-notice.vue
@@ -36,17 +36,17 @@
                 <div class="ele-text-secondary ele-elip">{{ item.c_time }}</div>
               </div>
             </div>
-            <el-divider />
+            <el-divider/>
           </div>
         </div>
         <div v-if="notice.length" class="ele-cell ele-notice-actions">
           <div class="ele-cell-content" @click="clearNotice">清空通知</div>
-          <el-divider direction="vertical" class="line-color-light" />
+          <el-divider direction="vertical" class="line-color-light"/>
           <router-link to="/user/notice?type=notice" class="ele-cell-content">
             查看更多
           </router-link>
         </div>
-        <ele-empty v-if="!notice.length" text="已查看所有通知" />
+        <ele-empty v-if="!notice.length" text="已查看所有通知"/>
       </el-tab-pane>
       <!--
       <el-tab-pane name="letter" :label="letterTitle">
@@ -117,241 +117,242 @@
 </template>
 
 <script>
-  import { pageNotice, setRead } from '@/api/user/notice';
-  // import websocket from '@/utils/websocket';
+import { pageNotice, setRead } from '@/api/user/notice'
+// import websocket from '@/utils/websocket';
 
-  export default {
-    data() {
-      return {
-        // 是否显示
-        visible: false,
-        // 选项卡选中
-        active: 'notice',
-        // 通知数据
-        notice: [],
-        noticeCount: 0,
-        // 私信数据
-        letter: [],
-        letterCount: 0,
-        // 待办数据
-        todo: [],
-        todCount: 0
-      };
-    },
-    mounted() {
-      // 监听 WebSocket 连接状态
-      window.EventBus.$on('ws:connected', (status) => {
-        console.log('WebSocket 连接状态:', status);
-      });
+export default {
+  data() {
+    return {
+      // 是否显示
+      visible: false,
+      // 选项卡选中
+      active: 'notice',
+      // 通知数据
+      notice: [],
+      noticeCount: 0,
+      // 私信数据
+      letter: [],
+      letterCount: 0,
+      // 待办数据
+      todo: [],
+      todCount: 0
+    }
+  },
+  mounted() {
+    // 监听 WebSocket 连接状态
+    window.EventBus.$on('ws:connected', (status) => {
+      console.log('WebSocket 连接状态:', status)
+    })
 
-      // 监听 WebSocket 消息
-      window.EventBus.$on('ws:message', (message) => {
-        console.log('收到 WebSocket 消息:', message);
-        if (message.type === 'notice') {
-          this.notice = [message.data].concat(this.notice);
-          this.noticeCount++;
-          //弹窗通知有新消息
-          this.$notify({
-            title: '消息提醒', // 消息标题
-            message: message.data.content ? message.data.content: '您收到一条新的系统通知，请及时查看', // 消息内容
-            type: 'warning', // 类型：info/success/warning/error
-            duration: 5000, // 5秒后自动关闭，0则不自动关闭
-            position: 'top-left', // 弹窗位置，可选top-left/bottom-left/bottom-right
-            showClose: true, // 显示关闭按钮
-            onClick: () => {}
-          });
-          //提醒声音
-          this.playNotificationSound();
-        }
-      });
+    // 监听 WebSocket 消息
+    window.EventBus.$on('ws:message', (message) => {
+      console.log('收到 WebSocket 消息:', message)
+      if (message.type === 'notice') {
+        this.notice = [message.data].concat(this.notice)
+        this.noticeCount++
+        //弹窗通知有新消息
+        this.$notify({
+          title: '消息提醒', // 消息标题
+          message: message.data.content ? message.data.content : '您收到一条新的系统通知，请及时查看', // 消息内容
+          type: 'warning', // 类型：info/success/warning/error
+          duration: 5000, // 5秒后自动关闭，0则不自动关闭
+          position: 'top-left', // 弹窗位置，可选top-left/bottom-left/bottom-right
+          showClose: true, // 显示关闭按钮
+          onClick: () => {
+          }
+        })
+        //提醒声音
+        this.playNotificationSound()
+      }
+    })
 
-      // 监听 WebSocket 错误
-      window.EventBus.$on('ws:error', (error) => {
-        console.error('WebSocket 错误:', error);
-      });
+    // 监听 WebSocket 错误
+    window.EventBus.$on('ws:error', (error) => {
+      console.error('WebSocket 错误:', error)
+    })
+  },
+  computed: {},
+  created() {
+    this.query()
+  },
+  methods: {
+    // 播放提示音
+    playNotificationSound() {
+      const audio = this.$refs.notificationSound
+      audio.currentTime = 0 // 重置播放位置（支持连续多次播放）
+      audio.play().catch((err) => {
+        console.log('提示音播放失败（浏览器限制）：', err)
+      })
     },
-    computed: {},
-    created() {
-      this.query();
+    /* 查询数据 */
+    query() {
+      // getUnreadNotice()
+      //   .then((result) => {
+      //     this.notice = result.notice;
+      //     this.letter = result.letter;
+      //     this.todo = result.todo;
+      //   })
+      //   .catch((e) => {
+      //     this.$message.error(e.message);
+      //   });
+      pageNotice({ read: 0 }).then((result) => {
+        this.notice = result.list
+        this.noticeCount = result.count
+      })
     },
-    methods: {
-      // 播放提示音
-      playNotificationSound() {
-        const audio = this.$refs.notificationSound;
-        audio.currentTime = 0; // 重置播放位置（支持连续多次播放）
-        audio.play().catch((err) => {
-          console.log("提示音播放失败（浏览器限制）：", err);
-        });
-      },
-      /* 查询数据 */
-      query() {
-        // getUnreadNotice()
-        //   .then((result) => {
-        //     this.notice = result.notice;
-        //     this.letter = result.letter;
-        //     this.todo = result.todo;
-        //   })
-        //   .catch((e) => {
-        //     this.$message.error(e.message);
-        //   });
-        pageNotice({ read: 0 }).then((result) => {
-          this.notice = result.list;
-          this.noticeCount = result.count;
-        });
-      },
-      /* 清空通知 */
-      clearNotice() {
-        setRead({ type: 'all' })
-          .then(() => {
-            this.query();
-          })
-          .catch((e) => {
-            this.$message.error(e.message);
-          });
-      },
-      goDetail(row) {
-        let btn = {
+    /* 清空通知 */
+    clearNotice() {
+      setRead({ type: 'all' })
+        .then(() => {
+          this.query()
+        })
+        .catch((e) => {
+          this.$message.error(e.message)
+        })
+    },
+    goDetail(row) {
+      let btn = {
+        showCancelButton: false,
+        type: 'warning'
+      }
+      if (row.url) {
+        btn = {
+          confirmButtonText: '查看详情',
           showCancelButton: false,
           type: 'warning'
-        };
-        if (row.url) {
-          btn = {
-            confirmButtonText: '查看详情',
-            showCancelButton: false,
-            type: 'warning'
-          };
         }
-        setRead({ ids: [row.id] })
-          .then(() => {
-            this.query();
-            this.$confirm(row.content, '提示', btn)
-              .then(() => {
-                let path = row.url;
-                if (path) {
-                  this.$router.push({
-                    path
-                  });
-                }
-              })
-              .catch(() => {
-                // 取消
-              });
-          })
-          .catch((e) => {
-            this.$message.error(e.message);
-          });
       }
-    },
-    beforeDestroy() {
-      // 组件销毁前移除事件监听
-      window.EventBus.$off('ws:connected');
-      window.EventBus.$off('ws:message');
-      window.EventBus.$off('ws:error');
+      setRead({ ids: [row.id], isRead: 1 })
+        .then(() => {
+          this.query()
+          this.$confirm(row.content, '提示', btn)
+            .then(() => {
+              let path = row.url
+              if (path) {
+                this.$router.push({
+                  path
+                })
+              }
+            })
+            .catch(() => {
+              // 取消
+            })
+        })
+        .catch((e) => {
+          this.$message.error(e.message)
+        })
     }
-  };
+  },
+  beforeDestroy() {
+    // 组件销毁前移除事件监听
+    window.EventBus.$off('ws:connected')
+    window.EventBus.$off('ws:message')
+    window.EventBus.$off('ws:error')
+  }
+}
 </script>
 
 <style lang="scss">
-  .ele-notice-group {
+.ele-notice-group {
+  display: block;
+
+  .el-badge {
+    line-height: 1;
     display: block;
-
-    .el-badge {
-      line-height: 1;
-      display: block;
-    }
   }
+}
 
-  /* 消息通知pop */
-  .ele-notice-pop {
-    padding: 0 !important;
+/* 消息通知pop */
+.ele-notice-pop {
+  padding: 0 !important;
 
-    /* tab */
-    .el-tabs__nav-scroll {
-      text-align: center;
-    }
-
-    .el-tabs__nav {
-      float: none;
-      display: inline-block;
-    }
-
-    .el-tabs__item {
-      height: 44px;
-      line-height: 44px;
-      padding: 0 20px !important;
-    }
-
-    /* 空视图 */
-    .ele-empty {
-      padding: 100px 0;
-    }
-  }
-
-  /* 列表 */
-  .ele-notice-list {
-    padding-top: 8px;
-    max-height: 360px;
-    overflow: auto;
-  }
-
-  .ele-notice-item {
-    .ele-notice-item-wrapper {
-      padding: 12px 15px;
-      transition: background-color 0.2s;
-      cursor: pointer;
-
-      &:hover {
-        background-color: hsla(0, 0%, 60%, 0.05);
-      }
-    }
-
-    .ele-text-secondary {
-      margin-top: 5px;
-      font-size: 13px;
-    }
-
-    .ele-cell-desc {
-      margin-top: 3px !important;
-      font-size: 12px !important;
-    }
-  }
-
-  .ele-notice-item-icon {
-    width: 32px;
-    height: 32px;
-    line-height: 32px !important;
-    color: #fff;
-    font-size: 16px;
-    background-color: #60b2fc;
-    border-radius: 50%;
+  /* tab */
+  .el-tabs__nav-scroll {
     text-align: center;
-
-    &.el-icon-s-check {
-      background-color: #f5686f;
-    }
-
-    &.el-icon-video-camera {
-      background-color: #7cd734;
-    }
-
-    &.el-icon-s-claim {
-      background-color: #faad14;
-    }
-
-    &.el-icon-message-solid {
-      background-color: #2bcacd;
-    }
   }
 
-  /* 操作按钮 */
-  .ele-notice-actions > .ele-cell-content {
-    line-height: 42px;
-    text-align: center;
+  .el-tabs__nav {
+    float: none;
+    display: inline-block;
+  }
+
+  .el-tabs__item {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 20px !important;
+  }
+
+  /* 空视图 */
+  .ele-empty {
+    padding: 100px 0;
+  }
+}
+
+/* 列表 */
+.ele-notice-list {
+  padding-top: 8px;
+  max-height: 360px;
+  overflow: auto;
+}
+
+.ele-notice-item {
+  .ele-notice-item-wrapper {
+    padding: 12px 15px;
+    transition: background-color 0.2s;
     cursor: pointer;
-    color: inherit;
 
     &:hover {
       background-color: hsla(0, 0%, 60%, 0.05);
     }
   }
+
+  .ele-text-secondary {
+    margin-top: 5px;
+    font-size: 13px;
+  }
+
+  .ele-cell-desc {
+    margin-top: 3px !important;
+    font-size: 12px !important;
+  }
+}
+
+.ele-notice-item-icon {
+  width: 32px;
+  height: 32px;
+  line-height: 32px !important;
+  color: #fff;
+  font-size: 16px;
+  background-color: #60b2fc;
+  border-radius: 50%;
+  text-align: center;
+
+  &.el-icon-s-check {
+    background-color: #f5686f;
+  }
+
+  &.el-icon-video-camera {
+    background-color: #7cd734;
+  }
+
+  &.el-icon-s-claim {
+    background-color: #faad14;
+  }
+
+  &.el-icon-message-solid {
+    background-color: #2bcacd;
+  }
+}
+
+/* 操作按钮 */
+.ele-notice-actions > .ele-cell-content {
+  line-height: 42px;
+  text-align: center;
+  cursor: pointer;
+  color: inherit;
+
+  &:hover {
+    background-color: hsla(0, 0%, 60%, 0.05);
+  }
+}
 </style>
diff --git a/pingan/src/views/user/notice/components/message-notice.vue b/pingan/src/views/user/notice/components/message-notice.vue
index 8c91baf..3461d45 100644
--- a/pingan/src/views/user/notice/components/message-notice.vue
+++ b/pingan/src/views/user/notice/components/message-notice.vue
@@ -7,8 +7,11 @@
     tool-class="ele-toolbar-actions"
   >
     <template v-slot:toolbar>
-      <el-button size="small" type="primary" @click="read">
-        批量已读
+      <el-button size="small" type="primary" @click="read(1)">
+        标记已读
+      </el-button>
+      <el-button size="small" type="primary" @click="read(0)">
+        标记未读
       </el-button>
       <!--
       <el-button size="small" type="danger" @click="removeBatch">
@@ -23,6 +26,7 @@
     </template>
     <template v-slot:action="{ row }">
       <el-link
+        v-if="row.url"
         type="primary"
         :underline="false"
         icon="el-icon-view"
@@ -48,111 +52,135 @@
 </template>
 
 <script>
-  // import { pageNotices } from '@/api/user/message';
-  import { pageNotice, setRead } from '@/api/user/notice';
+// import { pageNotices } from '@/api/user/message';
+import { pageNotice, setRead } from '@/api/user/notice'
 
-  export default {
-    data() {
-      return {
-        // 表格列配置
-        columns: [
-          {
-            columnKey: 'selection',
-            type: 'selection',
-            width: 45,
-            align: 'center',
-            fixed: 'left'
-          },
-          {
-            prop: 'content',
-            label: '通知内容',
-            showOverflowTooltip: true,
-            minWidth: 110
-          },
-          {
-            prop: 'c_time',
-            label: '通知时间',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'readCn',
-            label: '状态',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 80,
-            slot: 'readCn'
-          },
-          {
-            columnKey: 'action',
-            label: '操作',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 140,
-            resizable: false,
-            slot: 'action'
-          }
-        ],
-        // 列表选中数据
-        selection: []
-      };
-    },
-    methods: {
-      /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        return pageNotice({ ...where, ...order, page, limit });
-      },
-      /* 刷新表格 */
-      reload(where) {
-        this.$refs.table.reload({ page: 1, where: where });
-      },
-      /* 查看 */
-      view(row) {
-        this.$message.info(row.content);
-      },
-      /* 删除单个 */
-      remove(row) {
-        console.log(row);
-        this.$message.info('点击了删除');
-        this.updateUnReadNum();
-      },
-      /* 批量删除 */
-      removeBatch() {
-        if (!this.selection.length) {
-          this.$message.error('请至少选择一条数据');
-          return;
+export default {
+  data() {
+    return {
+      // 表格列配置
+      columns: [
+        {
+          columnKey: 'selection',
+          type: 'selection',
+          width: 45,
+          align: 'center',
+          fixed: 'left'
+        },
+        {
+          prop: 'content',
+          label: '通知内容',
+          showOverflowTooltip: true,
+          minWidth: 110
+        },
+        {
+          prop: 'c_time',
+          label: '通知时间',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'readCn',
+          label: '状态',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 80,
+          slot: 'readCn'
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 140,
+          resizable: false,
+          slot: 'action'
         }
-        this.$message.info('点击了删除');
-        this.updateUnReadNum();
-      },
-      /* 标记已读 */
-      read() {
-        if (!this.selection.length) {
-          this.$message.error('请至少选择一条数据');
-          return;
-        }
-        let ids = [];
-        this.selection.forEach((d) => {
-          ids.push(d.id);
-        });
-        setRead({ ids: ids })
-          .then((result) => {
-            console.log(result);
-            this.selection.forEach((d) => {
-              d.read = 1;
-              d.readCn = '已读';
-            });
-            this.updateUnReadNum();
-          })
-          .catch((e) => {
-            this.$message.error(e.message);
-          });
-      },
-      /* 触发更新未读数量事件 */
-      updateUnReadNum() {
-        this.$emit('update-data');
-      }
+      ],
+      // 列表选中数据
+      selection: []
     }
-  };
+  },
+  methods: {
+    /* 表格数据源 */
+    datasource({ page, limit, where, order }) {
+      return pageNotice({ ...where, ...order, page, limit })
+    },
+    /* 刷新表格 */
+    reload(where) {
+      this.$refs.table.reload({ page: 1, where: where })
+    },
+    /* 查看 */
+    view(row) {
+      let path = row.url
+      if (path) {
+        this.$router.push({ path })
+      } else {
+        this.$message.info(row.content)
+      }
+      // setRead({ ids: [row.id], isRead: 1 })
+      //   .then(() => {
+      //     if (path) {
+      //       this.$router.push({ path })
+      //     } else {
+      //       this.$message.info(row.content)
+      //     }
+      //   })
+      //   .catch((e) => {
+      //     this.$message.error(e.message)
+      //   })
+    },
+    /* 删除单个 */
+    remove(row) {
+      console.log(row)
+      this.$message.info('点击了删除')
+      this.updateUnReadNum()
+    },
+    /* 批量删除 */
+    removeBatch() {
+      if (!this.selection.length) {
+        this.$message.error('请至少选择一条数据')
+        return
+      }
+      this.$message.info('点击了删除')
+      this.updateUnReadNum()
+    },
+    /* 标记已读 */
+    read(isRead) {
+      if (!this.selection.length) {
+        this.$message.error('请至少选择一条数据')
+        return
+      }
+      let ids = []
+      this.selection.forEach((d) => {
+        ids.push(d.id)
+      })
+      setRead({ ids: ids, isRead: isRead })
+        .then((result) => {
+          console.log(result)
+          if (isRead) {
+            this.selection.forEach((d) => {
+              d.read = 1
+              d.readCn = '已读'
+            })
+          } else {
+            this.selection.forEach((d) => {
+              d.read = 0
+              d.readCn = '未读'
+            })
+          }
+
+          this.updateUnReadNum()
+        })
+        .catch((e) => {
+          this.$message.error(e.message)
+        })
+    },
+    /* 触发更新未读数量事件 */
+    updateUnReadNum() {
+      this.$emit('update-data')
+    }
+  }
+}
 </script>