教育经历

src/views/resume/components/educationExp.vue

@@ -2,38 +2,42 @@
   <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>
+      <v-btn  variant="text" color="primary" prepend-icon="mdi-plus-box" @click="handle(0)">{{ $t('common.add') }}</v-btn>
     </div>
-    <div></div>
+    <!-- 编辑-表单 -->
+    <div v-if="isEdit" class="educExpItem-edit">
+      <h4 class="color6 my-3 mx-2"> {{ titleStatus ? $t('common.edit') : $t('common.add') }}{{ $t('resume.educationExp') }}</h4>
+      <CtForm :items="formItems" style="width: 100%;"></CtForm>
+      <div class="text-end mt-3">
+        <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
+        <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
+      </div>
+    </div>
+    <!-- 展示 -->
     <div
+      v-else
       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 class="text-end">
-          <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
-          <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
-        </div>
-      </div>
-      <!-- 展示 -->
-      <div v-else class="educExpItem">
+      <div class="educExpItem" @mouseenter="item.active = true" @mouseleave="item.active = false">
         <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>
+            <span style="font-size: 18px; font-weight: bold;">{{ item.universityText }}</span>
+            <span class="color6 font15 ml-5">
+              <span>{{ item.eduStartText }}</span>
+              <span class="mx-1">至</span>
+              <span>{{ item.eduEndText }}</span>
+            </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 v-if="item.active">
+            <v-btn  variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="handle(item)">{{ $t('common.edit') }}</v-btn>
+            <v-btn  variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="handleDelete(item)">{{ $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>
+          <span class="vline"  v-if="item.eduTypeText"></span>
+          <span class="color6 font15">{{ item.eduTypeText }}</span>
         </div>
         <div class="level3">
           <span class="color6 font15">主修科目：</span>
@@ -47,20 +51,15 @@
 <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
+import Snackbar from '@/plugins/snackbar'
+import { nextTick, ref } from 'vue'
 const yearMonth = ref(generateYearMonthDataArray())
-const isEdit = ref(true)
+
 const formItems = ref({
   options: [
     {
       type: 'autocomplete',
-      key: 'birth',
+      key: 'university',
       value: null,
       default: null,
       label: '学校名称 *',
@@ -69,11 +68,11 @@ const formItems = ref({
       itemText: 'label',
       itemValue: 'value',
       rules: [v => !!v || '请选择学校名称'],
-      items: [{ label: '广州大学', value: '01111'}]
+      items: [{ label: '广州大学', value: '01111'}, { label: '同济大学', value: '01112'}]
     },
     {
       type: 'text',
-      key: 'email',
+      key: 'major',
       value: null,
       default: null,
       label: '所学专业 *',
@@ -83,7 +82,7 @@ const formItems = ref({
     },
     {
       type: 'autocomplete',
-      key: 'edu',
+      key: 'eduType',
       value: '4',
       default: null,
       label: '最高学历 *',
@@ -139,8 +138,8 @@ const formItems = ref({
     {
       type: 'autocomplete',
       key: 'eduStart',
-      value: getYearMonth20YearsAgo(20),
-      default: null,
+      value: null,
+      default: getYearMonth20YearsAgo(20),
       label: '起始时间 *',
       col: 6,
       outlined: true,
@@ -152,8 +151,8 @@ const formItems = ref({
     {
       type: 'autocomplete',
       key: 'eduEnd',
-      value: getYearMonth20YearsAgo(20-4),
-      default: null,
+      value: null,
+      default: getYearMonth20YearsAgo(20-4),
       label: '结束时间 *',
       col: 6,
       outlined: true,
@@ -177,20 +176,29 @@ const formItems = ref({
 })
 const items = ref([
   {
-    isEdit: true,
-    university: '同济大学',
-    timeSlot: '2017/9-2021/7',
+    university: '01112',
+    universityText: '同济大学',
+    eduStart: 201909,
+    eduEnd: 202307,
+    eduStartText: '2019-09',
+    eduEndText: '2023-07',
     major: '酒店管理',
-    eduType: '硕士',
+    eduType: '5',
+    eduTypeText: '硕士',
     majors: '现代酒店管理、酒店心理、旅游学概论、前厅客房服务与管理、餐饮服务与管理、酒店英语、现代酒店营销、酒店财务管理、会议服务与管理、康乐服务与管理、酒店实用英语。',
   },
   {
-    university: '广州大学',
-    timeSlot: '2017/9-2021/7',
+    university: '01111',
+    universityText: '广州大学',
+    eduStart: 201509,
+    eduEnd: 201907,
+    eduStartText: '2015-09',
+    eduEndText: '2019-07',
     major: '软件工程',
-    eduType: '本科',
+    eduType: '4',
+    eduTypeText: '本科',
     majors: '​程序设计基础、面向对象程序设计、软件工程导论、离散结构、数据结构与算法、工程经济学、团队激励与沟通、软件工程职业实践、计算机系统基础、操作系统、数据库概论、网络及其计算、人机交互的软件工程方法、软件工程综合实践、软件构造、软件设计与体系结构、软件质量保证与测试等。',
-  },
+  }
 ])
 
 // 左侧加mr
@@ -198,22 +206,33 @@ formItems.value.options.forEach((_e, index) => {
   if ((index + 2) % 2 === 0 && !(!_e.col || _e.col >= 12)) _e.flexStyle = 'mr-3'
 })
 
-// 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 isEdit = ref(0)
+const titleStatus = ref(0)
 const handle = (item) => {
-  status.value = item ? 1 : 0
-  
+  titleStatus.value = item ? 1 : 0
+  if (item) { // 编辑
+    formItems.value.options.forEach(_i => { if (item[_i.key]) _i.value = item[_i.key] })
+  } else { // 新增
+    formItems.value.options.forEach(_i => _i.value = _i.default || null)
+  }
+  nextTick(() => {
+    isEdit.value = true
+  })
+}
+
+const handleSave = async () => {
+  // if (!advantage.value) return Snackbar.warning('请先输入个人优势！')
+  // await saveResumeAdvantage({ content: advantage.value })
+  isEdit.value = false
+  Snackbar.success('编辑成功')
+}
+const handleDelete = async (item) => {
+  console.log('1', item)
+  Snackbar.success('删除成功')
 }
 </script>