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

<!-- 检索列表页 - 职位检索 -->
<template>
  <div class="default-width">
    <buttons :current="1" style="position: sticky;" class="mx-4"></buttons>
    <div class="position-content">
      <div class="pb-3 pt-5 mx-4" style="z-index: 998; background-color: #fff">
        <div class="stickyBox mb-5">
          <headSearch
            v-model="headSearchText"
            @handleSearch="val => handleQueryChange('content', val)"
        ></headSearch>
      </div>
      <!-- <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleQueryChange"></cityFilter> -->
      <div class="d-flex justify-space-between mx-5">
        <conditionFilter ref="conditionFilterRef" showCitySelect :showFilterList="showFilterList" @reset="handleReset" @change="handleQueryChange"></conditionFilter>
      </div>
    </div>
      <div class="mt-3 mx-4">
        <Empty v-if="!items?.length" :message="noParams? '请输入或选择对应的条件查找职位' : '没有相关的职位，请更换搜索条件后再试'"></Empty>
        <PositionLongStrip v-else :items="items"></PositionLongStrip>
        <CtPagination
          v-if="total > 0"
          :total="total"
          :page="pageInfo.pageNo"
          :limit="pageInfo.pageSize"
          @handleChange="handleChangePage"
        ></CtPagination>
        <!-- <div class="text-center color-primary mt-5" v-if="noParams && items.length">输入筛选条件查看更多优选职位</div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import buttons from '@/views/recruit/personal/components/buttons.vue'
// import cityFilter from './components/cityFilter'
import conditionFilter from './components/conditionFilter'
import headSearch from '@/components/headSearch'
import PositionLongStrip from '@/components/PositionLongStrip/item.vue'
import Empty from '@/components/Empty'
import { getJobAdvertisedSearch } from '@/api/position'
import CtPagination from '@/components/CtPagination'
import { reactive, ref } from 'vue'
import { dealDictObjData } from '@/utils/position'

import { useRoute, useRouter } from 'vue-router'
defineOptions({name: 'retrieval-position-page'})
const route = useRoute(); const router = useRouter()
const conditionFilterRef = ref()
const showFilterList = [
  { key: 'positionId', isSingle: true },
  { key: 'expType' },
  { key: 'payScope' },
  { key: 'eduType' },
  { key: 'jobType' },
  { key: 'scale' },
  { key: 'industryIds' }
]

const pageInfo = { pageNo: 1, pageSize: 20 }
const items = ref([])
const total = ref(0)
let routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? reactive(route.query) : reactive({})

const noParams = ref(true)
const headSearchText = ref(routeQuery?.content ? routeQuery?.content.includes('&') ? decodeURIComponent(routeQuery.content) : routeQuery.content : '')

const getDataFun = async (params) => {
  const { list, total: number } = await getJobAdvertisedSearch(params)
  items.value = list.map(e => {
    e.job = { ...e.job, ...dealDictObjData({}, e.job) }
    e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise) }
    return e
  })
  total.value = number
}

// 职位搜索
const getData = async () => {
  let pageReqVO = { ...pageInfo, areaIds: [] }
  const routerParams = {}
  // route.query参数
  if (routeQuery && Object.keys(routeQuery).length) {
    const passingStrings = ['content', 'payScope'] // 单选且传递字符串
    const passingOneId = ['positionId'] // 单选且传递整型
    Object.keys(routeQuery).forEach(key => {
      if (routeQuery[key] === '' || key === 'date') return
      else if (passingStrings.includes(key)) { // 传给后端字符串
        if (key === 'content') routerParams[key] = decodeURIComponent(routeQuery[key])
        else routerParams[key] = routeQuery[key]
      }
      else if (passingOneId.includes(key)) routerParams[key] = +routeQuery[key] // 传给后端单选且传递整型
      else routerParams[key] = routeQuery[key].split('_').filter(e => e !== '9999') // 传给后端Arr
    })
  }
  // 没有筛选条件不请求数据
  if (!Object.keys(routerParams).length && !headSearchText.value) {
    noParams.value = true
    items.value = []
    total.value = 0
    // getDataFun(pageInfo) // 没有筛选条件则展示最新职位列表
    return
  }
  pageReqVO = { ...pageReqVO, ...routerParams }
  noParams.value = false
  getDataFun(pageReqVO)
}
getData()

// // 页面刷新
// if (routeQuery && Object.keys(routeQuery).length) getData()

// 参数改变后刷新路由，触发数据刷新
const updateRouter = () => {
  let query = {}
  if (Object.keys(routeQuery).length) {
    query = Object.keys(routeQuery).reduce((obj, key) => {
      if (routeQuery[key] !== '') obj[key] = routeQuery[key]
        return obj
    }, {})
  }
  query.date = new Date().getTime() // 用于前端刷新路由参数
  if (query?.content && query.content.includes('%')) query.content = decodeURIComponent(query.content)
  router.push({ path: route.path, query })
  pageInfo.pageNo = 1
  // getData()
}

// 参数改变
const handleQueryChange = (key, val) => {
  // val为字符串,数组的话用_下划线分隔
  routeQuery[key] = val
  if (!routeQuery[key]) delete routeQuery[key]
  updateRouter()
}

// 清空筛选条件
const handleReset = () => {
  headSearchText.value = ''
  if (routeQuery.areaIds) delete routeQuery.areaIds
  if (routeQuery.content) delete routeQuery.content
  showFilterList.forEach(e => {if (routeQuery[e.key]) delete routeQuery[e.key]})
  updateRouter()
}

// 分页
const handleChangePage = (index) => {
  pageInfo.pageNo = index
  getData()
}
</script>

<style lang="scss" scoped>
.position-content {
  height: calc(100vh - 100px);
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>