menduner/src/views/resume/components/basicInfo.vue

<template>
  <div class="resume-box">
    <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-center">
      <!-- 头像 -->
      <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
        <v-badge 
          bordered 
          offset-x="-25" 
          offset-y="33" 
          :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-avatar size=80 :image="baseInfo?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'">
          </v-avatar>
          <div v-show="showIcon" @click="openFileInput" v-bind="$attrs" class="mdi mdi-camera-outline">
            <input
              type="file"
              ref="fileInput"
              accept="image/png, image/jpg, image/jpeg"
              style="display: none;"
              @change="handleUploadFile"
            />
          </div>
        </v-badge>
      </div>
      <!-- 基础信息 -->
      <div style="flex: 1;" class="mr-8 mt-5">
        <!-- 编辑 -->
        <div v-if="isEdit">
          <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;">
            <template v-slot:phone>
              <v-btn variant="text" class="ml-2" color="primary">{{ $t('common.change') }}</v-btn>
            </template>
            <template #areaType="{ item }">
              <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
                <template v-slot:activator="{  props }">
                  <textUI
                    v-model="item[item.nameKey]"
                    :item="item"
                    v-bind="props"
                    style="position: relative;"
                  ></textUI>
                </template>
                <areaType :isIntType="false" :select="[baseInfo?.areaId].filter(Boolean)" @handleAreaClick="handleArea" class="jobTypeCardBox" isSingle></areaType>
              </v-menu>
            </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 style="font-size: 20px; font-weight: 600;color: #666;">{{ baseInfo?.name }}</span>
          <div class="mt-3 d-flex">
            <div class="listBox" :style="{ height: isExpand ? 'auto' : '68px' }">
              <div>
                <span class="mdi mdi-map-marker-outline"></span>
                <span>{{ baseInfo?.areaName || '暂无' }}</span>
              </div>
              <div>
                <span class="mdi mdi-phone-outline"></span>
                <span>{{ baseInfo?.phone }}</span>
              </div>
              <div>
                <span class="mdi mdi-email-outline"></span>
                <span>{{ baseInfo?.email }}</span>
              </div>
              <div>
                <span class="mdi mdi-calendar-blank-outline"></span>
                <span>{{ baseInfo?.expTypeText }}</span>
              </div>
              <div>
                <span class="mdi mdi-school-outline"></span>
                <span>{{ baseInfo?.eduTypeText }}</span>
              </div>
              <!-- <div>
                <span class="mdi mdi-briefcase-outline"></span>
                <span>{{ baseInfo?.jobTypeText }}</span>
              </div> -->
              <div>
                <span class="mdi mdi-tag-outline"></span>
                <span>{{ baseInfo?.jobStatusText }}</span>
              </div>
              <div>
                <span class="mdi mdi-cake-variant-outline"></span>
                <span>{{ baseInfo?.birthdayText }}</span>
              </div>
              <div>
                <span class="mdi mdi-account-heart"></span>
                <span>{{ baseInfo?.maritalText }}</span>
              </div>
              <div>
                <span>{{ $t('resume.firstWorkTime') }}：</span>
                <span>{{ baseInfo?.firstWorkTimeText }}</span>
              </div>
            </div>
            <div class="ml-3">
              <v-btn variant="text" color="primary" v-if="isExpand" @click="isExpand = false">{{ $t('resume.retract') }}</v-btn>
              <v-btn variant="text" color="primary" v-else @click="isExpand = true">{{ $t('resume.expand') }}</v-btn>
            </div>
          </div>
          <div class="mt-4">
            <span style="font-size: 15px;">个人画像：</span>
            <v-chip size="small" label v-for="(k, i) in welfareList.slice(0, 8)" :key="i" class="mr-2" color="primary">{{ k }}</v-chip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import areaType from '@/components/AreaSelect'
import textUI from '@/components/FormUI/TextInput'
import { getDict } from '@/hooks/web/useDictionaries'
import { getTimeStamp, timesTampChange } from '@/utils/date'
import { saveResumeBasicInfo } from '@/api/resume'
import { useUserStore } from '@/store/user'
import { uploadFile } from '@/api/common'
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue';
defineOptions({name: 'resume-components-basicInfo'})
const { t } = useI18n()
const userStore = useUserStore()
const CtFormRef = ref()
const isEdit = ref(false)
const showIcon = ref(false)
const isExpand = ref(false)

const welfareList = ref(['热情活泼', '理性冷静', '富有创新', '热爱生活', '有幽默感'])
let baseInfo = ref({})
const getBasicInfo = () => { // 获取基础信息
  baseInfo.value = JSON.parse(localStorage.getItem('baseInfo')) || {} // 人才信息
}
getBasicInfo()

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

