<template>
<div>
<a-form-model ref="form" :model="formModel">
<a-row>
<a-col :span="24" style="border-top: 0px; text-align: center">
<div class="main-title">
<span>申报人才简历</span>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<span>学历(高中以上)</span>
</div>
</a-col>
<a-col :span="20">
<!-- 学历表格 -->
<a-row type="flex" class="row_center">
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>起止日期</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>学校</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>备注(限20字)</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in educationList" :key="'educationList'+index" type="flex" class="row_center">
<a-col :span="8">
<a-form-model-item :prop="`educationList.${index}.resumeRange`" :rules="{ required: true, validator: checkDateRange, trigger: 'blur' }">
<a-range-picker v-model="item.resumeRange" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" @change="(dates, dateStrings) => educationDateChange(dates, dateStrings, index)" :placeholder="['开始时间', '结束时间']" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`educationList.${index}.orgName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.orgName" :maxLength="100" placeholder="学校" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`educationList.${index}.resumeRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.resumeRemark" :maxLength="50" placeholder="备注" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteEducationArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addEducationArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<span>研修经历</span>
</div>
</a-col>
<a-col :span="20">
<!-- 研修经历表格 -->
<a-row type="flex" class="row_center">
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>起止日期</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>机构(国别)</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>研修内容(限20字)</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in studyList" :key="'studyList'+index" type="flex" class="row_center">
<a-col :span="8">
<a-form-model-item :prop="`studyList[${index}].resumeRange`" :rules="{ required: true, validator: checkDateRange, trigger: 'blur' }">
<a-range-picker v-model="item.resumeRange" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" @change="(dates, dateStrings) => studyDateChange(dates, dateStrings, index)" :placeholder="['开始时间', '结束时间']" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item :prop="`studyList[${index}].orgName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.orgName" :maxLength="100" placeholder="机构" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :prop="`studyList[${index}].resumeRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.resumeRemark" :maxLength="50" placeholder="研修内容" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteStudyArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addStudyArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<span>工作经历</span>
</div>
</a-col>
<a-col :span="20">
<!-- 工作经历表格 -->
<a-row type="flex" class="row_center">
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>起止日期</div>
</div>
</a-col>
<a-col :span="5" class="bg-gray">
<div class="special-middle">
<div>机构</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>职务</div>
</div>
</a-col>
<a-col :span="7" class="bg-gray">
<div class="special-middle">
<div>承担的主要工作(限20字)</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in workList" :key="'workList'+index" type="flex" class="row_center">
<a-col :span="6">
<a-form-model-item :prop="`workList[${index}].resumeRange`" :rules="{ required: true, validator: checkDateRange, trigger: 'blur' }">
<a-range-picker v-model="item.resumeRange" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" @change="(dates, dateStrings) => workDateChange(dates, dateStrings, index)" :placeholder="['开始时间', '结束时间']" />
</a-form-model-item>
</a-col>
<a-col :span="5">
<a-form-model-item :prop="`workList[${index}].orgName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.orgName" :maxLength="100" placeholder="机构" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="4">
<a-form-model-item :prop="`workList[${index}].positionName`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.positionName" :maxLength="50" placeholder="职务" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="7">
<a-form-model-item :prop="`workList[${index}].resumeRemark`" :rules="{ required: true, message: '*', trigger: 'blur',}">
<a-input v-model="item.resumeRemark" :maxLength="50" placeholder="工作内容" style="width:85%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteWorkArray(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<a-button type="dashed" style="width: 20%" @click="addWorkArray()">
<a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
</a-button>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
import moment from 'moment'
import { isEmptyParams, checkDateRange } from '@/views/utils/common'
//学历
const Education = { id: null, talentId: null, resumeType: 'e76f5097-fe28-11ef-b6cb-0c42a1380f01', resumeStart: null, resumeEnd: null, orgName: null, positionName: null, resumeRemark: null, showIndex: null, resumeRange: [] }
//研修经历
const Study = { id: null, talentId: null, resumeType: 'e76f5097-fe28-11ef-b6cb-0c42a1380f02', resumeStart: null, resumeEnd: null, orgName: null, positionName: null, resumeRemark: null, showIndex: null, resumeRange: [] }
//工作经历
const Work = { id: null, talentId: null, resumeType: 'e76f5097-fe28-11ef-b6cb-0c42a1380f03', resumeStart: null, resumeEnd: null, orgName: null, positionName: null, resumeRemark: null, showIndex: null, resumeRange: [] }
export default {
name: "resumeEdit",
props: {
resumeList: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
educationList: [],
studyList: [],
workList: [],
formModel: {
educationList: [],
studyList: [],
workList: [],
}
};
},
created() {
// 根据 resumeType 分类并排序
if (this.resumeList && this.resumeList.length > 0) {
// 学历记录
this.educationList = this.resumeList
.filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f01')
.sort((a, b) => a.showIndex - b.showIndex)
.map(item => ({
...item,
resumeRange: item.resumeStart && item.resumeEnd ?
[moment(item.resumeStart), moment(item.resumeEnd)] : []
}))
// 研修经历
this.studyList = this.resumeList
.filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f02')
.sort((a, b) => a.showIndex - b.showIndex)
.map(item => ({
...item,
resumeRange: item.resumeStart && item.resumeEnd ?
[moment(item.resumeStart), moment(item.resumeEnd)] : []
}))
// 工作经历
this.workList = this.resumeList
.filter(item => item.resumeType === 'e76f5097-fe28-11ef-b6cb-0c42a1380f03')
.sort((a, b) => a.showIndex - b.showIndex)
.map(item => ({
...item,
resumeRange: item.resumeStart && item.resumeEnd ?
[moment(item.resumeStart), moment(item.resumeEnd)] : []
}))
this.formModel.educationList = this.educationList
this.formModel.studyList = this.studyList
this.formModel.workList = this.workList
}
},
methods: {
moment,
checkDateRange,
educationDateChange(dates, dateStrings, index) {
if (dateStrings[0] && dateStrings[1]) {
this.educationList[index].resumeStart = dateStrings[0]
this.educationList[index].resumeEnd = dateStrings[1]
}
},
studyDateChange(dates, dateStrings, index) {
if (dateStrings[0] && dateStrings[1]) {
this.studyList[index].resumeStart = dateStrings[0]
this.studyList[index].resumeEnd = dateStrings[1]
}
},
workDateChange(dates, dateStrings, index) {
if (dateStrings[0] && dateStrings[1]) {
this.workList[index].resumeStart = dateStrings[0]
this.workList[index].resumeEnd = dateStrings[1]
}
},
addEducationArray() {
const newItem = {
...Education,
showIndex: this.educationList.length + 1,
resumeRange: []
}
this.educationList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteEducationArray(item) {
let index = this.educationList.indexOf(item)
if (index !== -1) {
this.educationList.splice(index, 1)
}
},
addStudyArray() {
const newItem = {
...Study,
showIndex: this.studyList.length + 1,
resumeRange: []
}
this.studyList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteStudyArray(item) {
let index = this.studyList.indexOf(item)
if (index !== -1) {
this.studyList.splice(index, 1)
}
},
addWorkArray() {
const newItem = {
...Work,
showIndex: this.workList.length + 1,
resumeRange: []
}
this.workList.push(newItem)
this.$nextTick(() => {
this.$refs.form && this.$refs.form.clearValidate()
})
},
deleteWorkArray(item) {
let index = this.workList.indexOf(item)
if (index !== -1) {
this.workList.splice(index, 1)
}
},
mergeResumeList() {
// 清空原有数据
this.resumeList.length = 0
// 合并三个数组
const allLists = [
...this.educationList.map((item, index) => {
// 创建一个新对象，避免直接修改原对象
const newItem = { ...item }
// 安全地添加时间部分
if (newItem.resumeStart) {
newItem.resumeStart = newItem.resumeStart + " 00:00:00"
}
if (newItem.resumeEnd) {
newItem.resumeEnd = newItem.resumeEnd + " 23:59:59"
}
newItem.showIndex = index + 1
return newItem
}),
...this.studyList.map((item, index) => {
const newItem = { ...item }
if (newItem.resumeStart) {
newItem.resumeStart = newItem.resumeStart + " 00:00:00"
}
if (newItem.resumeEnd) {
newItem.resumeEnd = newItem.resumeEnd + " 23:59:59"
}
newItem.showIndex = index + 1
return newItem
}),
...this.workList.map((item, index) => {
const newItem = { ...item }
if (newItem.resumeStart) {
newItem.resumeStart = newItem.resumeStart + " 00:00:00"
}
if (newItem.resumeEnd) {
newItem.resumeEnd = newItem.resumeEnd + " 23:59:59"
}
newItem.showIndex = index + 1
return newItem
})
]
// 移除 resumeRange 字段，因为后端不需要
const cleanedList = allLists.map(item => {
const newItem = { ...item }
delete newItem.resumeRange
return newItem
})
// 更新 resumeList
this.resumeList.push(...cleanedList)
//console.log('合并后的简历列表:', this.resumeList)
return this.resumeList
}
},
watch: {
educationList: {
handler(val) {
this.formModel.educationList = val
},
deep: true,
immediate: true
},
studyList: {
handler(val) {
this.formModel.studyList = val
},
deep: true,
immediate: true
},
workList: {
handler(val) {
this.formModel.workList = val
},
deep: true,
immediate: true
},
}
};
</script>