menduner/src/views/resume/components/educationExp.vue

<template>
  <div class="resume-box">
    <div class="resume-header mb-3">
      <div class="resume-title">{{ $t('resume.educationExp') }}</div>
      <v-btn  variant="text" color="primary" prepend-icon="mdi-plus-box" @click="handle">{{ $t('common.add') }}</v-btn>
    </div>
    <div></div>
    <div
      v-for="(item, index) in items" :key="'educationExp' + index"
      :class="[' mx-n2', {'mt-5': index }]"
    >
      <!-- 编辑-表单 -->
      <div v-if="item.isEdit" class="educExpItem-edit">
        <h4 class="color6 my-3 mx-2"> {{ status ? $t('common.edit') : $t('common.add') }}{{ $t('resume.educationExp') }}</h4>
        <CtForm :items="formItems" style="width: 100%;"></CtForm>
      </div>
      <!-- 展示 -->
      <div v-else class="educExpItem">
        <div class="level1 d-flex align-center justify-space-between" style="height: 40px;">
          <div>
            <span style="font-size: 18px; font-weight: bold;">{{ item.university }}</span>
            <span class="color6 font15 ml-5">{{ item.timeSlot }}</span>
          </div>
          <div>
            <v-btn  variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ $t('common.edit') }}</v-btn>
            <v-btn  variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="isEdit = true">{{ $t('common.delete') }}</v-btn>
          </div>
        </div>
        <div class="level2 my-2">
          <span class="color6 font15">{{ item.major }}</span>
          <span class="vline"  v-if="item.eduType && item.eduType !== 0"></span>
          <span class="color6 font15">{{ item.eduType }}</span>
        </div>
        <div class="level3">
          <span class="color6 font15">主修科目：</span>
          <span class="color6 font15">{{ item.majors }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="educationExp">
import CtForm from '@/components/CtForm'
import { getYearMonth20YearsAgo, generateYearMonthDataArray } from './../utils/generateYearMonthData'
import { ref } from 'vue'

// const defaultYearMonthValue = (val) => { getYearMonth20YearsAgo(val) }
// const defaultYearMonthValue = (num) => { ref(getYearMonth20YearsAgo(num)) }
// const a = getYearMonth20YearsAgo(30)
// console.log('1', a)
// debugger
const yearMonth = ref(generateYearMonthDataArray())
const isEdit = ref(true)
const formItems = ref({
  options: [
    {
      type: 'autocomplete',
      key: 'birth',
      value: null,
      default: null,
      label: '学校名称 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择学校名称'],
      items: [{ label: '广州大学', value: '01111'}]
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '所学专业 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请输入所学专业']
    },
    {
      type: 'autocomplete',
      key: 'edu',
      value: '4',
      default: null,
      label: '最高学历 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择最高学历'],
      items: [
        {
          id: 1552, 
          label: "初中及以下", 
          value: "0"
        }, 
        {
          id: 1553, 
          label: "中专/中技", 
          value: "1"
        }, 
        {
          id: 1554, 
          label: "高中", 
          value: "2"
        }, 
        {
          id: 1555, 
          label: "大专", 
          value: "3"
        }, 
        {
          id: 1556, 
          label: "本科", 
          value: "4"
        }, 
        {
          id: 1557, 
          label: "硕士", 
          value: "5"
        }, 
        {
          id: 1558, 
          label: "博士", 
          value: "6"
        }, 
        {
          id: 1559, 
          label: "其他", 
          value: "99"
        }
      ]
    },
    { col: 6, },
    {
      type: 'autocomplete',
      key: 'eduStart',
      value: getYearMonth20YearsAgo(20),
      default: null,
      label: '起始时间 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择起始时间'],
      items: yearMonth
    },
    {
      type: 'autocomplete',
      key: 'eduEnd',
      value: getYearMonth20YearsAgo(20-4),
      default: null,
      label: '结束时间 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择结束时间'],
      items: yearMonth
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '所学专业 *',
      col: 12,
      outlined: true,
      rules: [v => !!v || '请输入所学专业']
    },
  ]
})
const items = ref([
  {
    isEdit: true,
    university: '同济大学',
    timeSlot: '2017/9-2021/7',
    major: '酒店管理',
    eduType: '硕士',
    majors: '现代酒店管理、酒店心理、旅游学概论、前厅客房服务与管理、餐饮服务与管理、酒店英语、现代酒店营销、酒店财务管理、会议服务与管理、康乐服务与管理、酒店实用英语。',
  },
  {
    university: '广州大学',
    timeSlot: '2017/9-2021/7',
    major: '软件工程',
    eduType: '本科',
    majors: '​程序设计基础、面向对象程序设计、软件工程导论、离散结构、数据结构与算法、工程经济学、团队激励与沟通、软件工程职业实践、计算机系统基础、操作系统、数据库概论、网络及其计算、人机交互的软件工程方法、软件工程综合实践、软件构造、软件设计与体系结构、软件质量保证与测试等。',
  },
])

// const items = ref({
//   options: []
// })

// 期望职位
// const handleJobClickItem = (val) => {
//   items.value.options.find(e => e.key === 'positionId').value = val.nameCn
// }

// const handleIndustry = (list) => {
//   console.log(list, 'industry')
// }
const status = ref(0)
const handle = (item) => {
  status.value = item ? 1 : 0
  
}
</script>

<style scoped lang="scss">
.font15 { font-size: 15px;; }
.color9 { color: #999; }
.color6 { color: #666666; }
.educExpItem {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 10px 8px;
  &:hover {
    background-color: #f8f8f8;
  }
}
.educExpItem-edit {
  border-radius: 6px;
  padding: 2px 10px 8px;
  background-color: #f8f8f8;
}
</style>