menduner/src/views/enterprise/positionManagement/components/details.vue

<template>
  <div>
    <div class="banner px-6">
      <div class="banner-title">
        <h1 class="ellipsis">{{ info.name }}</h1>
        <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ info.payName }}</span>
        <span class="refresh-time">{{ timesTampChange(info.updateTime) }} {{ $t('common.refresh') }} <v-icon color="warning" size="20">mdi-alert-outline</v-icon></span>
      </div>
      <div class="banner-tags mt-4">
        <span v-for="k in desc" :key="k.mdi" class="mr-10">
          <v-icon color="#666" size="20">{{ k.mdi }}</v-icon>
          <span class="ml-1">{{ info[k.value] }}</span>
        </span>
      </div>
      <div class="banner-tools my-4">
        <v-chip size="small" label v-for="(k, i) in info.tagList" :key="i" class="mr-1" color="primary">{{ k }}</v-chip>
      </div>
      <div class="d-flex justify-end mb-5">
        <div class="banner-tools-btns">
          <v-btn class="button-item radius" color="primary" variant="outlined" @click="handleEdit">{{ $t('common.edit') }}</v-btn>
        </div>
      </div>
      <v-divider></v-divider>
      <div class="d-flex">
          <div class="content-left">
            <div v-if="Object.keys(info).length">
              <div>{{ $t('position.jobResponsibilities') }}：</div>
              <div class="requirement" v-html="info.content.replace(/\n/g, '</br>')"></div>
              <div class="mt-3">{{ $t('position.jobRequirements') }}：</div>
              <div class="requirement" v-html="info.requirement.replace(/\n/g, '</br>')"></div>
            </div>
            <v-divider class="my-3"></v-divider>
            <div class="contact" v-if="Object.keys(info).length">
              <div class="float-left d-flex align-center">
                <v-img :src="info.contact.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :width="45" style="height: 45px;"></v-img>
                <div class="ml-2">
                  <div class="contact-name">{{ info.contact.name }}</div>
                  <div class="contact-info">{{ info.enterprise.name }} · {{ info.contact.postNameCn }}</div>
                </div>
              </div>
              <div class="float-right">
                <v-chip color="primary" label>{{ $t('position.currentOnline') }}</v-chip>
              </div>
            </div>
            <v-divider class="my-3"></v-divider>
            <div>
              <h4>{{ $t('position.address') }}</h4>
              <div class="mt-2">
                <v-icon size="25" color="primary">mdi-map-marker</v-icon>
                <span style="color: #666;font-size: 15px;">{{ info.address }}</span>
              </div>
            </div>
            <v-divider class="my-3"></v-divider>
            <div v-if="enterprise && Object.keys(enterprise).length">
              <h4>企业信息</h4>
              <div class="mt-3">
                <v-img class="float-left mr-5" :src="enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :width="60" height="60"></v-img>
                <div>
                  <div class="contact-name">{{ enterprise.name }}</div>
                  <div class="contact-info">{{ enterprise.financingName }} | {{ enterprise.industryName }} | {{ enterprise.scaleName }}</div>
                </div>
              </div>
              <div class="mt-5">
                <v-chip v-for="(k, i) in enterprise.welfareList" :key="i" label color="primary" class="mr-2" size="small">{{ k }}</v-chip>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
</template>

<script setup>
defineOptions({ name: 'position-details' })
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { timesTampChange } from '@/utils/date'
import { getJobDetails } from '@/api/position'
import { dealDictObjData } from '@/views/recruit/position/components/dict'

const router = useRouter()
const { id } = router.currentRoute.value.params

// 职位详情
const info = ref({})
const enterprise = ref({})
const getPositionDetail = async () => {
  const data = await getJobDetails({ id })
  if (!data || !Object.keys(data).length) return
  enterprise.value = { ...dealDictObjData({}, data.enterprise), ...data.enterprise }
  info.value = { ...data, ...dealDictObjData({}, data) }
}
getPositionDetail()

const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' },
  { mdi: 'mdi-file-tree-outline', value: 'positionName' }
]

const handleEdit = () => {
  if (!enterprise.value.id) return
  window.open(`/enterprise/position/edit?id=${enterprise.value.id}`)
}
</script>

<style lang="scss" scoped>
.banner {
  background-color: #fff;
  padding: 18px 0 20px;
}
.banner-title {
  line-height: 40px;
  font-size: 28px;
  font-weight: 600;
}
.banner-title h1 {
  display: inline-block;
  color: #37576c;
  font-size: 28px;
  margin-right: 30px;
  margin-top: 1px;
  max-width: 360px;
  vertical-align: middle;
}
.button-item {
  min-width: 110px;
  height: 36px
}
.salary {
  color: var(--v-error-base);
  line-height: 41px;
  font-weight: 600;
  height: auto;
  display: inline-block;
  vertical-align: sub;
}
.refresh-time {
  float: right;
  color: #666;
  font-size: 14px;
  line-height: 66px;
  vertical-align: sub;
}
.banner-tags span {
  font-weight: 600;
}
.radius {
  border-radius: 8px;
}
.content-left {
  width: 100%;
  padding: 20px 20px;
}
.content-right {
  flex: 1;
  padding: 20px 20px 20px 0;
}
.label-text {
  color: #7f7a7a;
  font-weight: 600;
}
.value-text {
  color: #000;
  font-weight: 400;
}
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: #333;
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
}
.contact {
  height: 60px;
  line-height: 60px;
}
.contact-name {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  line-height: 28px;
}
.contact-info {
  font-size: 15px;
  color: #666;
  line-height: 21px;
  margin-top: 8px;
}
</style>