获取年月

src/views/resume/components/basicInfo.vue

@@ -29,7 +29,7 @@
 
 <script setup>
 import CtForm from '@/components/CtForm'
-// import { getYearMonth20YearsAgo, generateYearMonthDataArray } from './../../utils/generateYearMonthData'
+// import { getYearMonth20YearsAgo, generateYearMonthDataArray } from './../utils/generateYearMonthData'
 import { ref } from 'vue';
 
 defineOptions({name: 'resume-components-basicInfo'})
@@ -113,7 +113,7 @@ const items = ref({
       key: 'email',
       value: '69852936@qq.com',
       default: null,
-      label: '常用邮箱',
+      label: '常用邮箱 *',
       col: 6,
       outlined: true,
       rules: [v => !!v || '请输入常用邮箱']

src/views/resume/components/educationExp.vue

@@ -2,55 +2,189 @@
   <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="isEdit = true">{{ $t('common.add') }}</v-btn>
+      <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="['educExpItem', {'mt-5': index }]"
+      :class="[' mx-n2', {'mt-5': index }]"
     >
-      <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="color9 ml-5">{{ item.timeSlot }}</span>
+      <!-- 编辑-表单 -->
+      <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>
-          <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-delete-outline" @click="isEdit = true">{{ $t('common.delete') }}</v-btn>
+        <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 class="level2 my-2">
-        <span class="color9">{{ item.major }}</span>
-        <span class="vline"  v-if="item.eduType && item.eduType !== 0"></span>
-        <span class="color9">{{ item.eduType }}</span>
-      </div>
-      <div class="level3">
-        <span class="color9">主修科目：</span>
-        <span class="color9">{{ item.majors }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup name="educationExp">
-// import CtForm from '@/components/CtForm'
+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([
   {
-    university: '广州大学',
+    isEdit: true,
+    university: '同济大学',
     timeSlot: '2017/9-2021/7',
-    major: '酒店管理专业',
-    eduType: '本科',
+    major: '酒店管理',
+    eduType: '硕士',
     majors: '现代酒店管理、酒店心理、旅游学概论、前厅客房服务与管理、餐饮服务与管理、酒店英语、现代酒店营销、酒店财务管理、会议服务与管理、康乐服务与管理、酒店实用英语。',
   },
   {
     university: '广州大学',
     timeSlot: '2017/9-2021/7',
-    major: '酒店管理专业',
+    major: '软件工程',
     eduType: '本科',
-    majors: '现代酒店管理、酒店心理、旅游学概论、前厅客房服务与管理、餐饮服务与管理、酒店英语、现代酒店营销、酒店财务管理、会议服务与管理、康乐服务与管理、酒店实用英语。',
+    majors: '​程序设计基础、面向对象程序设计、软件工程导论、离散结构、数据结构与算法、工程经济学、团队激励与沟通、软件工程职业实践、计算机系统基础、操作系统、数据库概论、网络及其计算、人机交互的软件工程方法、软件工程综合实践、软件构造、软件设计与体系结构、软件质量保证与测试等。',
   },
 ])
 
@@ -66,16 +200,28 @@ const items = ref([
 // const handleIndustry = (list) => {
 //   console.log(list, 'industry')
 // }
+const status = ref(0)
+const handle = (item) => {
+  status.value = item ? 1 : 0
+  
+}
 </script>
 
 <style scoped lang="scss">
-.color9 { color: #666666; }
+.font15 { font-size: 15px;; }
+.color9 { color: #999; }
+.color6 { color: #666666; }
 .educExpItem {
   cursor: pointer;
   border-radius: 6px;
-  padding: 0 10px 8px;
+  padding: 2px 10px 8px;
   &:hover {
     background-color: #f8f8f8;
   }
 }
+.educExpItem-edit {
+  border-radius: 6px;
+  padding: 2px 10px 8px;
+  background-color: #f8f8f8;
+}
 </style>

src/views/resume/utils/generateYearMonthData.js

@@ -15,12 +15,12 @@ export const generateYearMonthDataArray = () => {
   return yearMonthData; 
 }
 // 20年前的YYYYMM 返回：202405
-export const getYearMonth20YearsAgo = () => {
+export const getYearMonth20YearsAgo = (num = 20) => {
   // 获取当前日期  
   const now = new Date()
       
   // 设置年份为20年前  
-  now.setFullYear(now.getFullYear() - 20)
+  now.setFullYear(now.getFullYear() - num)
     
   // 需要注意的是，我们不能直接设置月份为0（因为月份是从0开始的），  
   // 但由于我们只是要获取年和月，并不真正需要修改日期的月份部分，