JPwise-Web 故障排除文档 - Claude Code

💡 常见问题

Q: 弹窗打不开？
A: 检查 TmplCode 或 flowId 参数是否正确

Q: 表单数据不更新？
A: 使用 setFormData() 而不是直接赋值

Q: 权限控制无效？
A: 检查权限码，使用 hasFormP() 或 hasBtnP()

Q: 枚举不显示？
A: 检查 enumCode 和 enumFormat 配置

Q: API 接口调用失败？
A: 确认接口路径和权限，检查控制台网络错误

Q: 列表数据不刷新？
A: 调用 refresh() 或 getList() 方法重新加载

Q: 表单验证不生效？
A: 检查 rules 配置，确保字段名称匹配

Q: 组件样式异常？
A: 检查 CSS 作用域和权重，确认引入顺序

🚨 TOP 5 常见错误

1. 弹窗无法打开 ⭐⭐⭐⭐⭐

症状：openWindow 调用后弹窗不显示

原因 & 解决：

// ❌ 错误：TmplCode 为空或错误
openWindow({
  data: { TmplCode: "", formType: 1 }
});

// ✅ 正确：确保 TmplCode 有效
openWindow({
  url: "views/basic/dynamicModel/list/Form",
  data: { 
    TmplCode: "正确的功能设计ID",
    formType: 2,  // 使用配置模式
    id: "数据ID"  // 编辑时需要
  },
  onDestroy: { confirm: () => this.refresh() }
});

调试：console.log('TmplCode:', data.TmplCode) 检查控制台是否有404错误

2. 表单数据不更新 ⭐⭐⭐⭐⭐

症状：直接赋值 formData.field = "value" 不生效

// ❌ 错误方式
formData.NAME = "新名称";

// ✅ 正确方式  
setFormData("NAME", "新名称");
setShowOrHide("FIELD_NAME", true);   // 显示/隐藏
setRequired("FIELD_NAME", true);     // 设置必填

3. 权限检查无效 ⭐⭐⭐⭐

症状：hasP 或 hasFormP 返回 false

// 调试步骤
console.log('权限码:', 'FIELD_CODE');
console.log('用户信息:', userState.userInfo);

// 正确使用
if (this.jnpf.hasFormP('FIELD_CODE')) {
  setShowOrHide("FIELD_NAME", true);
}

4. 枚举不显示 ⭐⭐⭐

症状：显示编码而不是文本

// 检查枚举码配置
enumCode: "STATUS,TYPE"  // 确保正确

// 表格中使用
:formatter="jnpf.tableDicFormat"

// 手动转换
this.jnpf.getEnumText(value, enumList)

5. API 接口 404 ⭐⭐⭐

检查清单：

• [ ] apiUrl: "correct/module/method" 路径正确
• [ ] import { doGet, doPost } from '@/api/basic' 导入正确
• [ ] 后端接口已配置且有权限

🔧 快速调试命令

控制台调试

// 表单调试
console.log('formData:', formData);
console.log('userState:', userState);
console.log('flowTaskInfo:', flowTaskInfo);

// 列表调试
console.log('list:', this.list);
console.log('query:', this.query);

// 权限调试  
console.log('buttonAuthList:', this.buttonAuthList);

网络调试

• F12 → Network 查看API请求状态
• 检查请求参数和响应数据
• 确认接口调用时序

⚡ 性能问题

表格性能优化

// 大数据量表格
<JNPF-table 
  :data="tableData"
  virtual-scroll    // 启用虚拟滚动
  :item-size="48" />

// 分页优化
listQuery: {
  pageSize: 20  // 适当的分页大小
}

表单性能优化

// 使用 v-show 替代 v-if（频繁切换）
<el-form-item v-show="showField" label="字段">

// 延迟加载选项
async loadOptions() {
  if (!this.optionsLoaded) {
    this.options = await api.getOptions();
    this.optionsLoaded = true;
  }
}

🌐 兼容性问题

IE 兼容性

// CSS 兼容写法
.flex-container {
  display: -webkit-box;
  display: -ms-flexbox; 
  display: flex;
}

// JS 兼容写法
methods: {
  handleClick: function() {  // 避免箭头函数
    // ...
  }
}

移动端适配

@media (max-width: 768px) {
  .jnpf-table { font-size: 12px; }
}

🆘 问题自检清单

开发中检查

• [ ] 控制台是否有错误
• [ ] 网络请求是否正常
• [ ] 数据格式是否正确
• [ ] 权限验证是否通过

部署前检查

• [ ] npm run lint 通过
• [ ] 功能是否完整实现
• [ ] 异常情况是否处理

🔥 紧急处理

生产环境问题

1. 立即回滚到上个稳定版本
2. 收集信息：错误日志、用户反馈
3. 快速定位问题代码
4. 制作补丁并测试验证

数据问题

1. 停止操作避免损失扩大
2. 检查备份数据完整性
3. 联系DBA协助恢复

---

故障排除核心：常见问题 + 快速调试 + 应急处理