menduner/src/views/recruit/personal/PersonalCenter/resume/analysis/components/trainingExperience.vue

<!--  -->
<template>
  <CtForm ref="CtFormRef" :items="items" style="width: 100%;"></CtForm>
</template>

<script setup>
defineOptions({ name: 'resumeAnalysis-trainingExperience'})
import { ref, watch, nextTick } from 'vue'
import Snackbar from '@/plugins/snackbar'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => {}
  }
})

const startTimeChange = (v) => {
  const item1 = items.value.options.find(e => e.key === 'startTime')
  const item2 = items.value.options.find(e => e.key === 'endTime')
  if (item1?.value && item2?.value && item1.value > item2.value) {
    Snackbar.warning('开始时间不能大于结束时间！')
    nextTick(() => {
      item1.value = item2.value
    })
  }
}
const endTimeChange = (v) => {
  const item1 = items.value.options.find(e => e.key === 'startTime')
  const item2 = items.value.options.find(e => e.key === 'endTime')
  if (item1?.value && item2?.value && item1.value > item2.value) {
    Snackbar.warning('结束时间不能小于开始时间')
    nextTick(() => {
      item2.value = item1.value
    })
  }
}

const CtFormRef = ref()
const items = ref({
  options: [
    {
      type: 'text',
      key: 'orgName',
      value: '',
      col: 6,
      label: '培训中心 *',
      flexStyle: 'mr-3',
      rules: [v => !!v || '请输入培训中心']
    },
    {
      type: 'text',
      key: 'course',
      value: '',
      col: 6,
      label: '培训课程 *',
      rules: [v => !!v || '请输入培训课程']
    },
    {
      type: 'datePicker',
      key: 'startTime',
      mode: 'month',
      value: new Date(2020, 0).getTime(), // 月份是从 0 开始的
      labelWidth: 80,
      label: '开始时间 *',
      disabledFutureDates: true,
      col: 6,
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择培训开始时间'],
      change: startTimeChange
    },
    {
      type: 'datePicker',
      key: 'endTime',
      mode: 'month',
      value: new Date(2022, 0).getTime(), // 月份是从 0 开始的
      labelWidth: 80,
      label: '结束时间 *',
      disabledFutureDates: true,
      col: 6,
      rules: [v => !!v || '请选择培训结束时间'],
      change: endTimeChange
    },
    {
      type: 'textarea',
      key: 'content',
      value: '',
      label: '培训描述',
      rows: 5,
      flexStyle: 'mt-5',
      resize: true,
      counter: 2000,
      rules: [
        value => {
          if (value?.length <= 2000) return true
          return '请输入2-2000个字符'
        }
      ]
    }
  ]
})

watch(
  () => props.data,
  (newVal) => {
    if (newVal && Object.keys(newVal)) {
      items.value.options.forEach(e => {
        if (newVal[e.key]) e.value = newVal[e.key]
      })
    }
  },
  { immediate: true }
)

const submit = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return { id: props.id, data: null}
  const obj = {}
  items.value.options.forEach(e => obj[e.key] = e.value)
  if (obj.startTime > obj.endTime) {
    return { id: props.id, data: null, SnackText: `${props.text} 开始时间不能大于结束时间！`}
  }
  return { id: props.id, data: obj}
}

defineExpose({
  id: props.id,
  submit
})
</script>
<style lang="scss" scoped>
</style>