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

<template>
  <div>
    <div class="text-end mb-3">
      <v-btn color="primary" class="mr-3" @click="handleAdd">新增职位</v-btn>
      <v-btn color="primary" variant="outlined" @click="handleJoin">选择已发布的职位加入招聘会</v-btn>
      <!-- <v-btn :loading="exportLoading" prepend-icon="mdi-export-variant" color="primary" variant="tonal" class="ml-3" @click="handleExport">职位导出</v-btn> -->
    </div>
    <JobItem :items="jobList" @refresh="getJobList"></JobItem>

    <v-navigation-drawer v-model="showDrawer" location="right" temporary width="600">
      <Loading :visible="positionLoading" :contained="true"></Loading>
      <div class="resume-box">
        <div class="resume-header">
          <div class="resume-title mr-5">已发布职位</div>
        </div>
      </div>
      <div class="px-3">
        <v-text-field
          v-model="positionSearch"
          append-inner-icon="mdi-magnify"
          density="compact"
          :label="t('position.positionName')"
          variant="outlined"
          hide-details
          color="primary"
          single-line
          @click:append-inner="getPositionList"
          @keyup.enter="getPositionList"
        ></v-text-field>
      </div>
      <div class="pa-3" v-if="positionItems.length">
        <div v-for="val in positionItems" :key="val.id" class="itemBox mb-3" style="height: 80px;">
          <div class="d-flex justify-space-between" style="padding: 10px 20px;">
            <div class="position">
              <div class="d-flex align-center justify-space-between">
                <!-- <span v-if="val.name.indexOf('style')" v-html="val.name" class="position-name"></span> -->
                <span class="position-name">{{ formatName(val.name) }}</span>
                <div>
                  <v-btn size="small" color="primary" @click="handleTo(val)">添加至双选会</v-btn>
                </div>
              </div>
              <div :class="['mt-3', 'other-info', 'ellipsis']">
                <span>{{ val.areaName ? val.area?.str : '全国' }}</span>
                <span class="lines" v-if="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>
        <CtPagination
          v-if="total"
          :total="positionTotal"
          :page="positionPageInfo.pageNo"
          :limit="positionPageInfo.pageSize"
          @handleChange="handleChangePage"
        ></CtPagination>
      </div>
      <Empty v-else :elevation="false"></Empty>
    </v-navigation-drawer>
  </div>
</template>

<script setup>
defineOptions({ name: 'jobFairJob'})
import { ref } from 'vue'
import { getJobFairPosition } from '@/api/recruit/enterprise/jobFair'
import { dealDictArrayData } from '@/utils/position.js'
import JobItem from '../job/item.vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n'
import Snackbar from '@/plugins/snackbar'
import { getEnterprisePubJobTypePermission } from '@/api/recruit/enterprise/position'
import { getJobAdvertisedList } from '@/api/position'
import download from '@/utils/download'
import { formatName } from '@/utils/getText'
// import Confirm from '@/plugins/confirm'

const props = defineProps({ id: [String, Number]})
const router = useRouter()
const route = useRoute()
const { t } = useI18n()

// 职位列表
const jobList = ref([])

const positionItems = ref([])
const positionTotal = ref(0)
const positionLoading = ref(false)
const total = ref(0)
const positionPageInfo = ref({
  pageSize: 10,
  pageNo: 1,
})
const positionSearch = ref('')


const getJobList = async () => {
  const data = await getJobFairPosition(props.id)
  if (!data || !data.length) return jobList.value = []
  jobList.value = dealDictArrayData([], data)
}

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

const showDrawer = ref(false)
const handleJoin = async () => {
  getPositionList()
  showDrawer.value = true
}

const handleChangePage = (index) => {
  positionPageInfo.value.pageNo = index
  getPositionList()
}

const handleTo = (val) => {
  router.push(`/recruit/enterprise/jobFair/details/${route.params.id}/edit?id=${val.id}`)
}

// 获取职位列表
const getPositionList = async () => {
  positionLoading.value = true
  const query = {
    ...positionPageInfo.value,
    status: 0,
    hasExpiredData: false,
    hire: false
  }
  if ( positionSearch.value) {
    Object.assign(query, {
      name: positionSearch.value,
    })
  }
  try {
    const { list, total } = await getJobAdvertisedList(query)
    positionTotal.value = total
    positionItems.value = list.length ? dealDictArrayData([], list) : []
  } finally {
    positionLoading.value = false
  }
}
getJobList()

// // 导出参加双选会职位
// const exportLoading = ref(false)
// const handleExport = async () => {
//   exportLoading.value = true
//   try {
//     const data = await getJobFairAdvertisedExport()
//     download.excel(data, '招聘会职位列表' + '.xlsx')
//   } finally {
//     exportLoading.value = false
//   }
// }

</script>

<style scoped lang="scss">
.resume-box {
  padding-top: 120px;
}

.itemBox {
  position: relative;
  border: 1px solid #e5e6eb;
}
.position-name {
  color: var(--color-333);
  font-size: 19px;
}
.position {
  width: 100%;
  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>