menduner/src/views/recruit/personal/PersonalCenter/resume/online/analysis/educationExp.vue

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

<script setup>
defineOptions({ name: 'resumeAnalysis-educationExp'})
import { debounce } from 'lodash'
import { getDict } from '@/hooks/web/useDictionaries'
import { ref, reactive, watch } from 'vue'
import { schoolSearchByName, schoolMajorByName } from '@/api/recruit/personal/resume'
import { dealCanBeInputtedSave, dealCanBeInputtedValueAndLabel } from '@/utils/getText'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => {}
  }
})

const CtFormRef = ref()
const dictItemsObj = reactive({})

// 学校下拉列表
const schoolNameInput = ref('')
const getSchoolListData = async (name) => {
  const item = items.value.options.find(e => e.key === 'schoolId')
  if (!item) return
  if (item.items?.length && (schoolNameInput.value === name)) return // 防抖
  item[item.itemTextName] = schoolNameInput.value = name

  if (name === null || name === '') { item.items = [] }
  else {
    const data = await schoolSearchByName({ name })
    item.items = data
  }
}
const debouncedCallbackSchool = debounce(newValue => {
  if (!newValue) return
  getSchoolListData(newValue)
}, 500)

// 专业下拉列表
const majorNameInput = ref('')
const getMajorListData = async (name) => {
  const item = items.value.options.find(e => e.key === 'majorId')
  if (name === '') { // 此接口不支持传空值
    item.items = []
    return
  }
  if (item.items?.length && (majorNameInput.value === name)) return // 防抖
  item[item.itemTextName] = majorNameInput.value = name
  
  if (name === null || name === '') { item.items = [] }
  else {
    const data = await schoolMajorByName({ name })
    item.items = data
  }
}
const debouncedCallbackMajor = debounce(newValue => {
  getMajorListData(newValue)
}, 500)

const items = ref({
  options: [
    {
      type: 'combobox',
      key: 'schoolId',
      value: null,
      default: null,
      label: '学校名称 *',
      col: 6,
      outlined: true,
      clearable: true,
      canBeInputted: true, //
      itemTextName: 'schoolName',
      itemText: 'value',
      itemValue: 'key',
      rules: [v => !!v || '请选择学校名称'],
      search: debouncedCallbackSchool,
      items: []
    },
    {
      type: 'combobox',
      key: 'majorId',
      value: null,
      default: null,
      label: '所学专业 *',
      col: 6,
      outlined: true,
      clearable: true,
      canBeInputted: true, //
      itemTextName: 'major',
      itemText: 'nameCn',
      itemValue: 'id',
      rules: [v => !!v || '请选择所学专业'],
      search: debouncedCallbackMajor,
      items: []
    },
    {
      type: 'autocomplete',
      key: 'educationType',
      value: null,
      default: null,
      label: '学历 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择学历'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'educationSystemType',
      value: null,
      default: null,
      label: '学制类型 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择学制类型'],
      items: dictItemsObj.educationSystemType,
    },
    {
      type: 'datePicker',
      key: 'startTime',
      mode: 'month', // 时间类型 year month date time
      value: null,
      default: '2014-01',
      format: 'YYYY/MM',
      labelWidth: 80,
      label: '开始时间 *',
      defaultValue: new Date(2014, 1),
      disabledFutureDates: true,
      col: 6,
      rules: [v => !!v || '请选择起始时间']
    },
    {
      type: 'datePicker',
      key: 'endTime',
      mode: 'month', // 时间类型 year month date time
      value: null,
      default: '2018-01',
      format: 'YYYY/MM',
      defaultValue: new Date(2018, 1),
      disabledFutureDates: true,
      labelWidth: 80,
      label: '结束时间 *',
      col: 6,
      rules: [v => !!v || '请选择结束时间']
    },
    {
      type: 'textarea',
      key: 'content',
      value: null,
      default: null,
      rows: 5,
      flexStyle: 'mt-5',
      resize: true,
      counter: 1600,
      label: '在校经历',
      outlined: true
    },
  ]
})

watch(
  () => props.data,
  (newVal) => {
    if (newVal && Object.keys(newVal)) {
      schoolNameInput.value = newVal.schoolName || null
      majorNameInput.value = newVal.major || null
      //
      items.value.options.forEach(e => {
        if (newVal[e.key]) e.value = newVal[e.key]
        else e.value = e.default || null
        if (e.canBeInputted) { // 特殊处理可输入下拉框
          dealCanBeInputtedValueAndLabel(e, newVal)
        }
      })
    }
  },
  { 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 => {
    if (e.canBeInputted) { // 特殊处理可输入下拉框
      dealCanBeInputtedSave(e, obj)
    }
    else obj[e.key] = e.value
  })
  return { id: props.id, data: obj}
}

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

// 左侧加mr
items.value.options.forEach((e, index) => {
  if (((index + 2) % 2 === 0) && Boolean(e.col) && e.col !== 12) e.flexStyle = 'mr-3'
})

// 获取字典内容
const dictList = [
  { type: 'menduner_education_type', key: 'educationType' },
  { type: 'menduner_education_system_type', key: 'educationSystemType' }
]
const getDictData = async (obj) => {
  const item = items.value.options.find(e => e.key === obj.key)
  if (item) { //  && !item.items?.length
    const { data } = await getDict(obj.type)
    item.items = data || []
    dictItemsObj[obj.key] = data || []
  }
}
const getOptions = () => {
  dictList.forEach(obj =>  getDictData(obj))
}
getOptions()
</script>
<style lang="scss" scoped>
</style>