EmploymentSite/vue/src/views/companyService/post/detail.vue

<template>
  <div class="card-edit">
    <a-divider orientation="left">岗位基础信息</a-divider>
    <a-descriptions bordered>
      <a-descriptions-item label="企业名称">{{ postInfo.companyName }}</a-descriptions-item>
      <a-descriptions-item label="岗位名称">{{ postInfo.professionName }}</a-descriptions-item>
      <a-descriptions-item label="工种名称">{{ postInfo.workCategoryName }}</a-descriptions-item>
      <a-descriptions-item label="招聘人数">{{ postInfo.recruitCount }}</a-descriptions-item>
      <a-descriptions-item label="招聘日期">
        {{ postInfo.startTime ? dayjs(postInfo.startTime).format('YYYY-MM-DD') : '' }}
        至
        {{ postInfo.endTime ? dayjs(postInfo.endTime).format('YYYY-MM-DD') : '' }}
      </a-descriptions-item>
      <a-descriptions-item :span="3" label="工作地点">{{ postInfo.jobPlace }}</a-descriptions-item>
      <a-descriptions-item label="联系人姓名">{{ postInfo.contactName }}</a-descriptions-item>
      <a-descriptions-item label="联系人电话">{{ postInfo.contactMobile }}</a-descriptions-item>
      <a-descriptions-item label="联系人邮箱">{{ postInfo.contactEmail }}</a-descriptions-item>
      <a-descriptions-item label="工作性质">{{ postInfo.workNatureName }}</a-descriptions-item>
      <a-descriptions-item label="最后更新人">{{ postInfo.modifyUserName }}</a-descriptions-item>
      <a-descriptions-item label="最后更新时间">
        {{
          postInfo.modifyTime ? dayjs(postInfo.modifyTime).format('YYYY-MM-DD') : ''
        }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider orientation="left">其他信息</a-divider>
    <a-descriptions bordered>
      <a-descriptions-item label="岗位月薪（元）">
        {{ showSalary(postInfo.minSalary, postInfo.maxSalary) }}
      </a-descriptions-item>
      <a-descriptions-item label="是否有试用期">{{ postInfo.isTrail ? '是' : '否' }}</a-descriptions-item>
      <a-descriptions-item label="试用期（月）">{{ postInfo.trailMonths }}</a-descriptions-item>
      <a-descriptions-item label="试用期月薪（元）">
        {{ showSalary(postInfo.trailMinSalary, postInfo.trailMaxSalary) }}
      </a-descriptions-item>
      <a-descriptions-item label="工作年限要求">{{ workYear }}</a-descriptions-item>
      <a-descriptions-item label="学历要求">{{ postInfo.cultureLevelName }}</a-descriptions-item>
      <a-descriptions-item :span="3" label="标签">
        <a-button style="margin: 0px 5px 5px 0px;color: black;border: 1px solid rgb(217, 217, 217);" v-for="item in postInfo.listLabel">
          {{ item.labelName }}
        </a-button>
      </a-descriptions-item>
      <a-descriptions-item :span="3" label="福利待遇">{{ postInfo.welfare }}</a-descriptions-item>
      <a-descriptions-item :span="3" label="其他要求">{{ postInfo.postDesc }}</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
import {getPostByID} from "@/api/companyService/post";
import {computed, onMounted, reactive, ref} from "vue";
import dayjs from "dayjs";
import {get} from "@/api/common";

// 岗位信息
const postInfo = reactive({
  companyName: "",
  professionName: "",
  workCategoryName: "",
  recruitCount: "",
  startTime: "",
  endTime: "",
  jobPlace: "",
  minSalary: "",
  maxSalary: "",
  isTrail: "",
  trailMonths: "",
  trailMinSalary: "",
  trailMaxSalary: "",
  workYear: "",
  cultureLevelName: "",
  listLabel: null,
  welfare: "",
  postDesc: "",
  contactName: "",
  contactMobile: "",
  contactEmail: "",
  workNatureName: "",
  modifyUserName: "",
  modifyTime: ""
})
// 工作年限数据
const WorkYearTypeList = ref<Array<any>>([])
// 获取工作年限
const workYear = computed(() => {
  if (postInfo.workYear && WorkYearTypeList.value.length > 0) {
    const item = WorkYearTypeList.value.find(item => item.value == postInfo.workYear)
    if (item) {
      return item.name;
    }
  }
  return postInfo.workYear;
})

// 数据加载
function loadData(id: any) {
  getPostByID(id).then(result => {
    Object.keys(postInfo).forEach((key) => {

      postInfo[key] = result[key];
    })
  })
}

const showSalary = (minSalary: any, maxSalary: any) => {
  if (minSalary != null) {
    if (maxSalary != null) {
      return minSalary.toString() + "-" + maxSalary.toString();
    } else {
      return "≥" + minSalary.toString();
    }
  } else {
    if (maxSalary != null) {
      return "≤" + maxSalary.toString();
    } else {
      return "";
    }
  }
}

// 页面初始化
onMounted(() => {
  const id = history.state.params?.id;
  loadData(id);
  get('system/dictionary/getDictionaryItemByCodeList', {code: 'WorkYearType'}).then(result => {
    WorkYearTypeList.value = result;
  });
})
</script>

<script lang="ts">
// 设置页面名称进行组件缓存
export default {
  name: "PostDetail"
}
</script>

<style scoped>

</style>