|
@@ -1,20 +1,138 @@
|
|
<template>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
+ <MPagination
|
|
|
|
+ :total="total"
|
|
|
|
+ :page="pageInfo.current"
|
|
|
|
+ :limit="pageInfo.size"
|
|
|
|
+ @handleChange="handleChangePage"
|
|
|
|
+ ></MPagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
defineOptions({ name: 'recruitment-positions'})
|
|
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: '产品经理',
|
|
name: '产品经理',
|
|
payFrom: 6,
|
|
payFrom: 6,
|
|
@@ -24,7 +142,8 @@ const list = [
|
|
areaName: '广州',
|
|
areaName: '广州',
|
|
eduName: '本科',
|
|
eduName: '本科',
|
|
expName: '1-3年',
|
|
expName: '1-3年',
|
|
- active: false
|
|
|
|
|
|
+ active: false,
|
|
|
|
+ positionId: 4
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '产品经理',
|
|
name: '产品经理',
|
|
@@ -35,12 +154,23 @@ const list = [
|
|
areaName: '广州',
|
|
areaName: '广州',
|
|
eduName: '本科',
|
|
eduName: '本科',
|
|
expName: '1-3年',
|
|
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>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
+.bottom-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 68px;
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+}
|
|
.name {
|
|
.name {
|
|
position: relative;
|
|
position: relative;
|
|
max-width: 200px;
|
|
max-width: 200px;
|
|
@@ -49,9 +179,6 @@ const list = [
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
- &:hover {
|
|
|
|
- color: var(--v-primary-base);
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
.salary {
|
|
.salary {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
@@ -60,4 +187,40 @@ const list = [
|
|
line-height: 22px;
|
|
line-height: 22px;
|
|
flex: none;
|
|
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>
|
|
</style>
|