hzdyjs/行程变更申请表单优化-更新说明.md

行程变更申请表单优化 - 更新说明

📝 更新内容

本次更新包含两个优化：

1. 修复政治面貌显示问题 - 将数字字典值转换为文本标签
2. 优化承诺声明显示 - 将承诺声明从placeholder改为独立显示

---

🐛 问题一：政治面貌显示为数字

问题描述

在出国行程变更申请表单中，选择原出国申请后，"本人基本情况"中的政治面貌显示为数字"1"，而不是对应的文本"中共党员"。

问题原因

后端返回的政治面貌字段是字典值（如 "1", "2", "3" 等），前端直接显示了这个数字值，没有将其转换为对应的文本标签。

✅ 解决方案

技术实现

新增政治面貌字典映射函数 getPoliticalStatusLabel，在数据填充时将字典值转换为对应的文本标签。

代码修改

文件: web/src/views/rs/overseas/itinerary-change.vue

1. 新增政治面貌映射函数

// 政治面貌字典映射
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. 修改数据填充逻辑

// 选择原出国申请后，自动填充原申请信息
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('获取出国申请详情失败');
  }
};

修改前:

state.form.politicalStatus = selectedApplication.politicalStatus; // 显示 "1"

修改后:

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. 可维护性 - 字典映射关系清晰可见，便于后续维护

类型安全

const getPoliticalStatusLabel = (value: string | number) => {
  // 使用 String(value) 确保统一处理字符串和数字
  return politicalStatusMap[String(value)] || value;
};

• 支持后端返回字符串 "1" 或数字 1
• 统一转换为字符串进行映射
• 未匹配时返回原值，保证数据不丢失

✨ 相关字段处理

其他可能需要字典转换的字段

当前页面中以下字段都是只读显示，暂时直接显示原值：

• 性别: 如需转换，可参考政治面貌的处理方式
• 证件名称: 通常为文本，无需转换
• 部门: 通常为文本，无需转换

如果后续发现其他字段也显示为字典值，可采用相同的解决方案。

---

✨ 问题二：承诺声明显示优化

问题描述

在"五、有关认识和态度"部分，承诺声明"我承诺，以上情况说明完全属实。如有不实行为，愿意接受组织处理。"显示在文本框的placeholder中，不够明显，且容易与用户输入混淆。

优化方案

将承诺声明从placeholder中移出，改为在文本框下方独立显示。

代码修改

文件: web/src/views/rs/overseas/itinerary-change.vue

修改前

<el-form-item>
  <el-input 
    v-model="form.remark" 
    type="textarea" 
    :rows="3" 
    placeholder="我承诺，以上情况说明完全属实。如有不实行为，愿意按受组织处理。"
    maxlength="200"
    show-word-limit
  />
</el-form-item>

修改后

<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. 承诺声明样式美观、易读