cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

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

11 KiB

Raw Blame History

党籍保留申请表单优化说明

📋 优化概述

根据附件中的《关于因私赴 XXX 探亲保留党籍的申请》标准格式，对党籍保留申请表单进行了重新设计和优化。

🎯 优化目标

符合公文格式：表单布局完全按照正式申请书格式设计
信息流畅：采用行内表单元素，保持申请书的连贯性
清晰易读：使用合理的间距和排版，提升用户体验
数据完整：补充必要字段，确保申请信息完整

✨ 主要改进

1. 表单结构优化

原表单问题

❌ 字段标签过长且混乱（如"拟于XXX年X月X日到XXX年XX月XX日"）
❌ 使用传统的标签-输入框布局，不符合公文格式
❌ 固定的审批文字占用大量空间
❌ 缺少必要字段（职务、亲属姓名等）

新表单设计

✅ 标题区域：居中显示"关于因私赴 XXX 探亲保留党籍的申请"
✅ 抬头区域：党支部名称输入
✅ 正文区域：采用行内表单，文字和输入框自然衔接
✅ 签名区域：右对齐显示申请人和日期

2. 字段调整

新增字段

position: '',           // 职务
relativeName: '',       // 亲属姓名
applicantSignature: '' // 申请人签名

移除字段

travelPeriod: [],      // 移除日期范围选择器，改为独立的开始/结束日期
selfFunded: '1',       // 移除费用自理字段
requestApproval: '',   // 移除固定的审批文字
finalApproval: ''      // 移除固定的审批文字

保留字段

name: '',              // 姓名
spouse: '',            // 配偶姓名（可选）
destination: '',       // 目的地国家或地区
purpose: '',           // 出国目的详细说明
travelStartDate: '',   // 开始日期
travelEndDate: '',     // 结束日期
stayDays: 1,          // 停留天数
partyBranch: '',      // 党支部名称
applicationDate: ''    // 申请日期

3. 表单布局优化

行内表单设计

<div class="content-paragraph">
  <span class="indent">本人</span>
  <el-form-item prop="name" class="inline-form-item">
    <el-input v-model="retentionForm.name" placeholder="请输入姓名" style="width: 120px" />
  </el-form-item>
  <span>（身份证号），现任</span>
  <el-form-item prop="position" class="inline-form-item">
    <el-input v-model="retentionForm.position" placeholder="请输入职务" style="width: 150px" />
  </el-form-item>
  <span>。计划于</span>
  <!-- 更多字段... -->
</div>

优势：

文字和输入框自然衔接，符合公文书写习惯
保持申请书的连贯性和可读性
用户填写时更加直观

4. 样式优化

核心样式

/* 表单整体背景 */
.retention-form {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
}

/* 标题居中加粗 */
.form-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* 正文区域白色背景 */
.form-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  line-height: 2.2;
}

/* 段落布局 */
.content-paragraph {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  line-height: 2.5;
}

/* 行内表单项 */
.inline-form-item {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}

/* 签名区域右对齐 */
.signature-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  text-align: right;
}

5. 表单验证规则

const retentionRules = {
  name: [{ required: true, message: '请输入申请人姓名', trigger: 'blur' }],
  position: [{ required: true, message: '请输入职务', trigger: 'blur' }],
  destination: [{ required: true, message: '请输入目的地国家或地区', trigger: 'blur' }],
  purpose: [{ required: true, message: '请输入出国目的详细说明', trigger: 'blur' }],
  relativeName: [{ required: true, message: '请输入亲属姓名', trigger: 'blur' }],
  travelStartDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
  travelEndDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
  stayDays: [{ required: true, message: '请输入停留天数', trigger: 'blur' }],
  partyBranch: [{ required: true, message: '请输入党支部名称', trigger: 'blur' }],
  applicationDate: [{ required: true, message: '请选择申请日期', trigger: 'change' }]
};

📝 表单内容结构

完整申请书格式

关于因私赴 XXX 探亲保留党籍的申请

XXXX党支部：

    本人 XXX（身份证号），现任 XXX。计划于 XXXX年XX月XX日 至 XXXX年XX月XX日，
偕配偶 XXX，因私赴 XXX（国家或地区）

    探望在 XXX（单位名称或地区）的工作（留学、定居）的补女 XX，在外停留 XX 天
（含离、抵我国国境当日）。

    根据因私出国（境）党籍管理有关规定，特请此准同意其在出国（境）外期间保留党籍。

    妥否，请审批。


                                                申请人：___________

                                                XXXX年XX月XX日

🎨 视觉效果

对比效果

项目	优化前	优化后
布局方式	传统表单布局	公文格式布局
标签长度	过长且混乱	简洁清晰
信息流	断断续续	连贯流畅
可读性	较差	优秀
专业性	一般	符合公文规范

🔧 技术实现要点

1. 行内表单项处理

<el-form-item prop="name" class="inline-form-item">
  <el-input v-model="retentionForm.name" placeholder="请输入姓名" style="width: 120px" />
</el-form-item>

2. 错误提示优化

.inline-form-item :deep(.el-form-item__error) {
  position: relative;
  top: auto;
  left: auto;
  padding-top: 2px;
}

3. 响应式布局

.content-paragraph {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;  /* 自动换行 */
  line-height: 2.5;
}

✅ 用户体验提升

直观性：表单布局与最终申请书格式一致，所见即所得
易用性：输入框宽度根据内容合理设置，提升填写效率
专业性：符合正式公文格式，提升系统专业形象
清晰性：段落分明，逻辑清晰，减少填写错误

📦 文件变更

修改文件

web/src/views/rs/party-membership-retention/index.vue

变更内容

重构表单HTML结构（第255-399行）
更新表单数据模型（第539-553行）
更新表单验证规则（第555-566行）
更新重置表单方法（第791-810行）
简化提交表单方法（第817-860行）
新增专用样式（第933-1029行）

🚀 后续建议

1. 后端字段同步

需要确保后端接口支持新增的字段：

position（职务）
relativeName（亲属姓名）
applicantSignature（申请人签名）

2. 数据库表结构

建议在 rs_party_membership_retention 表中添加对应字段：

ALTER TABLE rs_party_membership_retention 
ADD COLUMN position VARCHAR(100) COMMENT '职务',
ADD COLUMN relative_name VARCHAR(50) COMMENT '亲属姓名',
ADD COLUMN applicant_signature VARCHAR(50) COMMENT '申请人签名';

3. 打印功能

建议增加"打印预览"功能，生成标准格式的申请书PDF文档。

4. 自动填充

建议从用户信息中自动填充：

姓名
职务
党支部

📄 参考文档

原始需求：附件截图《关于因私赴 XXX 探亲保留党籍的申请》
相关文件：web/src/views/rs/party-membership-retention/index.vue

✨ 总结

本次优化完全按照正式公文格式重新设计了党籍保留申请表单，解决了原表单布局混乱、信息不连贯的问题。新表单采用行内表单元素设计，保持了申请书的自然流畅性，大幅提升了用户体验和系统专业性。

🔄 第二轮优化（2025-10-05）

智能关联功能

1. 标题自动显示目的地

优化前：

<div class="form-title">关于因私赴 XXX 探亲保留党籍的申请</div>

优化后：

<div class="form-title">
  关于因私赴 {{ retentionForm.destination || '' }} 探亲保留党籍的申请
</div>

效果：

✅ 用户填写"目的地国家或地区"后，标题自动更新
✅ 未填写时显示空白，保持公文格式的规范性
✅ 实时响应，提升用户体验

2. 停留天数自动计算