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

<template>
  <div class="resume-box mb-3 elevation-2" id="basicInfo">
    <div class="resume-header">
      <div class="resume-title">{{ $t('resume.basicInfo') }}</div>
      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ $t('common.edit') }}</v-btn>
    </div>
    <div class="d-flex align-start mt-5">
      <!-- 头像 -->
      <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
        <v-badge
          v-if="baseInfo?.sex === '1' || baseInfo?.sex === '2'"
          bordered 
          :color="baseInfo?.sex ? (baseInfo?.sex === '1' ? '#1867c0' : 'error') : 'error'" 
          :icon="baseInfo?.sex ? (baseInfo?.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
          <v-img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" width="130" height="130" style="border-radius: 6px;"></v-img>
          <div v-show="showIcon" @click="openFileInput" class="mdi mdi-camera-outline camera">
            <input
              type="file"
              ref="fileInput"
              accept="image/png, image/jpg, image/jpeg"
              style="display: none;"
              @change="handleUploadFile"
            />
          </div>
        </v-badge>
        <div v-else style="width: 130px; height: 130px;">
          <v-img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" width="130" height="130" style="border-radius: 6px;"></v-img>
          <div v-show="showIcon" @click="openFileInput" class="mdi mdi-camera-outline camera">
            <input
              type="file"
              ref="fileInput"
              accept="image/png, image/jpg, image/jpeg"
              style="display: none;"
              @change="handleUploadFile"
            />
          </div>
        </div>
      </div>
      <!-- 基础信息 -->
      <div style="flex: 1;" class="mr-8">
        <!-- 编辑 -->
        <div v-if="isEdit" class="ml-5">
          <CtForm ref="CtFormRef" :items="items" style="width: 100%;">
            <template v-slot:phone>
              <v-btn variant="text" class="ml-2" color="primary">{{ $t('common.change') }}</v-btn>
            </template>
          </CtForm>
          <div class="text-end">
            <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
            <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
          </div>
        </div>
        <!-- 展示 -->
        <div v-else>
          <span class="ml-50" style="font-size: 20px; font-weight: 600;color: var(--color-666);">{{ baseInfo?.name || userInfo?.phone }}</span>
          <div class="mt-3 d-flex">
            <div class="listBox ml-50">
              <div>
                <span class="mdi mdi-map-marker-outline"></span>
                <span>{{ baseInfo?.areaName || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-phone-outline"></span>
                <span>{{ baseInfo?.phone || userInfo?.phone || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-email-outline"></span>
                <span>{{ baseInfo?.email || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-calendar-blank-outline"></span>
                <span>{{ baseInfo?.expTypeText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-school-outline"></span>
                <span>{{ baseInfo?.eduTypeText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-tag-outline"></span>
                <span>{{ baseInfo?.jobStatusText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-cake-variant-outline"></span>
                <span>{{ baseInfo?.birthdayText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-home-map-marker"></span>
                <span>{{ baseInfo?.regName || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span class="mdi mdi-account-heart"></span>
                <span>{{ baseInfo?.maritalText || $t('common.currentlyUnavailable') }}</span>
              </div>
              <div>
                <span>{{ $t('resume.firstWorkTime') }}：</span>
                <span>{{ baseInfo?.firstWorkTimeText || $t('common.currentlyUnavailable') }}</span>
              </div>
            </div>
          </div>
          <!-- 个人画像 -->
          <div class="mt-4 ml-50">
            <portrait></portrait>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <Loading :visible="overlay"></Loading>
  <!-- 图片裁剪 -->
  <ImgCropper :visible="isShowCopper" :image="selectPic" :cropBoxResizable="true" @submit="handleHideCopper" :aspectRatio="1 / 1" @close="isShowCopper = false, selectPic = ''"></ImgCropper>
</template>

<script setup>
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import { getDict } from '@/hooks/web/useDictionaries'
import { cityToProvince } from '@/utils/areaDeal'
import { getTimeStamp, timesTampChange } from '@/utils/date'
import { updatePersonAvatar, saveResumeBasicInfo } from '@/api/recruit/personal/resume'
import { useUserStore } from '@/store/user'
import { uploadFile } from '@/api/common'
import { getUserAvatar } from '@/utils/avatar'
import { useI18n } from '@/hooks/web/useI18n'
import portrait from './portrait.vue'
import { checkEmail } from '@/utils/validate'
import { ref } from 'vue';
defineOptions({name: 'resume-components-basicInfo'})
const emit = defineEmits(['complete'])

const { t } = useI18n()
const userStore = useUserStore()
const CtFormRef = ref()
const isEdit = ref(false)
const showIcon = ref(false)
let completeStatus = false
const overlay = ref(false) // 加载中
let baseInfo = ref({})
let userInfo = ref({})
const getBasicInfo = () => { // 获取基础信息
  const key = localStorage.getItem('baseInfo')
  if (!key || !Object.keys(key).length) return
  baseInfo.value = JSON.parse(key) // 人才信息
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  if (baseInfo.value && Object.keys(baseInfo.value).length) {
    completeStatus = true
    emit('complete', { status: completeStatus, id: 'basicInfo' })
  }
}
getBasicInfo()

// 选择文件
const fileInput = ref()
const clicked = ref(false)
const openFileInput = () => {
  if (clicked.value) return
  clicked.value = true
  fileInput.value.click()
  clicked.value = false
}

// 上传头像
const selectPic = ref('')
const isShowCopper = ref(false)
const handleUploadFile = async (e) => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    selectPic.value = String(reader.result)
    isShowCopper.value = true
  }
}

// 图片裁剪
const handleHideCopper = (data) => {
  isShowCopper.value = false
  if (data) {
    const { file } = data
    if (!file) return
    const formData = new FormData()
    formData.append('file', file)
    overlay.value = true
    uploadFile(formData).then(async ({data}) => {
      if (!data) return
      await updatePersonAvatar(data)
      setTimeout(async () => {
        await userStore.getUserBaseInfos(baseInfo.value.userId)
        getBasicInfo()
        overlay.value = false
        Snackbar.success(t('common.uploadSucMsg'))
      }, 1000)
    })
  }
}

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: 'ifRadio',
      key: 'sex',
      value: '1', // '1' ? '男' : '女'
      default: 0,
      label: '性别 *',
      col: 6,
      width: 70,
      dictTypeName: 'menduner_sex',
      items: [],
    },
    {
      type: 'datePicker',
      key: 'birthday',
      value: '2000-01-01',
      label: '出生日期 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请选择出生日期']
    },
    {
      type: 'phoneNumber',
      key: 'phone',
      value: userInfo?.value?.phone || '',
      default: null,
      label: '电话号码',
      col: 6,
      outlined: true
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '常用邮箱',
      col: 6,
      outlined: true,
      rules: [
        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: 'autocomplete',
      key: 'workAreaProvinceId',
      value: null,
      label: '所在城市：省',
      outlined: true,
      itemText: 'name',
      itemValue: 'id',
      returnSelect: true,
      noParam: true,
      col: 6,
      flexStyle: 'mr-3',
      items: [],
      change: null
    },
    {
      type: 'autocomplete',
      key: 'areaId',
      value: null,
      label: '所在城市：市',
      outlined: true,
      itemText: 'name',
      itemValue: 'id',
      col: 6,
      items: [],
      change: null
    },
    {
      type: 'autocomplete',
      key: 'regProvinceId',
      value: null,
      label: '户籍地：省',
      outlined: true,
      clearable: true,
      itemText: 'name',
      itemValue: 'id',
      returnSelect: true,
      noParam: true,
      col: 6,
      flexStyle: 'mr-3',
      items: [],
      change: null
    },
    {
      type: 'autocomplete',
      key: 'regId',
      value: null,
      label: '户籍地：市',
      outlined: true,
      clearable: true,
      itemText: 'name',
      itemValue: 'id',
      col: 6,
      items: [],
      change: null
    },
    {
      type: 'datePicker',
      dateType: 'month',
      key: 'firstWorkTime',
      value: '2000-01',
      label: '首次工作时间',
      col: 6,
      outlined: true
    }
  ]
})

// 保存-基础信息
const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  let clearRegProvinceId = false
  items.value.options.forEach(e => {
    if (e.key === 'regId' && !obj[e.key]) clearRegProvinceId = true
    if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
    else obj[e.key] = e.value
  })
  if (!obj.sex) return Snackbar.warning('请先选择您的性别')
  await saveResumeBasicInfo(obj)
  Snackbar.success(t('common.saveMsg'))
  isEdit.value = false
  await userStore.getUserBaseInfos(baseInfo.value.userId || null)
  getBasicInfo()

  // 清除户籍地：省
  if (clearRegProvinceId) items.value.options.forEach(e => { if (e.key === 'regProvinceId') e.value = null })
}

// 获取字典内容
const getDictData = async (dictTypeName) => {
  const item = items.value.options.find(e => e.dictTypeName === dictTypeName)
  if (item) {
    const { data } = await getDict(dictTypeName)
    item.items = data
  }
}
const timeCount = {}
const deal = async (id, cityKey, provinceKey) => {
  if (!id && id !== 0) return
  // 省份回显
  const province = items.value.options.find(pv => pv.key === provinceKey)
  if (!province?.items.length) { // 字典数据未获取
    timeCount[provinceKey] = 0
    setTimeout(() => {
      timeCount[provinceKey]++
      if (timeCount[provinceKey] < 6) deal(id, cityKey, provinceKey)
    }, 2000)
    return
  }
  if (province) {
    const dealReturnObj = await cityToProvince(id, {}, province.items || [])
    const city = items.value.options.find(pv => pv.key === cityKey)
    if (city) city.items = dealReturnObj.cityList || []
    province.value = dealReturnObj.pid || ''
  }
}

items.value.options.forEach((e, index) => {
  if ((index + 2) % 2 === 0) e.flexStyle = 'mr-3'
  if (e.dictTypeName) getDictData(e.dictTypeName) // 查字典set options
  const infoExist = baseInfo.value && Object.keys(baseInfo.value).length
  if (infoExist && baseInfo.value[e.key]) e.value = baseInfo.value[e.key]
  // 日期相关
  if (e.type === 'datepicker') e.value = timesTampChange(e.value, 'Y-M-D')
  // 所在城市回显
  if (infoExist && e.key === 'areaId' && baseInfo.value[e.key]) {
    const id = baseInfo.value[e.key]
    deal(id, e.key, 'workAreaProvinceId')
  }
  if (infoExist && e.key === 'regId' && baseInfo.value[e.key]) {
    const id = baseInfo.value[e.key]
    deal(id, e.key, 'regProvinceId')
  }
  if (e.value === undefined || e.value === null || e.value === '') completeStatus = false
})
// 完成度展示
  
const provinceChange = (value, val, obj) => {
  console.log(obj, 'area')
  let cityKey
  if (val?.key === 'workAreaProvinceId') cityKey = 'areaId'
  if (val?.key === 'regProvinceId') cityKey = 'regId'
  if (!cityKey) return
  const item = items.value.options.find(e => e.key === cityKey)
  if (!item) return
  item.items = obj?.children || []
  item.value = null
}
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 === 'workAreaProvinceId')
  const regAreaProvince = items.value.options.find(e => e.key === 'regProvinceId')
  if (workAreaProvince?.items) {
    workAreaProvince.items = chinaTreeData
    workAreaProvince.change = provinceChange
  }
  if (regAreaProvince?.items) {
    regAreaProvince.items = chinaTreeData
    regAreaProvince.change = provinceChange
  }
})
</script>

<style lang="scss" scoped>
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.ml-50 {
  margin-left: 50px;
}
.avatarsBox {
  height: 150px;
  width: 120px;
  position: relative;
  cursor: pointer;
  margin: 0 32px;
  .camera {
    color: #fff;
    font-size: 42px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.listBox {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置容器宽度 */
  overflow: hidden;
  color: var(--color-666);
  div {
    width: 50%;
    margin-bottom: 10px;
    span {
      height: 32px;
      line-height: 32px;
    }
    .mdi {
      font-size: 22px;
      margin-right: 8px;
    }
  }
}
</style>