From 2e712817a1f7afd872e7edbad7f3657531b6c196 Mon Sep 17 00:00:00 2001
From: risingLee <871066422@qq.com>
Date: Mon, 29 Dec 2025 22:36:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E5=B1=80=E7=A6=81=E7=94=A8=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=A1=86=E7=82=B9=E5=87=BB=E9=81=AE=E7=BD=A9=E5=B1=82?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-fastapi-frontend/src/main.js | 13 +++++
 对话框点击外部关闭问题修复说明.md  | 87 ++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 对话框点击外部关闭问题修复说明.md

diff --git a/ruoyi-fastapi-frontend/src/main.js b/ruoyi-fastapi-frontend/src/main.js
index 13c6cf2..f5bd928 100644
--- a/ruoyi-fastapi-frontend/src/main.js
+++ b/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({
diff --git a/对话框点击外部关闭问题修复说明.md b/对话框点击外部关闭问题修复说明.md
new file mode 100644
index 0000000..997a489
--- /dev/null
+++ b/对话框点击外部关闭问题修复说明.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
+
+## 相关问题
+
+- 入库单详情查看错误（已同时修复）
+- 数据模型字段缺失问题（已同时修复）