|
|
@@ -0,0 +1,305 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <CtFilter :items="formItems" @reset="handleReset" @search="handleSearch" />
|
|
|
+
|
|
|
+ <v-card elevation="5" class="mt-3">
|
|
|
+ <CtTable
|
|
|
+ :items="items"
|
|
|
+ class="pa-3"
|
|
|
+ :headers="headers"
|
|
|
+ :loading="loading"
|
|
|
+ :disable-sort="true"
|
|
|
+ :elevation="0"
|
|
|
+ :isTools="false"
|
|
|
+ height="calc(100vh - 400px)"
|
|
|
+ :showPage="true"
|
|
|
+ :showFixedLastItem="true"
|
|
|
+ :total="total"
|
|
|
+ :pageInfo="query"
|
|
|
+ itemKey="id"
|
|
|
+ @pageHandleChange="handleChangePage"
|
|
|
+ >
|
|
|
+ <template #workTerritory="{ item }">
|
|
|
+ <div class="ellipsis" style="max-width: 150px;">
|
|
|
+ {{ item.workTerritory }}
|
|
|
+ <v-tooltip activator="parent" location="top">{{ item.workTerritory }}</v-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #workHistory="{ item }">
|
|
|
+ <div class="ellipsis" style="max-width: 150px;">
|
|
|
+ {{ item.workHistory }}
|
|
|
+ <v-tooltip activator="parent" location="top">{{ item.workHistory }}</v-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ item }">
|
|
|
+ <v-btn variant="text" color="primary" @click.stop="handleDetail(item)">详 情</v-btn>
|
|
|
+ <v-btn :disabled="!item.userPersonList || !item.userPersonList.length" variant="text" color="primary" @click.stop="handleContactInformation(item)">
|
|
|
+ 联系方式
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+ </CtTable>
|
|
|
+ </v-card>
|
|
|
+
|
|
|
+ <v-navigation-drawer v-model="showDetail" absolute location="right" rounded temporary width="700" class="pa-5">
|
|
|
+ <div style="width: 300px; height: 300px; margin: 0 auto;">
|
|
|
+ <v-img :src="detail?.picUrl" width="300" height="300" />
|
|
|
+ </div>
|
|
|
+ <div class="mt-10" v-if="detail?.detailIntroduction" v-html="detail?.detailIntroduction.replace(/\n/g, '</br>')"></div>
|
|
|
+ </v-navigation-drawer>
|
|
|
+
|
|
|
+ <!-- 无权限提示 -->
|
|
|
+ <CtDialog :visible="showDialog" :widthType="4" :footer="false" titleClass="text-h6" title="系统提示" @close="showDialog = false">
|
|
|
+ <div class="d-flex align-center flex-column">
|
|
|
+ <div class="color-warning">
|
|
|
+ <p>很抱歉，您当前没有权限查看门墩儿新任命的相关信息</p>
|
|
|
+ <p>请用微信扫描下方企业微信联系门墩儿管理员开通权限</p>
|
|
|
+ </div>
|
|
|
+ <div style="width: 150px; height: 150px;">
|
|
|
+ <v-img src="https://minio.menduner.com/dev/menduner/contact.png"></v-img>
|
|
|
+ </div>
|
|
|
+ <div class="text-center ml-5">潘青海先生（Peter Pan）</div>
|
|
|
+ </div>
|
|
|
+ </CtDialog>
|
|
|
+
|
|
|
+ <!-- 联系方式 -->
|
|
|
+ <CtDialog :visible="showContactDialog" title="当前联系方式匹配人员" :footer="false" widthType="0" @close="showContactDialog = false">
|
|
|
+ <CtTable
|
|
|
+ :loading="false"
|
|
|
+ :items="contactList"
|
|
|
+ :headers="contactHeaders"
|
|
|
+ :elevation="0"
|
|
|
+ :isTools="false"
|
|
|
+ :showPage="false"
|
|
|
+ itemKey="user.id"
|
|
|
+ >
|
|
|
+ <template #name="{ item }">
|
|
|
+ <div class="d-flex align-center cursor-pointer">
|
|
|
+ <v-badge
|
|
|
+ v-if="item?.person?.sex === '1' || item?.person?.sex === '2'"
|
|
|
+ bordered
|
|
|
+ offset-y="6"
|
|
|
+ :color="badgeColor(item)"
|
|
|
+ :icon="badgeIcon(item)">
|
|
|
+ <v-avatar size="40" :image="getUserAvatar(item.person.avatar, item.person.sex)"></v-avatar>
|
|
|
+ </v-badge>
|
|
|
+ <v-avatar v-else size="40" :image="getUserAvatar(item.person?.avatar, item.person?.sex)"></v-avatar>
|
|
|
+ <span class="ml-3">{{ item?.person?.name || item?.phone }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ item }">
|
|
|
+ <v-btn variant="text" color="primary" @click.stop="handleContactInformation({ userPersonList: [item] })">联系方式</v-btn>
|
|
|
+ </template>
|
|
|
+ </CtTable>
|
|
|
+ </CtDialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'NewTalentMapAnnotation' })
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { getNewAppointmentsPage, getNewAppointmentsDetail } from '@/api/recruit/enterprise/newlyAppointed'
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { getUserAvatar } from '@/utils/avatar'
|
|
|
+import { dealDictObjData } from '@/utils/position'
|
|
|
+
|
|
|
+const store = useUserStore()
|
|
|
+const loading = ref(false)
|
|
|
+const total = ref(10)
|
|
|
+const query = ref({
|
|
|
+ pageSize: 10,
|
|
|
+ pageNo: 1
|
|
|
+})
|
|
|
+const items = ref([])
|
|
|
+const headers = [
|
|
|
+ { title: '宣布日期', key: 'announceTime', sortable: false },
|
|
|
+ { title: '中文名', key: 'nameChinese', sortable: false },
|
|
|
+ { title: '英文名', key: 'nameEnglish', sortable: false },
|
|
|
+ { title: '性别', key: 'gender', sortable: false },
|
|
|
+ { title: '职位', key: 'position', sortable: false },
|
|
|
+ { title: '任职酒店', key: 'inaugurationHotel', sortable: false },
|
|
|
+ { title: '酒店品牌', key: 'hotelBrand', sortable: false },
|
|
|
+ { title: '工作地域', key: 'workTerritory', sortable: false },
|
|
|
+ { title: '过往工作酒店品牌', key: 'workHistory', sortable: false },
|
|
|
+ { title: '操作', key: 'actions', sortable: false, align: 'center' }
|
|
|
+]
|
|
|
+const formItems = ref({
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'nameChinese',
|
|
|
+ value: '',
|
|
|
+ label: '中文名',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'nameEnglish',
|
|
|
+ value: '',
|
|
|
+ label: '英文名',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'position',
|
|
|
+ value: '',
|
|
|
+ label: '职位',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'inaugurationHotel',
|
|
|
+ value: '',
|
|
|
+ label: '任职酒店',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'hotelBrand',
|
|
|
+ value: '',
|
|
|
+ label: '酒店品牌',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'workTerritory',
|
|
|
+ value: '',
|
|
|
+ label: '工作地域',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'workHistory',
|
|
|
+ value: '',
|
|
|
+ label: '过往工作酒店品牌',
|
|
|
+ clearable: true,
|
|
|
+ hideDetails: true,
|
|
|
+ width: 200
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const showDialog = ref(false)
|
|
|
+
|
|
|
+// 获取企业权益信息
|
|
|
+const info = ref(localStorage.getItem('entBaseInfo') ? JSON.parse(localStorage.getItem('entBaseInfo')) : {})
|
|
|
+store.$subscribe((mutation, state) => {
|
|
|
+ if (Object.keys(state.entBaseInfo).length) info.value = state.entBaseInfo
|
|
|
+})
|
|
|
+
|
|
|
+// 获取新任命分页
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const result = await getNewAppointmentsPage(query.value)
|
|
|
+ items.value = result.list
|
|
|
+ total.value = result.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+getList()
|
|
|
+
|
|
|
+// 分页切换
|
|
|
+const handleChangePage = async (e) => {
|
|
|
+ await store.getEnterpriseInfo(true)
|
|
|
+ // 没有权限提示联系门墩儿
|
|
|
+ if (!info.value?.entitlement?.newAppointment) {
|
|
|
+ showDialog.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ query.value.pageNo = e
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const handleSearch = async (obj) => {
|
|
|
+ await store.getEnterpriseInfo(true)
|
|
|
+ // 没有权限提示联系门墩儿
|
|
|
+ if (!info.value?.entitlement?.newAppointment) {
|
|
|
+ showDialog.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ query.value = Object.assign(query.value, obj)
|
|
|
+ query.value.pageNo = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+// 重置
|
|
|
+const handleReset = (obj) => {
|
|
|
+ query.value = Object.assign(query.value, obj)
|
|
|
+ query.value.pageNo = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 查看详情
|
|
|
+const showDetail = ref(false)
|
|
|
+const detail = ref({})
|
|
|
+const handleDetail = async (item) => {
|
|
|
+ await store.getEnterpriseInfo(true)
|
|
|
+ // 没有权限提示联系门墩儿
|
|
|
+ if (!info.value?.entitlement?.newAppointment) {
|
|
|
+ showDialog.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const result = await getNewAppointmentsDetail(item.id)
|
|
|
+ if (!result || !Object.keys(result).length) return Snackbar.warning('暂无详细信息，去查看其他人的信息吧~')
|
|
|
+ detail.value = result
|
|
|
+ showDetail.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 查看联系方式
|
|
|
+const contactList = ref([])
|
|
|
+const showContactDialog = ref(false)
|
|
|
+const contactHeaders = ref([
|
|
|
+ { title: '中文名', key: 'name', sortable: false },
|
|
|
+ { title: '英文名', key: 'person.foreignName', sortable: false },
|
|
|
+ { title: '求职状态', key: 'person.jobStatusName', sortable: false },
|
|
|
+ { title: '工作经验', key: 'person.expName', sortable: false },
|
|
|
+ { title: '最高学历', key: 'person.eduName', sortable: false },
|
|
|
+ { title: '联系电话', key: 'phone', sortable: false, value: item => item?.person?.phone || item.user.phone },
|
|
|
+ { title: '电子邮箱', key: 'email', sortable: false, value: item => item?.person?.email || item.user.email },
|
|
|
+ { title: '操作', key: 'actions', sortable: false, align: 'center' }
|
|
|
+])
|
|
|
+const handleContactInformation = async ({ userPersonList }) => {
|
|
|
+ await store.getEnterpriseInfo(true)
|
|
|
+ // 没有权限提示联系门墩儿
|
|
|
+ if (!info.value?.entitlement?.newAppointment) {
|
|
|
+ showDialog.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 只匹配到一个用户的直接查看详情
|
|
|
+ if (userPersonList.length === 1) {
|
|
|
+ window.open(`/recruit/enterprise/talentPool/details/${userPersonList[0].user.id}`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 匹配到多个用户，展示列表
|
|
|
+ contactList.value = userPersonList.map(e => {
|
|
|
+ if (e?.person) e.person = Object.assign(e.person, dealDictObjData({}, e.person))
|
|
|
+ return e
|
|
|
+ })
|
|
|
+ showContactDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const badgeColor = computed(() => (item) => {
|
|
|
+ return (item.person && item.person.sex) ? (item.person.sex === '1' ? '#1867c0' : 'error') : 'error'
|
|
|
+})
|
|
|
+
|
|
|
+const badgeIcon = computed(() => (item) => {
|
|
|
+ return (item.person && item.person.sex) ? (item.person.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|
Xiao_123