|
|
@@ -0,0 +1,836 @@
|
|
|
+<template>
|
|
|
+ <!-- 文件通知阅读弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="noticeDialog.title"
|
|
|
+ v-model="noticeDialog.visible"
|
|
|
+ width="800px"
|
|
|
+ top="5vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="notice-content">
|
|
|
+ <!-- 文件头部 -->
|
|
|
+ <div class="notice-header" style="text-align: center; margin-bottom: 20px;">
|
|
|
+ <h2 style="color: #1890ff; margin: 0;">杭州第一技师学院</h2>
|
|
|
+ <h3 style="color: #666; margin: 10px 0;">关于因私出国（境）申请管理的通知</h3>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文件内容 -->
|
|
|
+ <div class="notice-body" style="line-height: 1.8; font-size: 14px; color: #333;">
|
|
|
+ <p><strong>各部门、各位教职工：</strong></p>
|
|
|
+
|
|
|
+ <p>为规范我院教职工因私出国（境）申请管理，根据相关规定，现将有关事项通知如下：</p>
|
|
|
+
|
|
|
+ <p><strong>一、申请范围</strong></p>
|
|
|
+ <p>本通知适用于我院在职教职工因私事需要出国（境）的申请管理。</p>
|
|
|
+
|
|
|
+ <p><strong>二、申请条件</strong></p>
|
|
|
+ <p>1. 申请人须为我院正式在职教职工；</p>
|
|
|
+ <p>2. 无违法违纪记录；</p>
|
|
|
+ <p>3. 工作表现良好，能够按时完成本职工作。</p>
|
|
|
+
|
|
|
+ <p><strong>三、申请流程</strong></p>
|
|
|
+ <p>1. 填写《因私出国（境）申请登记报备表》；</p>
|
|
|
+ <p>2. 提交相关证明材料；</p>
|
|
|
+ <p>3. 按规定程序进行审批；</p>
|
|
|
+ <p>4. 获得批准后方可办理相关手续。</p>
|
|
|
+
|
|
|
+ <p><strong>四、注意事项</strong></p>
|
|
|
+ <p>1. 申请人应如实填写申请表，不得隐瞒或虚报；</p>
|
|
|
+ <p>2. 出国（境）期间应遵守当地法律法规；</p>
|
|
|
+ <p>3. 按时回国并及时报告相关情况；</p>
|
|
|
+ <p>4. 如有特殊情况，应及时与学院联系。</p>
|
|
|
+
|
|
|
+ <p><strong>五、其他</strong></p>
|
|
|
+ <p>本通知自发布之日起执行，如有疑问请联系人事处。</p>
|
|
|
+
|
|
|
+ <div style="text-align: right; margin-top: 30px;">
|
|
|
+ <p>杭州第一技师学院</p>
|
|
|
+ <p>{{ new Date().getFullYear() }}年{{ new Date().getMonth() + 1 }}月{{ new Date().getDate() }}日</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 弹窗底部操作按钮 -->
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer" style="text-align: center;">
|
|
|
+ <el-button
|
|
|
+ v-if="countdownActive"
|
|
|
+ type="info"
|
|
|
+ disabled
|
|
|
+ size="large"
|
|
|
+ style="min-width: 150px;"
|
|
|
+ >
|
|
|
+ 请阅读文件内容 ({{ countdown }}s)
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-else-if="readCompleted"
|
|
|
+ type="primary"
|
|
|
+ @click="handleReadComplete"
|
|
|
+ size="large"
|
|
|
+ style="min-width: 150px;"
|
|
|
+ >
|
|
|
+ 阅读完成，进入申请
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="default"
|
|
|
+ @click="handleCloseNotice"
|
|
|
+ size="large"
|
|
|
+ style="margin-left: 20px;"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div class="p-2">
|
|
|
+ <!-- 顶部按钮区域 -->
|
|
|
+ <div class="top-button-section">
|
|
|
+ <div class="left-buttons">
|
|
|
+ <el-button type="primary" :loading="loading" @click="handleSubmit" v-hasPermi="['rs:overseas:add', 'rs:overseas:edit']">
|
|
|
+ {{ isResubmit ? '修改并重新提交' : (isEdit ? '更新' : '提交') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleCancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 申请表单内容 -->
|
|
|
+ <el-card shadow="never" class="form-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="section-title">
|
|
|
+ {{ isResubmit ? '修改并重新提交' : (isEdit ? '编辑' : '新增') }}因私出国（境）申请登记报备表
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ ref="applicationFormRef"
|
|
|
+ :model="applicationForm"
|
|
|
+ :rules="applicationRules"
|
|
|
+ label-width="140px"
|
|
|
+ class="application-form"
|
|
|
+ v-loading="formLoading"
|
|
|
+ >
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="section-title">基本信息</div>
|
|
|
+ <!-- 第一排：姓名、性别 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名" prop="applicantName">
|
|
|
+ <el-input v-model="applicationForm.applicantName" placeholder="请输入姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="性别" prop="gender">
|
|
|
+ <el-select v-model="applicationForm.gender" placeholder="请选择性别" style="width: 100%">
|
|
|
+ <el-option label="男" value="0" />
|
|
|
+ <el-option label="女" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第二排：出生年月、政治面貌 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="出生年月" prop="birthDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="applicationForm.birthDate"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择出生年月"
|
|
|
+ style="width: 100%"
|
|
|
+ format="YYYY年MM月"
|
|
|
+ value-format="YYYY-MM-01"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="政治面貌" prop="politicalStatus">
|
|
|
+ <el-select v-model="applicationForm.politicalStatus" placeholder="请选择政治面貌" style="width: 100%">
|
|
|
+ <el-option label="中共党员" value="1" />
|
|
|
+ <el-option label="中共预备党员" value="2" />
|
|
|
+ <el-option label="共青团员" value="3" />
|
|
|
+ <el-option label="民革党员" value="4" />
|
|
|
+ <el-option label="民盟盟员" value="5" />
|
|
|
+ <el-option label="民建会员" value="6" />
|
|
|
+ <el-option label="民进会员" value="7" />
|
|
|
+ <el-option label="农工党党员" value="8" />
|
|
|
+ <el-option label="致公党党员" value="9" />
|
|
|
+ <el-option label="九三学社社员" value="10" />
|
|
|
+ <el-option label="台盟盟员" value="11" />
|
|
|
+ <el-option label="无党派人士" value="12" />
|
|
|
+ <el-option label="群众" value="13" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第三排：现工作部门、职称、职务 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="现工作部门" prop="department">
|
|
|
+ <el-input v-model="applicationForm.department" placeholder="请输入工作部门（教学系）" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="职称" prop="professionalTitle">
|
|
|
+ <el-input v-model="applicationForm.professionalTitle" placeholder="请输入职称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="职务" prop="position">
|
|
|
+ <el-input v-model="applicationForm.position" placeholder="请输入职务" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第四排：申领证件名称、证件号码 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="申领证件名称" prop="documentName">
|
|
|
+ <el-input v-model="applicationForm.documentName" placeholder="请输入申领证件名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="证件号码" prop="documentNumber">
|
|
|
+ <el-input v-model="applicationForm.documentNumber" placeholder="请输入证件号码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 出国信息 -->
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="section-title">出国信息</div>
|
|
|
+ <!-- 第五排：前往国家、出境事由 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="前往国家" prop="destinationCountry">
|
|
|
+ <el-input v-model="applicationForm.destinationCountry" placeholder="请输入前往国家" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="出境事由" prop="exitReason">
|
|
|
+ <el-radio-group v-model="applicationForm.exitReason">
|
|
|
+ <el-radio label="旅游">旅游</el-radio>
|
|
|
+ <el-radio label="探亲">探亲</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 探亲时显示的额外字段 -->
|
|
|
+ <el-row :gutter="20" v-if="applicationForm.exitReason === '探亲'">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="探望对象关系" prop="visitRelationship">
|
|
|
+ <el-input
|
|
|
+ v-model="applicationForm.visitRelationship"
|
|
|
+ placeholder="请输入探望对象姓名及与申请者关系"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 行程安排 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="行程安排" prop="itinerary">
|
|
|
+ <el-input
|
|
|
+ v-model="applicationForm.itinerary"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入详细的行程安排（如：访问城市、主要活动、住宿安排等）"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 出国（境）时间 -->
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-form-item label="出国（境）时间" label-width="110px" style="font-weight: 600; white-space: nowrap;">
|
|
|
+ <span></span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :offset="0">
|
|
|
+ <el-form-item label="出发日期" prop="startDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="applicationForm.startDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择出发日期"
|
|
|
+ style="width: 100%; min-width: 180px;"
|
|
|
+ format="YYYY年MM月DD日"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="返回日期" prop="endDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="applicationForm.endDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择返回日期"
|
|
|
+ style="width: 100%; min-width: 180px;"
|
|
|
+ format="YYYY年MM月DD日"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" :offset="1">
|
|
|
+ <el-form-item label="出国天数" prop="duration">
|
|
|
+ <el-input v-model="applicationForm.duration" placeholder="天数" disabled style="min-width: 120px;">
|
|
|
+ <template #append>天</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 党籍保留附件上传区域（仅当中共党员且出国天数>30天时显示） -->
|
|
|
+ <div
|
|
|
+ v-if="showPartyRetentionUpload"
|
|
|
+ class="party-retention-upload-section"
|
|
|
+ style="margin: 10px 0; padding: 10px; border: 1px dashed #ff4757; border-radius: 4px; background: #fff5f5;">
|
|
|
+ <div style="font-size: 14px; color: #ff4757; margin-bottom: 8px; font-weight: bold;">
|
|
|
+ <el-icon><Warning /></el-icon>
|
|
|
+ 党籍保留附件上传（必填）
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 12px; color: #606266; margin-bottom: 8px;">
|
|
|
+ 您是中共党员且出国天数超过30天，需要先提交党籍保留流程，审批通过后下载并上传盖章附件
|
|
|
+ </div>
|
|
|
+ <!-- 下载PDF空白模板按钮 -->
|
|
|
+ <div style="margin-bottom: 10px;">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="Download"
|
|
|
+ @click="handleDownloadPartyRetention"
|
|
|
+ >
|
|
|
+ 下载党籍保留申请PDF模板
|
|
|
+ </el-button>
|
|
|
+ <span style="margin-left: 10px; font-size: 12px; color: #909399;">
|
|
|
+ * 请先下载空白模板并手工填写，然后上传盖章后的文件
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="attachment-upload-container">
|
|
|
+ <el-upload
|
|
|
+ ref="partyRetentionUploadRef"
|
|
|
+ :action="partyRetentionUploadUrl"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :data="partyRetentionUploadData"
|
|
|
+ :file-list="partyRetentionFileList"
|
|
|
+ :on-success="handlePartyRetentionUploadSuccess"
|
|
|
+ :on-error="handlePartyRetentionUploadError"
|
|
|
+ :on-remove="handlePartyRetentionRemove"
|
|
|
+ :before-upload="beforePartyRetentionUpload"
|
|
|
+ :limit="1"
|
|
|
+ accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
|
|
|
+ list-type="text"
|
|
|
+ class="upload-demo"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" icon="Upload">
|
|
|
+ 上传党籍保留附件
|
|
|
+ </el-button>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip" style="font-size: 12px; color: #909399;">
|
|
|
+ 支持 PDF、图片、Word 格式，文件大小不超过 10MB
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 承诺声明 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="承诺声明">
|
|
|
+ <div class="commitment-text">
|
|
|
+ 本人承诺，在出国（境）期间遵守当地法律法规和中国的法律法规，结束后如期回国并到学校报到，如逾期不归，同意作自动离职处理。
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 备注 -->
|
|
|
+ <div class="form-section">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注" prop="remarks">
|
|
|
+ <el-input
|
|
|
+ v-model="applicationForm.remarks"
|
|
|
+ type="textarea"
|
|
|
+ :rows="1"
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="OverseasForm" lang="ts">
|
|
|
+import { ref, reactive, computed, onMounted, getCurrentInstance, watch, nextTick } from 'vue';
|
|
|
+import { useRoute, useRouter } from 'vue-router';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import type { FormInstance, FormRules } from 'element-plus';
|
|
|
+import { Warning, Download, Upload } from '@element-plus/icons-vue';
|
|
|
+import { getToken } from '@/utils/auth';
|
|
|
+import request from '@/utils/request';
|
|
|
+
|
|
|
+// 获取当前实例和路由
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const route = useRoute();
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+// 响应式数据
|
|
|
+const loading = ref(false);
|
|
|
+const formLoading = ref(false);
|
|
|
+const applicationFormRef = ref<FormInstance>();
|
|
|
+const partyRetentionUploadRef = ref();
|
|
|
+
|
|
|
+// 党籍保留附件相关
|
|
|
+const partyRetentionFileList = ref([]);
|
|
|
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/rs/overseas/application/attachment/upload');
|
|
|
+
|
|
|
+// 党籍保留附件上传地址和参数
|
|
|
+const partyRetentionUploadUrl = computed(() => {
|
|
|
+ return import.meta.env.VITE_APP_BASE_API + '/rs/overseas/application/attachment/upload';
|
|
|
+});
|
|
|
+
|
|
|
+const partyRetentionUploadData = computed(() => {
|
|
|
+ return {
|
|
|
+ applicationId: applicationForm.applicationId || '',
|
|
|
+ title: '党籍保留申请',
|
|
|
+ content: '党籍保留申请附件'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+// 文件通知阅读弹窗相关
|
|
|
+const noticeDialog = reactive({
|
|
|
+ visible: false,
|
|
|
+ title: '杭州第一技师学院文件'
|
|
|
+});
|
|
|
+const countdown = ref(5); // 倒计时秒数
|
|
|
+const countdownActive = ref(false); // 倒计时是否激活
|
|
|
+const readCompleted = ref(false); // 是否已阅读完成
|
|
|
+
|
|
|
+// 上传文件的headers配置
|
|
|
+const uploadHeaders = computed(() => {
|
|
|
+ return {
|
|
|
+ 'Authorization': `Bearer ${getToken() || ''}`,
|
|
|
+ 'clientid': import.meta.env.VITE_APP_CLIENT_ID || 'e5cd7e4891bf95d1d19206ce24a7b32e'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+// 判断是否为编辑模式
|
|
|
+const isEdit = computed(() => route.query.type === 'edit' || route.query.type === 'resubmit' || !!route.query.id);
|
|
|
+
|
|
|
+// 判断是否为重新提交模式
|
|
|
+const isResubmit = computed(() => route.query.type === 'resubmit');
|
|
|
+
|
|
|
+// 申请表单数据
|
|
|
+const applicationForm = reactive({
|
|
|
+ applicationId: '',
|
|
|
+ applicantName: '',
|
|
|
+ gender: '',
|
|
|
+ birthDate: '',
|
|
|
+ politicalStatus: '',
|
|
|
+ department: '',
|
|
|
+ professionalTitle: '',
|
|
|
+ position: '',
|
|
|
+ documentName: '',
|
|
|
+ documentNumber: '',
|
|
|
+ destinationCountry: '',
|
|
|
+ exitReason: '',
|
|
|
+ visitRelationship: '',
|
|
|
+ itinerary: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ duration: '',
|
|
|
+ remarks: '',
|
|
|
+ partyRetentionAttachment: '', // 党籍保留附件路径
|
|
|
+ partyRetentionAttachmentId: '' // 党籍保留附件ID
|
|
|
+});
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const applicationRules: FormRules = {
|
|
|
+ applicantName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
|
|
+ gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|
|
+ birthDate: [{ required: true, message: '请选择出生年月', trigger: 'change' }],
|
|
|
+ politicalStatus: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
|
|
|
+ department: [{ required: true, message: '请输入现工作部门', trigger: 'blur' }],
|
|
|
+ professionalTitle: [{ required: true, message: '请输入职称', trigger: 'blur' }],
|
|
|
+ position: [{ required: true, message: '请输入职务', trigger: 'blur' }],
|
|
|
+ documentName: [{ required: true, message: '请输入申领证件名称', trigger: 'blur' }],
|
|
|
+ documentNumber: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
|
|
|
+ destinationCountry: [{ required: true, message: '请输入前往国家', trigger: 'blur' }],
|
|
|
+ exitReason: [{ required: true, message: '请选择出境事由', trigger: 'change' }],
|
|
|
+ itinerary: [{ required: true, message: '请输入行程安排', trigger: 'blur' }],
|
|
|
+ startDate: [{ required: true, message: '请选择出发日期', trigger: 'change' }],
|
|
|
+ endDate: [{ required: true, message: '请选择返回日期', trigger: 'change' }]
|
|
|
+};
|
|
|
+
|
|
|
+// 计算出国天数
|
|
|
+const calculateDuration = () => {
|
|
|
+ if (applicationForm.startDate && applicationForm.endDate) {
|
|
|
+ const start = new Date(applicationForm.startDate);
|
|
|
+ const end = new Date(applicationForm.endDate);
|
|
|
+ const diffTime = Math.abs(end.getTime() - start.getTime());
|
|
|
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
+ applicationForm.duration = diffDays.toString();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 监听日期变化
|
|
|
+watch([() => applicationForm.startDate, () => applicationForm.endDate], () => {
|
|
|
+ calculateDuration();
|
|
|
+});
|
|
|
+
|
|
|
+// 计算属性：是否显示党籍保留上传组件
|
|
|
+const showPartyRetentionUpload = computed(() => {
|
|
|
+ // 首先检查是否为中共党员
|
|
|
+ const isPartyMember = applicationForm.politicalStatus === '1' || applicationForm.politicalStatus === '中共党员';
|
|
|
+
|
|
|
+ // 如果不是党员，直接返回false
|
|
|
+ if (!isPartyMember) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查出国天数
|
|
|
+ const duration = applicationForm.duration;
|
|
|
+ if (!duration) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 出国天数大于30天才显示
|
|
|
+ return Number(duration) > 30;
|
|
|
+});
|
|
|
+
|
|
|
+// 监听政治面貌和出国天数变化，更新党籍保留附件显示状态
|
|
|
+watch(
|
|
|
+ () => [applicationForm.politicalStatus, applicationForm.duration],
|
|
|
+ ([politicalStatus, duration]) => {
|
|
|
+ const isPartyMember = politicalStatus === '1' || politicalStatus === '中共党员';
|
|
|
+ const needRetention = isPartyMember && duration && Number(duration) > 30;
|
|
|
+ console.log('党籍保留附件显示状态:', { isPartyMember, duration, needRetention });
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+// 下载党籍保留申请PDF空白模板
|
|
|
+const handleDownloadPartyRetention = async () => {
|
|
|
+ try {
|
|
|
+ ElMessage.info('正在生成PDF，请稍候...');
|
|
|
+
|
|
|
+ // 使用request工具发送请求，自动包含认证头
|
|
|
+ const response = await request({
|
|
|
+ url: '/rs/overseas/record/downloadPartyRetention',
|
|
|
+ method: 'get',
|
|
|
+ responseType: 'blob' // 指定响应类型为blob
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建blob并触发下载（response已经是blob对象）
|
|
|
+ const blob = response instanceof Blob
|
|
|
+ ? new Blob([response], { type: 'application/pdf' })
|
|
|
+ : new Blob([response.data], { type: 'application/pdf' });
|
|
|
+
|
|
|
+ console.log('📥 生成的Blob大小:', blob.size, 'bytes');
|
|
|
+ console.log('📥 Blob类型:', blob.type);
|
|
|
+
|
|
|
+ if (blob.size === 0) {
|
|
|
+ throw new Error('下载的文件为空');
|
|
|
+ }
|
|
|
+
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+ link.download = `党籍保留申请_${new Date().getTime()}.pdf`;
|
|
|
+ link.style.display = 'none';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+
|
|
|
+ ElMessage.success('PDF下载成功！');
|
|
|
+ } catch (error: any) {
|
|
|
+ console.error('❌ 下载PDF失败:', error);
|
|
|
+ ElMessage.error('下载失败: ' + (error.message || '未知错误'));
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 党籍保留附件上传前检查
|
|
|
+const beforePartyRetentionUpload = async (file: any) => {
|
|
|
+ // 检查文件格式
|
|
|
+ const isValidType = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png',
|
|
|
+ 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
|
|
|
+ .includes(file.type);
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10;
|
|
|
+
|
|
|
+ if (!isValidType) {
|
|
|
+ ElMessage.error('只能上传 PDF、图片、Word 格式的文件!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt10M) {
|
|
|
+ ElMessage.error('上传文件大小不能超过 10MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果是新增模式且没有applicationId，需要先保存申请
|
|
|
+ if (!applicationForm.applicationId) {
|
|
|
+ try {
|
|
|
+ ElMessage.info('正在保存申请信息...');
|
|
|
+ await handleSave();
|
|
|
+ if (!applicationForm.applicationId) {
|
|
|
+ ElMessage.error('请先保存申请信息后再上传附件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('保存申请信息失败，无法上传附件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+// 党籍保留附件上传成功
|
|
|
+const handlePartyRetentionUploadSuccess = (response: any, file: any) => {
|
|
|
+ console.log('党籍保留附件上传响应:', response);
|
|
|
+ if (response && response.code === 200) {
|
|
|
+ ElMessage.success('党籍保留附件上传成功');
|
|
|
+ // 保存附件信息到表单数据中
|
|
|
+ if (response.data) {
|
|
|
+ applicationForm.partyRetentionAttachment = response.data.filePath || response.data.url;
|
|
|
+ applicationForm.partyRetentionAttachmentId = response.data.attachmentId;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response?.msg || '上传失败');
|
|
|
+ // 移除上传失败的文件
|
|
|
+ partyRetentionFileList.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 党籍保留附件上传失败
|
|
|
+const handlePartyRetentionUploadError = (error: any) => {
|
|
|
+ console.error('党籍保留附件上传失败:', error);
|
|
|
+ ElMessage.error('附件上传失败，请重试');
|
|
|
+ // 清空文件列表
|
|
|
+ partyRetentionFileList.value = [];
|
|
|
+};
|
|
|
+
|
|
|
+// 党籍保留附件移除
|
|
|
+const handlePartyRetentionRemove = (file: any) => {
|
|
|
+ applicationForm.partyRetentionAttachment = '';
|
|
|
+ applicationForm.partyRetentionAttachmentId = '';
|
|
|
+ ElMessage.info('已移除党籍保留附件');
|
|
|
+};
|
|
|
+
|
|
|
+// 开始倒计时
|
|
|
+const startCountdown = () => {
|
|
|
+ countdownActive.value = true;
|
|
|
+ readCompleted.value = false;
|
|
|
+
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ if (countdown.value > 0) {
|
|
|
+ countdown.value--;
|
|
|
+ } else {
|
|
|
+ clearInterval(timer);
|
|
|
+ countdownActive.value = false;
|
|
|
+ readCompleted.value = true;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+};
|
|
|
+
|
|
|
+// 关闭文件通知弹窗并进入申请表单
|
|
|
+const handleReadComplete = () => {
|
|
|
+ noticeDialog.visible = false;
|
|
|
+ // 重置状态
|
|
|
+ countdown.value = 5;
|
|
|
+ countdownActive.value = false;
|
|
|
+ readCompleted.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 关闭文件通知弹窗
|
|
|
+const handleCloseNotice = () => {
|
|
|
+ noticeDialog.visible = false;
|
|
|
+ // 重置状态
|
|
|
+ countdown.value = 5;
|
|
|
+ countdownActive.value = false;
|
|
|
+ readCompleted.value = false;
|
|
|
+ // 返回上一页
|
|
|
+ router.go(-1);
|
|
|
+};
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const handleSubmit = async () => {
|
|
|
+ if (!applicationFormRef.value) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ await applicationFormRef.value.validate();
|
|
|
+
|
|
|
+ // 检查党员是否需要上传党籍保留附件
|
|
|
+ if (showPartyRetentionUpload.value && !applicationForm.partyRetentionAttachment) {
|
|
|
+ ElMessage.error('请上传党籍保留附件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ // 这里调用保存API
|
|
|
+ // 由于我只能修改rs模块内容，暂时模拟提交成功
|
|
|
+ await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
+
|
|
|
+ const successMessage = isResubmit.value
|
|
|
+ ? '修改并重新提交成功！您的申请已重新进入审批流程。'
|
|
|
+ : (isEdit.value ? '更新成功' : '申请提交成功！您的申请已进入审批流程，请耐心等待审批结果。');
|
|
|
+ ElMessage.success(successMessage);
|
|
|
+
|
|
|
+ // 返回上一页
|
|
|
+ handleCancel();
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('表单验证失败:', error);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 取消操作
|
|
|
+const handleCancel = () => {
|
|
|
+ ElMessageBox.confirm('是否确认取消操作？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 关闭当前页面，返回上一页
|
|
|
+ proxy.$tab.closePage(route);
|
|
|
+ router.go(-1);
|
|
|
+ }).catch(() => {
|
|
|
+ // 用户取消
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化数据
|
|
|
+const initData = async () => {
|
|
|
+ if (isEdit.value && route.query.id) {
|
|
|
+ formLoading.value = true;
|
|
|
+ try {
|
|
|
+ // 这里应该根据ID获取数据
|
|
|
+ // 由于我只能修改rs模块内容，暂时模拟数据加载
|
|
|
+ await new Promise(resolve => setTimeout(resolve, 500));
|
|
|
+
|
|
|
+ // 模拟填充编辑数据
|
|
|
+ Object.assign(applicationForm, {
|
|
|
+ applicationId: route.query.id,
|
|
|
+ applicantName: '张三',
|
|
|
+ gender: '男',
|
|
|
+ // ... 其他字段
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取数据失败:', error);
|
|
|
+ ElMessage.error('获取数据失败');
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 组件挂载时初始化
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ initData();
|
|
|
+
|
|
|
+ // 新增模式下显示文件阅读弹窗
|
|
|
+ if (route.query.type === 'add') {
|
|
|
+ noticeDialog.visible = true;
|
|
|
+ startCountdown();
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.top-button-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 12px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.left-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-card {
|
|
|
+ min-height: calc(100vh - 160px);
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding: 16px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.application-form {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.application-form .el-form-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.application-form .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式布局 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .el-col-8 {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col-12 {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 承诺声明样式 */
|
|
|
+.commitment-text {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ color: #606266;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|
