menduner/src/views/recruit/enterprise/jobFair/job/item.vue

<template>
  <div>
    <div v-if="items.length">
      <div v-for="val in items" :key="val.id" class="itemBox mb-3" style="height: 134px;">
        <div class="d-flex justify-space-between cursor-pointer" style="padding: 10px 20px;">
          <div class="position">
            <div class="d-flex align-center">
              <span class="position-name">{{ formatName(val.name) }}</span>
            </div>
            <div :class="['mt-3', 'other-info', 'ellipsis']">
              <span>{{ !val.areaId ? '全国' : val.areaName }}</span>
              <span class="lines" v-if="!val.areaId || (val.areaName && val.eduName)"></span>
              <span>{{ val.eduName }}</span>
              <span class="lines"></span>
              <span>{{ val.expName }}</span>
              <span class="lines"></span>
              <span v-if="!val.payFrom && !val.payTo">面议</span>
              <span v-else>{{ val.payFrom ? val.payFrom + '-' : '' }}{{ val.payTo }}{{ val.payName ? '/' + val.payName : '' }}</span>
              <span class="lines" v-if="val.positionName"></span>
              <span>{{ val.positionName }}</span>
            </div>
          </div>
        </div>
        <div class="bottom pa-5 d-flex justify-space-between align-center">
          <div>到期时间：{{ val.expireTime ? timesTampChange(val.expireTime, 'Y-M-D') : '长期有效' }}</div>
          <div class="d-flex">
            <span class="cursor-pointer actions" @click="handleEdit(val)">编辑</span>
            <span class="lines"></span>
            <span class="cursor-pointer actions" @click="handleRemove(val)">移出招聘会</span>
          </div>
        </div>
      </div>
    </div>
    <Empty v-else :elevation="false"></Empty>
  </div>

  <Loading :visible="loading"></Loading>
</template>

<script setup>
defineOptions({ name: 'enterprise-position-item'})
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { timesTampChange } from '@/utils/date'
import Snackbar from '@/plugins/snackbar'
import { getEnterprisePubJobTypePermission } from '@/api/recruit/enterprise/position'
import { quitJobFairPosition } from '@/api/recruit/enterprise/jobFair'
import Confirm from '@/plugins/confirm'
import { formatName } from '@/utils/getText'

const emit = defineEmits(['refresh'])
defineProps({
  items: Array
})

const loading = ref(false)

const router = useRouter()
const route = useRoute()
// 职位编辑
const handleEdit = async (val) => {
  const data = await getEnterprisePubJobTypePermission()
  if (!data || !data.length) return Snackbar.warning('没有该操作权限，请联系平台管理员升级后再试')
  router.push(`/recruit/enterprise/jobFair/details/${route.params.id}/edit?id=${val.id}`)
}


const handleRemove = ({ id }) => {
  Confirm('确定要移出该职位吗？', '提示').then(async () => {
    await quitJobFairPosition({
      jobFairId: route.params.id,
      jobId: id
    })
    Snackbar.success('移出成功')
    emit('refresh')
  })
  
}
</script>

<style scoped lang="scss">
.itemBox {
  position: relative;
  border: 1px solid #e5e6eb;
}
.position-name {
  color: var(--color-333);
  font-size: 19px;
}
.position {
  max-width: 46%;
  position: relative;
  .item-select {
    position: absolute;
    left: -8px;
    top: -13px;
  }
}
.lines {
  display: inline-block;
  width: 1px;
  height: 17px;
  vertical-align: middle;
  background-color: #e0e0e0;
  margin: 0 10px;
}
.other-info {
  font-size: 15px;
  color: var(--color-666);
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: var(--color-888);
}
.actions:hover {
  color: var(--v-primary-base);
}
</style>