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

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

<script setup>
defineOptions({ name: 'resumeAnalysis-basicInfo'})
import { ref, watch } from 'vue'
import { checkEmail } from '@/utils/validate'
import { getDict } from '@/hooks/web/useDictionaries'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const CtFormRef = ref()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
const items = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: null,
      default: null,
      label: '中文名 *',
      col: 6,
      outlined: true,
      rules: [
        value => {
          if (value) return true
          return '请输入您的中文名'
        },
        value => {
          var regex = /^[\u4e00-\u9fa5]+$/
          if (regex.test(value)) return true
          return '请输入正确的中文名'
        }
      ]
    },
    {
      type: 'text',
      key: 'foreignName',
      value: null,
      label: '英文名',
      col: 6,
      outlined: true,
      clearable: true,
      rules: [
        value => {
          if (!value) return true
          var regex = /^[A-Za-z]+(?:\s[A-Za-z]+)?$/
          if (regex.test(value)) return true
          return '请输入正确的英文名'
        }
      ]
    },
    {
      type: 'ifRadio',
      key: 'sex',
      value: null, // '1' ? '男' : '女'
      default: '1',
      label: '性别 *',
      col: 6,
      width: 50,
      dictTypeName: 'menduner_sex',
      items: [],
    },
    {
      type: 'phoneNumber',
      key: 'phone',
      value: null,
      default: userInfo?.value?.phone || '',
      label: '电话号码 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请填写联系手机号']
    },
    {
      type: 'datePicker',
      mode: 'date',
      labelWidth: 80,
      key: 'birthday',
      value: new Date(2000, 0, 1).getTime(), // 月份是从 0 开始的
      label: '出生日期 *',
      disabledFutureDates: true,
      col: 6,
      format: 'YYYY/MM/DD',
      flexStyle: 'mb-7',
      outlined: true,
      rules: [v => !!v || '请选择出生日期']
    },
    {
      type: 'datePicker',
      mode: 'month',
      key: 'firstWorkTime',
      value: new Date(2000, 0).getTime(), // 月份是从 0 开始的
      disabledFutureDates: true,
      format: 'YYYY/MM',
      labelWidth: 90,
      flexStyle: 'mb-7',
      label: '首次工作时间',
      col: 6,
      outlined: true
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '常用邮箱 *',
      col: 6,
      outlined: true,
      rules: [
        value => {
          if (value) return true
          return '请输入联系邮箱'
        },
        value => {
          if (value && !checkEmail(value)) return '请输入正确的电子邮箱'
          return true
        }
      ]
    },
    {
      type: 'autocomplete',
      key: 'expType',
      value: null,
      default: null,
      label: '工作年限 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_exp_type',
      rules: [v => !!v || '请选择工作年限'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'eduType',
      value: null,
      default: null,
      label: '最高学历 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_education_type',
      rules: [v => !!v || '请选择最高学历'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'jobType',
      value: null,
      default: null,
      label: '求职类型 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_job_type',
      rules: [v => !!v || '请选择求职类型'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'jobStatus',
      value: null,
      default: null,
      label: '求职状态 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_job_seek_status',
      rules: [v => !!v || '请选择求职状态'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'maritalStatus',
      value: null,
      default: null,
      label: '婚姻状况',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_marital_status',
      items: []
    },
    {
      type: 'cascade',
      key: 'areaId',
      value: null,
      default: null,
      label: '所在城市',
      itemText: 'name',
      itemValue: 'id',
      required: true,
      checkStrictly: true,
      clearable: false,
      col: 6,
      items: [],
    },
    {
      type: 'cascade',
      key: 'regId',
      value: null,
      default: null,
      label: '户籍地',
      itemText: 'name',
      itemValue: 'id',
      checkStrictly: true,
      required: false,
      clearable: true,
      col: 6,
      items: [],
    },

  ]
})

items.value.options.forEach(async (e, index) => {
  if ((index + 2) % 2 === 0) e.flexStyle = 'mr-3'
  if (e.dictTypeName) {
    const { data } = await getDict(e.dictTypeName)
    e.items = data
  }
})

watch(
  () => props.data,
  (newVal) => {
    if (newVal && Object.keys(newVal)) {
      items.value.options.forEach(e => {
        if (newVal[e.key]) e.value = newVal[e.key]
        else e.value = e.default || null
      })
    }
  },
  { 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)
  return { id: props.id, data: obj}
}

defineExpose({
  id: props.id,
  submit
})

getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
  data = data?.length && data || []
  if (!data?.length) return console.error('areaTreeData获取失败！')
  const chinaTreeData = data
  if (!chinaTreeData?.length) return console.error('chinaTreeData获取失败！')
  const workAreaProvince = items.value.options.find(e => e.key === 'areaId')
  const regAreaProvince = items.value.options.find(e => e.key === 'regId')
  if (workAreaProvince?.items) workAreaProvince.items = chinaTreeData
  if (regAreaProvince?.items) regAreaProvince.items = chinaTreeData
})
</script>

<style lang="scss" scoped>
</style>