公司检索

src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="parent" @click="layoutClick">
     <Headers class="headers"></Headers>
-    <div style="margin-top: 50px;">
+    <div class="content">
       <router-view></router-view>
     </div>
     <Footers class="mt-10"></Footers>
@@ -47,4 +47,8 @@ const layoutClick = () => {
   translate: 0 50%;
   z-index: 999;
 }
+.content {
+  min-height: calc(100vh - (48px + 225px));
+  margin-top: 50px;
+}
 </style>

src/styles/recruit/company.css

@@ -93,9 +93,6 @@
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
   padding: 16px 20px;
-  font-size: 14px;
-  color: #999;
   background-color: #f8fcfb;
 }

src/styles/recruit/company.min.css

@@ -1 +1 @@
-.label-title{width:64px;font-weight:500;margin-right:24px;color:#222}.label-content{flex:1}.label-color{color:#222;font-size:14px;margin-right:24px;display:inline-block;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}.company-box{display:flex;flex-wrap:wrap}.sub-li{position:relative;width:calc((100% - 36px) / 4);min-width:calc((100% - 36px) / 4);max-width:calc((100% - 36px) / 4);margin:0 12px 12px 0;height:130px;border-radius:12px;padding:0;overflow:hidden;transition:all .2s linear;background-color:#fff;cursor:pointer}.sub-li:nth-child(4n){margin-right:0}.sub-li:hover{box-shadow:0 16px 40px 0 rgba(153,153,153,0.3)}.company-info{float:left;margin-left:16px;width:282px}.company-info-top{display:flex;height:76px;padding:16px 20px;overflow:hidden}.company-info h3{height:22px;font-size:16px;font-weight:400;color:#222;line-height:22px;margin:0 0 4px 0;padding:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.company-info p{height:18px;font-size:13px;font-weight:400;color:#999;line-height:18px}.company-info-bottom{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:16px 20px;font-size:14px;color:#999;background-color:#f8fcfb}
+.label-title{width:64px;font-weight:500;margin-right:24px;color:#222}.label-content{flex:1}.label-color{color:#222;font-size:14px;margin-right:24px;display:inline-block;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}.company-box{display:flex;flex-wrap:wrap}.sub-li{position:relative;width:calc((100% - 36px) / 4);min-width:calc((100% - 36px) / 4);max-width:calc((100% - 36px) / 4);margin:0 12px 12px 0;height:130px;border-radius:12px;padding:0;overflow:hidden;transition:all .2s linear;background-color:#fff;cursor:pointer}.sub-li:nth-child(4n){margin-right:0}.sub-li:hover{box-shadow:0 16px 40px 0 rgba(153,153,153,0.3)}.company-info{float:left;margin-left:16px;width:282px}.company-info-top{display:flex;height:76px;padding:16px 20px;overflow:hidden}.company-info h3{height:22px;font-size:16px;font-weight:400;color:#222;line-height:22px;margin:0 0 4px 0;padding:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.company-info p{height:18px;font-size:13px;font-weight:400;color:#999;line-height:18px}.company-info-bottom{width:100%;overflow:hidden;white-space:nowrap;padding:16px 20px;background-color:#f8fcfb}

src/styles/recruit/company.scss

@@ -85,9 +85,6 @@
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
   padding: 16px 20px;
-  font-size: 14px;
-  color: #999;
   background-color: #f8fcfb;
 }

src/views/recruit/company/components/areaType.vue

@@ -14,10 +14,29 @@
 
 <script setup>
 defineOptions({ name: 'search-area-type'})
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getHotArea } from '@/api/common'
 
