冲突合并

src/components/FormUI/radioGroup/index.vue

@@ -26,7 +26,7 @@
 import { ref, defineEmits } from 'vue';
 defineOptions({ name:'FormUI-v-text-field'})
 
-const props = defineProps({item: Object, modelValue: [String, Number]})
+const props = defineProps({item: Object, modelValue: [String, Number, Boolean]})
 const emit = defineEmits(['update:modelValue', 'change'])
 const item = props.item
 const value = ref(props.modelValue)

src/components/FormUI/textarea/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
+    <v-textarea
+      v-model="value"
+      :rules="item.rules"
+      variant="outlined"
+      :label="item.label"
+      :counter="item.counter"
+      :bg-color="item.bgColor"
+      :color="item.color || 'primary'"
+      :validate-on="item.validateOn"
+      :rows="item.rows || 3"
+      :disabled="item.disabled"
+      :density="item.dense || 'compact'"
+      :placeholder="item.placeholder || item.label"
+      :no-resize="!item.resize"
+      @update:modelValue="modelValueUpDate"
+    ></v-textarea>
+  </div>
+</template>
+<script setup>
+import { defineEmits, ref, watch } from 'vue';
+defineOptions({ name:'FormUI-v-textarea'})
+
+const props = defineProps({item: Object, modelValue: [String, Number]})
+const emit = defineEmits(['update:modelValue', 'change'])
+const item = props.item
+const value = ref(props.modelValue)
+
+watch(() => props.modelValue, (newVal) => {
+  value.value = newVal
+})
+const modelValueUpDate = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+  emit('change', value.value)
+}
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/locales/en.js

