cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

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

13 KiB

Raw Blame History

出国行程变更申请表单 - 本人基本情况字段增强

📋 修改时间

2025-10-13

🎯 需求说明

在"一、本人基本情况"部分增加以下字段：

性别
出生年月
政治面貌
职称
职务
申领证件名称
证件号码

这些字段将从原出国申请中自动填充，并以只读方式显示。

📝 修改内容

一、数据库表结构修改

1. 创建ALTER脚本

文件: docs/设计文档/database/rs_overseas_itinerary_change_add_fields.sql

ALTER TABLE `rs_overseas_itinerary_change` 
  ADD COLUMN `gender` char(1) DEFAULT NULL COMMENT '性别：0-男，1-女' AFTER `applicant_name`,
  ADD COLUMN `birth_date` date DEFAULT NULL COMMENT '出生日期' AFTER `gender`,
  ADD COLUMN `political_status` varchar(20) DEFAULT NULL COMMENT '政治面貌' AFTER `birth_date`,
  ADD COLUMN `professional_title` varchar(100) DEFAULT NULL COMMENT '职称' AFTER `political_status`,
  ADD COLUMN `position` varchar(100) DEFAULT NULL COMMENT '职务' AFTER `professional_title`,
  ADD COLUMN `document_name` varchar(100) DEFAULT NULL COMMENT '申领证件名称' AFTER `position`,
  ADD COLUMN `document_number` varchar(100) DEFAULT NULL COMMENT '证件号码' AFTER `document_name`;

2. 更新完整建表脚本

文件: docs/设计文档/database/rs_overseas_itinerary_change_full.sql

在applicant_name字段后添加了7个新字段的定义。

二、后端代码修改

1. 实体类 (Entity)

文件: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/RsOverseasItineraryChange.java

新增字段:

/**
 * 性别：0-男，1-女
 */
private String gender;

/**
 * 出生日期
 */
private Date birthDate;

/**
 * 政治面貌
 */
private String politicalStatus;

/**
 * 职称
 */
private String professionalTitle;

/**
 * 职务
 */
private String position;

/**
 * 申领证件名称
 */
private String documentName;

/**
 * 证件号码
 */
private String documentNumber;

2. VO类 (View Object)

文件: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/vo/RsOverseasItineraryChangeVo.java

新增字段（与Entity相同，但birthDate增加了JSON格式化）:

/**
 * 出生日期
 */
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthDate;

3. Bo类 (Business Object)

文件: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/bo/RsOverseasItineraryChangeBo.java

新增了相同的7个字段，均为可选字段（无@NotBlank/@NotNull注解）。

三、前端代码修改

1. API接口类型定义

文件: web/src/api/rs/overseas.ts

ItineraryChangeVO接口:

export interface ItineraryChangeVO {
  changeId: number | string;
  recordId: number;
  applicationId?: number;
  applicantName: string;
  gender?: string;              // 新增
  birthDate?: string;           // 新增
  politicalStatus?: string;     // 新增
  professionalTitle?: string;   // 新增
  position?: string;            // 新增
  documentName?: string;        // 新增
  documentNumber?: string;      // 新增
  department: string;
  // ... 其他字段
}

ItineraryChangeForm接口:

export interface ItineraryChangeForm {
  changeId?: number | string;
  applicationId: number;
  applicantName?: string;
  gender?: string;              // 新增
  birthDate?: string;           // 新增
  politicalStatus?: string;     // 新增
  professionalTitle?: string;   // 新增
  position?: string;            // 新增
  documentName?: string;        // 新增
  documentNumber?: string;      // 新增
  department?: string;
  // ... 其他字段
}

2. 表单UI修改

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

表单布局（一、本人基本情况部分）:

<!-- 一、本人基本情况（自动填充，只读） -->
<el-divider content-position="left"><b>一、本人基本情况</b></el-divider>

<!-- 第一行：姓名、性别 -->
<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="姓名">
      <el-input v-model="form.applicantName" disabled />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="性别">
      <el-input :value="form.gender === '0' ? '男' : form.gender === '1' ? '女' : ''" disabled />
    </el-form-item>
  </el-col>
</el-row>

<!-- 第二行：出生年月、政治面貌 -->
<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="出生年月">
      <el-input :value="formatDate(form.birthDate)" disabled />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="政治面貌">
      <el-input v-model="form.politicalStatus" disabled />
    </el-form-item>
  </el-col>
</el-row>

<!-- 第三行：职称、职务 -->
<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="职称">
      <el-input v-model="form.professionalTitle" disabled />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="职务">
      <el-input v-model="form.position" disabled />
    </el-form-item>
  </el-col>
</el-row>

<!-- 第四行：申领证件名称、证件号码 -->
<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="申领证件名称">
      <el-input v-model="form.documentName" disabled />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="证件号码">
      <el-input v-model="form.documentNumber" disabled />
    </el-form-item>
  </el-col>
</el-row>

<!-- 第五行：单位 -->
<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="单位">
      <el-input v-model="form.department" disabled />
    </el-form-item>
  </el-col>
</el-row>

3. 数据自动填充逻辑

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

handleApplicationChange函数:

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 = selectedApplication.politicalStatus;
      state.form.professionalTitle = selectedApplication.professionalTitle;
      state.form.position = selectedApplication.position;
      state.form.documentName = selectedApplication.documentName;
      state.form.documentNumber = selectedApplication.documentNumber;
      state.form.department = selectedApplication.department;
      
      // 填充申请行程情况
      state.form.originalDestination = selectedApplication.destination;
      // ... 其他原行程信息
    }
  } catch (error) {
    console.error('获取申请详情失败:', error);
    ElMessage.error('获取出国申请详情失败');
  }
};

