📋 本周技术问题总结

🔴 1. 表单校验与用户体验

1.1 表单错误提示不规范

问题：校验失败时缺少页面标识
位置：SupplierForm.vue:375

代码示例：

message.error('[基本信息] 表单校验失败，请检查必填字段')

影响：多表单组件共性问题
改进：统一添加页面标识

1.2 必填规则不一致

问题：各表单必填字段标准不统一
差异对比：
- 供应商表单：6个必填字段
- 采购订单：8个必填字段
影响：影响数据完整性

1.3 表单布局拥挤

问题：8列布局导致长文本字段显示不全
位置：SupplierForm.vue:25-130

🔴 2. 字典数据管理

2.1 字典类型拼写错误

问题：付款协议字典多拼写字母"P"
错误代码：
```
DICT_TYPE.PSI_SUPPIER_PAYMENTAGREEMENT
```
正确应为：PSI_SUPPLIER_PAYMENTAGREEMENT

2.2 字典加载时序问题

问题：表单打开时字典可能未加载完成

解决方案代码：

const dictStore = useDictStoreWithOut()
if (!dictStore.getIsSetDict) {await dictStore.setDictMap()
}

2.3 字典重复使用

问题：结算日和会计期间共用同一字典
位置：SupplierForm.vue:103和115

🔴 3. 数据类型处理

3.1 类型转换问题

问题：后端返回字符串需要转数字

转换代码：

accountDay: supplierData.accountDay ? parseInt(supplierData.accountDay) : undefined

3.2 类型定义松散

问题：混合使用驼峰和下划线命名

示例：

createdBy: undefined as string | undefined,  // 驼峰
createTime: undefined as string | undefined, // 下划线

🔴 4. 子表数据管理

4.1 关联字段不一致

问题：银行账户和联系人使用不同关联字段

代码对比：

:supplier-code="formData.supplierCode"  // 银行账户
:supplier-id="formData.supplierCode"    // 联系人

4.2 查询参数不统一

问题：子表查询使用不同参数名

代码差异：

supplierCode: formData.value.supplierCode  // 银行账户
supplierId: formData.value.supplierCode    // 联系人

4.3 进度跟踪关联混乱

问题：使用ID查询但需显示名称

关键代码：

progressQueryParams.supplierId = formData.value.id || 0

🔴 5. 状态管理

5.1 临时编码生成

问题：新增模式生成临时编码可能不一致

代码：

formData.value.supplierCode = 'TEMP_' + Date.now()

5.2 状态管理复杂

问题：多个异步状态难以维护
涉及状态：
- 表单加载状态
- 弹窗显示状态
- 子表标签状态

🔴 6. 错误处理

6.1 调试代码残留

问题：生产环境保留console.log

示例：

console.log('供应商分类字典:', getIntDictOptions(DICT_TYPE.PSI_SUPPLIER_CATEGORY))

6.2 错误提示不统一

问题：各操作错误处理方式不同
示例对比：
- 银行账户：显示检查数据提示
- 进度跟踪：仅显示操作失败

🔴 7. 提交逻辑

7.1 提交顺序问题

问题：主表提交成功后才处理子表
风险：子表失败导致数据不一致

7.2 子表失败处理不足

问题：子表失败仅警告，主表已提交

现状代码：

try {await SupplierAccountApi.createSupplierAccount(a)
} catch {message.warning('保存失败')
}

📋 本周难点问题详细总结

🔴 1. 表单校验和用户体验问题

1.1 表单校验失败提示不规范

问题描述: 表单校验失败时，错误提示没有显示页面标识
具体位置: SupplierForm.vue:375 行

问题代码:

message.error('[基本信息] 表单校验失败，请检查必填字段')

影响范围: 多个表单组件都存在此问题
解决方案: 按照用户规则，所有错误弹窗都应该显示页面标识

1.2 必填字段校验规则不统一

问题描述: 不同表单的必填字段校验规则不一致
具体表现:
- 供应商表单：name, category, paymentAgreement, accountDay, accountPeriod, status 为必填
- 采购订单表单：supplierId, warehouseId, contractItemId, unitPrice, qty, urgency, trackStatus, status 为必填
影响: 用户体验不一致，容易造成数据不完整

