menduner/src/views/recruit/personal/jobFair/position/index.vue

<template>
  <div class="default-width">
    <div style="background-color: #fff; position: sticky;" class="pb-4">
      <buttons :current="3"></buttons>
			<v-breadcrumbs v-if="breadcrumbs?.length" :items="breadcrumbs">
				<template v-slot:item="{ item, index }">
					<span class="breadcrumbsText" :class="{ active: !item.disabled && index !== breadcrumbs.length-1 }" @click="breadcrumbsClickDeal({ e: item, breadcrumbs, index })">{{ item.text }}</span>
				</template>
			</v-breadcrumbs>
			<headSearch v-model="query.keyword" placeholder="搜索公司关键字" @handleSearch="handleSearch"></headSearch>
    </div>
    <Empty v-if="!items.length" :message="loadingType === 1 ? loadingText[loadingType] : '该招聘会暂无企业参与，前往其他招聘会看看吧~'" class="mt-3 py-15"></Empty>
    <template v-else>
      <div class="d-flex">
        <div class="mt-3">
          <EntCard :list="items" @selectChange="selectChange" />
          <div :class="['loading', {'defaultLink-i': !loadingType}]" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
        </div>
        <div class="position-details ml-3" style="flex: 1; overflow: hidden;">
          <div class="position-content pa-3">
						<JobCard :enterpriseId="enterpriseId" :enterpriseName="enterpriseName" :jobFairId="route.params.id" />
          </div>
        </div>
      </div>
    </template>
  </div>

</template>

<script setup>
defineOptions({ name: 'personalPositionRecommend'})
import buttons from '@/views/recruit/personal/components/buttons.vue'
import { ref, reactive } from 'vue'
import { getJobFairEnterprisePage } from '@/api/recruit/personal/jobFair'
import EntCard from './components/entCard.vue'
import JobCard from './components/jobCard.vue'
import { useRoute } from 'vue-router'; const route = useRoute()
import { breadcrumbsClickDeal, getJobFairBreadcrumbs } from '@/utils/index'
import { formatName } from '@/utils/getText'
import { dealDictArrayData } from '@/utils/position'

const breadcrumbs = ref(getJobFairBreadcrumbs(route?.query) || [])

// 切换企业选中
const enterpriseId = ref('')
const enterpriseName = ref('')
const selectChange = (val) => {
	enterpriseId.value = val.id
	enterpriseName.value = formatName(val.anotherName || val.name)
}

const query = reactive({
  pageNo: 1,
  pageSize: 10,
	jobFairId: route.params.id,
	keyword: ''
})

const items = ref([])
const loadingText = ['加载更多', '加载中...', '没有更多数据了']
const loadingType = ref(0)

// 参与招聘会的企业
const getList = async () => {
	loadingType.value = 1
	try {
		const result = await getJobFairEnterprisePage(query)
		const list = result?.list || []
		if (list.length) {
			items.value = items.value.concat(dealDictArrayData([], list))
			loadingType.value = list.length  === result.total ? 2 : 0
			enterpriseId.value = items.value[0].id
			enterpriseName.value = formatName(items.value[0].anotherName || items.value[0].name)
		} else {
			loadingType.value = 2
		}
	} catch {}
}
getList()

const handleSearch = (val) => {
	query.keyword = val
	query.pageNo = 1
	items.value = []
	getList()
}

const handleChangePage = () => {
  if (loadingType.value) return // 没有更多数据了
  // 加载更多
  query.pageNo++
  getList()
}
</script>

<style scoped lang="scss">
.position-details {
  position: sticky;
  top: 62px;
  border-radius: 12px;
  background-color: #fff;
  margin-top: 12px;
  height: calc(100vh - 127px);
  widows: 100%;
  overflow: hidden;
  .position-content {
    height: 100%;
    width: 100%;
    padding-right: 4px;
    overflow-y: auto;
  }
}
.loading {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: gray;
}
.breadcrumbsText {
  color: var(--color-999);
  font-size: 15px;
  &.active {
    color: var(--v-primary-base);
    cursor: pointer;
  }
}
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>