hzdyjs/✅出国登记表PDF模板第二次格式修复完成.md

✅ 出国登记表PDF模板第二次格式修复完成

📋 修复说明

根据用户反馈和实际使用需求，对PDF生成模板进行了进一步的格式调整。

🎯 修复内容

1. 政治面貌字段位置调整

修改前：

• 第二行：公民身份号码（colspan=6）
• 第三行：政治面貌（独立一行，colspan=8）

修改后：

• 第二行：公民身份号码（colspan=4）+ 政治面貌（独立列）

代码位置：web/src/views/rs/overseas-registration/index.vue (第479-485行)

具体修改：

<!-- 第二行：公民身份号码和政治面貌行 -->
<tr>
  <td colspan="2" class="center-text bold-text">公民身份号码</td>
  <td colspan="4" class="data-cell">{{ viewData.idNumber || '' }}</td>
  <td class="center-text bold-text">政治<br/>面貌</td>
  <td class="data-cell">{{ viewData.politicalStatus || '' }}</td>
</tr>

效果：政治面貌字段移到公民身份号码后面，在同一行显示

2. 删除所有提示性文字

删除的提示文字：

• ❌ "（请填写18位公民身份号码）"
• ❌ "（请填写至县（市、区））"
• ❌ "（请填写全称）"

修改位置：

• 第482行：公民身份号码行
• 第490行：户籍所在地行
• 第496行：工作部门行

修改前示例：

<td colspan="6" class="data-cell">
  （请填写18位公民身份号码）<br/>
  {{ viewData.idNumber || '' }}
</td>

修改后示例：

<td colspan="4" class="data-cell">{{ viewData.idNumber || '' }}</td>

效果：所有字段直接显示数据，无多余提示文字

3. 照片栏尺寸调整

修改前：

• width: 100px
• rowspan: 6
• min-height: 100px

修改后：

• width: 121px (约32mm，1mm ≈ 3.78px)
• rowspan: 5
• height: 98px (约26mm)
• min-height: 98px

代码位置：

• HTML：第473行
• CSS：第1342-1347行

HTML修改：

<td width="121" rowspan="5" class="center-text photo-cell">
  <div class="photo-text">照 片</div>
  <div class="photo-desc">(2寸免冠白色或淡蓝色底彩照32MM×26MM)</div>
</td>

CSS修改：

.pdf-table .photo-cell {
  padding: 10px;
  width: 121px;  /* 32mm ≈ 121px */
  height: 98px;   /* 26mm ≈ 98px */
  min-height: 98px;
}

效果：照片栏调整为标准的32mm×26mm尺寸，适合粘贴2寸照片

4. 照片栏下方空白格连接问题修复

修改前：

• 登记备案责任单位联系人行最后有独立的空白单元格（td rowspan="2"）
• 办公电话和移动电话列（colspan=3）
• 最后一列独立的空白格（colspan=1）

修改后：

• 删除独立的空白单元格
• 办公电话和移动电话列扩展（colspan=4）
• 与照片栏自然衔接

代码位置：第521-529行

具体修改：

<!-- 第六、七行：登记备案责任单位联系人 -->
<tr style="height: 60px;">
  <td colspan="2" rowspan="2" class="center-text bold-text">登记备案责任<br/>单位联系人</td>
  <td colspan="3" rowspan="2" class="center-text bold-text">联系电话</td>
  <td colspan="4" class="data-cell">办公电话：</td>  <!-- 从colspan=3改为colspan=4 -->
</tr>
<tr style="height: 60px;">
  <td colspan="4" class="data-cell">移动电话：</td>  <!-- 从colspan=3改为colspan=4 -->
</tr>

效果：照片栏下方的空白格与前面的联系电话字段合并，表格结构更加合理

5. 表格行数调整

修改前：表格共10行（包括照片栏跨6行） 修改后：表格共9行（包括照片栏跨5行）

调整原因：

• 政治面貌字段合并到第二行，减少一行
• 照片栏rowspan从6改为5

📊 表格结构总览

修改后的表格结构（共9行）