1.3 表单字段布局不合理

问题描述: 表单字段排列过于密集，用户体验不佳
具体位置: SupplierForm.vue:25-130 行
问题表现: 8列布局导致字段过于拥挤，特别是地址、网址等长文本字段

🔴 2. 字典数据配置和加载问题

2.1 字典类型拼写错误

问题描述: 付款协议字典类型拼写错误
具体位置: SupplierForm.vue:60 行和 utils/dict.ts:296 行

问题代码:

DICT_TYPE.PSI_SUPPIER_PAYMENTAGREEMENT  // 多了一个'P'

正确拼写: 应该是 PSI_SUPPLIER_PAYMENTAGREEMENT
影响: 付款协议下拉框无法正确显示选项

2.2 字典数据异步加载时序问题

问题描述: 表单打开时字典数据可能还未完全加载
具体位置: SupplierForm.vue:305-320 行

问题代码:

// 确保字典数据已加载
const dictStore = useDictStoreWithOut()
if (!dictStore.getIsSetDict) {await dictStore.setDictMap()
}

影响: 下拉选择框可能显示为空或加载失败

2.3 字典数据重复使用问题

问题描述: 会计结算日和会计期间使用相同的字典类型
具体位置: SupplierForm.vue:103 和 115 行

问题代码:

// 两个字段都使用同一个字典类型
DICT_TYPE.PSI_SUPPLIER_ACCOUNTING_SETTLEMENT

影响: 可能导致数据语义不清晰

🔴 3. 数据类型转换和兼容性问题

3.1 字符串转数字类型转换

问题描述: 从后端获取的数据类型与前端表单期望类型不匹配
具体位置: SupplierForm.vue:325-330 行

问题代码:

// 转换字典字段为数字类型
const convertedData = {...supplierData,accountDay: supplierData.accountDay ? parseInt(supplierData.accountDay) : undefined,accountPeriod: supplierData.accountPeriod ? parseInt(supplierData.accountPeriod) : undefined,status: supplierData.status !== undefined ? parseInt(supplierData.status) : 0
}

影响: 可能导致表单提交时数据类型错误

3.2 类型定义不严格

问题描述: 部分类型定义使用any或过于宽松
具体位置: SupplierForm.vue:240-270 行

问题代码:

const formData = ref({// 混合了不同的字段命名规范createdBy: undefined as string | undefined,  // 驼峰命名createTime: undefined as string | undefined, // 下划线命名
})

🔴 4. 子表数据关联和同步问题

4.1 供应商编码关联不一致

问题描述: 银行账户和联系人使用不同的关联字段
具体位置: SupplierForm.vue:140-150 行

问题代码:

<SupplierAccountForm:supplier-code="formData.supplierCode"  // 使用supplierCode
/>
<SupplierContactForm:supplier-id="formData.supplierCode"    // 使用supplierId
/>

影响: 数据关联可能出现问题

4.2 子表数据加载参数不一致

问题描述: 银行账户和联系人查询时使用不同的参数
具体位置: SupplierForm.vue:345-355 行

问题代码:

// 银行账户使用supplierCode
const accountData = await SupplierAccountApi.getSupplierAccountPage({supplierCode: formData.value.supplierCode,pageSize: 100,pageNo: 1
})// 联系人使用supplierId
const contactData = await SupplierContactApi.getSupplierContactPage({supplierId: formData.value.supplierCode,  // 这里应该是supplierCodepageSize: 100,pageNo: 1
})

4.3 进度跟踪数据关联混乱

问题描述: 进度跟踪查询参数使用供应商ID，但显示时又需要供应商名称
具体位置: SupplierForm.vue:470-480 行

问题代码:

// 注意：这里使用供应商的ID而不是supplierCode
progressQueryParams.supplierId = formData.value.id || 0

🔴 5. 临时编码和状态管理问题

5.1 临时供应商编码生成

问题描述: 新增模式下生成临时编码可能导致数据不一致
具体位置: SupplierForm.vue:360 行

