cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

“rs招聘和培训修改v0.2”

Browse Source
This commit is contained in:
weizhong committed 2025-09-22 23:08:19 +08:00
1 parent 74ab953c17
commit 0876b60056
1 file changed
+42 -281
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/rs/recruitment-apply.vue
+42 -281
View File
@@ -10,71 +10,7 @@
<div class="apply-container">
<div class="apply-layout">
<!-- 左侧：岗位信息卡片 -->
<div class="job-info-section">
<el-card v-if="jobInfo" class="job-info-card" shadow="hover">
<template #header>
<div class="job-header">
<el-icon><Briefcase /></el-icon>
<span>应聘岗位信息</span>
</div>
</template>
<div class="job-details">
<div class="job-title">{{ jobInfo.title }}</div>
<div class="job-meta">
<span class="meta-item">
<el-icon><OfficeBuilding /></el-icon>
{{ jobInfo.department }}
</span>
<span class="meta-item">
<el-icon><Location /></el-icon>
{{ jobInfo.location }}
</span>
<span class="meta-item">
<el-icon><Money /></el-icon>
{{ jobInfo.salaryRange }}
</span>
</div>
<!-- 招聘状态信息 -->
<div class="job-status">
<div class="status-item">
<el-icon><Calendar /></el-icon>
<span>发布时间：{{ formatDate(jobInfo.publishTime) }}</span>
</div>
<div class="status-item">
<el-icon><View /></el-icon>
<span>浏览次数：{{ jobInfo.viewCount || 0 }}</span>
</div>
<div class="status-item">
<el-icon><User /></el-icon>
<span>申请人数：{{ jobInfo.applicantCount || 0 }}</span>
</div>
</div>
<!-- 岗位描述 -->
<div class="job-description" v-if="jobInfo.description">
<h3>岗位描述</h3>
<div v-html="jobInfo.description"></div>
</div>
<!-- 岗位要求 -->
<div class="job-requirements" v-if="jobInfo.requirements">
<h3>岗位要求</h3>
<div v-html="jobInfo.requirements"></div>
</div>
<!-- 备注信息 -->
<div class="job-remark" v-if="jobInfo.remark">
<h3>其他说明</h3>
<div>{{ jobInfo.remark }}</div>
</div>
</div>
</el-card>
</div>
<!-- 右侧：应聘表单 -->
<!-- 应聘表单 -->
<div class="apply-form-section">
<el-card class="apply-form-card" shadow="never">
<template #header>
@@ -85,54 +21,39 @@
</template>
<el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="120px" class="apply-form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名" prop="applicantName">
<el-input v-model="applyForm.applicantName" placeholder="请输入您的姓名" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<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-col>
</el-row>
<el-form-item label="姓名" prop="applicantName">
<el-input v-model="applyForm.applicantName" placeholder="请输入您的姓名" maxlength="50" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系电话" prop="contactPhone">
<el-input v-model="applyForm.contactPhone" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱地址" prop="contactEmail">
<el-input v-model="applyForm.contactEmail" placeholder="请输入邮箱地址" maxlength="100" />
</el-form-item>
</el-col>
</el-row>
<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-row :gutter="20">
<el-col :span="12">
<el-form-item label="年龄" prop="age">
<el-input-number v-model="applyForm.age" :min="18" :max="65" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<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-col>
</el-row>
<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
@@ -181,7 +102,7 @@
<div class="form-actions">
<el-button @click="goBack">返回</el-button>
<el-button type="primary" @click="submitApplication" :loading="submitting"> 提交应聘申请 </el-button>
<el-button type="primary" @click="submitApplication" :loading="submitting"> 提交申请 </el-button>
</div>
</el-card>
</div>
@@ -194,16 +115,12 @@
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus';
import { Briefcase, OfficeBuilding, Location, Money, User, Calendar, View } from '@element-plus/icons-vue';
import { getPublicJob, type JobVO } from '@/api/rs/job';
import { User } from '@element-plus/icons-vue';
import { submitJobApplication, type ApplicationForm } from '@/api/rs/application';
const route = useRoute();
const router = useRouter();
// 岗位信息
const jobInfo = ref<JobVO | null>(null);
// 表单引用
const applyFormRef = ref<FormInstance>();
@@ -259,31 +176,6 @@ const applyRules = {
]
};
// 获取岗位信息
const getJobInfo = async (jobId: string) => {
try {
const response = await getPublicJob(jobId);
jobInfo.value = response.data;
applyForm.jobId = jobId;
} catch (error) {
console.error('获取岗位信息失败:', error);
ElMessage.error('获取岗位信息失败');
goBack();
}
};
// 格式化日期
const formatDate = (timestamp: string) => {
if (!timestamp) return '';
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
};
// 提交应聘申请
const submitApplication = async () => {
if (!applyFormRef.value) return;
@@ -330,7 +222,7 @@ const goBack = () => {
onMounted(() => {
const jobId = route.query.jobId as string;
if (jobId) {
getJobInfo(jobId);
applyForm.jobId = jobId;
} else {
ElMessage.error('缺少岗位信息');
goBack();
@@ -374,131 +266,21 @@ onMounted(() => {
}
.apply-container {
max-width: 1200px;
max-width: 800px;
margin: 0 auto;
padding: 30px 20px;
.apply-layout {
display: flex;
gap: 30px;
align-items: flex-start;
.job-info-section,
.apply-form-section {
position: relative;
}
.job-info-section {
flex: 0 0 40%;
max-width: 40%;
}
justify-content: center;
.apply-form-section {
flex: 0 0 60%;
max-width: 60%;
width: 100%;
}
}
}
// 左侧岗位信息卡片
.job-info-card {
height: 100%;
position: sticky;
top: 20px;
.el-card__body {
max-height: calc(100vh - 250px);
overflow-y: auto;
padding-right: 10px;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: #dcdfe6;
border-radius: 3px;
}
}
.job-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #2c3e50;
}
.job-details {
.job-title {
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
}
.job-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
.meta-item {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 0.9rem;
.el-icon {
color: #999;
}
}
}
.job-status,
.job-description,
.job-requirements,
.job-remark {
margin-top: 20px;
border-top: 1px solid #eee;
padding-top: 15px;
h3 {
font-size: 1.1rem;
margin-bottom: 10px;
color: #2c3e50;
}
div {
color: #666;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
}
.job-status {
display: flex;
flex-direction: column;
gap: 8px;
.status-item {
display: flex;
align-items: center;
font-size: 14px;
color: #606266;
.el-icon {
margin-right: 8px;
color: #909399;
}
}
}
}
}
// 右侧应聘表单卡片
// 应聘表单卡片
.apply-form-card {
.form-header {
display: flex;
@@ -528,7 +310,6 @@ onMounted(() => {
}
// 卡片通用样式
.job-info-card,
.apply-form-card {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
border-radius: 4px;
@@ -548,27 +329,7 @@ onMounted(() => {
// 响应式布局
@media (max-width: 768px) {
.apply-container {
.apply-layout {
flex-direction: column;
gap: 20px;
.job-info-section,
.apply-form-section {
flex: 0 0 100%;
max-width: 100%;
}
.job-info-section {
.job-info-card {
position: relative;
top: 0;
.el-card__body {
max-height: 500px;
}
}
}
}
padding: 20px 15px;
}
}
}
@@ -576,14 +337,14 @@ onMounted(() => {
/* 大屏幕优化 */
@media (min-width: 1440px) {
.apply-container {
max-width: 1400px;
max-width: 900px;
}
}
/* 超大屏幕优化 */
@media (min-width: 1920px) {
.apply-container {
max-width: 1800px;
max-width: 1000px;
}
}
</style>