| | |
| | | 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"; |
| | |
| | | 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 = () => { |
| | |
| | | |
| | | 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), |
| | |
| | | //å¼å¯æ¶æ¯æ¨éï¼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) |
| | | }); |
| | | } |
| | |
| | | }); |
| | | }; |
| | | 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, |
| | |
| | | to, |
| | | toggleLeft, |
| | | messageModel, |
| | | messageList, |
| | | // ä»å
¨å±å¯¹è±¡ä¸è·åæ¶æ¯å表 |
| | | get messageList() { |
| | | return _config.$global.messageList; |
| | | }, |
| | | contextMenuVisible, |
| | | visibleItem, |
| | | closeTabsMenu, |
| | | closeTabs, |
| | | currentMenuId, |
| | | clearAllMessages, |
| | | handleDeleteMessage, |
| | | }; |
| | | }, |
| | | /** |