-const emits = defineEmits(['handleClick'])
+const emits = defineEmits(['handleClick', 'clear'])
+const props = defineProps({
+  isClear: {
+    type: Boolean,
+    default: false
+  }
+})
+watch(
+  () => props.isClear, 
+  (newVal) => {
+    if (!newVal) return
+    // 清空筛选条件时默认选中不限
+    items.value.map(e => {
+      e.active = false
+      if (e.id === -1) e.active = true
+      return e
+    })
+    emits('clear')
+  }
+)
 
 const items = ref([])
 const getAreaList = async () => {
@@ -33,7 +52,8 @@ getAreaList()
 const handleItemClick = (k) => {
   items.value.map(e => e.active = false)
   k.active = true
-  emits('handleClick', k, 'scale')
+  if (k.id === 'all') return
+  emits('handleClick', [Number(k.id)], 'areaIds')
 }
 </script>
 

src/views/recruit/company/components/companyItem.vue

@@ -3,7 +3,7 @@
     <div class="sub-li" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
       <div class="company-info-top" @click="handleClickEnterprise(item)">
         <div class="float-left">
-          <v-img src="https://img.bosszhipin.com/beijin/mcs/banner/3e9d37e9effaa2b6daf43f3f03f7cb15cfcd208495d565ef66e7dff9f98764da.jpg" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
+          <v-img :src="item.logoUrl" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
         </div>
         <div class="company-info">
           <h3 :class="{'default-active': item.active }">{{ item.anotherName }}</h3>
@@ -11,12 +11,7 @@
         </div>
       </div>
       <div class="company-info-bottom">
-        热招 | 
-        <span style="color: var(--v-primary-base)">产品经理</span>
-        <span style="color: #000;"> · 6-11k</span>
-        等
-        <span style="color: var(--v-primary-base)"> 96 </span>
-        个职位
+        <v-chip class="mr-2" color="primary" size="x-small" label v-for="(k, i) in welfareList" :key="i">{{ k }}</v-chip>
       </div>
     </div>
   </div>
@@ -24,54 +19,15 @@
 
 <script setup>
 defineOptions({ name: 'company-item'})
-import { ref } from 'vue'
+defineProps({
+  list: Array
+})
+
+const welfareList = ['双休', '五险一金', '零食下午茶', '年终奖']
 
 const handleClickEnterprise = (item) => {
-  console.log(item)
-  // window.open(`/enterprise/details/${item.id}`)
+  window.open(`/enterprise/details/${item.id}`)
 }
-const list = ref([
-  {
-    anotherName: 'xxx科技有限公司',
-    financingName: '未融资',
-    scaleName: '0-20人',
-    industryName: '互联网/AI',
-    id: 1,
-    active: false
-  },
-  {
-    anotherName: 'xxx科技有限公司',
-    financingName: '未融资',
-    scaleName: '0-20人',
-    industryName: '互联网/AI',
-    id: 2,
-    active: false
-  },
-  {
-    anotherName: 'xxx科技有限公司',
-    financingName: '未融资',
-    scaleName: '0-20人',
-    industryName: '互联网/AI',
-    id: 3,
-    active: false
-  },
-  {
-    anotherName: 'xxx科技有限公司',
-    financingName: '未融资',
-    scaleName: '0-20人',
-    industryName: '互联网/AI',
-    id: 4,
-    active: false
-  },
-  {
-    anotherName: 'xxx科技有限公司',
-    financingName: '未融资',
-    scaleName: '0-20人',
-    industryName: '互联网/AI',
-    id: 5,
-    active: false
-  }
-])
 </script>
 
 <style scoped lang="scss">

src/views/recruit/company/components/industryType.vue

@@ -14,9 +14,28 @@
 
 <script setup>
 defineOptions({ name: 'search-industry-type'})
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getIndustryTreeData } from '@/api/common/index'
-const emits = defineEmits(['handleClick'])
+const emits = defineEmits(['handleClick', 'clear'])
+const props = defineProps({
+  isClear: {
+    type: Boolean,
+    default: false
+  }
+})
+watch(
+  () => props.isClear, 
+  (newVal) => {
+    if (!newVal) return
+    // 清空筛选条件时默认选中不限
+    items.value.map(e => {
+      e.active = false
+      if (e.id === -1) e.active = true
+      return e
+    })
+    emits('clear')
+  }
+)
 
 const items = ref([])
 const getList = async () => {
@@ -33,7 +52,7 @@ getList()
 const handleItemClick = (k) => {
   items.value.map(e => e.active = false)
   k.active = true
-  emits('handleClick', k, 'scale')
+  emits('handleClick', [k.id], 'industryIds')
 }
 </script>
 

src/views/recruit/company/components/natureType.vue

@@ -4,7 +4,7 @@
     <div class="label-content">
       <span 
         v-for="k in items" 
-        :key="k.id"
+        :key="k.value"
         :class="['label-color', {'actives': k.active}]"
         @click="handleItemClick(k)"
       >{{ k.label }}</span>
@@ -14,9 +14,29 @@
 
 <script setup>
 defineOptions({ name: 'search-nature-type'})
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getDict } from '@/hooks/web/useDictionaries'
-const emits = defineEmits(['handleClick'])
+
+const emits = defineEmits(['handleClick', 'clear'])
+const props = defineProps({
+  isClear: {
+    type: Boolean,
+    default: false
+  }
+})
+watch(
+  () => props.isClear, 
+  (newVal) => {
+    if (!newVal) return
+    // 清空筛选条件时默认选中不限
+    items.value.map(e => {
+      e.active = false
+      if (e.value === -1) e.active = true
+      return e
+    })
+    emits('clear')
+  }
+)
 
 const items = ref([])
 getDict('menduner_enterprise_type').then(({ data }) => {
@@ -25,13 +45,13 @@ getDict('menduner_enterprise_type').then(({ data }) => {
     e.active = false
     return e
   })
-  items.value = [{ id: -1, label: '不限', active: true }, ...list]
+  items.value = [{ value: -1, label: '不限', active: true }, ...list]
 })
 
 const handleItemClick = (k) => {
   items.value.map(e => e.active = false)
   k.active = true
-  emits('handleClick', k, 'scale')
+  emits('handleClick', Number(k.value), 'enterpriseType')
 }
 </script>
 

