liulijun
2026-03-20 1c631b345aae30bb6aa7e9dc8d856a0f40d5f1e3
ÏîÄ¿´úÂë/WMS/WMSClient/src/views/Index.vue
@@ -191,12 +191,29 @@
      destroy-on-close
      size="40%"
    >
      <Message :list="messageList"></Message>
      <div style="margin-bottom: 20px;">
        <el-button type="danger" @click="clearAllMessages">全部清除</el-button>
      </div>
      <Message :list="messageList" @delete-message="handleDeleteMessage"></Message>
    </el-drawer>
  </div>
</template>
<style lang="less" scoped>
@import "./index/index.less";
/* ä¸ºæ¶ˆæ¯åˆ—表的drawer添加圆角 */
:deep(.el-drawer__header) {
  padding: 20px;
}
:deep(.el-drawer__body) {
  padding: 0 20px 20px 20px;
}
:deep(.el-drawer) {
  border-radius: 12px 0 0 12px !important;
  overflow: hidden;
}
</style>
<script>
import loading from "@/components/basic/RouterLoading";
@@ -297,7 +314,6 @@
    const theme = ref("blue2");
    const menuOptions = ref([]);
    const permissionInited = ref(false);
    const messageList = reactive([]);
    let _config = getCurrentInstance().appContext.config.globalProperties;
    let router = useRouter();
    const toggleLeft = () => {
@@ -316,7 +332,8 @@
    const handleMessage = (e) => {
      let data = JSON.parse(e.data);
      messageList.push(data);
      // ä½¿ç”¨store的addMessage mutation添加消息
      store.commit('addMessage', data);
      ElNotification({
        title: data.title,
        message: h("i", { style: "color: teal" }, data.message),
@@ -324,24 +341,24 @@
      });
    };
    const createSocket = (url) => {
      // åˆ›å»ºWebSocket连接
      //"ws://127.0.0.1:9295/admin"
      client = new WebSocket(url);
    // const createSocket = (url) => {
    //   // åˆ›å»ºWebSocket连接
    //   //"ws://127.0.0.1:9295/admin"
    //   client = new WebSocket(url);
      client.onopen = function () {
        client.onmessage = handleMessage;
        store.commit("setWebsocket", client);
        console.log("WebSocket è¿žæŽ¥æˆåŠŸ");
      };
    //   client.onopen = function () {
    //     client.onmessage = handleMessage;
    //     store.commit("setWebsocket", client);
    //     console.log("WebSocket è¿žæŽ¥æˆåŠŸ");
    //   };
      client.onclose = function () {
        console.log("WebSocket è¿žæŽ¥å…³é—­");
        setTimeout(createSocket, 10000);
      };
      //监听socket错误信息
      client.onerror = function () {};
    };
    //   client.onclose = function () {
    //     console.log("WebSocket è¿žæŽ¥å…³é—­");
    //     setTimeout(createSocket, 10000);
    //   };
    //   //监听socket错误信息
    //   client.onerror = function () {};
    // };
    const changeTheme = (name) => {
      if (theme.value != name) {
@@ -606,7 +623,7 @@
        }
      }
      createSocket("ws://127.0.0.1:9296/" + _userInfo.userName);
      // createSocket("ws://127.0.0.1:9296/" + _userInfo.userName);
      Object.assign(_config.$tabs, { open: open, close: close });
@@ -626,7 +643,8 @@
        //开启消息推送(main.js中设置是否开启signalR)2022.05.05
        if (_config.$global.signalR) {
          MessageConfig(http, (result) => {
            messageList.unshift(result);
            // ä½¿ç”¨store的addMessage mutation添加消息
            store.commit('addMessage', result);
            //    console.log(result)
          });
        }
@@ -654,6 +672,59 @@
      });
    };
    created();
    // å¤„理删除单条消息
    const handleDeleteMessage = ({ item, index }) => {
      // ä»Žå…¨å±€æ¶ˆæ¯åˆ—表中删除该消息
      if (_config.$global.messageList && Array.isArray(_config.$global.messageList)) {
        _config.$global.messageList = _config.$global.messageList.filter(msg => msg.id !== item.id);
      }
      // ä»Žstore中删除该消息
      if (store) {
        // ä½¿ç”¨mutation删除单个消息
        store.commit('removeMessage', item.id);
      }
      // å°†åˆ é™¤çš„æ¶ˆæ¯ID添加到messageDeleted数组,用于通知组件重置定时器
      if (_config.$global.messageDeleted && Array.isArray(_config.$global.messageDeleted)) {
        _config.$global.messageDeleted.push(item.id);
      }
      // æ˜¾ç¤ºæˆåŠŸæç¤º
      _config.$message.success('消息已删除');
      // å¼ºåˆ¶ç»„件更新,确保消息列表立即刷新
      proxy.$nextTick(() => {
        // è§¦å‘重渲染
        _config.$forceUpdate && _config.$forceUpdate();
      });
    };
    // æ¸…理全部消息
    const clearAllMessages = () => {
      // èŽ·å–æ‰€æœ‰å½“å‰æ¶ˆæ¯çš„ID,用于重置定时器
      const messageIds = _config.$global.messageList.map(msg => msg.id);
      // å…ˆæ¸…空store中的消息列表
      store.commit('clearMessages');
      // ç„¶åŽæ¸…空全局消息列表,使用重新赋值的方式确保响应式更新
      _config.$global.messageList = [];
      // å°†æ‰€æœ‰åˆ é™¤çš„æ¶ˆæ¯ID添加到messageDeleted数组,用于通知组件重置定时器
      if (_config.$global.messageDeleted && Array.isArray(_config.$global.messageDeleted)) {
        _config.$global.messageDeleted.push(...messageIds);
      }
      // æ˜¾ç¤ºæˆåŠŸæç¤º
      _config.$message.success('消息已全部清除');
      // å¼ºåˆ¶ç»„件更新,确保消息列表立即刷新
      proxy.$nextTick(() => {
        // è§¦å‘重渲染
        _config.$forceUpdate && _config.$forceUpdate();
      });
    };
    return {
      menuWidth,
      isCollapse,
@@ -681,12 +752,17 @@
      to,
      toggleLeft,
      messageModel,
      messageList,
      // ä»Žå…¨å±€å¯¹è±¡ä¸­èŽ·å–æ¶ˆæ¯åˆ—è¡¨
      get messageList() {
        return _config.$global.messageList;
      },
      contextMenuVisible,
      visibleItem,
      closeTabsMenu,
      closeTabs,
      currentMenuId,
      clearAllMessages,
      handleDeleteMessage,
    };
  },
  /**