xuxin
1307 lines
52 KiB
Vue
1307 lines
52 KiB
Vue
<template>
|
||
<!-- 个人资料编辑抽屉 — 从右侧滑入，占满屏幕高度 -->
|
||
<Teleport to="body">
|
||
<!-- 遮罩层 -->
|
||
<Transition name="profile-drawer-overlay">
|
||
<div
|
||
v-if="modelValue"
|
||
class="profile-drawer-overlay"
|
||
@click="handleClose"
|
||
/>
|
||
</Transition>
|
||
|
||
<!-- 抽屉主体 -->
|
||
<Transition name="profile-drawer-slide">
|
||
<div v-if="modelValue" class="profile-drawer" @click.stop>
|
||
<!-- 顶部栏：关闭按钮 + 模块标题 -->
|
||
<div class="profile-drawer__header">
|
||
<button class="profile-drawer__close-btn" @click="handleClose" aria-label="关闭">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__close-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
<h3 class="profile-drawer__title">{{ moduleTitle }}</h3>
|
||
</div>
|
||
|
||
<!-- 表单内容区 — 根据模块名动态渲染不同字段 -->
|
||
<div class="profile-drawer__body">
|
||
<!-- ========== 基本信息模块 ========== -->
|
||
<template v-if="module === 'info'">
|
||
<div
|
||
v-for="field in infoFields"
|
||
:key="field.key"
|
||
class="profile-drawer__field"
|
||
>
|
||
<label class="profile-drawer__label">
|
||
<span v-if="field.required" class="profile-drawer__required">*</span>{{ field.label }}
|
||
</label>
|
||
<!-- 城市字段：使用地区选择组件替代普通输入框 -->
|
||
<RegionSelector
|
||
v-if="field.key === 'location'"
|
||
:regionCodes="locationCodes"
|
||
:level="2"
|
||
:maxSelect="1"
|
||
:triggerStyle="regionTriggerStyle"
|
||
@update:regionCodes="onLocationChange"
|
||
/>
|
||
<!-- 其他字段：普通输入框 -->
|
||
<input
|
||
v-else
|
||
class="profile-drawer__input"
|
||
:type="field.type || 'text'"
|
||
:placeholder="field.placeholder"
|
||
v-model="formData[field.key]"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 教育经历模块 ========== -->
|
||
<template v-else-if="module === 'education'">
|
||
<div
|
||
v-for="(edu, index) in educationList"
|
||
:key="index"
|
||
class="profile-drawer__edu-card"
|
||
>
|
||
<!-- 教育经历标题栏：序号 + 删除按钮 -->
|
||
<div class="profile-drawer__edu-header">
|
||
<span class="profile-drawer__edu-index">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
|
||
<circle cx="8" cy="8" r="3" fill="currentColor"/>
|
||
</svg>
|
||
教育经历{{ index + 1 }}
|
||
</span>
|
||
<button
|
||
v-if="educationList.length > 1"
|
||
class="profile-drawer__edu-delete"
|
||
@click="removeEducation(index)"
|
||
aria-label="删除"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
|
||
<path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 学校 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>学校
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入学校名称" v-model="edu.school" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专业 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>专业
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入专业名称" v-model="edu.major" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学历类型 + 学历（横排） -->
|
||
<div class="profile-drawer__row">
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>学历类型
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<select class="profile-drawer__input" v-model="edu.studyType">
|
||
<option v-for="opt in studyTypeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>学历
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<select class="profile-drawer__input" v-model="edu.degree">
|
||
<option v-for="opt in degreeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 入学年份 + 毕业年份（横排） -->
|
||
<div class="profile-drawer__row">
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>入学年份
|
||
</label>
|
||
<el-date-picker
|
||
v-model="edu.startDate"
|
||
type="month"
|
||
placeholder="请选择入学年份"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>毕业年份
|
||
</label>
|
||
<el-date-picker
|
||
v-model="edu.endDate"
|
||
type="month"
|
||
placeholder="请选择毕业年份"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经历描述 — 分段编辑，每段带删除按钮 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">经历描述</label>
|
||
<!-- 描述段落列表 -->
|
||
<div
|
||
v-for="(desc, dIdx) in edu.description"
|
||
:key="desc.id"
|
||
class="profile-drawer__desc-item"
|
||
>
|
||
<textarea
|
||
class="profile-drawer__textarea profile-drawer__textarea--short"
|
||
placeholder="请输入经历描述"
|
||
v-model="desc.text"
|
||
rows="4"
|
||
></textarea>
|
||
<!-- 段落内右侧删除按钮 -->
|
||
<button
|
||
v-if="edu.description.length > 1"
|
||
class="profile-drawer__desc-remove"
|
||
@click="removeEducationDescriptionParagraph(index, dIdx)"
|
||
aria-label="删除该段描述"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- 新增一段描述按钮 -->
|
||
<button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addEducationDescriptionParagraph(index)">
|
||
<span class="profile-drawer__add-icon">+</span> 新增一段描述
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增教育经历按钮 -->
|
||
<button class="profile-drawer__add-btn wp100 mb20" @click="addEducation">
|
||
<span class="profile-drawer__add-icon">+</span> 新增教育经历
|
||
</button>
|
||
</template>
|
||
|
||
<!-- ========== 工作经历模块 ========== -->
|
||
<template v-else-if="module === 'work'">
|
||
<div
|
||
v-for="(work, index) in workList"
|
||
:key="index"
|
||
class="profile-drawer__edu-card"
|
||
>
|
||
<!-- 工作经历标题栏：序号 + 删除按钮 -->
|
||
<div class="profile-drawer__edu-header">
|
||
<span class="profile-drawer__edu-index">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
|
||
<circle cx="8" cy="8" r="3" fill="currentColor"/>
|
||
</svg>
|
||
工作经历{{ index + 1 }}
|
||
</span>
|
||
<button
|
||
v-if="workList.length > 1"
|
||
class="profile-drawer__edu-delete"
|
||
@click="removeWork(index)"
|
||
aria-label="删除"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
|
||
<path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 公司名称 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>公司名称
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入公司名称" v-model="work.companyName" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 职位 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>职位
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入职位" v-model="work.position" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开始时间 + 结束时间（横排） -->
|
||
<div class="profile-drawer__row">
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>开始时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="work.startDate"
|
||
type="month"
|
||
placeholder="请输入开始时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>结束时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="work.endDate"
|
||
type="month"
|
||
placeholder="请输入结束时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经历描述 — 分段编辑，每段带删除按钮 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>经历描述
|
||
</label>
|
||
<!-- 描述段落列表 -->
|
||
<div
|
||
v-for="(desc, dIdx) in work.description"
|
||
:key="desc.id"
|
||
class="profile-drawer__desc-item"
|
||
>
|
||
<textarea
|
||
class="profile-drawer__textarea profile-drawer__textarea--short"
|
||
placeholder="请输入经历描述"
|
||
v-model="desc.text"
|
||
rows="4"
|
||
></textarea>
|
||
<!-- 段落内右侧删除按钮 -->
|
||
<button
|
||
v-if="work.description.length > 1"
|
||
class="profile-drawer__desc-remove"
|
||
@click="removeWorkDescriptionParagraph(index, dIdx)"
|
||
aria-label="删除该段描述"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- 新增一段描述按钮 -->
|
||
<button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addWorkDescriptionParagraph(index)">
|
||
<span class="profile-drawer__add-icon">+</span> 新增一段描述
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增工作经历按钮 -->
|
||
<button class="profile-drawer__add-btn wp100 mb20" @click="addWork">
|
||
<span class="profile-drawer__add-icon">+</span> 新增工作经历
|
||
</button>
|
||
</template>
|
||
|
||
<!-- ========== 实习经历模块 ========== -->
|
||
<template v-else-if="module === 'internship'">
|
||
<div
|
||
v-for="(intern, index) in internshipList"
|
||
:key="index"
|
||
class="profile-drawer__edu-card"
|
||
>
|
||
<!-- 实习经历标题栏：序号 + 删除按钮 -->
|
||
<div class="profile-drawer__edu-header">
|
||
<span class="profile-drawer__edu-index">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
|
||
<circle cx="8" cy="8" r="3" fill="currentColor"/>
|
||
</svg>
|
||
实习经历{{ index + 1 }}
|
||
</span>
|
||
<button
|
||
v-if="internshipList.length > 1"
|
||
class="profile-drawer__edu-delete"
|
||
@click="removeInternship(index)"
|
||
aria-label="删除"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
|
||
<path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 公司名称 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>公司名称
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入公司名称" v-model="intern.companyName" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 职位 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>职位
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入职位" v-model="intern.position" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开始时间 + 结束时间（横排） -->
|
||
<div class="profile-drawer__row">
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>开始时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="intern.startDate"
|
||
type="month"
|
||
placeholder="请输入开始时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>结束时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="intern.endDate"
|
||
type="month"
|
||
placeholder="请输入结束时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经历描述 — 分段编辑，每段带删除按钮 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>经历描述
|
||
</label>
|
||
<!-- 描述段落列表 -->
|
||
<div
|
||
v-for="(desc, dIdx) in intern.description"
|
||
:key="desc.id"
|
||
class="profile-drawer__desc-item"
|
||
>
|
||
<textarea
|
||
class="profile-drawer__textarea profile-drawer__textarea--short"
|
||
placeholder="请输入经历描述"
|
||
v-model="desc.text"
|
||
rows="4"
|
||
></textarea>
|
||
<!-- 段落内右侧删除按钮 -->
|
||
<button
|
||
v-if="intern.description.length > 1"
|
||
class="profile-drawer__desc-remove"
|
||
@click="removeInternDescriptionParagraph(index, dIdx)"
|
||
aria-label="删除该段描述"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- 新增一段描述按钮 -->
|
||
<button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addInternDescriptionParagraph(index)">
|
||
<span class="profile-drawer__add-icon">+</span> 新增一段描述
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增实习经历按钮 -->
|
||
<button class="profile-drawer__add-btn wp100 mb20" @click="addInternship">
|
||
<span class="profile-drawer__add-icon">+</span> 新增实习经历
|
||
</button>
|
||
</template>
|
||
|
||
<!-- ========== 项目经历模块 ========== -->
|
||
<template v-else-if="module === 'project'">
|
||
<div
|
||
v-for="(proj, index) in projectList"
|
||
:key="index"
|
||
class="profile-drawer__edu-card"
|
||
>
|
||
<!-- 项目经历标题栏：序号 + 删除按钮 -->
|
||
<div class="profile-drawer__edu-header">
|
||
<span class="profile-drawer__edu-index">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
|
||
<circle cx="8" cy="8" r="3" fill="currentColor"/>
|
||
</svg>
|
||
项目经历{{ index + 1 }}
|
||
</span>
|
||
<button
|
||
v-if="projectList.length > 1"
|
||
class="profile-drawer__edu-delete"
|
||
@click="removeProject(index)"
|
||
aria-label="删除"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
|
||
<path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 项目名称 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>项目名称
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入项目名称" v-model="proj.projectName" />
|
||
<!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目角色 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>项目角色
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入项目角色" v-model="proj.role" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开始时间 + 结束时间（横排） -->
|
||
<div class="profile-drawer__row">
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>开始时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="proj.startDate"
|
||
type="month"
|
||
placeholder="请输入开始时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
<div class="profile-drawer__field profile-drawer__field--half">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>结束时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="proj.endDate"
|
||
type="month"
|
||
placeholder="请输入结束时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经历描述 — 分段编辑，每段带删除按钮 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>经历描述
|
||
</label>
|
||
<!-- 描述段落列表 -->
|
||
<div
|
||
v-for="(desc, dIdx) in proj.description"
|
||
:key="desc.id"
|
||
class="profile-drawer__desc-item"
|
||
>
|
||
<textarea
|
||
class="profile-drawer__textarea profile-drawer__textarea--short"
|
||
placeholder="请输入经历描述"
|
||
v-model="desc.text"
|
||
rows="4"
|
||
></textarea>
|
||
<!-- 段落内右侧删除按钮 -->
|
||
<button
|
||
v-if="proj.description.length > 1"
|
||
class="profile-drawer__desc-remove"
|
||
@click="removeDescriptionParagraph(index, dIdx)"
|
||
aria-label="删除该段描述"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- 新增一段描述按钮 -->
|
||
<button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addDescriptionParagraph(index)">
|
||
<span class="profile-drawer__add-icon">+</span> 新增一段描述
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增项目经历按钮 -->
|
||
<button class="profile-drawer__add-btn wp100 mb20" @click="addProject">
|
||
<span class="profile-drawer__add-icon">+</span> 新增项目经历
|
||
</button>
|
||
</template>
|
||
|
||
<!-- ========== 竞赛模块 ========== -->
|
||
<template v-else-if="module === 'competition'">
|
||
<div
|
||
v-for="(comp, index) in competitionList"
|
||
:key="index"
|
||
class="profile-drawer__edu-card"
|
||
>
|
||
<!-- 竞赛经历标题栏：序号 + 删除按钮 -->
|
||
<div class="profile-drawer__edu-header">
|
||
<span class="profile-drawer__edu-index">
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
|
||
<circle cx="8" cy="8" r="3" fill="currentColor"/>
|
||
</svg>
|
||
竞赛经历{{ index + 1 }}
|
||
</span>
|
||
<button
|
||
v-if="competitionList.length > 1"
|
||
class="profile-drawer__edu-delete"
|
||
@click="removeCompetition(index)"
|
||
aria-label="删除"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
|
||
<path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 竞赛名称 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>竞赛名称
|
||
</label>
|
||
<div class="profile-drawer__select-wrap">
|
||
<input class="profile-drawer__input" placeholder="请输入竞赛名称" v-model="comp.competitionName" />
|
||
<!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 获奖名次 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>获奖名次
|
||
</label>
|
||
<input class="profile-drawer__input" placeholder="请输入获奖名次" v-model="comp.award" />
|
||
</div>
|
||
|
||
<!-- 获奖时间 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">
|
||
<span class="profile-drawer__required">*</span>获奖时间
|
||
</label>
|
||
<el-date-picker
|
||
v-model="comp.awardDate"
|
||
type="month"
|
||
placeholder="请选择获奖时间"
|
||
format="YYYY-MM"
|
||
value-format="YYYY-MM"
|
||
class="profile-drawer__date-picker"
|
||
:teleported="true"
|
||
popper-class="profile-drawer-date-popper"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 获奖情况描述 — 单段 textarea -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">获奖情况描述</label>
|
||
<textarea
|
||
class="profile-drawer__textarea"
|
||
placeholder="请输入获奖详情"
|
||
v-model="comp.description[0].text"
|
||
rows="5"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增获奖经历按钮 -->
|
||
<button class="profile-drawer__add-btn mb20" @click="addCompetition">
|
||
<span class="profile-drawer__add-icon">+</span> 新增获奖经历
|
||
</button>
|
||
</template>
|
||
|
||
<!-- ========== 作品集模块 ========== -->
|
||
<template v-else-if="module === 'portfolio'">
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">作品集链接</label>
|
||
<textarea
|
||
class="profile-drawer__textarea"
|
||
placeholder="请输入/粘贴作品集链接"
|
||
v-model="portfolioUrl"
|
||
rows="6"
|
||
></textarea>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 技能模块 ========== -->
|
||
<template v-else-if="module === 'skills'">
|
||
<!-- 技能标签列表 -->
|
||
<div class="profile-drawer__skills-list">
|
||
<div
|
||
v-for="(skill, index) in skillsList"
|
||
:key="index"
|
||
class="profile-drawer__skill-tag"
|
||
>
|
||
<span class="profile-drawer__skill-text">{{ skill }}</span>
|
||
<button
|
||
class="profile-drawer__skill-remove"
|
||
@click="removeSkill(index)"
|
||
aria-label="删除技能"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__skill-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加技能输入框 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">添加新技能</label>
|
||
<input
|
||
class="profile-drawer__input"
|
||
type="text"
|
||
placeholder="输入技能名称后按回车或失焦自动添加"
|
||
v-model="newSkillInput"
|
||
@keydown.enter="handleAddSkill"
|
||
@blur="handleAddSkill"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 证书模块 ========== -->
|
||
<template v-else-if="module === 'certificate'">
|
||
<!-- 证书标签列表 -->
|
||
<div class="profile-drawer__skills-list">
|
||
<div
|
||
v-for="(cert, index) in certificatesList"
|
||
:key="index"
|
||
class="profile-drawer__skill-tag"
|
||
>
|
||
<span class="profile-drawer__skill-text">{{ cert }}</span>
|
||
<button
|
||
class="profile-drawer__skill-remove"
|
||
@click="removeCertificate(index)"
|
||
aria-label="删除证书"
|
||
>
|
||
<svg viewBox="0 0 16 16" fill="none" class="profile-drawer__skill-remove-icon">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加证书输入框 -->
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">添加新证书</label>
|
||
<input
|
||
class="profile-drawer__input"
|
||
type="text"
|
||
placeholder="输入证书名称后按回车或失焦自动添加"
|
||
v-model="newCertificateInput"
|
||
@keydown.enter="handleAddCertificate"
|
||
@blur="handleAddCertificate"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 个人概述模块（仅简历使用） ========== -->
|
||
<template v-else-if="module === 'summary'">
|
||
<div class="profile-drawer__field">
|
||
<label class="profile-drawer__label">个人概述</label>
|
||
<textarea
|
||
class="profile-drawer__textarea"
|
||
placeholder="请输入个人概述，简要介绍自己的优势和职业目标"
|
||
v-model="summaryText"
|
||
rows="8"
|
||
></textarea>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 其他模块占位 ========== -->
|
||
<template v-else>
|
||
<div class="profile-drawer__empty">
|
||
<p class="profile-drawer__empty-text">{{ moduleTitle }}编辑功能开发中…</p>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 底部保存按钮 -->
|
||
<div class="profile-drawer__footer">
|
||
<button class="profile-drawer__save-btn" @click="handleSave">保存</button>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch } from 'vue'
|
||
import { useStore } from 'vuex'
|
||
import RegionSelector from '@/components/tools/RegionSelector.vue'
|
||
|
||
/** 教育经历单条数据结构 — 对应数据库 bg_user_profile_education */
|
||
interface EducationItem {
|
||
/** 记录ID（已有经历从后端获取，新增经历无此字段） */
|
||
id?: string
|
||
/** 学校名称 */
|
||
school: string
|
||
/** 专业 */
|
||
major: string
|
||
/** 学历类型（数字模式：0=全日制 1=非全日制；文本模式：中文字符串） */
|
||
studyType: number | string
|
||
/** 学历（数字模式：1=大专 2=本科 3=硕士 4=博士；文本模式：中文字符串） */
|
||
degree: number | string
|
||
/** 入学时间（日期选择器使用字符串，格式：YYYY-MM） */
|
||
startDate: string
|
||
/** 毕业时间（日期选择器使用字符串，格式：YYYY-MM） */
|
||
endDate: string
|
||
/** 描述段落数组 */
|
||
description: DescriptionParagraph[]
|
||
}
|
||
|
||
/** 实习经历单条数据结构 — 对应数据库 bg_user_profile_internship */
|
||
interface InternshipItem {
|
||
/** 记录ID（已有经历从后端获取，新增经历无此字段） */
|
||
id?: string
|
||
/** 公司名称 */
|
||
companyName: string
|
||
/** 职位 */
|
||
position: string
|
||
/** 开始时间 */
|
||
startDate: string
|
||
/** 结束时间 */
|
||
endDate: string
|
||
/** 描述段落数组 */
|
||
description: DescriptionParagraph[]
|
||
}
|
||
|
||
/** 工作经历单条数据结构 — 对应数据库 bg_user_profile_work */
|
||
interface WorkItem {
|
||
/** 记录ID（已有经历从后端获取，新增经历无此字段） */
|
||
id?: string
|
||
/** 公司名称 */
|
||
companyName: string
|
||
/** 职位 */
|
||
position: string
|
||
/** 开始时间 */
|
||
startDate: string
|
||
/** 结束时间 */
|
||
endDate: string
|
||
/** 描述段落数组 */
|
||
description: DescriptionParagraph[]
|
||
}
|
||
|
||
/** 描述段落单条数据结构 — 对应数据库 description JSON 数组中的一项 */
|
||
interface DescriptionParagraph {
|
||
/** 前端生成的短标识，用于简历优化时精确定位段落 */
|
||
id: string
|
||
/** 段落文本内容 */
|
||
text: string
|
||
}
|
||
|
||
/** 项目经历单条数据结构 — 对应数据库 bg_user_profile_project */
|
||
interface ProjectItem {
|
||
/** 记录ID（已有经历从后端获取，新增经历无此字段） */
|
||
id?: string
|
||
/** 项目名称 */
|
||
projectName: string
|
||
/** 所属公司 */
|
||
companyName: string
|
||
/** 担任角色 */
|
||
role: string
|
||
/** 开始时间 */
|
||
startDate: string
|
||
/** 结束时间 */
|
||
endDate: string
|
||
/** 描述段落数组 */
|
||
description: DescriptionParagraph[]
|
||
}
|
||
|
||
/** 竞赛经历单条数据结构 — 对应数据库 bg_user_profile_competition */
|
||
interface CompetitionItem {
|
||
/** 记录ID（已有经历从后端获取，新增经历无此字段） */
|
||
id?: string
|
||
/** 竞赛名称 */
|
||
competitionName: string
|
||
/** 获奖情况 */
|
||
award: string
|
||
/** 获奖时间 */
|
||
awardDate: string
|
||
/** 描述段落（仅一段），格式：[{id, text}] */
|
||
description: DescriptionParagraph[]
|
||
}
|
||
|
||
/** 组件 Props */
|
||
const props = defineProps<{
|
||
/** 控制抽屉显示/隐藏 */
|
||
modelValue: boolean
|
||
/** 模块名称标识，如 'info' | 'education' | 'internship' 等 */
|
||
module: string
|
||
/** 初始数据 — 不同模块传入不同 JSON 结构 */
|
||
initialData?: Record<string, any>
|
||
/** 教育经历是否使用中文文本作为选项值（默认 false 使用数字编码，true 则输出中文字符串） */
|
||
useEducationTextValue?: boolean
|
||
}>()
|
||
|
||
/** 学历类型选项映射 — 根据 useEducationTextValue 决定 value 类型 */
|
||
const studyTypeOptions = computed(() => props.useEducationTextValue
|
||
? [{ value: '全日制', label: '全日制' }, { value: '非全日制', label: '非全日制' }]
|
||
: [{ value: 0, label: '全日制' }, { value: 1, label: '非全日制' }]
|
||
)
|
||
|
||
/** 学历选项映射 — 根据 useEducationTextValue 决定 value 类型 */
|
||
const degreeOptions = computed(() => props.useEducationTextValue
|
||
? [{ value: '大专', label: '大专' }, { value: '本科', label: '本科' }, { value: '硕士', label: '硕士' }, { value: '博士', label: '博士' }]
|
||
: [{ value: 1, label: '大专' }, { value: 2, label: '本科' }, { value: 3, label: '硕士' }, { value: 4, label: '博士' }]
|
||
)
|
||
|
||
/** 组件 Emits */
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', value: boolean): void
|
||
(e: 'save', data: Record<string, any>): void
|
||
}>()
|
||
|
||
/** Vuex store 实例 — 用于从地区树中查找城市名称 */
|
||
const store = useStore()
|
||
|
||
/** 模块名称映射表 — 模块标识 → 中文标题 */
|
||
const moduleTitleMap: Record<string, string> = {
|
||
info: '基本信息',
|
||
summary: '个人概述',
|
||
education: '教育经历',
|
||
work: '工作经历',
|
||
internship: '实习经历',
|
||
project: '项目经历',
|
||
portfolio: '作品集',
|
||
skills: '技能',
|
||
competition: '竞赛',
|
||
certificate: '证书',
|
||
}
|
||
|
||
/** 当前模块的中文标题 */
|
||
const moduleTitle = computed(() => moduleTitleMap[props.module] || props.module)
|
||
|
||
/** 基本信息模块的字段配置 */
|
||
const infoFields = [
|
||
{ key: 'name', label: '姓名', placeholder: '请输入姓名', required: true },
|
||
{ key: 'email', label: '邮箱', placeholder: '请输入邮箱', required: true, type: 'email' },
|
||
{ key: 'phone', label: '电话', placeholder: '请输入联系电话', required: true, type: 'tel' },
|
||
{ key: 'location', label: '所在城市', placeholder: '请输入所在城市', required: true },
|
||
{ key: 'wechat', label: '微信', placeholder: '请输入微信号', required: false },
|
||
]
|
||
|
||
/** 表单数据 — 基本信息模块使用 */
|
||
const formData = ref<Record<string, any>>({})
|
||
|
||
/** 城市选择器当前选中的地区编码数组 */
|
||
const locationCodes = ref<string[]>([])
|
||
|
||
/** 地区选择器触发按钮的自定义样式 — 与抽屉内输入框保持一致 */
|
||
const regionTriggerStyle: Record<string, string> = {
|
||
width: '100%',
|
||
'box-sizing': 'border-box',
|
||
padding: '0.1rem 0.14rem',
|
||
'font-size': '0.13rem',
|
||
color: '#1a1a2e',
|
||
background: '#f6f6f9',
|
||
border: '1px solid transparent',
|
||
'border-radius': '0.06rem',
|
||
'max-width': 'none',
|
||
'justify-content': 'space-between',
|
||
|
||
}
|
||
|
||
/** 城市选择器确认回调 — 更新 locationCodes，同时将编码和城市名同步到 formData */
|
||
function onLocationChange(codes: string[]) {
|
||
locationCodes.value = codes
|
||
// 取第一个编码作为 regionCode 存入 formData
|
||
formData.value.location = codes[0] || ''
|
||
// 根据编码从地区树中查找城市名称，用于页面展示
|
||
formData.value.locationName = resolveRegionName(codes[0] || '')
|
||
}
|
||
|
||
/** 根据城市编码从 store 地区树中查找对应的城市名称 */
|
||
function resolveRegionName(code: string): string {
|
||
if (!code) return ''
|
||
for (const province of store.state.regions) {
|
||
for (const city of province.children) {
|
||
if (city.code === code) return city.name
|
||
if (city.children) {
|
||
for (const district of city.children) {
|
||
if (district.code === code) return district.name
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return code
|
||
}
|
||
|
||
/** 教育经历列表 — 教育经历模块使用 */
|
||
const educationList = ref<EducationItem[]>([])
|
||
|
||
/** 创建一条空的教育经历数据 */
|
||
const createEmptyEducation = (): EducationItem => ({
|
||
school: '',
|
||
major: '',
|
||
studyType: props.useEducationTextValue ? '全日制' : 0,
|
||
degree: props.useEducationTextValue ? '本科' : 2,
|
||
startDate: '',
|
||
endDate: '',
|
||
description: [{ id: generateId(), text: '' }],
|
||
})
|
||
|
||
/** 新增一条教育经历 */
|
||
const addEducation = () => {
|
||
educationList.value.push(createEmptyEducation())
|
||
}
|
||
|
||
/** 删除指定索引的教育经历 */
|
||
const removeEducation = (index: number) => {
|
||
educationList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 为指定教育经历新增一条描述段落 */
|
||
const addEducationDescriptionParagraph = (eduIndex: number) => {
|
||
educationList.value[eduIndex].description.push({ id: generateId(), text: '' })
|
||
}
|
||
|
||
/** 删除指定教育经历的指定描述段落 */
|
||
const removeEducationDescriptionParagraph = (eduIndex: number, descIndex: number) => {
|
||
educationList.value[eduIndex].description.splice(descIndex, 1)
|
||
}
|
||
|
||
/** 工作经历列表 — 工作经历模块使用 */
|
||
const workList = ref<WorkItem[]>([])
|
||
|
||
/** 创建一条空的工作经历数据 */
|
||
const createEmptyWork = (): WorkItem => ({
|
||
companyName: '',
|
||
position: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
description: [{ id: generateId(), text: '' }],
|
||
})
|
||
|
||
/** 新增一条工作经历 */
|
||
const addWork = () => {
|
||
workList.value.push(createEmptyWork())
|
||
}
|
||
|
||
/** 删除指定索引的工作经历 */
|
||
const removeWork = (index: number) => {
|
||
workList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 为指定工作经历新增一条描述段落 */
|
||
const addWorkDescriptionParagraph = (workIndex: number) => {
|
||
workList.value[workIndex].description.push({ id: generateId(), text: '' })
|
||
}
|
||
|
||
/** 删除指定工作经历的指定描述段落 */
|
||
const removeWorkDescriptionParagraph = (workIndex: number, descIndex: number) => {
|
||
workList.value[workIndex].description.splice(descIndex, 1)
|
||
}
|
||
|
||
/** 实习经历列表 — 实习经历模块使用 */
|
||
const internshipList = ref<InternshipItem[]>([])
|
||
|
||
/** 创建一条空的实习经历数据 */
|
||
const createEmptyInternship = (): InternshipItem => ({
|
||
companyName: '',
|
||
position: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
description: [{ id: generateId(), text: '' }],
|
||
})
|
||
|
||
/** 新增一条实习经历 */
|
||
const addInternship = () => {
|
||
internshipList.value.push(createEmptyInternship())
|
||
}
|
||
|
||
/** 删除指定索引的实习经历 */
|
||
const removeInternship = (index: number) => {
|
||
internshipList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 为指定实习经历新增一条描述段落 */
|
||
const addInternDescriptionParagraph = (internIndex: number) => {
|
||
internshipList.value[internIndex].description.push({ id: generateId(), text: '' })
|
||
}
|
||
|
||
/** 删除指定实习经历的指定描述段落 */
|
||
const removeInternDescriptionParagraph = (internIndex: number, descIndex: number) => {
|
||
internshipList.value[internIndex].description.splice(descIndex, 1)
|
||
}
|
||
|
||
/** 项目经历列表 — 项目经历模块使用 */
|
||
const projectList = ref<ProjectItem[]>([])
|
||
|
||
/** 创建一条空的项目经历数据 */
|
||
const createEmptyProject = (): ProjectItem => ({
|
||
projectName: '',
|
||
companyName: '',
|
||
role: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
description: [{ id: generateId(), text: '' }],
|
||
})
|
||
|
||
/** 生成短标识 ID — 用于描述段落的唯一标识 */
|
||
const generateId = (): string => {
|
||
return Math.random().toString(36).substring(2, 8)
|
||
}
|
||
|
||
/** 为指定项目新增一条描述段落 */
|
||
const addDescriptionParagraph = (projIndex: number) => {
|
||
projectList.value[projIndex].description.push({ id: generateId(), text: '' })
|
||
}
|
||
|
||
/** 删除指定项目的指定描述段落 */
|
||
const removeDescriptionParagraph = (projIndex: number, descIndex: number) => {
|
||
projectList.value[projIndex].description.splice(descIndex, 1)
|
||
}
|
||
|
||
/** 新增一条项目经历 */
|
||
const addProject = () => {
|
||
projectList.value.push(createEmptyProject())
|
||
}
|
||
|
||
/** 删除指定索引的项目经历 */
|
||
const removeProject = (index: number) => {
|
||
projectList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 竞赛经历列表 — 竞赛模块使用 */
|
||
const competitionList = ref<CompetitionItem[]>([])
|
||
|
||
/** 创建一条空的竞赛经历数据 */
|
||
const createEmptyCompetition = (): CompetitionItem => ({
|
||
competitionName: '',
|
||
award: '',
|
||
awardDate: '',
|
||
description: [{ id: generateId(), text: '' }],
|
||
})
|
||
|
||
/** 新增一条竞赛经历 */
|
||
const addCompetition = () => {
|
||
competitionList.value.push(createEmptyCompetition())
|
||
}
|
||
|
||
/** 删除指定索引的竞赛经历 */
|
||
const removeCompetition = (index: number) => {
|
||
competitionList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 技能列表 — 技能模块使用 */
|
||
const skillsList = ref<string[]>([])
|
||
|
||
/** 作品集链接 — 作品集模块使用 */
|
||
const portfolioUrl = ref('')
|
||
|
||
/** 个人概述文本 — 个人概述模块使用 */
|
||
const summaryText = ref('')
|
||
|
||
/** 新技能输入框的值 */
|
||
const newSkillInput = ref('')
|
||
|
||
/** 添加新技能 — 当输入长度大于0的非空字符串时添加 */
|
||
const handleAddSkill = () => {
|
||
const trimmedSkill = newSkillInput.value.trim()
|
||
// 只有当输入的内容去除空格后长度大于0，且不重复时才添加
|
||
if (trimmedSkill.length > 0 && !skillsList.value.includes(trimmedSkill)) {
|
||
skillsList.value.push(trimmedSkill)
|
||
newSkillInput.value = ''
|
||
} else if (trimmedSkill.length === 0) {
|
||
// 如果是空字符串，直接清空输入框
|
||
newSkillInput.value = ''
|
||
}
|
||
}
|
||
|
||
/** 删除指定索引的技能 */
|
||
const removeSkill = (index: number) => {
|
||
skillsList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 证书列表 — 证书模块使用 */
|
||
const certificatesList = ref<string[]>([])
|
||
|
||
/** 新证书输入框的值 */
|
||
const newCertificateInput = ref('')
|
||
|
||
/** 添加新证书 — 当输入长度大于0的非空字符串时添加 */
|
||
const handleAddCertificate = () => {
|
||
const trimmedCertificate = newCertificateInput.value.trim()
|
||
// 只有当输入的内容去除空格后长度大于0，且不重复时才添加
|
||
if (trimmedCertificate.length > 0 && !certificatesList.value.includes(trimmedCertificate)) {
|
||
certificatesList.value.push(trimmedCertificate)
|
||
newCertificateInput.value = ''
|
||
} else if (trimmedCertificate.length === 0) {
|
||
// 如果是空字符串，直接清空输入框
|
||
newCertificateInput.value = ''
|
||
}
|
||
}
|
||
|
||
/** 删除指定索引的证书 */
|
||
const removeCertificate = (index: number) => {
|
||
certificatesList.value.splice(index, 1)
|
||
}
|
||
|
||
/** 监听抽屉打开 — 初始化表单数据并锁定页面滚动 */
|
||
watch(() => props.modelValue, (visible) => {
|
||
if (visible) {
|
||
if (props.module === 'info') {
|
||
// 基本信息：用初始数据填充表单
|
||
formData.value = props.initialData ? { ...props.initialData } : {}
|
||
// 将城市编码同步到 locationCodes，确保 RegionSelector 能正确回显
|
||
locationCodes.value = formData.value.location ? [formData.value.location] : []
|
||
} else if (props.module === 'education') {
|
||
// 教育经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
|
||
if (props.initialData?.education?.length) {
|
||
educationList.value = props.initialData.education.map((item: any) => ({
|
||
...item,
|
||
description: item.description.map((d: any) => ({ ...d })),
|
||
}))
|
||
} else {
|
||
educationList.value = [createEmptyEducation()]
|
||
}
|
||
} else if (props.module === 'work') {
|
||
// 工作经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
|
||
if (props.initialData?.works?.length) {
|
||
workList.value = props.initialData.works.map((item: any) => ({
|
||
...item,
|
||
description: item.description.map((d: any) => ({ ...d })),
|
||
}))
|
||
} else {
|
||
workList.value = [createEmptyWork()]
|
||
}
|
||
} else if (props.module === 'internship') {
|
||
// 实习经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
|
||
if (props.initialData?.internships?.length) {
|
||
internshipList.value = props.initialData.internships.map((item: any) => ({
|
||
...item,
|
||
description: item.description.map((d: any) => ({ ...d })),
|
||
}))
|
||
} else {
|
||
internshipList.value = [createEmptyInternship()]
|
||
}
|
||
} else if (props.module === 'project') {
|
||
// 项目经历：用初始数据填充列表，若无则创建一条空记录
|
||
if (props.initialData?.projects?.length) {
|
||
projectList.value = props.initialData.projects.map((item: any) => ({
|
||
...item,
|
||
description: item.description.map((d: any) => ({ ...d })),
|
||
}))
|
||
} else {
|
||
projectList.value = [createEmptyProject()]
|
||
}
|
||
} else if (props.module === 'competition') {
|
||
// 竞赛经历：用初始数据填充列表，若无则创建一条空记录
|
||
if (props.initialData?.competitions?.length) {
|
||
competitionList.value = props.initialData.competitions.map((item: any) => ({
|
||
...item,
|
||
description: item.description.map((d: any) => ({ ...d })),
|
||
}))
|
||
} else {
|
||
competitionList.value = [createEmptyCompetition()]
|
||
}
|
||
} else if (props.module === 'portfolio') {
|
||
// 作品集：用初始数据填充链接
|
||
portfolioUrl.value = props.initialData?.portfolioUrl || ''
|
||
} else if (props.module === 'summary') {
|
||
// 个人概述：用初始数据填充文本
|
||
summaryText.value = props.initialData?.summary || ''
|
||
} else if (props.module === 'skills') {
|
||
// 技能：用初始数据填充列表，若无则创建空数组
|
||
skillsList.value = props.initialData?.skills ? [...props.initialData.skills] : []
|
||
newSkillInput.value = ''
|
||
} else if (props.module === 'certificate') {
|
||
// 证书：用初始数据填充列表，若无则创建空数组
|
||
certificatesList.value = props.initialData?.certificates ? [...props.initialData.certificates] : []
|
||
newCertificateInput.value = ''
|
||
}
|
||
document.body.style.overflow = 'hidden'
|
||
} else {
|
||
document.body.style.overflow = ''
|
||
}
|
||
})
|
||
|
||
/** 关闭抽屉 */
|
||
const handleClose = () => {
|
||
emit('update:modelValue', false)
|
||
}
|
||
|
||
/** 保存数据 — 将表单数据通过事件传递给父组件 */
|
||
const handleSave = () => {
|
||
if (props.module === 'info') {
|
||
emit('save', { ...formData.value })
|
||
} else if (props.module === 'education') {
|
||
emit('save', { education: educationList.value.map(item => ({
|
||
...item,
|
||
description: item.description.map(d => ({ ...d })),
|
||
})) })
|
||
} else if (props.module === 'work') {
|
||
emit('save', { works: workList.value.map(item => ({
|
||
...item,
|
||
description: item.description.map(d => ({ ...d })),
|
||
})) })
|
||
} else if (props.module === 'internship') {
|
||
emit('save', { internships: internshipList.value.map(item => ({
|
||
...item,
|
||
description: item.description.map(d => ({ ...d })),
|
||
})) })
|
||
} else if (props.module === 'project') {
|
||
emit('save', { projects: projectList.value.map(item => ({
|
||
...item,
|
||
description: item.description.map(d => ({ ...d })),
|
||
})) })
|
||
} else if (props.module === 'competition') {
|
||
emit('save', { competitions: competitionList.value.map(item => ({
|
||
...item,
|
||
description: item.description.map(d => ({ ...d })),
|
||
})) })
|
||
} else if (props.module === 'portfolio') {
|
||
emit('save', { portfolioUrl: portfolioUrl.value })
|
||
} else if (props.module === 'summary') {
|
||
emit('save', { summary: summaryText.value })
|
||
} else if (props.module === 'skills') {
|
||
emit('save', { skills: [...skillsList.value] })
|
||
} else if (props.module === 'certificate') {
|
||
emit('save', { certificates: [...certificatesList.value] })
|
||
}
|
||
emit('update:modelValue', false)
|
||
}
|
||
</script>
|