src/views/recruit/company/components/scaleType.vue

@@ -4,7 +4,7 @@
     <div class="label-content">
       <span 
         v-for="k in items" 
-        :key="k.id"
+        :key="k.value"
         :class="['label-color', {'actives': k.active}]"
         @click="handleItemClick(k)"
       >{{ k.label }}</span>
@@ -27,12 +27,11 @@ const props = defineProps({
 watch(
   () => props.isClear, 
   (newVal) => {
-    // console.log(newVal, 'newVal')
     if (!newVal) return
     // 清空筛选条件时默认选中不限
     items.value.map(e => {
       e.active = false
-      if (e.id === -1) e.active = true
+      if (e.value === -1) e.active = true
       return e
     })
     emits('clear')
@@ -46,13 +45,13 @@ getDict('menduner_scale').then(({ data }) => {
     e.active = false
     return e
   })
-  items.value = [{ id: -1, label: '不限', active: true }, ...list]
+  items.value = [{ value: -1, label: '不限', active: true }, ...list]
 })
 
 const handleItemClick = (k) => {
   items.value.map(e => e.active = false)
   k.active = true
-  emits('handleClick', k, 'scale')
+  emits('handleClick', Number(k.value), 'scale')
 }
 </script>
 

src/views/recruit/company/index.vue

@@ -3,28 +3,74 @@
     <div class="white-bgc py-3">
       <headSearch></headSearch>
       <div class="px-5 mt-3 clear-parent">
-        <areaType class="mb-3" :isClear="clear"></areaType>
-        <industryType :isClear="clear"></industryType>
-        <natureType class="my-5" :isClear="clear"></natureType>
-        <scaleType :isClear="clear" @clear="clear = false"></scaleType>
-        <div class="clear" @click="clear = true">清空筛选条件</div>
+        <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"></companyItem>
+    <companyItem class="mt-3" :list="items"></companyItem>
+    <MPagination
+      :total="total"
+      :page="pageInfo.current"
+      :limit="pageInfo.size"
+      @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({
+  size: 1,
+  current: 1
+})
+const query = ref({
+  ...pageInfo.value
+})
+
+// 搜索
+const handleSearch = async (val, key) => {
+  query.value.current = 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.current = index
+  getCompanyData()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/recruit/position/components/dict.js

@@ -37,6 +37,8 @@ export const dealDictData = (res, list) => {
     const valueKey = item.nameKey ? item.nameKey : 'label'
     const idKey = item.valueKey ? item.valueKey : 'value'
     if (Array.isArray(list)) {
+      const next = list.find(val => val[item.key])
+      if (!next) return
       res = list.map(e => {
         const obj = dictObj[item.value].find(k => Number(k[idKey]) === Number(e[item.key]))
         if (!obj) return