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

<template>
  <div class="default-width">
    <div class="white-bgc py-3">
      <headSearch></headSearch>
      <div class="px-5 mt-3 clear-parent">
        <areaType class="mb-3" :isClear="clear" @handleClick="handleSearch"></areaType>
        <industryType :isClear="clear" @handleClick="handleSearch"></industryType>
        <natureType class="my-5" :isClear="clear" @handleClick="handleSearch"></natureType>
        <scaleType :isClear="clear" @clear="clear = false" @handleClick="handleSearch"></scaleType>
        <div class="clear" @click="handleClear">清空筛选条件</div>
      </div>
    </div>
    <companyItem class="mt-3" :list="items"></companyItem>
    <MPagination
      :total="total"
      :page="pageInfo.pageNo"
      :limit="pageInfo.pageSize"
      @handleChange="handleChangePage"
    ></MPagination>
  </div>
</template>

<script setup>
defineOptions({name: 'retrieval-company-page'})
import { ref } from 'vue'
import { getEnterpriseSearch } from '@/api/enterprise'
import { dealDictData } from '../position/components/dict'
import headSearch from '@/components/headSearch'
import scaleType from './components/scaleType'
import natureType from './components/natureType'
import industryType from './components/industryType'
import areaType from './components/areaType'
import companyItem from './components/companyItem'
import MPagination from '@/components/CtPagination'

const clear = ref(false)
const handleClear = () => {
  clear.value = true
  query.value = {
    ...pageInfo.value
  }
}

const total = ref(0)
const items = ref([])
const pageInfo = ref({
  pageSize: 10,
  pageNo: 1
})
const query = ref({
  ...pageInfo.value
})

// 搜索
const handleSearch = async (val, key) => {
  query.value.pageNo = 1
  // val为-1时选择的是不限或者全国， 此时选中的字段不传
  if (val === -1) delete query.value[key]
  else query.value[key] = val
  await getCompanyData()
}

const getCompanyData = async () => {
  const { list, total: number } = await getEnterpriseSearch(query.value)
  total.value = number
  items.value = dealDictData(items.value, list)
}
getCompanyData()

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

<style lang="scss" scoped>
.clear-parent {
  position: relative
}
.clear {
  position: absolute;
  bottom: 0;
  right: 30px;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  &:hover {
    color: var(--v-primary-base);
  }
}
</style>