| 
					
				 | 
			
			
				@@ -1,20 +1,138 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <div class="top">检索</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <div class="bottom"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      <div v-for="(val, i) in list" :key="i"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <div class="d-flex justify-space-between"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <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"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <v-icon color="#666" size="15">{{ k.mdi }}</v-icon> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <span class="ml-1 tag-text">{{ val[k.value] }}</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div v-if="!val.active" class="text-right"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </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 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        :total="total" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        :page="pageInfo.current" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        :limit="pageInfo.size" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        @handleChange="handleChangePage" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ></MPagination> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <script setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 defineOptions({ name: 'recruitment-positions'}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const list = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { ref } from 'vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { timesTampChange } from '@/utils/date' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { getDict } from '@/hooks/web/useDictionaries' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+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: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    type: Object, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    default: () => {} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const total = ref(12) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const pageInfo = ref({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  size: 3, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  current: 1 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const handleChangePage = (index) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  console.log(index, 'handle-page') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const handlePosition = (val) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  window.open(`/recruit/position/details/${val.positionId}`) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 行业列表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const industryList = ref([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const getDictData = async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const { data } = await getDict('menduner_industry_type', {}, 'industryList') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  industryList.value = data 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+getDictData() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 职位类别&工作地点 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const positionCategory = ref([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const areaList = ref([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const getData = async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const data = await getJobAdvertisedPositionCount({ enterpriseId: props.info.enterprise.id }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  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, active: false } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  positionCategory.value = [{ id: '-1', label: '全部', active: true }, ...list] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+getData() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const list = ref([ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '产品经理', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    payFrom: 6, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    payTo: 11, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    payName: '月', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    updateTime: 1716175909224, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    areaName: '广州', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    eduName: '本科', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    expName: '1-3年', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    active: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    positionId: 4 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     name: '产品经理', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     payFrom: 6, 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -24,7 +142,8 @@ const list = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     areaName: '广州', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     eduName: '本科', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     expName: '1-3年', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    active: false 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    active: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    positionId: 4 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     name: '产品经理', 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -35,12 +154,23 @@ const list = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     areaName: '广州', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     eduName: '本科', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     expName: '1-3年', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    active: false 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    active: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    positionId: 4 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const desc = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { mdi: 'mdi-map-marker-outline', value: 'areaName' }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { mdi: 'mdi-school-outline', value: 'eduName' }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 ] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <style scoped lang="scss"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.bottom-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  height: 68px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  margin-bottom: 12px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 .name { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   max-width: 200px; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -49,9 +179,6 @@ const list = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   text-overflow: ellipsis; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   white-space: nowrap; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   font-weight: 600; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  &:hover { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    color: var(--v-primary-base); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 .salary { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   font-size: 16px; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -60,4 +187,40 @@ const list = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   line-height: 22px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   flex: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.tag-text { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  color: #222; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  font-size: 14px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.update-time { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  color: #666; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  font-size: 14px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  line-height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.account-info { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  line-height: 52px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .account-label { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    color: #666; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-size: 14px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-weight: 600; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    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> 
			 |