// 上传头像
const handleUploadFile = async (e) => {
  const file = e.target.files[0]
  const formData = new FormData()
  formData.append('file', file)
  const { data } = await uploadFile(formData)
  if (!data) return
  Snackbar.success(t('common.uploadSucMsg'))
  // 保存信息
  await saveResumeBasicInfo({ ...baseInfo.value, avatar: data })
  if (baseInfo.value.userId) await userStore.getUserBaseInfos(baseInfo.value.userId)
  getBasicInfo()
}

const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: null,
      default: null,
      label: '姓名 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请输入姓名']
    },
    {
      type: 'ifRadio',
      key: 'sex',
      value: '0', // '1' ? '男' : '女'
      default: 0,
      label: '性别',
      col: 6,
      width: 70,
      dictTypeName: 'system_user_sex',
      items: [],
    },
    {
      type: 'datePicker',
      key: 'birthday',
      value: null,
      default: null,
      col: 6,
      class: 'mb-3',
      options: {
        type: 'date',
        format: 'timestamp',
        placeholder: '出生日期 *',
        disabled: true,
      },
    },
    {
      type: 'text',
      key: 'phone',
      value: null,
      default: null,
      label: '电话号码',
      col: 6,
      outlined: true,
      disabled: true,
      slotName: 'phone',
    },
    {
      slotName: 'areaType',
      key: 'areaId',
      value: null,
      label: '所在城市 *',
      nameKey: 'areaName', // 展示出来id对应的内容
      col: 6,
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择所在城市']
    },
    {
      type: 'text',
      key: 'email',
      value: null,
      default: null,
      label: '常用邮箱 *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请输入常用邮箱']
    },
    {
      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_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',
      rules: [v => !!v || '请选择婚姻状况'],
      items: []
    },
    {
      type: 'datePicker',
      key: 'firstWorkTime',
      value: null,
      default: null,
      col: 6,
      class: 'mb-3',
      options: {
        type: 'month',
        format: 'timestamp',
        placeholder: '首次工作时间 *',
      },
      rules: [v => !!v || '请选择首次工作时间']
    },
  ]
})

// 保存-基础信息
const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  formItems.value.options.forEach(e => {
    if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
    else obj[e.key] = e.value
  })
  await saveResumeBasicInfo(obj)
  Snackbar.success(t('common.saveMsg'))
  isEdit.value = false
  // 获取当前登录账户信息
  if (baseInfo.value.userId) await userStore.getUserBaseInfos(baseInfo.value.userId)
  await getBasicInfo()
}

// 城市
const setValue = (key, id, name) => {
  const item =  formItems.value.options.find(e => e.key === key)
  if (item) {
    item.value = id
    item[item.nameKey] = name
  }
}
const handleArea = (list, name) => {
  if (!list.length) return
  const id = list[0]
  setValue('areaId', id, name)
}

// 获取字典内容
const getDictData = async (dictTypeName) => {
  const item = formItems.value.options.find(e => e.dictTypeName === dictTypeName)
  if (item) {
    const { data } = await getDict(dictTypeName)
    item.items = data
  }
}
formItems.value.options.forEach((e, index) => {
  if ((index + 2) % 2 === 0) e.flexStyle = 'mr-3'
  if (e.dictTypeName) getDictData(e.dictTypeName) // 查字典set options
  // formItems回显
  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).slice(0, 10)
  // 所在城市回显
  if (infoExist && e.nameKey) e[e.nameKey] = baseInfo.value[e.nameKey]
})
</script>

<style lang="scss" scoped>
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.avatarsBox {
  height: 80px;
  width: 80px;
  position: relative;
  cursor: pointer;
  margin: 32px;
  margin-right: 40px;
  .img {
    width: 100%;
    height: 100%;
  }
  .mdi {
    font-size: 42px;
    color: #fff;
  }
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

.listBox {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置容器宽度 */
  // height: 68px;
  overflow: hidden;
  color: #666;
  div {
    margin-right: 50px;
    span {
      height: 32px;
      line-height: 32px;
    }
    .mdi {
      font-size: 22px;
      margin-right: 8px;
      // margin-top: 2px;
    }
  }
  // border: 1px solid red; /* 可视化边界 */
  // .jobItems {
  //   font-size: 14px;
  //   margin-left: 12px;
  //   cursor: pointer;
  //   color: #666666;
  //   font-family: 微软雅黑; 
  // }
}
</style>