背景
----
右上角 ElNotification 在仓库作业现场视觉提示太弱,极易被操作员忽略,
待接收的物品就一直在系统里悬着。
改动
----
ElNotification -> ElMessageBox.confirm:
· 屏幕正中 + 灰色半透明遮罩,强制打断注意力;
· 标题「待办通知:借库转交」,内容「您有 X 件物品等待接收确认,请及时处理。」;
· 按钮【去处理】/【稍后处理】;前者 router.push('/operation/records'),
后者仅收起弹窗,不阻断当前工作;
· closeOnClickModal=false(点遮罩不关,避免误触即消失),
但保留 showClose 与 Esc —— 强提醒不等于关不掉,用户始终有明确退出路径。
★ 防叠加(两道,模块级标志 + DOM 探测)
reminderOpen 用**模块级**变量而非组件级:即便组件被重复挂载
(HMR、多 Layout 实例)也能保证同一时刻只有一个提醒弹窗。
另按标题探测屏幕上是否已有同名弹窗,覆盖标志失效的极端情况。
★ 一处必须修正的时序隐患:记录时机
原逻辑是「先写 sessionStorage 已提醒数量,再弹窗」。加了并发防护后,
弹窗可能被跳过(已有弹窗在屏),而数量却已记下 —— 数量不变 → 下次不再弹,
**这条提醒被永久吞掉**。
现改为「先弹,弹成功了才记账」:showReminder() 返回是否真的弹出,
没弹出就不记账,留给下一轮轮询重试。
验证(node 复刻判定链,全场景通过)
3 → 弹;仍 3 → 不弹;弹窗开着时变 4 → 不弹且不记账 →
收起后轮询 4 → 弹;归零 → 清记录;新来 2 → 弹。
弹窗序列 [3,4,2],无重复、无叠加;同一轮内并发两次 check 只弹一次。
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.