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

## 问题描述

系统中所有的对话框（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

## 相关问题

- 入库单详情查看错误（已同时修复）
- 数据模型字段缺失问题（已同时修复）