<template>
|
<div>
|
<!-- 教育经历 -->
|
<el-card class="form-card" shadow="never">
|
<template #header>
|
<span class="card-title">
|
<span class="card-title-line">|</span>
|
教育经历
|
</span>
|
</template>
|
<el-table :data="form.educationList" border>
|
<el-table-column label="学历" prop="degree" width="120">
|
<template #default="{ row }">
|
<el-select
|
v-model="row.degree"
|
placeholder="请选择"
|
clearable
|
style="width: 100%"
|
>
|
<el-option label="中专及以下" value="secondary" />
|
<el-option label="大专" value="junior_college" />
|
<el-option label="本科" value="bachelor" />
|
<el-option label="硕士" value="master" />
|
<el-option label="博士及以上" value="doctor" />
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="毕业院校" prop="school" min-width="160">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.school"
|
placeholder="请输入"
|
clearable
|
maxlength="30"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="入学时间" prop="admissionDate" width="150">
|
<template #default="{ row }">
|
<el-date-picker
|
v-model="row.admissionDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%"
|
clearable
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="毕业时间" prop="graduationDate" width="150">
|
<template #default="{ row }">
|
<el-date-picker
|
v-model="row.graduationDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%"
|
clearable
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="专业" prop="major" min-width="140">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.major"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="学位" prop="academicDegree" width="140">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.academicDegree"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center">
|
<template #default="scope">
|
<el-button
|
v-if="form.educationList.length > 1"
|
type="primary"
|
link
|
@click="removeEducationRow(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="table-add-row" @click="addEducationRow">新建一行</div>
|
</el-card>
|
|
<!-- 工作经历 -->
|
<el-card class="form-card" shadow="never">
|
<template #header>
|
<span class="card-title">
|
<span class="card-title-line">|</span>
|
工作经历
|
</span>
|
</template>
|
<el-table :data="form.workExperienceList" border>
|
<el-table-column label="前公司" prop="company" min-width="180">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.company"
|
placeholder="请输入"
|
clearable
|
maxlength="30"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="前公司部门" prop="department" min-width="140">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.department"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="前公司职位" prop="position" min-width="140">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.position"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="开始日期" prop="startDate" width="150">
|
<template #default="{ row }">
|
<el-date-picker
|
v-model="row.startDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%"
|
clearable
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="结束日期" prop="endDate" width="150">
|
<template #default="{ row }">
|
<el-date-picker
|
v-model="row.endDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%"
|
clearable
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="工作描述" prop="description" min-width="220">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.description"
|
type="textarea"
|
:rows="2"
|
placeholder="请输入"
|
clearable
|
maxlength="500"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center">
|
<template #default="scope">
|
<el-button
|
v-if="form.workExperienceList.length > 1"
|
type="primary"
|
link
|
@click="removeWorkRow(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="table-add-row" @click="addWorkRow">新建一行</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { toRefs } from "vue";
|
|
const props = defineProps({
|
form: { type: Object, required: true },
|
});
|
|
const emit = defineEmits(["update:form"]);
|
|
const { form } = toRefs(props);
|
|
const addEducationRow = () => {
|
form.value.educationList.push({
|
degree: "",
|
school: "",
|
admissionDate: "",
|
graduationDate: "",
|
major: "",
|
academicDegree: "",
|
});
|
};
|
|
const removeEducationRow = (index) => {
|
if (form.value.educationList.length <= 1) return;
|
form.value.educationList.splice(index, 1);
|
};
|
|
const addWorkRow = () => {
|
form.value.workExperienceList.push({
|
company: "",
|
department: "",
|
position: "",
|
startDate: "",
|
endDate: "",
|
description: "",
|
});
|
};
|
|
const removeWorkRow = (index) => {
|
if (form.value.workExperienceList.length <= 1) return;
|
form.value.workExperienceList.splice(index, 1);
|
};
|
</script>
|
|
<style scoped>
|
.form-card {
|
margin-bottom: 16px;
|
}
|
|
.card-title-line {
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
|
.table-add-row {
|
margin-top: 8px;
|
color: #409eff;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
</style>
|
