menduner-admin/src/views/menduner/system/talentMap/details/components/info.vue

<template>
  <el-card shadow="never">
    <template #header>
      <CardTitle title="基本信息" />
    </template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-form-item label="用户头像" prop="avatar">
        <UploadImg v-model="formData.avatar" height="140px" />
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名" prop="name">
            <el-input v-model="formData.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别" @change="val => handleChangeSelect(val, 'MENDUNER_SEX', 'sexStr')">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_SEX)" :key="dict.value" :label="dict.label" :value="dict.value.toString()"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="formData.birthday" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择出生日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历" prop="eduType">
            <el-select v-model="formData.eduType" placeholder="请选择学历" @change="val => handleChangeSelect(val, 'MENDUNER_EDUCATION_TYPE', 'eduTypeStr')">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EDUCATION_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作经验" prop="expType">
            <el-select v-model="formData.expType" placeholder="请选择工作经验" @change="val => handleChangeSelect(val, 'MENDUNER_EXP_TYPE', 'expTypeStr')">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EXP_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" @change="val => handleChangeSelect(val, 'MENDUNER_MARITAL_STATUS', 'maritalStatusStr')">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_MARITAL_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现居城市" prop="areaId">
            <el-cascader v-model="formData.areaId" :options="areaTreeData" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true }" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="意向城市" prop="interestedAreaIdList">
            <el-cascader v-model="formData.interestedAreaIdList" :options="areaTreeData" collapse-tags collapse-tags-tooltip :max-collapse-tags="1" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true, multiple: true }" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次工作时间" prop="firstWorkTime">
            <el-date-picker v-model="formData.firstWorkTime" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择首次工作时间" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="个人优势" prop="advantage">
        <el-input v-model="formData.advantage" :rows="8" type="textarea" placeholder="请输入您的个人优势" />
      </el-form-item>
    </el-form>
    <div v-if="isEdit" class="text-right">
      <el-button class="!w-120px" type="primary" @click="handleSave">保 存</el-button>
    </div>
  </el-card>
</template>

<script setup>
defineOptions({ name: 'EnterpriseDetailsInfo'})
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { cloneDeep } from 'lodash-es'
import { timesTampChange } from '@/utils/transform/date'
import { TalentMap } from '@/api/menduner/system/talentMap';

const props = defineProps({
  modelValue: Object,
  isEdit: Boolean,
  areaTreeData: Array
})

const message = useMessage() // 消息弹窗
const formRef = ref()
const formData = ref({})
const formLoading = ref(false)
const formRules = reactive({
  // name: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
  // phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }]
})

watch(() => props.modelValue, (newVal) => {
  formData.value = newVal
}, { deep: true })

// 未来的时间不可选
const disabledDates = (date) => {
  return date.getTime() > Date.now()
}

// 下拉框选择
const handleChangeSelect = (val, dictType, labelKey) => {
  const dict = getIntDictOptions(DICT_TYPE[dictType])
  const obj = dict.find(e => e.value.toString() === val)
  formData.value[labelKey] = obj?.label
}

const handleSave = async () => {
  // 校验表单
  await formRef.value.validate()
  formLoading.value = true
  try {
    await TalentMap.updateTalentMapInfo(formData.value)
    message.success('保存成功')
  } catch (error) {
    console.log(error)
  } finally {
    formLoading.value = false
  }
}

defineExpose({
  formRef
})
</script>