全局禁用对话框点击遮罩层关闭

ruoyi-fastapi-frontend/src/main.js

@@ -76,6 +76,19 @@ Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
 
+// 全局设置 el-dialog 默认不允许点击遮罩层关闭
+// 解决所有对话框点击外部区域会关闭的问题
+Vue.component('el-dialog', {
+  ...Element.Dialog,
+  props: {
+    ...Element.Dialog.props,
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+
 Vue.config.productionTip = false
 
 new Vue({

对话框点击外部关闭问题修复说明.md

@@ -0,0 +1,87 @@
+# 对话框点击外部关闭问题修复说明
+
+## 问题描述
+
+系统中所有的对话框（el-dialog）都存在一个问题：当用户点击对话框外部的遮罩层区域时，对话框会自动关闭。这会导致用户在填写表单时，如果不小心点击了对话框外部，所有填写的内容都会丢失。
+
+## 问题原因
+
+Element UI 的 `el-dialog` 组件有一个属性 `close-on-click-modal`，其默认值为 `true`。这意味着默认情况下，点击遮罩层（对话框外部区域）会触发对话框关闭。
+
+## 解决方案
+
+### 方案选择
+
+考虑到项目中有大量的对话框（超过20个），如果逐个修改每个对话框添加 `:close-on-click-modal="false"` 属性，工作量大且容易遗漏。因此采用**全局配置方案**。
+
+### 实施步骤
+
+在 `src/main.js` 文件中，添加全局配置来覆盖 Element UI Dialog 组件的默认行为：
+
+```javascript
+// 全局设置 el-dialog 默认不允许点击遮罩层关闭
+// 解决所有对话框点击外部区域会关闭的问题
+Vue.component('el-dialog', {
+  ...Element.Dialog,
+  props: {
+    ...Element.Dialog.props,
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+```
+
+### 修改文件
+
+- `ruoyi-fastapi-frontend/src/main.js`
+
+### 影响范围
+
+此修改会影响整个项目中所有使用 `el-dialog` 的对话框，包括但不限于：
+
+- 入库单管理对话框
+- 样品管理对话框
+- 用户管理对话框
+- 角色管理对话框
+- 菜单管理对话框
+- 测试工单对话框
+- 测试流程对话框
+- 等等...
+
+### 优点
+
+1. **一次修改，全局生效**：只需修改一个文件，所有对话框都会应用新的默认行为
+2. **维护简单**：未来新增的对话框也会自动继承这个配置
+3. **用户体验提升**：避免用户误操作导致数据丢失
+4. **代码简洁**：不需要在每个对话框上重复添加相同的属性
+
+### 特殊情况处理
+
+如果某些对话框确实需要点击外部关闭的功能，可以在该对话框上显式设置：
+
+```vue
+<el-dialog :close-on-click-modal="true" ...>
+  <!-- 对话框内容 -->
+</el-dialog>
+```
+
+## 测试验证
+
+修改后，请测试以下场景：
+
+1. ✅ 打开任意对话框，点击对话框外部区域，对话框不应关闭
+2. ✅ 点击对话框右上角的关闭按钮（X），对话框应正常关闭
+3. ✅ 点击对话框底部的"取消"按钮，对话框应正常关闭
+4. ✅ 点击对话框底部的"确定"按钮，对话框应正常关闭并提交数据
+5. ✅ 按 ESC 键，对话框应正常关闭（如果需要禁用此功能，可设置 `:close-on-press-escape="false"`）
+
+## 日期
+
+修复日期：2025-12-05
+
+## 相关问题
+
+- 入库单详情查看错误（已同时修复）
+- 数据模型字段缺失问题（已同时修复）