resumeEdit.vue

<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>