“补充人事vue文件”
This commit is contained in:
weizhong committed
1 parent
3e9ed8352d
commit
851ebe86e4
1 file changed
+836
@@ -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>
|
||||
Reference in new issue
Block a user