|
@@ -1,11 +1,56 @@
|
|
|
<template>
|
|
|
<v-card class="card-box pa-5" style="height: 100%;">
|
|
|
- <div class="d-flex justify-center">
|
|
|
- <TextUI v-model="query.content" :item="textItem" @click="openDrawer" @appendInnerClick="openDrawer"></TextUI>
|
|
|
+ <div class="d-flex flex-column align-center" :class="{'v-center': init}">
|
|
|
+ <TextUI
|
|
|
+ v-model="content"
|
|
|
+ :item="textItem"
|
|
|
+ @keyup.enter="handleConfirm"
|
|
|
+ @appendInnerClick="handleConfirm"
|
|
|
+ ></TextUI>
|
|
|
+ <div class="align-center">
|
|
|
+ <template v-if="init && defaultLabelsShow?.length">
|
|
|
+ <v-btn
|
|
|
+ v-for="(val, index) in defaultLabelsShow" :key="val + index"
|
|
|
+ class="mr-3 my-2 py-0 px-2"
|
|
|
+ density="comfortable"
|
|
|
+ color="primary" variant="tonal"
|
|
|
+ v-bind="props"
|
|
|
+ @click="clickChip(index)"
|
|
|
+ >
|
|
|
+ {{ val }}
|
|
|
+ </v-btn>
|
|
|
+ <v-btn class="ml-0 my-1 py-0 px-2" density="comfortable" variant="tonal" color="error" @click="moreLabels">
|
|
|
+ 更多人才标签...
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <v-btn
|
|
|
+ v-for="(val, index) in chosenLabels" :key="val + index"
|
|
|
+ class="mr-3 my-2 py-0 px-2"
|
|
|
+ density="comfortable"
|
|
|
+ color="primary" variant="tonal"
|
|
|
+ v-bind="props"
|
|
|
+ >
|
|
|
+ {{ val }}
|
|
|
+ <v-icon class="ml-1" style="margin-top: 1px;" @click="deleteChip(index)">mdi-close</v-icon>
|
|
|
+ </v-btn>
|
|
|
+ <v-btn
|
|
|
+ class="ml-0 my-1 py-0 px-2"
|
|
|
+ density="comfortable"
|
|
|
+ variant="tonal"
|
|
|
+ :color="chosenLabels?.length ? '' : 'primary'"
|
|
|
+ append-icon="mdi mdi-menu-down"
|
|
|
+ @click="moreLabels"
|
|
|
+ >
|
|
|
+ {{ chosenLabels?.length ? '选择其他人才标签' : '人才标签'}}
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
<!-- <v-btn color="primary" class="half-button" variant="tonal" @click="openDrawer">职位匹配</v-btn> -->
|
|
|
</div>
|
|
|
<!-- 人员信息表单 -->
|
|
|
<v-data-table
|
|
|
+ v-if="dataList?.length"
|
|
|
class="mt-3"
|
|
|
:items="dataList"
|
|
|
:headers="headers"
|
|
@@ -30,11 +75,6 @@
|
|
|
<span class="defaultLink ml-3">{{ item?.name }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template v-slot:[`item.advantage`]="{ item }">
|
|
|
- <template v-if="item.advantage">
|
|
|
- <v-btn color="primary" variant="text" @click="advantageDetail(item.advantage)">查看TA的优势</v-btn>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
<template v-slot:[`item.actions`]="{ item }">
|
|
|
<v-btn color="primary" variant="text" @click="talentPoolDetails(item)">查看</v-btn>
|
|
|
</template>
|
|
@@ -46,40 +86,30 @@
|
|
|
:limit="pageInfo.pageSize"
|
|
|
@handleChange="handleChangePage"
|
|
|
></CtPagination>
|
|
|
- <!-- <Empty v-else :message="tipsText" :elevation="false" class="mt-15"></Empty> -->
|
|
|
- <v-navigation-drawer v-model="screen" location="right" absolute temporary width="700">
|
|
|
- <FilterPage
|
|
|
- ref="FilterPageRef"
|
|
|
- @confirm="handleConfirm"
|
|
|
- @cancel="screen = false"
|
|
|
- ></FilterPage>
|
|
|
- </v-navigation-drawer>
|
|
|
- <v-navigation-drawer v-model="advantageShow" location="right" absolute temporary width="800">
|
|
|
- <div class="pa-3">
|
|
|
- <div class="resume-header">
|
|
|
- <div class="resume-title">个人优势</div>
|
|
|
- </div>
|
|
|
- <div class="requirement" v-html="advantageText?.replace(/\n/g, '</br>')"></div>
|
|
|
- </div>
|
|
|
- </v-navigation-drawer>
|
|
|
+ <Empty v-if="!init && !total" :message="tipsText" :elevation="false" class="mt-15"></Empty>
|
|
|
</v-card>
|
|
|
+ <CtDialog :visible="showMore" titleClass="text-h6" title="选择人才标签" @close="showMore = false" @submit="handleSubmit">
|
|
|
+ <div style="width: 80%; margin: 0 auto; min-height: 400px;">
|
|
|
+ <CtForm :items="formItems" style="width: 100%;"></CtForm>
|
|
|
+ </div>
|
|
|
+ </CtDialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
defineOptions({ name: 'enterprise-talent-map'})
|
|
|
import { getRecruitPersonMapPage } from '@/api/recruit/enterprise/resumeManagement/talentMap'
|
|
|
+import { getRocketLabelList } from '@/api/recruit/enterprise/resumeManagement/talentMap'
|
|
|
import { dealDictArrayData } from '@/utils/position'
|
|
|
import { getUserAvatar } from '@/utils/avatar'
|
|
|
import { timesTampChange } from '@/utils/date'
|
|
|
-import FilterPage from './components/filter.vue'
|
|
|
import TextUI from '@/components/FormUI/TextInput'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
|
|
|
import { computed, reactive, ref } from 'vue'
|
|
|
|
|
|
-const screen = ref(false)
|
|
|
const loading = ref(false)
|
|
|
|
|
|
-let query = {}
|
|
|
+const content = ref('')
|
|
|
const pageInfo = reactive({ pageNo: 1, pageSize: 10 })
|
|
|
const dataList = ref([])
|
|
|
const total = ref(0)
|
|
@@ -95,23 +125,86 @@ const headers = [
|
|
|
{ title: '所在城市', key: 'areaName', sortable: false },
|
|
|
{ title: '户籍地', key: 'regName', sortable: false },
|
|
|
{ title: '首次工作时间', key: 'firstWorkTime', sortable: false, value: item => timesTampChange(item.firstWorkTime, 'Y-M-D') },
|
|
|
- { title: '个人优势', key: 'advantage', sortable: false },
|
|
|
+ // { title: '个人优势', key: 'advantage', sortable: false },
|
|
|
{ title: '工作年限', key: 'expName', sortable: false },
|
|
|
{ title: '最高学历', key: 'eduName', sortable: false },
|
|
|
{ title: '操作', value: 'actions', sortable: false }
|
|
|
]
|
|
|
|
|
|
+const init = ref(true)
|
|
|
+const labelList = ref([])
|
|
|
+const chosenLabels = ref([])
|
|
|
+const defaultLabelsShow = ref([])
|
|
|
+// 人才标签
|
|
|
+const getLabelData = async () => {
|
|
|
+ const res = await getRocketLabelList({ current: 1, size:9999, type: 'person' }) //type: job enterprise person
|
|
|
+ labelList.value = res?.records?.length ? res.records : []
|
|
|
+ defaultLabelsShow.value = labelList.value?.length ? labelList.value.slice(0, 15) : [] // 默认展示且没有删除按钮
|
|
|
+ //
|
|
|
+ const labelsItem = formItems.value.options.find(f => f.key === 'labels')
|
|
|
+ if (labelsItem) {
|
|
|
+ labelsItem.items = labelList.value?.length ? labelList.value.map(e => ({ label: e, value: e })) : []
|
|
|
+ }
|
|
|
+}
|
|
|
+getLabelData()
|
|
|
+
|
|
|
+const showMore = ref(false)
|
|
|
+const moreLabels = () => {
|
|
|
+ const labelsItem = formItems.value.options.find(f => f.key === 'labels')
|
|
|
+ if (labelsItem) {
|
|
|
+ labelsItem.value = chosenLabels.value
|
|
|
+ }
|
|
|
+ showMore.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const clickChip = (index) => {
|
|
|
+ chosenLabels.value = [labelList.value[index]]
|
|
|
+ handleConfirm()
|
|
|
+}
|
|
|
+
|
|
|
+const deleteChip = (index) => {
|
|
|
+ chosenLabels.value.splice(index, 1)
|
|
|
+ handleConfirm()
|
|
|
+}
|
|
|
+
|
|
|
+const formItems = ref({
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ type: 'autocomplete',
|
|
|
+ key: 'labels',
|
|
|
+ value: null,
|
|
|
+ label: '人才标签 ',
|
|
|
+ multiple: true,
|
|
|
+ outlined: true,
|
|
|
+ itemText: 'label',
|
|
|
+ itemValue: 'value',
|
|
|
+ clearable: false,
|
|
|
+ items: [
|
|
|
+ // { label: '标签', value: '0' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+})
|
|
|
+const handleSubmit = () => {
|
|
|
+ const labelsItem = formItems.value.options.find(f => f.key === 'labels')
|
|
|
+ chosenLabels.value = labelsItem?.value?.length ? labelsItem.value : []
|
|
|
+ showMore.value = false
|
|
|
+ handleConfirm()
|
|
|
+}
|
|
|
+
|
|
|
// 获取数据
|
|
|
const getData = async () => {
|
|
|
- const obj = { ...pageInfo, ...query }
|
|
|
- // console.log('obj', obj)
|
|
|
loading.value = true
|
|
|
+ init.value = false
|
|
|
+ const obj = { ...pageInfo, content: content.value }
|
|
|
+ if (chosenLabels.value?.length) obj.labels = chosenLabels.value
|
|
|
+ //
|
|
|
const res = await getRecruitPersonMapPage(obj)
|
|
|
total.value = res?.total ? res.total-0 : 0
|
|
|
dataList.value = res?.list?.length ? dealDictArrayData([], res?.list) : []
|
|
|
loading.value = false
|
|
|
}
|
|
|
-getData()
|
|
|
+// getData()
|
|
|
|
|
|
const handleChangePage = (e) => {
|
|
|
pageInfo.pageNo = e
|
|
@@ -119,26 +212,12 @@ const handleChangePage = (e) => {
|
|
|
}
|
|
|
|
|
|
// 筛选
|
|
|
-const handleConfirm = (params) => {
|
|
|
- screen.value = false
|
|
|
+const handleConfirm = () => {
|
|
|
+ if (!chosenLabels.value?.length && !content.value && init.value) return Snackbar.warning('请先输入内容或选择人才标签!')
|
|
|
pageInfo.pageNo = 1
|
|
|
- query = { ...params }
|
|
|
getData()
|
|
|
}
|
|
|
|
|
|
-const advantageShow = ref(false)
|
|
|
-let advantageText = ''
|
|
|
-const advantageDetail = (advantage) => {
|
|
|
- advantageText = advantage
|
|
|
- advantageShow.value = true
|
|
|
-}
|
|
|
-
|
|
|
-const FilterPageRef = ref()
|
|
|
-const openDrawer = () => {
|
|
|
- screen.value = true
|
|
|
- FilterPageRef.value?.open(query)
|
|
|
-}
|
|
|
-
|
|
|
const badgeColor = computed(() => (item) => {
|
|
|
return (item && item.sex) ? (item.sex === '1' ? '#1867c0' : 'error') : 'error'
|
|
|
})
|
|
@@ -149,11 +228,13 @@ const badgeIcon = computed(() => (item) => {
|
|
|
|
|
|
const textItem = ref({
|
|
|
type: 'text',
|
|
|
- width: 600,
|
|
|
+ width: 1000,
|
|
|
value: '',
|
|
|
- label: '职位匹配',
|
|
|
- clearable: false,
|
|
|
- readonly: true,
|
|
|
+ // label: '职位匹配',
|
|
|
+ label: '请输入职位匹配相关内容',
|
|
|
+ placeholder: '回车开始人才匹配',
|
|
|
+ clearable: true,
|
|
|
+ // readonly: true,
|
|
|
appendInnerIcon: 'mdi-magnify'
|
|
|
})
|
|
|
|
|
@@ -172,6 +253,15 @@ const talentPoolDetails = ({ userId, id }) => {
|
|
|
:deep(.v-selection-control__input) {
|
|
|
color: var(--v-primary-base) !important;
|
|
|
}
|
|
|
+.card-box {
|
|
|
+ position: relative;
|
|
|
+ .v-center {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 50%;
|
|
|
+ translate: -50% -50%;
|
|
|
+ }
|
|
|
+}
|
|
|
.requirementBox {
|
|
|
width: 150px;
|
|
|
height: 28px;
|