cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

2025-10-14 16:41:19 +08:00

9.1 KiB

Raw Blame History

出国行程变更申请表单优化说明

📋 修改时间

2025-10-13

🎯 优化目标

根据附件《关于变更因私出国（境）行程有关情况的报告》参考模板，重新设计变更申请表单，使其符合实际业务流程。

📝 优化内容

一、删除"0"选项问题

问题：选择原出国申请下拉框中显示"0"选项

原因：applicationId初始值设置为0

解决方案：

// 修改前
state.form = {
  applicationId: 0,
  ...
}

// 修改后  
state.form = {
  applicationId: undefined as any,
  ...
}

二、表单布局重新设计

参照附件图片，将表单重新组织为五个部分：

1. 选择原出国申请

下拉框选择已审批通过的出国申请
支持筛选功能（filterable）
选择后自动填充后续表单数据

2. 一、本人基本情况（自动填充，只读）

- 姓名：{{ applicantName }}
- 单位：{{ department }}

3. 二、申请行程情况（自动填充，只读）

- 申请出行时间：{{ originalStartDate }}
- 地点：{{ originalDestination }}
- 在外停留时间：{{ originalStartDate }} 至 {{ originalEndDate }} ({{ originalDuration }}天)

4. 三、实际行程情况（用户填写，可编辑）

- 实际出行时间：日期选择器（必填）
- 地点：文本输入框（必填）
- 在外停留时间：开始日期 至 结束日期（自动计算天数）

5. 四、发生变更情况的原因（用户填写，必填）

- 多行文本框，最多500字
- 提示：相关证明材料可附后

6. 五、有关认识和态度（用户填写，选填）

- 多行文本框，最多200字
- 默认提示：我承诺，以上情况说明完全属实。如有不实行为，愿意按受组织处理。

三、表单验证规则简化

修改前（复杂的条件验证）

rules: {
  applicationId: [{ required: true, ... }],
  changeReason: [{ required: true, ... }],
  newDestination: [{ 
    validator: (rule, value, callback) => {
      if (state.changeTypes.includes('目的地变更') && !value) {
        callback(new Error('请输入新目的地国家'));
      }
      ...
    }
  }],
  // ... 其他复杂验证
}

修改后（简化为必填验证）

rules: {
  applicationId: [{ required: true, message: '请选择原出国申请', trigger: 'change' }],
  newDestination: [{ required: true, message: '请输入实际目的地', trigger: 'blur' }],
  newStartDate: [{ required: true, message: '请选择实际出行日期', trigger: 'change' }],
  changeReason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }]
}

四、变更类型自动识别

修改前（用户手动选择变更类型）

// 用户通过复选框选择变更类型
<el-checkbox-group v-model="changeTypes">
  <el-checkbox label="目的地变更">目的地变更</el-checkbox>
  <el-checkbox label="时间变更">时间变更</el-checkbox>
  <el-checkbox label="行程变更">行程变更</el-checkbox>
</el-checkbox-group>

// 提交时检查
if (state.changeTypes.length === 0) {
  ElMessage.warning('请至少选择一种变更类型');
  return;
}
state.form.changeType = state.changeTypes.join(',');

修改后（系统自动识别）

// 提交时自动识别变更类型
const changeTypeList: string[] = [];
if (state.form.newDestination !== state.form.originalDestination) {
  changeTypeList.push('目的地变更');
}
if (state.form.newStartDate !== state.form.originalStartDate || 
    state.form.newEndDate !== state.form.originalEndDate) {
  changeTypeList.push('时间变更');
}
if (state.form.newItinerary && state.form.newItinerary !== state.form.originalItinerary) {
  changeTypeList.push('行程变更');
}
state.form.changeType = changeTypeList.length > 0 ? changeTypeList.join(',') : '其他变更';

🎨 UI/UX优化

1. 布局优化

✅ 使用分隔线（<el-divider>）明确区分五个部分
✅ 分隔线标题加粗显示（<b>标签）
✅ 对齐附件图片的报告格式

2. 交互优化

✅ 自动填充的字段设为只读（disabled）
✅ 用户填写的字段突出显示（可编辑）
✅ 删除不必要的变更类型选择
✅ 简化操作流程

