213 lines
6.1 KiB
Markdown
213 lines
6.1 KiB
Markdown
---
|
||
name: 验证采购入库按钮修复
|
||
overview: 问题已解决！提供验证步骤和进一步诊断方法，确保采购入库页面的"新增"按钮正常工作。
|
||
todos: []
|
||
isProject: false
|
||
---
|
||
|
||
# 采购入库按钮修复 - 验证和测试计划
|
||
|
||
## 当前状态
|
||
|
||
问题**已经解决**！以下改进已经应用到代码中：
|
||
|
||
### 已完成的修复
|
||
|
||
#### 1. 移除了 `.prevent` 修饰符
|
||
|
||
**文件**: `[mom-backend-ui/src/views/mes/wm/itemrecpt/index.vue:57](mom-backend-ui/src/views/mes/wm/itemrecpt/index.vue)`
|
||
|
||
```vue
|
||
<!-- 修复前 -->
|
||
@click.prevent="handleAdd"
|
||
|
||
<!-- 修复后 -->
|
||
@click="handleAdd"
|
||
```
|
||
|
||
#### 2. 添加了完善的调试日志
|
||
|
||
在 `handleAdd` 方法中添加了详细的日志输出：
|
||
|
||
```javascript
|
||
handleAdd() {
|
||
console.log('[采购入库] handleAdd 方法被调用');
|
||
console.log('[采购入库] 当前状态:', { open, title, optType });
|
||
// ... 业务逻辑
|
||
console.log('[采购入库] Dialog 状态已更新:', { open, title, optType });
|
||
// DOM 检查
|
||
this.$nextTick(() => {
|
||
console.log('[采购入库] Dialog DOM 检查:', {
|
||
dialogExists, overlayExists
|
||
});
|
||
});
|
||
}
|
||
```
|
||
|
||
#### 3. 增强了 Dialog 监控
|
||
|
||
添加了 Dialog 生命周期事件：
|
||
|
||
- `@open` - Dialog 开始打开
|
||
- `@opened` - Dialog 完全打开
|
||
- `@close` - Dialog 关闭
|
||
|
||
#### 4. 创建了诊断工具
|
||
|
||
- `[mom-backend-ui/DEBUGGING-ITEMRECPT.md](mom-backend-ui/DEBUGGING-ITEMRECPT.md)` - 完整诊断指南
|
||
- `[mom-backend-ui/public/debug-itemrecpt.js](mom-backend-ui/public/debug-itemrecpt.js)` - 自动诊断脚本
|
||
- `[CHANGES-ITEMRECPT-BUTTON-FIX.md](CHANGES-ITEMRECPT-BUTTON-FIX.md)` - 变更记录
|
||
|
||
## 验证步骤
|
||
|
||
### 步骤 1: 基本功能测试
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[打开采购入库页面] --> B[打开浏览器控制台F12]
|
||
B --> C[点击新增按钮]
|
||
C --> D{是否有日志输出?}
|
||
D -->|有| E[检查日志内容]
|
||
D -->|无| F[问题1:按钮未响应]
|
||
E --> G{Dialog是否打开?}
|
||
G -->|是| H[修复成功✓]
|
||
G -->|否| I[问题2:Dialog未显示]
|
||
|
||
F --> F1[运行诊断脚本]
|
||
I --> I1[查看DOM检查日志]
|
||
```
|
||
|
||
|
||
|
||
### 步骤 2: 控制台验证
|
||
|
||
1. 打开采购入库页面
|
||
2. 按 F12 打开开发者工具
|
||
3. 进入 Console 标签
|
||
4. 在 Filter 输入框输入: `[采购入库]`
|
||
5. 点击"新增"按钮
|
||
|
||
**预期输出**:
|
||
|
||
```
|
||
[采购入库] handleAdd 方法被调用
|
||
[采购入库] 当前状态: {open: false, title: "", optType: undefined}
|
||
[采购入库] Dialog 状态已更新: {open: true, title: "添加物料入库单", optType: "add"}
|
||
[采购入库] Dialog DOM 检查: {open: true, dialogExists: true, overlayExists: true}
|
||
[采购入库] Dialog 开始打开动画
|
||
[采购入库] Dialog 已完全打开
|
||
```
|
||
|
||
### 步骤 3: 运行自动诊断脚本
|
||
|
||
在浏览器控制台执行：
|
||
|
||
```javascript
|
||
fetch('/debug-itemrecpt.js').then(r => r.text()).then(eval)
|
||
```
|
||
|
||
该脚本会自动检查：
|
||
|
||
- 按钮是否存在于 DOM
|
||
- Vue 应用是否正常
|
||
- 用户权限是否正确
|
||
- Element Plus 是否加载
|
||
- Plus 图标是否正常
|
||
|
||
## 问题排查矩阵
|
||
|
||
|
||
| 现象 | 可能原因 | 解决方案 | 参考文档 |
|
||
| ------------------- | ----------- | --------------------------------- | --------------------------- |
|
||
| 按钮不存在于 DOM | 权限问题 | 检查用户是否有 `mes:wm:itemrecpt:add` 权限 | DEBUGGING-ITEMRECPT.md §问题1 |
|
||
| 无任何日志输出 | 事件未绑定或按钮被禁用 | 检查按钮 disabled 属性和 z-index | DEBUGGING-ITEMRECPT.md §问题2 |
|
||
| 有日志但 Dialog 未显示 | Dialog 渲染问题 | 检查 DOM 和 CSS，查看 DOM 检查日志 | DEBUGGING-ITEMRECPT.md §问题3 |
|
||
| dialogExists: false | Vue 响应式问题 | 检查 open 变量，使用 Vue DevTools | DEBUGGING-ITEMRECPT.md §问题3 |
|
||
| 有错误日志 | 代码异常 | 查看 errorCaptured 日志详情 | 控制台错误栈 |
|
||
|
||
|
||
## 检查用户权限
|
||
|
||
在浏览器控制台执行：
|
||
|
||
```javascript
|
||
// 检查当前用户权限
|
||
window.$store?.getters?.permissions
|
||
|
||
// 或者检查是否包含特定权限
|
||
window.$store?.getters?.permissions?.includes('mes:wm:itemrecpt:add')
|
||
```
|
||
|
||
如果返回 `false` 或权限列表中不包含该权限，需要：
|
||
|
||
1. 联系管理员添加权限
|
||
2. 或者在角色管理中配置权限
|
||
|
||
## 使用 Vue DevTools 调试
|
||
|
||
1. 安装 Vue DevTools 浏览器扩展
|
||
2. 打开 Vue DevTools
|
||
3. 在组件树中找到 `Itemrecpt` 组件
|
||
4. 观察 `data` 中的变量：
|
||
- `open` - Dialog 显示状态
|
||
- `title` - Dialog 标题
|
||
- `form` - 表单数据
|
||
5. 点击按钮后实时查看变量变化
|
||
|
||
## 进一步诊断
|
||
|
||
如果按照上述步骤问题仍未解决，收集以下信息：
|
||
|
||
1. **浏览器信息**
|
||
- 浏览器类型和版本
|
||
- 操作系统版本
|
||
2. **控制台输出**
|
||
- 完整的日志输出（包含 [采购入库] 前缀的）
|
||
- 任何错误信息和堆栈
|
||
3. **权限信息**
|
||
```javascript
|
||
console.log('权限列表:', window.$store?.getters?.permissions)
|
||
```
|
||
4. **DOM 状态**
|
||
```javascript
|
||
console.log('按钮元素:', document.querySelector('button:contains("新增")'))
|
||
console.log('Dialog:', document.querySelector('.el-dialog'))
|
||
```
|
||
5. **Vue DevTools 截图**
|
||
- Itemrecpt 组件的 data 状态
|
||
- open 变量的值
|
||
|
||
## 相关文档
|
||
|
||
- 详细诊断指南: `[DEBUGGING-ITEMRECPT.md](mom-backend-ui/DEBUGGING-ITEMRECPT.md)`
|
||
- 完整变更记录: `[CHANGES-ITEMRECPT-BUTTON-FIX.md](CHANGES-ITEMRECPT-BUTTON-FIX.md)`
|
||
- 诊断脚本: `[debug-itemrecpt.js](mom-backend-ui/public/debug-itemrecpt.js)`
|
||
|
||
## 后续行动
|
||
|
||
如果验证通过：
|
||
|
||
- 无需进一步操作，问题已解决
|
||
|
||
如果验证失败：
|
||
|
||
1. 按照问题排查矩阵定位具体问题
|
||
2. 查阅 DEBUGGING-ITEMRECPT.md 获取详细解决方案
|
||
3. 收集诊断信息寻求技术支持
|
||
|
||
## 总结
|
||
|
||
修复内容：
|
||
|
||
- 移除不必要的 `.prevent` 修饰符
|
||
- 添加 18 个标准化调试日志
|
||
- 增强 Dialog 事件监控
|
||
- 创建完整的诊断工具集
|
||
|
||
验证要点：
|
||
|
||
- 点击按钮后应看到 `[采购入库]` 开头的日志
|
||
- Dialog 应正常打开
|
||
- 所有操作应有清晰的日志记录
|
||
|