70 lines
2.5 KiB
Markdown
70 lines
2.5 KiB
Markdown
# 录取流程管理界面字段显示修复记录
|
||
|
||
## 修改时间
|
||
2025-07-22 16:20:00
|
||
|
||
## 变更内容
|
||
修复了录取流程管理页面中缴费状态和完成状态字段显示为空白或显示不正确的问题，参考完成状态的实现，直接使用el-tag渲染替代dict-tag组件。
|
||
|
||
## 变更原因
|
||
经过排查，发现问题原因：
|
||
|
||
1. **前后端字段名不一致**：
|
||
- 后端使用下划线命名法（snake_case）：`payment_status`, `is_completed`
|
||
- 前端使用驼峰命名法（camelCase）：`paymentStatus`, `isCompleted`
|
||
|
||
2. **字典缓存问题**：
|
||
- 字典数据更新后，前端缓存未及时更新
|
||
|
||
## 变更详情
|
||
|
||
### 1. 修改缴费状态字段显示
|
||
不再使用`dict-tag`组件，改为直接使用`el-tag`组件，同时兼容多种可能的字段名：
|
||
```vue
|
||
<el-table-column label="缴费状态" align="center" width="100">
|
||
<template #default="scope">
|
||
<el-tag v-if="scope.row.payment_status === '1' || scope.row.paymentStatus === '1'" type="success">已缴费</el-tag>
|
||
<el-tag v-else-if="scope.row.payment_status === '0' || scope.row.paymentStatus === '0'" type="warning">未缴费</el-tag>
|
||
<el-tag v-else type="info">未知</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
### 2. 修改按钮禁用条件
|
||
同时支持不同命名风格的字段名：
|
||
```vue
|
||
:disabled="scope.row.payment_status === '1' || scope.row.paymentStatus === '1'"
|
||
```
|
||
|
||
### 3. 添加字段名映射处理
|
||
在获取数据后进行处理，确保两种命名风格的字段同时存在：
|
||
```javascript
|
||
// 字段名映射处理
|
||
return {
|
||
...item,
|
||
// 确保同时有驼峰式和下划线式的字段
|
||
paymentStatus: item.paymentStatus || item.payment_status,
|
||
payment_status: item.payment_status || item.paymentStatus,
|
||
isCompleted: item.isCompleted || item.is_completed,
|
||
is_completed: item.is_completed || item.isCompleted
|
||
}
|
||
```
|
||
|
||
### 4. 添加调试输出
|
||
在控制台输出首行数据的字段名和内容，便于排查问题：
|
||
```javascript
|
||
if (item === res.rows[0]) {
|
||
console.log('首行数据字段:', Object.keys(item))
|
||
console.log('首行数据内容:', JSON.stringify(item))
|
||
}
|
||
```
|
||
|
||
## 影响范围
|
||
1. 录取流程管理页面缴费状态字段的显示
|
||
2. 录取流程管理页面完成状态字段的显示
|
||
3. 相关按钮的禁用条件逻辑
|
||
|
||
## 注意事项
|
||
1. 此修复为前端兼容性修复，不涉及数据库和后端API的修改
|
||
2. 解决方法是前端同时适配驼峰命名和下划线命名两种字段名
|
||
3. 未来应考虑统一前后端的字段命名规范，避免类似问题 |