本周難點問題詳細總結

📋 本周技術問題總結

🔴 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