3. 数据流优化

选择出国申请
    ↓
自动填充"一、本人基本情况"和"二、申请行程情况"
    ↓
用户填写"三、实际行程情况"
    ↓
用户填写"四、发生变更情况的原因"
    ↓
用户填写"五、有关认识和态度"
    ↓
系统自动识别变更类型
    ↓
提交审批

📦 涉及文件

前端

web/src/views/rs/overseas/itinerary-change.vue - 主页面（表单布局和逻辑）

后端

无需修改（后端接口保持不变）

✨ 优化亮点

符合业务规范：完全参照官方报告模板设计
操作更简单：删除复杂的变更类型选择，自动识别
逻辑更清晰：五个部分层次分明，一目了然
验证更合理：只验证必填项，减少用户困扰
数据自动化：
- 自动填充原申请信息
- 自动识别变更类型
- 自动计算停留天数

🧪 测试验证

测试场景1：新增变更申请

✅ 点击"新增变更申请"
✅ 验证下拉框无"0"选项
✅ 选择一个已审批通过的申请
✅ 验证"一、本人基本情况"自动填充且只读
✅ 验证"二、申请行程情况"自动填充且只读
✅ 填写"三、实际行程情况"
✅ 填写"四、发生变更情况的原因"
✅ 填写"五、有关认识和态度"
✅ 提交验证必填项
✅ 验证变更类型自动识别

测试场景2：数据验证

测试数据：
- 原申请：目的地=美国，出行时间=2025-10-15
- 实际情况：目的地=英国，出行时间=2025-10-20

预期结果：
- 自动识别为"目的地变更,时间变更"

测试场景3：表单重置

✅ 打开表单
✅ 选择申请并填写数据
✅ 点击"取消"
✅ 验证表单重置，applicationId为undefined

⚠️ 注意事项

数据兼容性：
- 新表单产生的数据与原有数据结构完全兼容
- 原有的变更记录可以正常查看
必填字段：
- 选择原出国申请（必填）
- 实际目的地（必填）
- 实际出行日期（必填）
- 变更原因（必填）
可选字段：
- 实际返回日期（可选，用于计算停留时间）
- 有关认识和态度（可选）
变更类型识别逻辑：
- 目的地变更：newDestination ≠ originalDestination
- 时间变更：newStartDate ≠ originalStartDate 或 newEndDate ≠ originalEndDate
- 行程变更：newItinerary 有内容且 ≠ originalItinerary
- 无法识别时标记为"其他变更"

🎉 完成状态

✅ 删除"0"选项问题已解决 ✅ 表单布局完全按照附件图片重新设计 ✅ 表单验证规则已简化 ✅ 变更类型自动识别已实现 ✅ 前端无编译错误 ✅ 业务逻辑符合需求

📸 界面效果

表单结构

┌─────────────────────────────────────────┐
│ 选择原出国申请: [下拉框-可筛选]        │
├─────────────────────────────────────────┤
│ 一、本人基本情况                        │
│   姓名: [只读]    单位: [只读]          │
├─────────────────────────────────────────┤
│ 二、申请行程情况                        │
│   申请出行时间: [只读]                  │
│   地点: [只读]                          │
│   在外停留时间: [只读-显示天数]         │
├─────────────────────────────────────────┤
│ 三、实际行程情况                        │
│   实际出行时间: [日期选择器-必填]       │
│   地点: [文本框-必填]                   │
│   在外停留时间: [开始日期] 至 [结束日期]│
├─────────────────────────────────────────┤
│ 四、发生变更情况的原因                  │
│   [多行文本框-必填, 500字]              │
│   提示：相关证明材料可附后              │
├─────────────────────────────────────────┤
│ 五、有关认识和态度                      │
│   [多行文本框-选填, 200字]              │
│   提示：我承诺，以上情况说明完全属实... │
└─────────────────────────────────────────┘
       [提交]              [取消]

优化完成时间：2025-10-13
符合规范：《关于变更因私出国（境）行程有关情况的报告（参考版本）》

9.1 KiB Raw Blame History Unescape Escape