行号	列结构说明
第1行	姓(1) + 姓数据(1) + 名(1) + 名数据(1) + 性别(1) + 性别数据(1) + 出生日期(1) + 日期数据(1) + 照片(rowspan=5)
第2行	公民身份号码(2) + 身份证数据(4) + 政治面貌(1) + 政治面貌数据(1)
第3行	户籍所在地(2) + 户籍数据(6)
第4行	工作部门(2) + 工作部门数据(6)
第5行	职务职称(2) + 职务数据(2) + 行政职级(1) + 行政数据(1) + 人员类别代码(1) + 代码数据(1)
第6行	登记备案责任单位(2, rowspan=2) + 盖章区(6, rowspan=2) + 负责人签名(1, rowspan=2)
第7行	（续第6行）
第8行	登记备案责任单位联系人(2, rowspan=2) + 联系电话标题(3, rowspan=2) + 办公电话(4)
第9行	（续第8行） + 移动电话(4)

列宽分配（总宽度约680px）

列	宽度说明
姓	50px
姓数据	80px
名	50px
名数据	80px
性别	60px
性别数据	60px
出生日期	80px
日期数据	120px
照片	121px（32mm）

✅ 修复完成确认

• ✅ 政治面貌字段移到公民身份号码后面（同一行）
• ✅ 删除"（请填写18位公民身份号码）"提示
• ✅ 删除"（请填写至县（市、区））"提示
• ✅ 删除"（请填写全称）"提示
• ✅ 照片栏宽度调整为121px（32mm）
• ✅ 照片栏高度调整为98px（26mm）
• ✅ 照片栏rowspan调整为5（从6改为5）
• ✅ 照片栏下方空白格与前面字段连接
• ✅ 办公电话和移动电话列扩展到colspan=4
• ✅ 表格结构从10行优化为9行
• ✅ 无编译错误

🔧 修改文件

文件路径：web/src/views/rs/overseas-registration/index.vue

修改行数：约30行代码调整

主要修改区域：

• 第473行：照片栏width和rowspan调整
• 第479-485行：公民身份号码和政治面貌合并行
• 第487-491行：户籍所在地行（删除提示）
• 第493-497行：工作部门行（删除提示）
• 第521-529行：登记备案责任单位联系人行（colspan调整）
• 第1342-1347行：照片栏CSS样式调整

📝 测试建议

1. 功能测试：

   • 打开出国登记菜单 → 登记历史选项卡
   • 点击任意记录的"查看"按钮
   • 点击"下载PDF"按钮
   • 查看生成的PDF文件格式

2. 格式验证：

   • ✅ 检查政治面貌是否在公民身份号码后面同一行
   • ✅ 检查所有提示性文字是否已删除
   • ✅ 检查照片栏尺寸是否为32mm×26mm（约121px×98px）
   • ✅ 检查照片栏下方是否无独立空白格
   • ✅ 检查办公电话和移动电话列是否正确扩展
   • ✅ 检查表格整体布局是否合理

3. 打印测试：

   • 打印生成的PDF文件
   • 使用标准2寸照片（32mm×26mm）测试粘贴
   • 验证照片是否能完整粘贴在照片栏内

🎯 预期效果

生成的PDF文档将更加简洁和实用：

• 政治面貌与公民身份号码在同一行，节省空间
• 删除所有提示性文字，表格更加整洁
• 照片栏调整为标准2寸照片尺寸（32mm×26mm），便于线下粘贴照片
• 照片栏下方空白格与前面字段合并，表格结构更加合理
• 整体表格从10行优化为9行，布局更加紧凑

📐 尺寸换算参考

像素与毫米换算（基于96 DPI）：

• 1mm ≈ 3.78px
• 32mm ≈ 121px
• 26mm ≈ 98px

2寸照片标准尺寸：

• 35mm × 53mm（传统2寸）
• 32mm × 26mm（证件照2寸，本项目使用）

---

修复时间：2025-10-12 修复状态：✅ 已完成 测试状态：⏳ 待测试 前置依赖：第一次修复（姓名拆分、区域高度调整等）