企业详情-在招职位

src/api/position.js

@@ -63,3 +63,12 @@ export const getJobAdvertisedPositionCount = async (params) => {
     params
   })
 }
+
+
+// 根据企业id获取企业职位区域
+export const getJobAreaByEnterpriseId = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/job/advertised/get/area/count',
+    params
+  })
+}

src/components/Enterprise/components/positions.vue

@@ -1,16 +1,41 @@
 <template>
-  <div>
-    <div class="top">检索</div>
-    <div class="bottom">
-      <div 
-        v-for="(val, i) in list" 
-        :key="i" 
-        :class="['bottom-item', {'border-bottom-dashed': i !== list.length -1}, 'd-flex', 'justify-space-between', 'cursor-pointer']" 
-        @mouseenter="val.active = true"
-        @mouseleave="val.active = false"
-        @click="handlePosition(val)"
-      >
-        <div>
+  <div class="top">
+    <div class="d-flex">
+      <div class="font-weight-bold position-category-left">职位类别：</div>
+      <div class="position-category-right">
+        <span 
+          :class="['category-item', {'default-active': k.active}]" 
+          v-for="k in positionCategory" 
+          :key="k.id"
+          @mouseenter="k.active = true"
+          @mouseleave="k.active = false"
+        >{{ k.id === '-1' ? `${k.label}` : `${k.label} (${k.number})` }}</span>
+      </div>
+    </div>
+    <div class="d-flex mt-3">
+      <areaType :list="areaList"></areaType>
+      <expType></expType>
+      <educationType></educationType>
+      <payScope></payScope>
+      <div style="width: 200px; height: 20px;">
+        <v-text-field  variant="outlined" placeholder="请输入职位名称">
+          <template #append-inner>
+            <v-btn color="primary" size="x-small">搜索</v-btn>
+          </template>
+        </v-text-field>
+      </div>
+    </div>
+  </div>
+  <div class="bottom mt-5">
+    <div 
+      v-for="(val, i) in list" 
+      :key="i" 
+      :class="['bottom-item', {'border-bottom-dashed': i !== list.length -1}, 'd-flex', 'justify-space-between', 'cursor-pointer']" 
+      @mouseenter="val.active = true"
+      @mouseleave="val.active = false"
+      @click="handlePosition(val)"
+    >
+      <div>
           <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
           <div style="line-height: 40px;">
             <span v-for="k in desc" :key="k.mdi" class="mr-5">
@@ -18,26 +43,25 @@
               <span class="ml-1 tag-text">{{ val[k.value] }}</span>
             </span>
           </div>
-        </div>
-        <div v-if="!val.active" class="text-right">
+      </div>
+      <div v-if="!val.active" class="text-right">
           <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
           <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
-        </div>
-        <div v-else class="account-info">
+      </div>
+      <div v-else class="account-info">
           <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
           <span class="account-label">陈北方 · 人事经理</span>
           <span>
             <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
           </span>
-        </div>
       </div>
-      <MPagination
+    </div>
+    <MPagination
         :total="total"
         :page="pageInfo.current"
         :limit="pageInfo.size"
         @handleChange="handleChangePage"
-      ></MPagination>
-    </div>
+    ></MPagination>
   </div>
 </template>
 
@@ -46,8 +70,12 @@ defineOptions({ name: 'recruitment-positions'})
 import { ref } from 'vue'
 import { timesTampChange } from '@/utils/date'
 import { getDict } from '@/hooks/web/useDictionaries'
-import { getJobAdvertisedPositionCount } from '@/api/position'
+import { getJobAdvertisedPositionCount, getJobAreaByEnterpriseId } from '@/api/position'
 import MPagination from '@/components/CtVuetify/CtPagination'
+import expType from '@/views/recruit/position/components/conditionFilter/expType.vue'
+import educationType from '@/views/recruit/position/components/conditionFilter/educationType.vue'
+import payScope from '@/views/recruit/position/components/conditionFilter/payScope.vue'
+import areaType from '@/views/recruit/position/components/conditionFilter/areaType.vue'
 
 const props = defineProps({
   info: {
@@ -78,14 +106,17 @@ const getDictData = async () => {
 }
 getDictData()
 
-// 职位类别
+// 职位类别&工作地点
 const positionCategory = ref([])
+const areaList = ref([])
 const getData = async () => {
   const data = await getJobAdvertisedPositionCount({ enterpriseId: props.info.enterprise.id })
-  positionCategory.value = data.map(val => {
+  areaList.value = await getJobAreaByEnterpriseId({ enterpriseId: props.info.enterprise.id })
+  const list = data.map(val => {
     const value = industryList.value.find(e => Number(e.id) === Number(val.key))
-    return { id: value.id, label: value.nameCn, number: val.value }
+    return { id: value.id, label: value.nameCn, number: val.value, active: false }
   })
+  positionCategory.value = [{ id: '-1', label: '全部', active: true }, ...list]
 }
 getData()
 
@@ -174,4 +205,22 @@ const desc = [
     margin: 0 10px;
   }
 }
+.position-category-left {
+  width: 80px;
+}
+.position-category-right {
+  flex: 1;
+}
+.category-item {
+  margin-right: 20px;
+  font-size: 15px;
+  color: #888;
+  font-weight: 600;
+  cursor: pointer;
+}
+:deep(.v-field__input) {
+  height: 28px;
+  padding: 0 0 0 10px;
+  font-size: 12px
+}
 </style>

src/views/recruit/position/components/conditionFilter/areaType.vue

@@ -0,0 +1,43 @@
+<template>
+  <commonStyle btnTitle="工作地点">
+    <v-list>
+      <v-list-item
+        color="primary"
+        :active="selectedItems.includes(item.value)"
+        v-for="item in items" :key="item.id" :value="item.value"
+        @click="handle(item.value)"
+      >
+        <v-list-item-title>{{ item.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </commonStyle>
+</template>
+
+<script setup>
+import commonStyle from './commonStyle.vue'
+import { getDict } from '@/hooks/web/useDictionaries'
+import { ref, defineEmits } from 'vue';
+
+defineOptions({name: 'conditionFilter-area-type'})
+const emits = defineEmits(['selectedItems'])
+const props = defineProps({
+  list: Array
+})
+
+let items = ref()
+let selectedItems = ref([])
+getDict('menduner_area_type', {}, 'areaList').then(({ data }) => {
+  data = data?.length && data || []
+  items.value = props.list.map(e => {
+    const { id, parentId, type, name: label } = data.find(k => Number(k.id) === Number(e.key))
+    return { id, label, number: e.value, parentId, type }
+  })
+})
+const handle = (val) => {
+  // 单选
+  selectedItems.value = [val]
+  emits('selectedItems', selectedItems.value)
+}
+</script>
+<style lang="scss" scoped>
+</style>