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 === '0' ? '#1867c0' : 'error') : 'error'" 
          :icon="baseInfo?.sex ? (baseInfo?.sex === '0' ? '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" class="mdi mdi-camera-outline"></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">更改</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 style="font-size: 20px; font-weight: 500;">{{ 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.areaText }}</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 { getDict } from '@/hooks/web/useDictionaries'
import { getTimeStamp, timesTampChange } from '@/utils/date'
import { saveResumeBasicInfo } from '@/api/resume'
import { useUserStore } from '@/store/user'
import { ref } from 'vue';

defineOptions({name: 'resume-components-basicInfo'})
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 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,
      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',
    },
    {
      type: 'autocomplete',
      key: 'areaId',
      value: null,
      default: null,
      label: '所在城市 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择所在城市'],
      items: [{ label: '广州', value: '440100'}]
    },
    {
      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',
      rules: [v => !!v || '请选择求职状态'],
      items: [{ label: '离职-随时到岗 ', value: '0' }, { label: '在职-月内到岗', value: '1' }, { label: '在职-考虑机会', value: '2' }, { label: '在职-暂不考虑', value: '3' }]
    },
    {
      type: 'autocomplete',
      key: 'maritalStatus',
      value: null,
      default: null,
      label: '婚姻状况 *',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择婚姻状况'],
      items: [{ label: '未婚 ', value: '0' }, { label: '已婚', value: '1' }, { label: '离异', value: '2' }, { label: '保密', value: '3' }]
    },
    {
      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.noReturn) return
    else if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
    else obj[e.key] = e.value
  })
  await saveResumeBasicInfo(obj)
  Snackbar.success('保存成功！')
  isEdit.value = false
  // 获取当前登录账户信息
  await userStore.getUserBaseInfos(baseInfo.value.userId)
  await getBasicInfo()
}

// 获取字典内容
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回显
  if (baseInfo.value[e.key]) e.value = baseInfo.value[e.key]
  // 日期相关
  if (e.type === 'datepicker') e.value = timesTampChange(e.value).slice(0, 10)
})
</script>
<style lang="scss" scoped>

.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;
  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>