yuanlin/OnboardXFront
2
0
Fork 0
Code Pull Requests Actions Releases Activity

新增必填项验证

Browse Source
This commit is contained in:
fuenmao
2026-09-17 14:33:55 +08:00
parent 04c621961c
commit 7cffe57e4d
3 changed files with 270 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/onboarding/fill/index.vue
+74 -16
View File
@@ -308,19 +308,19 @@
</div>
<!-- 5. 教育学习经历动态列表 -->
<div class="card-section">
<div id="education-history-section" class="card-section">
<div class="card-section-header">
<div class="card-section-title">
<div class="title-icon-box"><el-icon>
<Reading />
</el-icon></div>
<span>教育学习经历</span>
<span><span class="required-asterisk">*</span>教育学习经历</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addEducation">
<el-button v-if="canEdit" size="small" class="section-action-btn" icon="Plus" @click="addEducation">
添加经历
</el-button>
</div>
<div v-if="!educationHistory.length" class="empty-hint">暂未添加学习经历，可点击右上角添加</div>
<div v-if="!educationHistory.length" class="empty-hint">暂未添加学习经历，可点击右上角添加（至少填写一条最高学历）</div>
<div v-for="(item, idx) in educationHistory" :id="`education-history-${idx}`" :key="idx"
class="dynamic-row-box">
<div class="row-badge-header">
@@ -354,19 +354,19 @@
</div>
<!-- 6. 工作经历动态列表 -->
<div class="card-section">
<div id="work-history-section" class="card-section">
<div class="card-section-header">
<div class="card-section-title">
<div class="title-icon-box"><el-icon>
<Briefcase />
</el-icon></div>
<span>主要工作经历</span>
<span><span class="required-asterisk">*</span>主要工作经历</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addWork">
<el-button v-if="canEdit" size="small" class="section-action-btn" icon="Plus" @click="addWork">
添加经历
</el-button>
</div>
<div v-if="!workHistory.length" class="empty-hint">暂未添加工作经历（应届生可留空）</div>
<div v-if="!workHistory.length" class="empty-hint">暂未添加工作经历，可点击右上角添加（应届生可填兼职、在校或实习经历）</div>
<div v-for="(item, idx) in workHistory" :id="`work-history-${idx}`" :key="idx" class="dynamic-row-box">
<div class="row-badge-header">
<span class="row-badge">工作经历 #{{ idx + 1 }}</span>
@@ -381,12 +381,12 @@
</el-col>
<el-col :xs="24" :sm="6">
<el-form-item label="工作单位名称">
<el-input v-model="item.companyName" placeholder="公司全称" :disabled="!canEdit" />
<el-input v-model="item.companyName" placeholder="工作单位/实习单位全称" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-form-item label="担任职务">
<el-input v-model="item.position" placeholder="职位名称" :disabled="!canEdit" />
<el-input v-model="item.position" placeholder="担任职务/在校岗位" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
@@ -396,7 +396,7 @@
</el-col>
<el-col :xs="24" :sm="5">
<el-form-item label="离职原因">
<el-input v-model="item.leaveReason" placeholder="简述离职原因" :disabled="!canEdit" />
<el-input v-model="item.leaveReason" placeholder="简述离职/实习结束原因" :disabled="!canEdit" />
</el-form-item>
</el-col>
</el-row>
@@ -404,19 +404,19 @@
</div>
<!-- 7. 家庭成员动态列表 -->
<div class="card-section">
<div id="family-members-section" class="card-section">
<div class="card-section-header">
<div class="card-section-title">
<div class="title-icon-box"><el-icon>
<HomeFilled />
</el-icon></div>
<span>家庭成员</span>
<span><span class="required-asterisk">*</span>家庭成员</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addFamily">
<el-button v-if="canEdit" size="small" class="section-action-btn" icon="Plus" @click="addFamily">
添加成员
</el-button>
</div>
<div v-if="!familyMembers.length" class="empty-hint">暂未添加家庭成员信息</div>
<div v-if="!familyMembers.length" class="empty-hint">暂未添加家庭成员信息，可点击右上角添加（至少填写一位直系亲属）</div>
<div v-for="(item, idx) in familyMembers" :id="`family-member-${idx}`" :key="idx"
class="dynamic-row-box">
<div class="row-badge-header">
@@ -442,7 +442,7 @@
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item label="工作单位">
<el-input v-model="item.company" placeholder="工作单位及职务" :disabled="!canEdit" />
<el-input v-model="item.company" placeholder="工作单位及职务（无则填无）" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="5">
@@ -1296,6 +1296,12 @@ function validateExtraVariables() {
}
function validateRegistrationLists() {
if (!educationHistory.value.length) {
ElMessage.warning("请至少添加一条教育学习经历（最高学历）");
locateValidationTarget("education-history-section");
return false;
}
for (let index = 0; index < educationHistory.value.length; index++) {
const row = educationHistory.value[index];
const requiredFields = [
@@ -1312,6 +1318,12 @@ function validateRegistrationLists() {
}
}
if (!workHistory.value.length) {
ElMessage.warning("请至少添加一条工作经历（应届生可填写兼职、在校或实习经历）");
locateValidationTarget("work-history-section");
return false;
}
for (let index = 0; index < workHistory.value.length; index++) {
const row = workHistory.value[index];
const requiredFields = [
@@ -1328,6 +1340,12 @@ function validateRegistrationLists() {
}
}
if (!familyMembers.value.length) {
ElMessage.warning("请至少添加一位家庭成员信息（如父母或配偶）");
locateValidationTarget("family-members-section");
return false;
}
for (let index = 0; index < familyMembers.value.length; index++) {
const row = familyMembers.value[index];
const requiredFields = [
@@ -2385,6 +2403,46 @@ onBeforeUnmount(() => {
margin-bottom: 14px;
}
.card-section-header .card-section-title {
margin-bottom: 0;
}
.required-asterisk {
color: #e11d48;
margin-right: 4px;
font-weight: 700;
font-size: 15px;
}
.section-action-btn {
background-color: #ecfdf5 !important;
border: 1px solid #a7f3d0 !important;
color: #059669 !important;
font-weight: 500;
border-radius: 6px;
height: 28px;
line-height: 26px;
padding: 0 10px;
font-size: 12px;
transition: all 0.2s ease-in-out;
}
.section-action-btn :deep(.el-icon) {
color: inherit !important;
}
.section-action-btn:hover {
background-color: #059669 !important;
border-color: #059669 !important;
color: #ffffff !important;
}
.section-action-btn:active {
background-color: #047857 !important;
border-color: #047857 !important;
color: #ffffff !important;
}
.dynamic-row-box {
background: #fbfdfb;
border: 1px solid #e5e7eb;