|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div v-if="!getToken(1)" class="login-content">
|
|
|
+ <div class="login-content-box pa-10">
|
|
|
+ <div class="login-content-box-title text-center mt-4">请登录您的企业账号</div>
|
|
|
+ <passwordFrom class="mt-10" ref="passRef" placeholder="请输入企业邮箱" :validEmail="true"></passwordFrom>
|
|
|
+ <v-btn :loading="loading" color="primary" class="white--text mt-5" min-width="340" @click="handleLogin">登录</v-btn>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="content py-3" @scroll="handleScroll">
|
|
|
+ <v-card class="py-3 px-5" :style="{'width': isMobile ? '100%' : '750px'}" style="min-height: calc(100vh - 24px); box-sizing: border-box; margin: 0 auto;">
|
|
|
+ <div class="d-flex align-center" style="width: 340px; margin: auto;">
|
|
|
+ <Autocomplete v-model="query.jobId" :item="selectItems" @change="handleChange"></Autocomplete>
|
|
|
+ </div>
|
|
|
+ <v-divider></v-divider>
|
|
|
+ <div v-if="items.length">
|
|
|
+ <div v-for="(val, index) in items" :key="val.id" @click="handleDetail(val)">
|
|
|
+ <div class="py-3 d-flex align-center">
|
|
|
+ <v-avatar size="large">
|
|
|
+ <v-img :src="getUserAvatar(val.avatar, val.sex)" width="50" height="50"></v-img>
|
|
|
+ </v-avatar>
|
|
|
+ <div class="ml-3 d-flex flex-column">
|
|
|
+ <p class="font-size-20">{{ val.name }}</p>
|
|
|
+ <p class="color-999 font-size-16">
|
|
|
+ {{ val.jobStatusName }}
|
|
|
+ <span v-if="val.jobStatusName && val.expType" class="septal-line"></span>
|
|
|
+ {{ val.expType }}
|
|
|
+ <span v-if="val.eduType" class="septal-line"></span>
|
|
|
+ {{ val.eduType }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-box" v-if="index !== items.length - 1"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Empty v-else :elevation="false" message="暂无数据，请更换搜索条件后再试"></Empty>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Loading :visible="loading"></Loading>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'talentRecommendation'})
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import passwordFrom from '@/views/login/components/passwordPage.vue'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
+import { passwordLogin } from '@/api/common'
|
|
|
+import { getPersonRecommendPage, getJobAdvertised } from '@/api/enterprise'
|
|
|
+import { dealDictArrayData } from '@/utils/position'
|
|
|
+import { getUserAvatar } from '@/utils/avatar'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const loading = ref(false)
|
|
|
+const passRef = ref(null)
|
|
|
+const items = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const query = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ jobId: null
|
|
|
+})
|
|
|
+const selectItems = ref({
|
|
|
+ label: '已发布职位',
|
|
|
+ placeholder: '请选择要进行推荐的职位',
|
|
|
+ clearable: true,
|
|
|
+ width: 600,
|
|
|
+ items: []
|
|
|
+})
|
|
|
+
|
|
|
+// 已发布职位列表
|
|
|
+const getJobList = async () => {
|
|
|
+ const data = await getJobAdvertised({})
|
|
|
+ if (data.length) {
|
|
|
+ const list = dealDictArrayData([], data)
|
|
|
+ selectItems.value.items = list.map(e => {
|
|
|
+ return { label: `${e.name}${e.areaName ? '_' + e.areaName : ''} ${e.payFrom ? e.payFrom + '-' : ''}${e.payTo}${e.payName ? '/' + e.payName : ''}`, value: e.id }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 组件挂载后添加事件监听器
|
|
|
+const isMobile = ref(false)
|
|
|
+onMounted(() => {
|
|
|
+ if (!getToken(1)) Snackbar.warning('请先登录')
|
|
|
+ else getJobList()
|
|
|
+ const userAgent = navigator.userAgent
|
|
|
+ isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
|
|
|
+})
|
|
|
+
|
|
|
+// 列表
|
|
|
+const getData = async (isEmpty) => {
|
|
|
+ // isEmpty：是否清空列表
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const res = await getPersonRecommendPage(query.value)
|
|
|
+ const list = res.list || []
|
|
|
+ items.value = list.length ? !isEmpty ? [...items.value, ...dealDictArrayData([], list)] : dealDictArrayData([], list) : []
|
|
|
+ total.value = res.total
|
|
|
+ } catch (err) {
|
|
|
+ loading.value = false
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+getData()
|
|
|
+
|
|
|
+// 底部加载
|
|
|
+const handleScroll = (e) => {
|
|
|
+ if (e.srcElement.scrollTop + e.srcElement.clientHeight > e.srcElement.scrollHeight - 10) {
|
|
|
+ if (items.value.length < total.value) {
|
|
|
+ query.value.pageNo++
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 选择发布职位
|
|
|
+const handleChange = () => {
|
|
|
+ query.value.pageNo = 1
|
|
|
+ getData(true)
|
|
|
+}
|
|
|
+
|
|
|
+// 登录
|
|
|
+const handleLogin = async () => {
|
|
|
+ const { valid } = await passRef.value.passwordForm.validate()
|
|
|
+ if (!valid) return
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await passwordLogin({ ...passRef.value.loginData, account: passRef.value.loginData.phone })
|
|
|
+ await useUserStore().changeRole({ ...data, type: 'emailLogin', noJump: true })
|
|
|
+ await getJobList()
|
|
|
+ await getData()
|
|
|
+ } catch (err) {
|
|
|
+ Snackbar.warning(err.msg)
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 人才详情
|
|
|
+const handleDetail = ({ userId, id }) => {
|
|
|
+ if (!userId || !id) return
|
|
|
+ router.push(`/recruit/enterprise/talentRecommendation/details/${userId}?id=${id}`)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.content {
|
|
|
+ background-color: #f2f4f7;
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.login-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
|
|
|
+ background-size: cover;
|
|
|
+ &-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ translate: -50% -50%;
|
|
|
+ width: 420px;
|
|
|
+ height: 380px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ &-title {
|
|
|
+ color: #4c4c4c;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.bg-box {
|
|
|
+ height: 10px;
|
|
|
+ background-color: #f2f4f7;
|
|
|
+}
|
|
|
+</style>
|
