268 lines
7.7 KiB
Markdown
268 lines
7.7 KiB
Markdown
# 行程变更申请表单优化 - 更新说明
|
||
|
||
## 📝 更新内容
|
||
|
||
本次更新包含两个优化：
|
||
1. **修复政治面貌显示问题** - 将数字字典值转换为文本标签
|
||
2. **优化承诺声明显示** - 将承诺声明从placeholder改为独立显示
|
||
|
||
---
|
||
|
||
## 🐛 问题一：政治面貌显示为数字
|
||
|
||
### 问题描述
|
||
|
||
在出国行程变更申请表单中，选择原出国申请后，"本人基本情况"中的政治面貌显示为数字"1"，而不是对应的文本"中共党员"。
|
||
|
||
### 问题原因
|
||
|
||
后端返回的政治面貌字段是字典值（如 `"1"`, `"2"`, `"3"` 等），前端直接显示了这个数字值，没有将其转换为对应的文本标签。
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 技术实现
|
||
|
||
新增政治面貌字典映射函数 `getPoliticalStatusLabel`，在数据填充时将字典值转换为对应的文本标签。
|
||
|
||
### 代码修改
|
||
|
||
**文件**: `web/src/views/rs/overseas/itinerary-change.vue`
|
||
|
||
#### 1. 新增政治面貌映射函数
|
||
|
||
```typescript
|
||
// 政治面貌字典映射
|
||
const getPoliticalStatusLabel = (value: string | number) => {
|
||
const politicalStatusMap: Record<string, string> = {
|
||
'1': '中共党员',
|
||
'2': '中共预备党员',
|
||
'3': '共青团员',
|
||
'4': '民革党员',
|
||
'5': '民盟盟员',
|
||
'6': '民建会员',
|
||
'7': '民进会员',
|
||
'8': '农工党党员',
|
||
'9': '致公党党员',
|
||
'10': '九三学社社员',
|
||
'11': '台盟盟员',
|
||
'12': '无党派人士',
|
||
'13': '群众'
|
||
};
|
||
return politicalStatusMap[String(value)] || value;
|
||
};
|
||
```
|
||
|
||
**特点**:
|
||
- 支持字符串和数字类型的输入
|
||
- 完整映射13种政治面貌选项
|
||
- 未匹配时返回原值（兼容性处理）
|
||
|
||
#### 2. 修改数据填充逻辑
|
||
|
||
```typescript
|
||
// 选择原出国申请后，自动填充原申请信息
|
||
const handleApplicationChange = async (applicationId: number) => {
|
||
try {
|
||
const response = await getOverseasApplication(applicationId);
|
||
const selectedApplication = response.data;
|
||
if (selectedApplication) {
|
||
// 填充本人基本情况
|
||
state.form.applicantName = selectedApplication.applicantName;
|
||
state.form.gender = selectedApplication.gender;
|
||
state.form.birthDate = selectedApplication.birthDate;
|
||
// ✅ 政治面貌：将字典值转换为文本标签
|
||
state.form.politicalStatus = getPoliticalStatusLabel(selectedApplication.politicalStatus);
|
||
// ... 其他字段
|
||
}
|
||
} catch (error) {
|
||
console.error('获取申请详情失败:', error);
|
||
ElMessage.error('获取出国申请详情失败');
|
||
}
|
||
};
|
||
```
|
||
|
||
**修改前**:
|
||
```typescript
|
||
state.form.politicalStatus = selectedApplication.politicalStatus; // 显示 "1"
|
||
```
|
||
|
||
**修改后**:
|
||
```typescript
|
||
state.form.politicalStatus = getPoliticalStatusLabel(selectedApplication.politicalStatus); // 显示 "中共党员"
|
||
```
|
||
|
||
## 📊 政治面貌字典对照表
|
||
|
||
| 字典值 | 显示文本 |
|
||
|--------|---------|
|
||
| 1 | 中共党员 |
|
||
| 2 | 中共预备党员 |
|
||
| 3 | 共青团员 |
|
||
| 4 | 民革党员 |
|
||
| 5 | 民盟盟员 |
|
||
| 6 | 民建会员 |
|
||
| 7 | 民进会员 |
|
||
| 8 | 农工党党员 |
|
||
| 9 | 致公党党员 |
|
||
| 10 | 九三学社社员 |
|
||
| 11 | 台盟盟员 |
|
||
| 12 | 无党派人士 |
|
||
| 13 | 群众 |
|
||
|
||
## 🧪 测试验证
|
||
|
||
### 测试步骤
|
||
|
||
1. 打开出国行程变更申请页面
|
||
2. 点击"新增变更申请"
|
||
3. 选择一个原出国申请（申请人的政治面貌为"中共党员"）
|
||
4. 查看"本人基本情况"中的政治面貌字段
|
||
|
||
### 预期结果
|
||
|
||
- ✅ 政治面貌显示为 "中共党员"（而不是 "1"）
|
||
- ✅ 其他字典值也能正确转换为对应文本
|
||
|
||
### 测试用例
|
||
|
||
| 后端返回值 | 预期显示 |
|
||
|-----------|---------|
|
||
| "1" | 中共党员 |
|
||
| "2" | 中共预备党员 |
|
||
| "3" | 共青团员 |
|
||
| "13" | 群众 |
|
||
| 1 (数字) | 中共党员 |
|
||
| "999" (未定义值) | 999 (原值) |
|
||
|
||
## 📝 影响范围
|
||
|
||
### 修改文件
|
||
- ✅ `web/src/views/rs/overseas/itinerary-change.vue` - 新增映射函数并修改数据填充逻辑
|
||
|
||
### 不受影响的部分
|
||
- ❌ 后端代码 - 无需修改
|
||
- ❌ 数据库 - 无需修改
|
||
- ❌ 其他页面 - 仅影响行程变更申请页面
|
||
|
||
## 💡 技术要点
|
||
|
||
### 为什么不使用数据字典工具函数？
|
||
|
||
虽然项目中有 `selectDictLabel` 等通用字典转换函数，但考虑到：
|
||
1. **独立性** - 该页面未使用字典数据，避免引入额外依赖
|
||
2. **简洁性** - 仅需转换一个字段，独立函数更直观
|
||
3. **可维护性** - 字典映射关系清晰可见，便于后续维护
|
||
|
||
### 类型安全
|
||
|
||
```typescript
|
||
const getPoliticalStatusLabel = (value: string | number) => {
|
||
// 使用 String(value) 确保统一处理字符串和数字
|
||
return politicalStatusMap[String(value)] || value;
|
||
};
|
||
```
|
||
|
||
- 支持后端返回字符串 `"1"` 或数字 `1`
|
||
- 统一转换为字符串进行映射
|
||
- 未匹配时返回原值，保证数据不丢失
|
||
|
||
## ✨ 相关字段处理
|
||
|
||
### 其他可能需要字典转换的字段
|
||
|
||
当前页面中以下字段都是只读显示，暂时直接显示原值：
|
||
- **性别**: 如需转换，可参考政治面貌的处理方式
|
||
- **证件名称**: 通常为文本，无需转换
|
||
- **部门**: 通常为文本，无需转换
|
||
|
||
如果后续发现其他字段也显示为字典值，可采用相同的解决方案。
|
||
|
||
---
|
||
|
||
## ✨ 问题二：承诺声明显示优化
|
||
|
||
### 问题描述
|
||
|
||
在"五、有关认识和态度"部分，承诺声明"我承诺，以上情况说明完全属实。如有不实行为，愿意接受组织处理。"显示在文本框的placeholder中，不够明显，且容易与用户输入混淆。
|
||
|
||
### 优化方案
|
||
|
||
将承诺声明从placeholder中移出，改为在文本框下方独立显示。
|
||
|
||
### 代码修改
|
||
|
||
**文件**: `web/src/views/rs/overseas/itinerary-change.vue`
|
||
|
||
#### 修改前
|
||
|
||
```vue
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="我承诺，以上情况说明完全属实。如有不实行为，愿意按受组织处理。"
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
```
|
||
|
||
#### 修改后
|
||
|
||
```vue
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请填写有关认识和态度"
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
<div style="margin-top: 12px; color: #303133; font-size: 14px; font-weight: bold;">
|
||
我承诺，以上情况说明完全属实。如有不实行为，愿意接受组织处理。
|
||
</div>
|
||
</el-form-item>
|
||
```
|
||
|
||
### 优化效果
|
||
|
||
- ✅ 承诺声明独立显示，更加醒目
|
||
- ✅ 文本框placeholder提示更清晰
|
||
- ✅ 用户输入区域与承诺声明明确分离
|
||
- ✅ 符合正式文档的规范格式
|
||
- ✅ 字体样式与标题保持一致（加粗）
|
||
- ✅ 文字左侧对齐"五、有关认识和态度"标题
|
||
|
||
### 样式说明
|
||
|
||
承诺声明样式：
|
||
- **位置**: 文本框下方12px间距，左侧与"五、有关认识和态度"标题完全对齐
|
||
- **颜色**: `#303133` (Element Plus标题文本颜色)
|
||
- **字体大小**: `14px` (与标题字体大小一致)
|
||
- **字体粗细**: `bold` (加粗，与标题格式一致)
|
||
|
||
---
|
||
|
||
## 🎯 总结
|
||
|
||
本次更新包含两项优化，提升了出国行程变更申请表单的用户体验：
|
||
|
||
1. **政治面貌显示优化** - 通过新增字典映射函数，将数字字典值转换为可读的文本标签
|
||
2. **承诺声明显示优化** - 将承诺声明从placeholder改为独立显示，更加醒目和规范
|
||
|
||
### 修改文件
|
||
- ✅ `web/src/views/rs/overseas/itinerary-change.vue` - 新增映射函数、修改数据填充逻辑、优化承诺声明显示
|
||
|
||
### 完成状态
|
||
- ✅ 代码修改完成，无编译错误
|
||
- ⏳ 待功能测试验证
|
||
|
||
### 测试验证点
|
||
1. 选择原出国申请后，政治面貌显示为文本（如"中共党员"）而非数字
|
||
2. "有关认识和态度"文本框下方显示承诺声明
|
||
3. 文本框placeholder提示为"请填写有关认识和态度"
|
||
4. 承诺声明样式美观、易读
|
||
|