@@ -2,6 +2,7 @@ export default {
   common: {
     confirmTitle: 'System Hint',
     edit: 'Edit',
+    delete: 'Delete',
     cancel: 'Cancel',
     save: 'Save',
     add: 'Add',
@@ -65,8 +66,10 @@ export default {
     moreBtn: 'View More Enterprises'
   },
   resume: {
+    basicInfo: 'Basic Information',
     personalAdvantages: 'Personal Advantages',
     jobIntention: 'Job Intention',
-    trainingExperience: 'Training Experience'
+    trainingExperience: 'Training Experience',
+    educationExp: 'Educational Experience'
   }
 }

src/locales/zh-CN.js

@@ -2,6 +2,7 @@ export default {
   common: {
     confirmTitle: '系统提示',
     edit: '编辑',
+    delete: '删除',
     cancel: '取消',
     save: '保存',
     add: '新增',
@@ -65,8 +66,10 @@ export default {
     moreBtn: '查看更多企业'
   },
   resume: {
+    basicInfo: '基础信息',
     personalAdvantages: '个人优势',
     jobIntention: '求职意向',
-    trainingExperience: '培训经历'
+    trainingExperience: '培训经历',
+    educationExp: '教育经历'
   }
 }

src/views/resume/components/basicInfo.vue

@@ -1,35 +1,38 @@
 <template>
-  <div class="resume-box d-flex align-center">
-    <!-- 头像 -->
-    <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
-      <v-img class="img" cover src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
-      <div v-show="showIcon" class="mdi mdi-camera-outline"></div>
-    </div>
-    <!-- 基础信息 -->
-    <div style="flex: 1;" class="mr-8 mt-5">
-      <div class="d-flex justify-space-between">
-        <div v-for="(val, index) in itemsArr" :key="index" style="width: calc(50% - 12px);">
-          <CtForm :items="val.items" style="width: 100%;">
-            <template v-slot:phoneNum>
-              <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
-            </template>
-          </CtForm>
-        </div>
+  <div class="resume-box">
+    <div class="d-flex align-center">
+      <!-- <div class="resume-title">{{ $t('resume.basicInfo') }}</div> -->
+      <!-- 头像 -->
+      <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
+        <v-img class="img" cover src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
+        <div v-show="showIcon" class="mdi mdi-camera-outline"></div>
       </div>
-      <div class="d-flex justify-center">
-        <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
-        <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
+      <!-- 基础信息 -->
+      <div style="flex: 1;" class="mr-8 mt-5">
+        <CtForm :items="items" style="width: 100%;">
+          <template v-slot:phoneNum>
+            <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
+          </template>
+        </CtForm>
+        <div class="d-flex justify-space-between">
+          <div v-for="(val, index) in items" :key="index" style="width: calc(50% - 12px);">
+          </div>
+        </div>
       </div>
     </div>
+    <div class="d-flex justify-center">
+      <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
+      <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
+    </div>
   </div>
 </template>
 
 <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-right-basicInfo'})
+defineOptions({name: 'resume-components-basicInfo'})
 const showIcon = ref(false)
 const isExpand = ref(false)
 // const defaultYearMonthValue = ref(getYearMonth20YearsAgo())
@@ -42,6 +45,7 @@ const items = ref({
       value: '陈芊芊',
       default: null,
       label: '姓名 *',
+      col: 6,
       outlined: true,
       rules: [v => !!v || '请输入姓名']
     },
@@ -51,6 +55,7 @@ const items = ref({
       value: true,
       default: true,
       label: '性别',
+      col: 6,
       width: 70,
       items: [{ label: '男', value: true }, { label: '女', value: false }],
     },
@@ -60,6 +65,7 @@ const items = ref({
       value: '2021年05月03日',
       default: null,
       label: '出生日期',
+      col: 6,
       outlined: true,
       disabled: true,
     },
@@ -69,6 +75,7 @@ const items = ref({
     //   value: defaultYearMonthValue,
     //   default: null,
     //   label: '请选择出生年月 *',
+    //   col: 6,
     //   outlined: true,
     //   // dense: true,
     //   itemText: 'label',
@@ -82,6 +89,7 @@ const items = ref({
       value: '18466958635',
       default: null,
       label: '电话号码',
+      col: 6,
       outlined: true,
       disabled: true,
       slotName: 'phoneNum',
@@ -93,6 +101,7 @@ const items = ref({
       value: '01111',
       default: null,
       label: '所在城市 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -104,7 +113,8 @@ const items = ref({
       key: 'email',
       value: '69852936@qq.com',
       default: null,
-      label: '常用邮箱',
+      label: '常用邮箱 *',
+      col: 6,
       outlined: true,
       rules: [v => !!v || '请输入常用邮箱']
     },
@@ -114,6 +124,7 @@ const items = ref({
       value: '4',
       default: null,
       label: '工作经验 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -167,6 +178,7 @@ const items = ref({
       value: '4',
       default: null,
       label: '最高学历 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -216,16 +228,9 @@ const items = ref({
     },
   ]
 })
-
-const itemsArr = ref([])
-const getItemsArr = () => {
-  // arr = arr ? arr : items.value
-  itemsArr.value = [
-    { items: { options: [ ...items.value.options.filter((_, index) => (index + 2) % 2 === 0) ] } },
-    { items: { options: [ ...items.value.options.filter((_, index) => (index + 2) % 2 === 1) ] } }
-  ]
-}
-getItemsArr()
+items.value.options.forEach((_e, index) => {
+  if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
+})
 
 const expand = () => {
   if (isExpand.value) {
@@ -238,6 +243,7 @@ const expand = () => {
         value: '0',
         default: null,
         label: '求职类型 *',
+        col: 6,
         outlined: true,
         itemText: 'label',
         itemValue: 'value',
@@ -272,6 +278,7 @@ const expand = () => {
         value: '5',
         default: null,
         label: '薪资要求 *',
+        col: 6,
         outlined: true,
         itemText: 'label',
         itemValue: 'value',
@@ -321,6 +328,7 @@ const expand = () => {
         value: '酒店经理',
         default: null,
         label: '期望职位',
+        col: 6,
         outlined: true
       },
       {
@@ -329,12 +337,15 @@ const expand = () => {
         value: '行业不限',
         default: null,
         label: '期望行业',
+        col: 6,
         outlined: true
       }
     ]
     items.value.options = [...items.value.options, ...expandArr]
   }
-  getItemsArr()
+  items.value.options.forEach((_e, index) => {
+    if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
+  })
   isExpand.value = !isExpand.value
 }
 

src/views/resume/components/educationExp.vue

@@ -0,0 +1,228 @@
+<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: 'textarea',
+      key: 'majors',
+      value: null,
+      default: null,
+      counter: 200,
+      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>

src/views/resume/dynamic/right.vue

@@ -4,6 +4,7 @@
     <selfEvaluation class="my"></selfEvaluation>
     <jobIntention></jobIntention>
     <trainingExperience class="my"></trainingExperience>
+    <educationExp></educationExp>
   </div>
 </template>
 
@@ -13,6 +14,7 @@ import basicInfo from '../components/basicInfo.vue'
 import selfEvaluation from '../components/selfEvaluation.vue'
 import jobIntention from '../components/jobIntention.vue'
 import trainingExperience from '../components/trainingExperience.vue'
+import educationExp from '../components/educationExp.vue'
 </script>
 
 <style scoped lang="scss">

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开始的），  
   // 但由于我们只是要获取年和月，并不真正需要修改日期的月份部分，