问题代码:

// 新增模式：生成临时供应商编码
formData.value.supplierCode = 'TEMP_' + Date.now()

影响: 临时编码可能与实际保存后的编码不一致

5.2 表单状态管理复杂

问题描述: 多个异步操作的状态管理复杂
具体位置: 整个组件
问题表现:
- formLoading: 表单加载状态
- dialogVisible: 弹窗显示状态
- subTabsName: 子表标签页状态
- 多个子组件的状态

🔴 6. 错误处理和调试代码问题

6.1 调试代码残留

问题描述: 生产代码中残留大量console.log调试语句
具体位置: SupplierForm.vue:312-339 行

问题代码:

// 调试：检查字典数据是否正确加载
console.log('供应商分类字典:', getIntDictOptions(DICT_TYPE.PSI_SUPPLIER_CATEGORY))
console.log('供应商级别字典:', getIntDictOptions(DICT_TYPE.PSI_SUPPLIER_LEVEL))
console.log('付款协议字典:', getIntDictOptions(DICT_TYPE.PSI_SUPPIER_PAYMENTAGREEMENT))// 调试：检查加载的数据
console.log('加载的供应商数据:', supplierData)
console.log('转换后的数据:', convertedData)
console.log('表单数据:', formData.value)

影响: 影响生产环境性能，暴露内部逻辑

6.2 错误处理不统一

问题描述: 不同操作的错误处理方式不一致
具体表现:
- 银行账户保存失败：message.warning('银行账户信息保存失败，请检查数据')
- 联系人保存失败：message.warning('联系人信息保存失败，请检查数据')
- 进度跟踪失败：message.error('操作失败，请重试')

🔴 7. 表单提交逻辑问题

7.1 表单提交顺序问题

问题描述: 先提交供应商基本信息，再处理子表数据
具体位置: SupplierForm.vue:380-450 行
问题表现: 如果子表数据保存失败，主表数据已经保存，可能导致数据不一致

7.2 子表数据保存失败处理不当

问题描述: 当子表数据保存失败时，系统仅显示警告提示，而主表数据却已完成保存

具体代码:

try {// 保存银行账户await SupplierAccountApi.createSupplierAccount(accountData)
} catch (error) {console.error('保存银行账户失败:', error)message.warning('银行账户信息保存失败，请检查数据')// 缺少主表数据回滚逻辑
}

🔴 8. 数据验证和业务逻辑问题

8.1 进度跟踪数据格式问题

问题描述: 进度跟踪的context字段采用JSON格式存储，但存在解析失败风险
具体位置: SupplierForm.vue:520-540 行

问题代码:

