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

web/src/views/rs/recruitment-apply.vue

@@ -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-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-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="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
@@ -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;
+      justify-content: center;
 
-      .job-info-section,
       .apply-form-section {
-        position: relative;
-      }
-
-      .job-info-section {
-        flex: 0 0 40%;
-        max-width: 40%;
-      }
-
-      .apply-form-section {
-        flex: 0 0 60%;
-        max-width: 60%;
-      }
-    }
-  }
-
-  // 左侧岗位信息卡片
-  .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;
-          }
-        }
+        width: 100%;
       }
     }
   }
 
-  // 右侧应聘表单卡片
+  // 应聘表单卡片
   .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>