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

## 📋 更新概述

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

**更新时间**: 2024年

## 🎯 更新内容

### 一、UI布局调整

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

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

### 二、技术实现

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

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

```typescript
// 新出行时间日期范围（用于日期选择器的双向绑定）
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字段

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

## 🧪 测试要点

### 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. 自动识别变更类型（如果时间变化，标记为"时间变更"）
```

## 📌 注意事项

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

## ✨ 总结

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

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