const getProgressStage = (context: string) => {if (!context) return '-'try {const data = JSON.parse(context)return data.stage || '-'} catch (e) {return '其他'  // JSON解析失败时的默认返回值}
}

8.2 表单字段验证规则缺失

问题描述: 关键字段缺乏必要的验证规则
具体表现:
- level 字段未设置必填验证
- address、website、postalCode 等字段缺少格式验证
- accountBalance 未设置有效范围验证

🔴 9. 性能和用户体验问题

9.1 字典数据重复加载

问题描述: 每次打开表单都会重新加载字典数据
影响: 导致页面响应速度下降

9.2 子表数据分页查询不合理

问题描述: 银行账户和联系人查询使用固定的pageSize=100

具体代码:

pageSize: 100,  // 固定获取100条记录，存在性能隐患
pageNo: 1

9.3 表单重置逻辑不完整

问题描述: 表单重置操作未完全清理所有状态
具体位置: SupplierForm.vue:550-580 行
问题表现: 子表数据、进度跟踪数据等可能存在残留

🔴 10. 代码质量和维护性问题

10.1 硬编码的中文文本

问题描述: 部分文本未使用国际化配置

具体表现:

message.success('银行账户信息保存成功')
message.success('联系人信息保存成功')
message.error('供应商信息不完整')

10.2 组件职责不清晰

问题描述: 主表单组件承担过多职责
具体表现:
- 同时处理主表数据
- 管理银行账户数据
- 处理联系人数据
- 维护进度跟踪数据
- 协调多个子组件状态

10.3 异步操作嵌套过深

问题描述: 存在多层异步操作嵌套，错误处理逻辑复杂
具体表现: 主表保存 → 银行账户保存 → 联系人保存 → 进度跟踪保存

🚀 建议的改进措施

1. 立即修复的问题

修正字典类型拼写错误: 将PSI_SUPPIER_PAYMENTAGREEMENT更正为PSI_SUPPLIER_PAYMENTAGREEMENT
清理调试代码: 移除所有console.log语句
统一错误提示格式: 为所有错误提示添加页面标识
修复数据关联不一致: 统一使用supplierCode或supplierId作为关联字段

2. 架构优化

组件职责拆分: 将子表处理逻辑提取到独立服务类
确保数据一致性: 引入事务或回滚机制
优化状态管理: 使用Pinia store统一管理表单状态

3. 性能优化

实现字典数据缓存: 避免重复加载
优化子表查询: 实施真正的分页和懒加载机制
减少API调用: 合并相关数据查询请求

4. 代码质量提升

完善类型定义: 采用更严格的TypeScript类型约束
统一错误处理: 建立标准化的错误处理机制
增强测试覆盖: 为关键业务逻辑添加测试用例

这些问题集中在表单处理、数据关联、错误处理、性能优化和代码质量等方面，需要进行系统性重构和改进。#### 7.2 子表数据保存失败处理不当

问题描述: 子表数据保存失败时，只显示警告，但主表数据已经保存

具体代码:

try {// 保存银行账户await SupplierAccountApi.createSupplierAccount(accountData)
} catch (error) {console.error('保存银行账户失败:', error)message.warning('银行账户信息保存失败，请检查数据')// 这里没有回滚主表数据
}

🔴 8. 数据验证和业务逻辑问题

8.1 进度跟踪数据格式问题

问题描述: 进度跟踪的context字段使用JSON格式存储，但解析时可能失败
具体位置: SupplierForm.vue:520-540 行

问题代码:

const getProgressStage = (context: string) => {if (!context) return '-'try {const data = JSON.parse(context)return data.stage || '-'} catch (e) {return '其他'  // 解析失败时的默认值}
}

8.2 表单字段验证规则缺失

问题描述: 部分重要字段没有验证规则
具体表现:
- level 字段没有必填验证
- address, website, postalCode 等字段没有格式验证
- accountBalance 没有范围验证

�� 9. 性能和用户体验问题

9.1 字典数据重复加载

问题描述: 每次打开表单都可能重新加载字典数据
影响: 影响页面响应速度

9.2 子表数据分页查询不合理

问题描述: 银行账户和联系人使用固定pageSize=100

具体代码:

pageSize: 100,  // 固定100条，可能影响性能
pageNo: 1

9.3 表单重置逻辑不完整

问题描述: 表单重置时可能没有完全清理所有状态
具体位置: SupplierForm.vue:550-580 行
问题表现: 子表数据、进度跟踪数据等可能残留

🔴 10. 代码质量和维护性问题

10.1 硬编码的中文文本

问题描述: 部分文本没有使用国际化配置

具体表现:

message.success('银行账户信息保存成功')
message.success('联系人信息保存成功')
message.error('供应商信息不完整')

10.2 组件职责不清晰

问题描述: 主表单组件承担了太多职责
具体表现:
- 处理主表数据
- 处理银行账户数据
- 处理联系人数据
- 处理进度跟踪数据
- 管理多个子组件状态

10.3 异步操作嵌套过深

问题描述: 多个异步操作嵌套，错误处理复杂
具体表现: 主表保存 → 银行账户保存 → 联系人保存 → 进度跟踪保存

🚀 建议的改进措施

1. 立即修复的问题

修正字典类型拼写错误: PSI_SUPPIER_PAYMENTAGREEMENT → PSI_SUPPLIER_PAYMENTAGREEMENT
清理所有调试代码: 移除所有console.log语句
统一错误提示格式: 所有错误弹窗都加上页面标识
修复数据关联不一致: 统一使用supplierCode或supplierId