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

<template>
  <div class="default-width">
    <buttons :current="2" style="position: sticky;" class="mx-4"></buttons>
    <div class="company-content">
      <div class="white-bgc pb-3 pt-5 mx-4">
        <headSearch v-model="content" placeholder="搜索公司关键字" @handleSearch="val => handleSearch(val, 'name')"></headSearch>
        <div class="px-5 mt-3 clear-parent">
          <!-- <areaType :isClear="clear" @handleClick="handleSearch"></areaType> -->
          <cityCascadeSelect @inputChange="inputChange"></cityCascadeSelect>
          <scaleType class="mt-5" :isClear="clear" @clear="clear = false" @handleClick="handleSearch"></scaleType>
          <div class="clear" @click="handleClear">清空筛选条件</div>
        </div>
      </div>
      <div v-if="items.length" class="mx-4">
        <companyItem class="mt-3" :list="items"></companyItem>
        <MPagination
          :total="total"
          :page="pages.pageNo"
          :limit="pages.pageSize"
          @handleChange="handleChangePage"
        ></MPagination>
      </div>
      <Empty v-else class="mt-3 mx-4" :message="noParams? '请输入或选择对应的条件查找公司' : '没有对应的公司，请更换搜索条件后再试'"></Empty>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'retrieval-company-page'})
import buttons from '@/views/recruit/personal/components/buttons.vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getEnterpriseSearch } from '@/api/enterprise'
import { dealDictObjData } from '@/utils/position'
import headSearch from '@/components/headSearch'
import scaleType from './components/scaleType'
// import areaType from './components/areaType'
import companyItem from './components/companyItem'
import MPagination from '@/components/CtPagination'
import cityCascadeSelect from '@/views/recruit/personal/position/components/conditionFilter/cityCascadeSelect.vue'
// F:\work\menduner\src\views\recruit\personal\position\components\conditionFilter\cityCascadeSelect.vue
import Snackbar from '@/plugins/snackbar'

const route = useRoute()
const router = useRouter()
const clear = ref(false)

const total = ref(0)
const items = ref([])
const pages = ref({
  pageNo: 1,
  pageSize: 9
})
const query = ref({})

const dealRouteQuery = (data) => {
  data.date = new Date().getTime() // 用于前端刷新路由参数
  const arr = Object.keys(data).map(e => {
    if (data[e]) {
      return Array.isArray(data[e]) ? `${e}=${data[e].join('_')}` : `${e}=${data[e]}`
    }
  }).filter(Boolean)
  if (!arr.length) return router.push(route.path)
  const str = arr?.join('&')
  if (str) router.push(`${route.path}?${str}`)
}

const content = ref(route?.query?.name ? route.query?.name.includes('&') ? decodeURIComponent(route.query.name) : route.query.name : '')

// 搜索
const handleSearch = async (val, key) => {
  if (!val && key !== 'name') return
  if (key === 'name' && val === '&') return Snackbar.warning('请输入要查询的公司名称！')
  if (key === 'name') content.value = val
  if (val?.includes('&')) val = encodeURIComponent(val)
  pages.value.pageNo = 1
  query.value[key] = val
  dealRouteQuery(query.value)
  // await getCompanyData()
}

const inputChange = async({ idName: key, values }) => { // areaIds
  if (!values?.length) {
    values = null
    delete query.value[key]
  } else {
    query.value[key] = values
  }
  pages.value.pageNo = 1
  dealRouteQuery(query.value)
  // await getCompanyData()
}

const noParams = ref(true)
const getCompanyData = async () => {
  noParams.value = true
  if (query.value?.date) delete query.value.date
  Object.keys(query.value).forEach(key => {
    // 没有筛选条件不请求数据
    if (query.value[key]) noParams.value = false
  })
  if (noParams.value === true) {
    items.value = []
    total.value = 0
    return
  }
  const params = { ...query.value, ...pages.value }
  if (params.name?.includes('&')) params.name = decodeURIComponent(params.name)
  const { list, total: number } = await getEnterpriseSearch(params)
  if (!list.length) {
    items.value = []
    total.value = 0
    return
  }
  total.value = number
  items.value = list.map(e => {
    e.enterprise = dealDictObjData({}, e.enterprise)
    if (e.jobList && e.jobList.length) e.job = dealDictObjData({}, e.jobList[0])
    return e
  })
}

const handleClear = () => {
  clear.value = true
  if (query.value.name || query.value.areaIds?.length) {
    dealRouteQuery({
      ...(query.value.name && { name: query.value.name }),
      ...(query.value.areaIds?.length && { areaIds: query.value.areaIds })
    })
    // getCompanyData()
  } else {
    router.push(route.path)
    items.value = []
    total.value = 0
  }
}

// 刷新页面时url中带有参数请求检索接口
if (Object.keys(route.query).length) {
  const objData = {}
  Object.keys(route.query).map(e => {
    if (e === 'areaIds') return objData[e] = route.query[e].split('_')
    if (e === 'name') return objData[e] = route.query[e].includes('&') ? encodeURIComponent(route.query[e]) : route.query[e]
    else objData[e] = route.query[e]
  })
  if (Object.keys(objData).length) {
    pages.value.pageNo = 1
    query.value = Object.assign(query.value, objData)
    getCompanyData()
  }
} else getCompanyData()

// 分页
const handleChangePage = (index) => {
  pages.value.pageNo = index
  getCompanyData()
}
</script>

<style lang="scss" scoped>
.clear-parent {
  position: relative
}
.clear {
  position: absolute;
  bottom: 0;
  right: 30px;
  color: var(--v-primary-base);
  font-size: 14px;
  cursor: pointer;
}
.company-content {
  height: calc(100vh - 100px);
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>