EmploymentSite/vue/src/views/jobUserManager/jobuser/vitae.vue

<template>
  <div class="card-search">
    <div class="jl-content">
      <!-- 头像等信息 -->
      <div class="avt-content">
        <!--头像 -->
        <div class="avt-image">
          <a-avatar :size="72" :src="avtImg"></a-avatar>
        </div>
        <!-- 姓名 -->
        <h1>{{ jobUserInfo.name }}</h1>
        <!-- 性别，年龄，民族 -->
        <div class="age-info">
          <span>
            <man-outlined v-if="jobUserInfo.genderName === '男'"/>
            <woman-outlined v-if="jobUserInfo.genderName === '女'"/>
            {{ jobUserInfo.genderName }}
          </span>
          <span>
            {{ jobUserInfo.age }}岁
          </span>
          <span>
            {{ jobUserInfo.nation }}
          </span>
        </div>
        <!-- 政治面貌，学历，手机 -->
        <div class="politics-info">
          <span class="label-span">
            政治面貌：
          </span>
          <span>
            {{ jobUserInfo.politicsStatusName }}
          </span>
          <span class="label-span">
            学历：
          </span>
          <span>
            {{ jobUserInfo.cultureName }}
          </span>
          <span class="label-span">
            手机：
          </span>
          <span>
            {{ jobUserInfo.userMobile }}
          </span>
        </div>
      </div>
      <!-- 基本信息与学历，工作经历 -->
      <div class="info-content">
        <a-divider orientation="left">基本信息</a-divider>
        <a-descriptions :column="2" bordered style="margin-left: 25px;">
          <a-descriptions-item label="出生地">{{ jobUserInfo.birthPlace }}</a-descriptions-item>
          <a-descriptions-item label="身份证号">{{ jobUserInfo.identityNumber }}</a-descriptions-item>
          <a-descriptions-item label="重点人员类别">{{ jobUserInfo.keyTypeName }}</a-descriptions-item>
          <a-descriptions-item label="健康状况">{{ jobUserInfo.healthName }}</a-descriptions-item>
          <a-descriptions-item label="就业状态">{{ jobUserInfo.jobStatusName }}</a-descriptions-item>
          <a-descriptions-item label="户口性质">{{ jobUserInfo.familyNatureName }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="住址">{{ jobUserInfo.familyAddress }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="兴趣爱好">{{ jobUserInfo.hobby }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="专业技术特长">{{ jobUserInfo.personalSkills }}</a-descriptions-item>
        </a-descriptions>
        <a-divider orientation="left">教育经历</a-divider>
        <a-table :columns="educationColumns" :data-source="educationData" :pagination="false" bordered
                 style="margin-left: 11px;">
          <template #bodyCell="{ column, index, record}">
            <template v-if="column.key === 'cultureRank'">
              <div>
                {{
                  getCultureName(record.cultureRank)
                }}
              </div>
            </template>
            <template v-if="column.key === 'schoolTime'">
              <div>
                {{
                  dayjs(record.schoolTime).format('YYYY-MM-DD')
                }}
              </div>
            </template>
            <template v-if="column.key === 'overTime'">
              <div>
                {{
                  dayjs(record.overTime).format('YYYY-MM-DD')
                }}
              </div>
            </template>
          </template>
        </a-table>
        <a-divider orientation="left">工作经历</a-divider>
        <a-timeline style="margin-left: 25px;">
          <a-timeline-item v-for="(item, key) in experienceData" :key="key" position="left">
            <p>{{ dayjs(item.startTime).format('YYYY-MM-DD') }}至{{ dayjs(item.endTime).format('YYYY-MM-DD') }}</p>
            <h1>{{ item.workAddress }}</h1>
            <h1>{{ item.duties }}</h1>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {getDataById, getEducationList, getExperienceList} from "@/api/jobUserManager/jobuser";
import avtImg from "@/assets/images/jl-avt.png"
import {ManOutlined, WomanOutlined} from '@ant-design/icons-vue';
import type {SelectProps, TableColumnsType} from "ant-design-vue";
import dayjs from "dayjs";
import {getSysDictionaryList} from "@/api/system/dictionary";

// 求职人员信息
const jobUserInfo = reactive({
  name: "",
  genderName: "",
  age: null,
  nation: "",
  politicsStatusName: "",
  cultureName: "",
  userMobile: "",
  birthPlace: "",
  identityNumber: "",
  keyTypeName: "",
  healthName: "",
  jobStatusName: "",
  familyNatureName: "",
  familyAddress: "",
  hobby: "",
  personalSkills: ""
})
// 受教育经历
const educationData = ref<Array<any>>([]);
// 受教育经历表格定义
const educationColumns: TableColumnsType = [
  {
    title: '序号',
    align: "center",
    key: 'educationID',
    width: 120,
    customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`
  },
  {
    title: '学校名',
    dataIndex: 'schoolName',
    key: 'schoolName',
    align: "center",
    width: 120
  },
  {
    title: '文化程度',
    dataIndex: 'cultureRank',
    key: 'cultureRank',
    align: "center",
    width: 120
  },
  {
    title: '就读时间',
    dataIndex: 'schoolTime',
    key: 'schoolTime',
    align: "center",
    width: 120
  },
  {
    title: '毕业时间',
    dataIndex: 'overTime',
    key: 'overTime',
    align: "center",
    width: 120
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major',
    align: "center",
    width: 120
  },
];
const searchParams = reactive({
  pageIndex: 1,
  pageSize: 99
});
// 工作经验数据
const experienceData = ref<Array<any>>([]);
// 教育经历数据
const cultureList = ref<SelectProps['options']>();

// 加载求职人员数据
const loadData = (id: any) => {
  getDataById(id).then(data => {
    Object.keys(jobUserInfo).forEach(key => {
      jobUserInfo[key] = data[key];
    })
  });
};

// 加载教育经历
const loadEducation = (id: any) => {
  getEducationList(id).then(data => {
    if (data) {
      educationData.value = data;
    }
  });
}

// 加载工作经历
const loadExperienceData = (id: any) => {
  getExperienceList(id).then(data => {
    if (data) {
      data.sort((a, b) => {
        // 将 startTime 字段转换为日期对象进行比较
        const startTimeA = new Date(a.startTime);
        const startTimeB = new Date(b.startTime);

        return startTimeB - startTimeA;
      })
      experienceData.value = data;
    }
  })
}

// 获取教育经历数据
const getCultureList = () => {
  getSysDictionaryList('CultureLevel').then((data) => {
    cultureList.value = data;
  });
};

function getCultureName(value: any) {
  let filter = cultureList.value?.filter(item => item.value == value);
  if (filter && filter.length > 0) {
    return filter[0].name
  }
  return "";
}

// 页面初始化
onMounted(() => {
  const id = history.state.params?.id;
  loadData(id);
  loadEducation(id);
  loadExperienceData(id)
  getCultureList()
})
</script>

<style lang="less" scoped>
.card-search {

  .jl-content {
    min-height: calc(100vh - 240px);
    width: 100%;
    display: flex;

    .avt-content {
      width: 20%;
      background-color: #e7e7e7;
      padding: 10px;

      .avt-image {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      .age-info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        padding: 0 20%;
      }

      .politics-info {
        margin-top: 25px;
        display: grid;
        row-gap: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        .label-span {
          text-align: right;
        }
      }

      h1 {
        margin-top: 1rem;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
      }

    }

    .info-content {
      width: 80%;
      height: 100%;
      margin-left: 10px;
    }
  }
}


</style>