4. 表单重置逻辑

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

resetForm函数:

const resetForm = () => {
  state.form = {
    changeId: undefined,
    applicationId: undefined as any,
    applicantName: '',
    gender: '',                    // 新增
    birthDate: '',                 // 新增
    politicalStatus: '',           // 新增
    professionalTitle: '',         // 新增
    position: '',                  // 新增
    documentName: '',              // 新增
    documentNumber: '',            // 新增
    department: '',
    // ... 其他字段
  };
  formRef.value?.resetFields();
};

📦 涉及文件清单

数据库脚本 (2个文件)

docs/设计文档/database/rs_overseas_itinerary_change_add_fields.sql - 新增字段ALTER脚本
docs/设计文档/database/rs_overseas_itinerary_change_full.sql - 更新完整建表脚本

后端代码 (3个文件)

backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/RsOverseasItineraryChange.java
backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/vo/RsOverseasItineraryChangeVo.java
backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/bo/RsOverseasItineraryChangeBo.java

前端代码 (2个文件)

web/src/api/rs/overseas.ts - API接口类型定义
web/src/views/rs/overseas/itinerary-change.vue - 表单页面

🎨 新增字段展示效果

表单布局（一、本人基本情况）

┌─────────────────────────────────────────────────────────────┐
│ 一、本人基本情况                                             │
├─────────────────────────────────────────────────────────────┤
│ 姓名: [只读]            性别: [只读-男/女]                   │
│ 出生年月: [只读]        政治面貌: [只读]                     │
│ 职称: [只读]            职务: [只读]                         │
│ 申领证件名称: [只读]    证件号码: [只读]                     │
│ 单位: [只读]                                                 │
└─────────────────────────────────────────────────────────────┘

🔄 数据流程

1. 用户选择原出国申请
   ↓
2. 调用 getOverseasApplication(applicationId) 获取申请详情
   ↓
3. handleApplicationChange 函数自动填充所有字段
   - 本人基本情况（姓名、性别、出生年月、政治面貌、职称、职务、证件等）
   - 申请行程情况（原目的地、原出行时间等）
   ↓
4. 用户填写实际行程情况
   ↓
5. 用户填写变更原因
   ↓
6. 系统自动识别变更类型
   ↓
7. 提交保存（所有字段自动提交到后端）

✅ 字段对应关系

序号	变更表字段	申请表字段	数据类型	说明
1	gender	gender	char(1)	性别：0-男，1-女
2	birth_date	birthDate	date	出生日期
3	political_status	politicalStatus	varchar(20)	政治面貌
4	professional_title	professionalTitle	varchar(100)	职称
5	position	position	varchar(100)	职务
6	document_name	documentName	varchar(100)	申领证件名称
7	document_number	documentNumber	varchar(100)	证件号码

🧪 测试要点

1. 数据库测试

执行ALTER脚本，验证字段添加成功
检查字段类型、长度、注释是否正确
验证原有数据不受影响

2. 后端测试

查询变更申请时，新字段能正确返回
新增变更申请时，新字段能正确保存
MyBatis映射正常，无字段缺失错误

3. 前端测试

选择原出国申请后，新字段自动填充
新字段以只读方式正确显示
性别字段显示"男"或"女"（而不是0或1）
出生年月格式化显示正确
表单重置后，新字段清空

4. 集成测试

完整流程测试：选择申请→填写变更→提交→查看详情
编辑已有变更申请时，新字段显示正确
变更历史查询时，新字段显示正确

🎯 优化亮点

字段命名一致性：严格按照出国申请表的字段命名，确保前后端一致
数据自动填充：从原申请中自动获取，减少用户输入
只读显示：本人基本情况不允许修改，确保数据准确性
性别友好显示：将0/1转换为"男"/"女"显示
完整的数据流：从数据库到后端到前端，完整支持新字段

⚠️ 注意事项

数据库执行顺序：
- 先执行rs_overseas_itinerary_change_add_fields.sql添加字段
- 确保出国申请表已有这些字段
字段可选性：
- 所有新增字段均为可选字段（可为NULL）
- 不影响已有变更申请记录
兼容性：
- 新字段在后端VO/Bo类中均为可选
- 前端表单验证不包含这些字段
- 确保向后兼容

📝 完成状态

✅ 数据库表结构修改完成 ✅ 后端实体类、VO类、Bo类更新完成 ✅ 前端API接口类型定义更新完成 ✅ 前端表单UI更新完成 ✅ 数据自动填充逻辑更新完成 ✅ 表单重置逻辑更新完成 ✅ 无编译错误和警告

修改完成时间：2025-10-13
符合规范：出国申请登记表字段规范
测试状态：待测试

13 KiB Raw Blame History Unescape Escape

出国行程变更申请表单 - 本人基本情况字段增强

📋 修改时间

🎯 需求说明

📝 修改内容

一、数据库表结构修改

1. 创建ALTER脚本

2. 更新完整建表脚本

二、后端代码修改

1. 实体类 (Entity)

2. VO类 (View Object)

3. Bo类 (Business Object)

三、前端代码修改

1. API接口类型定义

2. 表单UI修改

3. 数据自动填充逻辑

4. 表单重置逻辑

📦 涉及文件清单

数据库脚本 (2个文件)

后端代码 (3个文件)

前端代码 (2个文件)

🎨 新增字段展示效果

表单布局（一、本人基本情况）

🔄 数据流程

✅ 字段对应关系

🧪 测试要点

1. 数据库测试

2. 后端测试

3. 前端测试

4. 集成测试

🎯 优化亮点

⚠️ 注意事项

📝 完成状态

13 KiB

Raw Blame History