新增必填项验证

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
-47
View File
@@ -19,70 +19,23 @@ declare module 'vue' {
DatePicker: typeof import('./src/components/Form/DatePicker/index.vue')['default'] DatePicker: typeof import('./src/components/Form/DatePicker/index.vue')['default']
ECharts: typeof import('./src/components/ECharts/index.vue')['default'] ECharts: typeof import('./src/components/ECharts/index.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert'] ElAlert: typeof import('element-plus/es')['ElAlert']
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElResult: typeof import('element-plus/es')['ElResult']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElStep: typeof import('element-plus/es')['ElStep'] ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps'] ElSteps: typeof import('element-plus/es')['ElSteps']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import('element-plus/es')['ElUpload']
ElWatermark: typeof import('element-plus/es')['ElWatermark']
ESign: typeof import('./src/components/ESign/index.vue')['default'] ESign: typeof import('./src/components/ESign/index.vue')['default']
FormContainer: typeof import('./src/components/Form/FormContainer/index.vue')['default'] FormContainer: typeof import('./src/components/Form/FormContainer/index.vue')['default']
Grid: typeof import('./src/components/Grid/index.vue')['default'] Grid: typeof import('./src/components/Grid/index.vue')['default']
+196 -18
View File
@@ -541,38 +541,75 @@
</el-dialog> </el-dialog>
<!-- 任务创建成功与分享弹窗 --> <!-- 任务创建成功与分享弹窗 -->
<el-dialog v-model="shareVisible" title="入职任务已创建" width="560px" destroy-on-close> <el-dialog
<el-result icon="success" title="任务创建成功!" sub-title="请先确认签署材料人事参数,再将专属链接发送给候选人"> v-model="shareVisible"
title="入职任务已创建"
width="600px"
destroy-on-close
class="task-share-dialog"
>
<el-result
icon="success"
title="任务创建成功!"
sub-title="请先确认签署材料人事参数,再将专属链接发送给候选人"
class="task-share-result"
>
<template #extra> <template #extra>
<div class="share-box"> <div class="share-card">
<div class="share-item"> <div class="share-info-header">
<span class="share-label">任务编号:</span> <div class="share-meta-item">
<span class="share-value font-bold">{{ createdTaskInfo?.taskNo }}</span> <span class="share-meta-label">任务编号</span>
<span class="share-meta-val font-mono">{{ createdTaskInfo?.taskNo }}</span>
</div>
<div v-if="createdTaskInfo?.positionName" class="share-meta-item text-right">
<span class="share-meta-label">入职岗位</span>
<span class="share-meta-val">{{ createdTaskInfo.positionName }}</span>
</div>
</div> </div>
<div class="share-item">
<span class="share-label">专属链接:</span> <div class="share-link-section">
<el-input :model-value="createdTaskInfo?.linkUrl" readonly size="small"> <div class="share-section-title">专属填报链接</div>
<el-input
:model-value="createdTaskInfo?.linkUrl"
readonly
class="share-link-input"
>
<template #append> <template #append>
<el-button icon="CopyDocument" @click="copyText(createdTaskInfo?.linkUrl, '专属链接已复制')"> <el-button
复制 type="primary"
icon="CopyDocument"
@click="copyText(createdTaskInfo?.linkUrl, '专属链接已复制')"
>
复制链接
</el-button> </el-button>
</template> </template>
</el-input> </el-input>
</div> </div>
<div class="share-item">
<span class="share-label">有效期至:</span> <div class="share-expiry-row">
<span class="share-value text-secondary">{{ createdTaskInfo?.expiresAt }}</span> <el-icon class="expiry-icon"><Clock /></el-icon>
<span>链接有效期至:</span>
<span class="expiry-time">{{ createdTaskInfo?.expiresAt }}</span>
</div> </div>
<div class="share-actions">
<el-button type="primary" plain icon="ChatDotRound" @click="copyInviteMessage"> <div class="share-action-section">
复制短信/微信邀请文案 <el-button
type="primary"
plain
icon="ChatDotRound"
class="invite-copy-btn"
@click="copyInviteMessage"
>
复制短信 / 微信邀请文案
</el-button> </el-button>
</div> </div>
</div> </div>
</template> </template>
</el-result> </el-result>
<template #footer> <template #footer>
<el-button type="primary" @click="shareVisible = false">完成</el-button> <div class="dialog-footer-center">
<el-button type="primary" @click="shareVisible = false">完成</el-button>
</div>
</template> </template>
</el-dialog> </el-dialog>
@@ -4159,4 +4196,145 @@ onMounted(loadCompanies);
justify-content: flex-start; justify-content: flex-start;
} }
} }
/* 任务创建分享弹窗样式优化 */
.task-share-result {
padding: 12px 0 4px 0;
}
.task-share-result :deep(.el-result__icon svg) {
width: 56px;
height: 56px;
}
.task-share-result :deep(.el-result__title) {
margin-top: 10px;
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.task-share-result :deep(.el-result__subtitle) {
margin-top: 6px;
font-size: 13px;
color: #64748b;
line-height: 1.5;
}
.task-share-result :deep(.el-result__extra) {
margin-top: 20px;
width: 100%;
}
.share-card {
width: 100%;
max-width: 500px;
margin: 0 auto;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 18px 22px;
box-sizing: border-box;
text-align: left;
}
.share-info-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px dashed #cbd5e1;
}
.share-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.share-meta-label {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
}
.share-meta-val {
font-size: 14px;
color: #1e293b;
font-weight: 600;
}
.share-link-section {
margin-bottom: 14px;
}
.share-section-title {
font-size: 12px;
font-weight: 500;
color: #64748b;
margin-bottom: 8px;
}
.share-link-input :deep(.el-input__inner) {
font-size: 13px;
color: #334155;
background-color: #ffffff;
}
.share-link-input :deep(.el-input-group__append) {
background-color: #eff6ff;
color: #2563eb;
font-weight: 500;
border-color: #dbeafe;
cursor: pointer;
transition: all 0.2s;
padding: 0 16px;
}
.share-link-input :deep(.el-input-group__append:hover) {
background-color: #dbeafe;
}
.share-expiry-row {
display: flex;
align-items: center;
font-size: 12px;
color: #64748b;
margin-bottom: 16px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 6px;
}
.expiry-icon {
margin-right: 6px;
color: #94a3b8;
font-size: 14px;
}
.expiry-time {
color: #e11d48;
font-weight: 600;
margin-left: 2px;
}
.share-action-section {
width: 100%;
}
.invite-copy-btn {
width: 100%;
height: 40px;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
}
.dialog-footer-center {
display: flex;
justify-content: center;
width: 100%;
}
</style> </style>
+74 -16
View File
@@ -308,19 +308,19 @@
</div> </div>
<!-- 5. 教育学习经历动态列表 --> <!-- 5. 教育学习经历动态列表 -->
<div class="card-section"> <div id="education-history-section" class="card-section">
<div class="card-section-header"> <div class="card-section-header">
<div class="card-section-title"> <div class="card-section-title">
<div class="title-icon-box"><el-icon> <div class="title-icon-box"><el-icon>
<Reading /> <Reading />
</el-icon></div> </el-icon></div>
<span>教育学习经历</span> <span><span class="required-asterisk">*</span>教育学习经历</span>
</div> </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> </el-button>
</div> </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" <div v-for="(item, idx) in educationHistory" :id="`education-history-${idx}`" :key="idx"
class="dynamic-row-box"> class="dynamic-row-box">
<div class="row-badge-header"> <div class="row-badge-header">
@@ -354,19 +354,19 @@
</div> </div>
<!-- 6. 工作经历动态列表 --> <!-- 6. 工作经历动态列表 -->
<div class="card-section"> <div id="work-history-section" class="card-section">
<div class="card-section-header"> <div class="card-section-header">
<div class="card-section-title"> <div class="card-section-title">
<div class="title-icon-box"><el-icon> <div class="title-icon-box"><el-icon>
<Briefcase /> <Briefcase />
</el-icon></div> </el-icon></div>
<span>主要工作经历</span> <span><span class="required-asterisk">*</span>主要工作经历</span>
</div> </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> </el-button>
</div> </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 v-for="(item, idx) in workHistory" :id="`work-history-${idx}`" :key="idx" class="dynamic-row-box">
<div class="row-badge-header"> <div class="row-badge-header">
<span class="row-badge">工作经历 #{{ idx + 1 }}</span> <span class="row-badge">工作经历 #{{ idx + 1 }}</span>
@@ -381,12 +381,12 @@
</el-col> </el-col>
<el-col :xs="24" :sm="6"> <el-col :xs="24" :sm="6">
<el-form-item label="工作单位名称"> <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-form-item>
</el-col> </el-col>
<el-col :xs="12" :sm="4"> <el-col :xs="12" :sm="4">
<el-form-item label="担任职务"> <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-form-item>
</el-col> </el-col>
<el-col :xs="12" :sm="4"> <el-col :xs="12" :sm="4">
@@ -396,7 +396,7 @@
</el-col> </el-col>
<el-col :xs="24" :sm="5"> <el-col :xs="24" :sm="5">
<el-form-item label="离职原因"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -404,19 +404,19 @@
</div> </div>
<!-- 7. 家庭成员动态列表 --> <!-- 7. 家庭成员动态列表 -->
<div class="card-section"> <div id="family-members-section" class="card-section">
<div class="card-section-header"> <div class="card-section-header">
<div class="card-section-title"> <div class="card-section-title">
<div class="title-icon-box"><el-icon> <div class="title-icon-box"><el-icon>
<HomeFilled /> <HomeFilled />
</el-icon></div> </el-icon></div>
<span>家庭成员</span> <span><span class="required-asterisk">*</span>家庭成员</span>
</div> </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> </el-button>
</div> </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" <div v-for="(item, idx) in familyMembers" :id="`family-member-${idx}`" :key="idx"
class="dynamic-row-box"> class="dynamic-row-box">
<div class="row-badge-header"> <div class="row-badge-header">
@@ -442,7 +442,7 @@
</el-col> </el-col>
<el-col :xs="24" :sm="8"> <el-col :xs="24" :sm="8">
<el-form-item label="工作单位"> <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-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="5"> <el-col :xs="24" :sm="5">
@@ -1296,6 +1296,12 @@ function validateExtraVariables() {
} }
function validateRegistrationLists() { function validateRegistrationLists() {
if (!educationHistory.value.length) {
ElMessage.warning("请至少添加一条教育学习经历(最高学历)");
locateValidationTarget("education-history-section");
return false;
}
for (let index = 0; index < educationHistory.value.length; index++) { for (let index = 0; index < educationHistory.value.length; index++) {
const row = educationHistory.value[index]; const row = educationHistory.value[index];
const requiredFields = [ 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++) { for (let index = 0; index < workHistory.value.length; index++) {
const row = workHistory.value[index]; const row = workHistory.value[index];
const requiredFields = [ 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++) { for (let index = 0; index < familyMembers.value.length; index++) {
const row = familyMembers.value[index]; const row = familyMembers.value[index];
const requiredFields = [ const requiredFields = [
@@ -2385,6 +2403,46 @@ onBeforeUnmount(() => {
margin-bottom: 14px; 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 { .dynamic-row-box {
background: #fbfdfb; background: #fbfdfb;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;