cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

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

7.0 KiB

Raw Blame History

实际行程情况增加时间字段 - 更新说明

📋 更新概述

在"三、实际行程情况"中增加了"实际出行时间"和"在外停留天数"字段，与"二、申请行程情况"保持对称布局。

更新时间: 2024年

🎯 更新内容

一、UI布局调整

修改前

三、实际行程情况
├── 第一行：前往国家 | 出境事由
└── 第二行：行程安排（多行文本框）

修改后

三、实际行程情况
├── 第一行：前往国家 | 出境事由
├── 第二行：实际出行时间（日期范围选择器） | 在外停留天数（自动计算）
└── 第三行：行程安排（多行文本框）

二、技术实现

1. 新增日期范围计算属性

位置: web/src/views/rs/overseas/itinerary-change.vue

// 新出行时间日期范围（用于日期选择器的双向绑定）
const newDateRange = computed({
  get() {
    if (state.form.newStartDate && state.form.newEndDate) {
      return [state.form.newStartDate, state.form.newEndDate];
    }
    return null;
  },
  set(value: any) {
    if (value && value.length === 2) {
      state.form.newStartDate = value[0];
      state.form.newEndDate = value[1];
    } else {
      state.form.newStartDate = '';
      state.form.newEndDate = '';
    }
  }
});

作用:

将 newStartDate 和 newEndDate 两个独立字段包装成日期范围数组
支持日期范围选择器的双向绑定
修改日期后自动触发天数计算（已有的 watch 监听）

2. 新增UI字段

<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="实际出行时间" prop="newStartDate">
      <el-date-picker
        v-model="newDateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        style="width: 100%"
      />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="在外停留天数">
      <el-input :value="`${form.newDuration || 0}天`" disabled />
    </el-form-item>
  </el-col>
</el-row>

特点:

实际出行时间：使用日期范围选择器，可编辑
在外停留天数：只读显示，自动计算（通过已有的 watch 监听）

📊 完整布局对比

二、申请行程情况（只读）

┌─────────────────────────────────────────────────────────────┐
│ 二、申请行程情况                                             │
├─────────────────────────────────────────────────────────────┤
│ 前往国家: [只读]        出境事由: [只读]                     │
│ 申请出行时间: [只读]    在外停留天数: [只读]                 │
│ 行程安排: [只读-多行文本框]                                  │
└─────────────────────────────────────────────────────────────┘

三、实际行程情况（可编辑）

┌─────────────────────────────────────────────────────────────┐
│ 三、实际行程情况                                             │
├─────────────────────────────────────────────────────────────┤
│ 前往国家: [输入框]              出境事由: [输入框]           │
│ 实际出行时间: [日期范围选择器]  在外停留天数: [自动计算]     │
│ 行程安排: [多行文本框，1000字限制]                           │
└─────────────────────────────────────────────────────────────┘

✅ 优化亮点

布局对称 - "二、申请行程情况"和"三、实际行程情况"结构完全一致
信息完整 - 显示完整的行程信息：国家、事由、时间、天数、行程
自动计算 - 选择日期范围后自动计算停留天数
用户友好 - 日期范围选择器，比单独输入更方便
数据一致性 - 复用现有字段和计算逻辑，无需额外开发

🧪 测试要点

1. 日期选择和计算

日期范围选择器正常工作
选择日期后，"在外停留天数"自动更新
天数计算正确（含起止日，例如：1月1日至1月3日 = 3天）
清除日期后，天数显示为 0

2. 数据自动填充

选择原出国申请后，"实际出行时间"自动填充原申请的日期
选择原出国申请后，"在外停留天数"自动填充原申请的天数
修改日期后，天数重新计算

3. 表单提交

修改实际出行时间后，提交时能正确识别"时间变更"
newStartDate、newEndDate、newDuration 正确提交到后端

📝 修改文件清单

前端

web/src/views/rs/overseas/itinerary-change.vue - 表单页面
- 新增日期范围计算属性 newDateRange
- 新增UI字段：实际出行时间、在外停留天数

后端

无需修改 - 字段已存在（newStartDate、newEndDate、newDuration）

文档

出国行程变更-申请行程情况字段调整.md - 更新说明文档
实际行程情况增加时间字段-更新说明.md - 本说明文档

🔄 数据流程

1. 用户选择原出国申请
   ↓
2. 自动填充"二、申请行程情况"（包含时间和天数，只读）
   ↓
3. 自动填充"三、实际行程情况"（包含时间和天数，可编辑）
   ↓
4. 用户修改实际出行时间（通过日期范围选择器）
   ↓
5. 计算属性 set 方法更新 newStartDate 和 newEndDate
   ↓
6. watch 监听触发，自动计算 newDuration
   ↓
7. 用户提交表单
   ↓
8. 自动识别变更类型（如果时间变化，标记为"时间变更"）

📌 注意事项

计算属性作用 - newDateRange 仅用于UI绑定，实际存储仍使用 newStartDate 和 newEndDate
天数计算逻辑 - 复用现有的 watch 监听，无需额外代码
数据兼容性 - 所有字段都已存在于后端，完全兼容现有API
布局一致性 - "申请行程"和"实际行程"布局完全对称，用户体验更好

✨ 总结

本次更新在"三、实际行程情况"中增加了实际出行时间和在外停留天数字段，使其与"二、申请行程情况"保持完全一致的布局结构。通过新增计算属性实现日期范围选择器的双向绑定，复用现有的天数计算逻辑，实现了零后端改动的前端优化。

完成状态: ✅ 已完成，无编译错误

7.0 KiB Raw Blame History Unescape Escape