351 lines
10 KiB
Vue
351 lines
10 KiB
Vue
<template>
|
||
<div class="recruitment-apply">
|
||
<!-- 头部信息 -->
|
||
<div class="header-banner">
|
||
<div class="banner-content">
|
||
<h1 class="apply-title">在线应聘</h1>
|
||
<p class="apply-subtitle">请填写个人信息和简历，我们会尽快与您联系</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="apply-container">
|
||
<div class="apply-layout">
|
||
<!-- 应聘表单 -->
|
||
<div class="apply-form-section">
|
||
<el-card class="apply-form-card" shadow="never">
|
||
<template #header>
|
||
<div class="form-header">
|
||
<el-icon><User /></el-icon>
|
||
<span>个人信息</span>
|
||
</div>
|
||
</template>
|
||
|
||
<el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="120px" class="apply-form">
|
||
<el-form-item label="姓名" prop="applicantName">
|
||
<el-input v-model="applyForm.applicantName" placeholder="请输入您的姓名" maxlength="50" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="性别" prop="gender">
|
||
<el-radio-group v-model="applyForm.gender">
|
||
<el-radio value="男">男</el-radio>
|
||
<el-radio value="女">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="联系电话" prop="contactPhone">
|
||
<el-input v-model="applyForm.contactPhone" placeholder="请输入手机号码" maxlength="11" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="邮箱地址" prop="contactEmail">
|
||
<el-input v-model="applyForm.contactEmail" placeholder="请输入邮箱地址" maxlength="100" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="年龄" prop="age">
|
||
<el-input-number v-model="applyForm.age" :min="18" :max="65" style="width: 100%" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="最高学历" prop="education">
|
||
<el-select v-model="applyForm.education" placeholder="请选择" style="width: 100%">
|
||
<el-option label="高中" value="高中" />
|
||
<el-option label="专科" value="专科" />
|
||
<el-option label="本科" value="本科" />
|
||
<el-option label="硕士" value="硕士" />
|
||
<el-option label="博士" value="博士" />
|
||
<el-option label="其他" value="其他" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="教育背景" prop="educationBackground">
|
||
<el-input
|
||
v-model="applyForm.educationBackground"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请详细描述您的教育背景，包括毕业院校、专业、获得的荣誉等（500字以内）"
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="工作经验" prop="experience">
|
||
<el-input
|
||
v-model="applyForm.experience"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请简要描述您的工作经验和技能特长（500字以内）"
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="自我介绍" prop="selfDescription">
|
||
<el-input
|
||
v-model="applyForm.selfDescription"
|
||
type="textarea"
|
||
:rows="6"
|
||
placeholder="请介绍您的个人情况、特长和应聘理由（1000字以内）"
|
||
maxlength="1000"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="其他说明" prop="remark">
|
||
<el-input
|
||
v-model="applyForm.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="其他需要说明的信息（选填）"
|
||
maxlength="300"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div class="form-actions">
|
||
<el-button @click="goBack">返回</el-button>
|
||
<el-button type="primary" @click="submitApplication" :loading="submitting"> 提交申请 </el-button>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="RecruitmentApply">
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus';
|
||
import { User } from '@element-plus/icons-vue';
|
||
import { submitJobApplication, type ApplicationForm } from '@/api/rs/application';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// 表单引用
|
||
const applyFormRef = ref<FormInstance>();
|
||
|
||
// 提交状态
|
||
const submitting = ref(false);
|
||
|
||
// 应聘表单数据
|
||
const applyForm = reactive({
|
||
jobId: '',
|
||
applicantName: '',
|
||
gender: '',
|
||
contactPhone: '',
|
||
contactEmail: '',
|
||
age: undefined as number | undefined,
|
||
education: '',
|
||
educationBackground: '',
|
||
experience: '',
|
||
selfDescription: '',
|
||
remark: ''
|
||
});
|
||
|
||
// 表单验证规则
|
||
const applyRules = {
|
||
applicantName: [
|
||
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
||
{ min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }
|
||
],
|
||
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||
contactPhone: [
|
||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||
],
|
||
contactEmail: [
|
||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||
{ type: 'email' as const, message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||
],
|
||
age: [
|
||
{ required: true, message: '请输入年龄', trigger: 'blur' },
|
||
{ type: 'number' as const, min: 18, max: 65, message: '年龄应在18-65岁之间', trigger: 'blur' }
|
||
],
|
||
education: [{ required: true, message: '请选择学历', trigger: 'change' }],
|
||
educationBackground: [
|
||
{ required: true, message: '请填写教育背景', trigger: 'blur' },
|
||
{ min: 10, max: 500, message: '教育背景描述应在 10 到 500 字符之间', trigger: 'blur' }
|
||
],
|
||
experience: [
|
||
{ required: true, message: '请填写工作经验', trigger: 'blur' },
|
||
{ min: 10, max: 500, message: '工作经验描述应在 10 到 500 字符之间', trigger: 'blur' }
|
||
],
|
||
selfDescription: [
|
||
{ required: true, message: '请填写自我介绍', trigger: 'blur' },
|
||
{ min: 20, max: 1000, message: '自我介绍应在 20 到 1000 字符之间', trigger: 'blur' }
|
||
]
|
||
};
|
||
|
||
// 提交应聘申请
|
||
const submitApplication = async () => {
|
||
if (!applyFormRef.value) return;
|
||
|
||
// 表单验证
|
||
const valid = await applyFormRef.value.validate().catch(() => false);
|
||
if (!valid) return;
|
||
|
||
try {
|
||
submitting.value = true;
|
||
|
||
// 调用应聘申请API
|
||
await submitJobApplicationData(applyForm as ApplicationForm);
|
||
|
||
ElMessage.success('应聘申请提交成功！我们会尽快与您联系。');
|
||
|
||
// 显示成功对话框
|
||
await ElMessageBox.alert('您的应聘申请已成功提交！我们会在3个工作日内与您联系，请保持电话畅通。', '申请成功', {
|
||
confirmButtonText: '确定',
|
||
type: 'success'
|
||
});
|
||
|
||
// 跳转回招聘门户
|
||
router.push('/recruitment-portal');
|
||
} catch (error) {
|
||
console.error('提交应聘申请失败:', error);
|
||
ElMessage.error('提交应聘申请失败，请稍后重试');
|
||
} finally {
|
||
submitting.value = false;
|
||
}
|
||
};
|
||
|
||
// 提交应聘申请API调用
|
||
const submitJobApplicationData = async (applicationData: ApplicationForm) => {
|
||
return await submitJobApplication(applicationData);
|
||
};
|
||
|
||
// 返回上一页
|
||
const goBack = () => {
|
||
router.go(-1);
|
||
};
|
||
|
||
// 页面初始化
|
||
onMounted(() => {
|
||
const jobId = route.query.jobId as string;
|
||
if (jobId) {
|
||
applyForm.jobId = jobId;
|
||
} else {
|
||
ElMessage.error('缺少岗位信息');
|
||
goBack();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.recruitment-apply {
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
|
||
.header-banner {
|
||
background: #004e48;
|
||
color: white;
|
||
padding: 50px 0;
|
||
text-align: center;
|
||
|
||
.banner-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
|
||
.apply-title {
|
||
font-size: 2.5rem;
|
||
color: #ffffff;
|
||
margin-bottom: 15px;
|
||
font-weight: 600;
|
||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.apply-subtitle {
|
||
font-size: 1.3rem;
|
||
color: #ffffff;
|
||
opacity: 0.92;
|
||
margin: 0;
|
||
font-weight: 300;
|
||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.apply-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 30px 20px;
|
||
|
||
.apply-layout {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.apply-form-section {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 应聘表单卡片
|
||
.apply-form-card {
|
||
.form-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.apply-form {
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #eee;
|
||
|
||
.el-button {
|
||
min-width: 120px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 卡片通用样式
|
||
.apply-form-card {
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
|
||
.el-card__header {
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
// 响应式布局
|
||
@media (max-width: 768px) {
|
||
.apply-container {
|
||
padding: 20px 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 大屏幕优化 */
|
||
@media (min-width: 1440px) {
|
||
.apply-container {
|
||
max-width: 900px;
|
||
}
|
||
}
|
||
|
||
/* 超大屏幕优化 */
|
||
@media (min-width: 1920px) {
|
||
.apply-container {
|
||
max-width: 1000px;
|
||
}
|
||
}
|
||
</style>
|