menduner/src/views/recruit/enterprise/talentMap/index.vue

<template>
<div>
  <v-card class="card-box pa-5" style="height: 100%;">
    <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>
      </div>
    </div>
    <template v-if="!init">
      <span class="mr-2 color-666" style="width: 68px; min-width: 68px;">人才标签：</span>
      <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="mr-3 my-2 py-0 px-0"
        density="comfortable"
        color="primary" variant="tonal"
        @click="moreLabels"
      >
        <v-icon>mdi-plus-box</v-icon>
      </v-btn> -->
      <v-btn icon="mdi-plus" class="mr-8" v-bind="props" variant="outlined" size="x-small" @click="moreLabels"></v-btn>
      <span v-if="chosenLabels?.length" class="my-2" style="font-size: 14px;cursor: pointer;color: var(--color-999);" @click="resetLabel">清空标签</span>
    </template>
    <!-- 人员信息表单 -->
    <CtTable
      v-if="dataList?.length"
      class="mt-3"
      :items="dataList"
      :headers="headers"
      :loading="loading"
      :elevation="0"
      :isTools="false"
      :showPage="true"
      :total="total"
      :page-info="pageInfo"
      itemKey="id"
      @pageHandleChange="handleChangePage"
    >
      <template #name="{ item }">
        <div class="d-flex align-center cursor-pointer" @click="talentPoolDetails(item)">
          <v-badge
            v-if="item?.sex === '1' || item?.sex === '2'"
            bordered
            offset-y="6"
            :color="badgeColor(item)"
            :icon="badgeIcon(item)">
            <v-avatar size="40" :image="getUserAvatar(item.avatar, item.sex)"></v-avatar>
          </v-badge>
          <v-avatar v-else size="40" :image="getUserAvatar(item.avatar, item.sex)"></v-avatar>
          <span class="defaultLink ml-3">{{ item?.name }}</span>
        </div>
      </template>
      <template #actions="{ item }">
        <v-btn color="primary" variant="text" @click="talentPoolDetails(item)">查看</v-btn>
      </template>
    </CtTable>
    <Empty v-if="!init && !total" :message="loading ? '加载中...' : '没有找到对应人才信息，请换个条件搜索'" :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>
</div>
</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 TextUI from '@/components/FormUI/TextInput'
import Snackbar from '@/plugins/snackbar'

import { computed, reactive, ref } from 'vue'

const loading = ref(false)

const content = ref('')
const pageInfo = reactive({ pageNo: 1, pageSize: 10 })
const dataList = ref([])
const total = ref(0)
const headers = [
  { title: '姓名', key: 'name', sortable: false },
  { title: '求职状态', key: 'jobStatusName', sortable: false },
  // { title: '求职类型', key: 'jobName', sortable: false },
  { title: '电话号码', key: 'phone', sortable: false },
  // { title: '常用邮箱', key: 'email', sortable: false },
  // { title: '微信二维码', key: 'wxCode', sortable: false },
  { title: '出生日期', key: 'birthday', sortable: false, value: item =>  timesTampChange(item.birthday, 'Y-M-D') },
  { title: '婚姻状况', key: 'maritalStatusName', sortable: false },
  { 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: '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 resetLabel = () => {
  chosenLabels.value = []
  handleConfirm()
}

const formItems = ref({
  options: [
    {
      type: 'autocomplete',
      key: 'labels',
      value: null,
      label: '人才标签 ',
      multiple: true,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      clearable: true,
      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 () => {
  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()

const handleChangePage = (e) => {
  pageInfo.pageNo = e
  getData()
}

// 筛选
const handleConfirm = () => {
  if (!chosenLabels.value?.length && !content.value) { // && init.value
    Snackbar.warning('请先输入内容或选择人才标签！')
    init.value = true
    dataList.value = []; total.value = 0
    return
  }
  pageInfo.pageNo = 1
  getData()
}

const badgeColor = computed(() => (item) => {
  return (item && item.sex) ? (item.sex === '1' ? '#1867c0' : 'error') : 'error'
})

const badgeIcon = computed(() => (item) => {
  return (item && item.sex) ? (item.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'
})

const textItem = ref({
  type: 'text',
  width: 1000,
  value: '',
  // label: '职位匹配',
  label: '请输入职位匹配相关内容',
  placeholder: '回车开始人才匹配',
  clearable: false,
  // readonly: true,
  appendInnerIcon: 'mdi-magnify'
})

// 人才详情
const talentPoolDetails = ({ userId, id }) => {
  if (!userId || !id) return
  window.open(`/recruit/enterprise/talentPool/details/${userId}?id=${id}`)
}

</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important;
}
: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;
  line-height: 28px;
  // overflow: hidden;
}
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
  // width: 60%;
}
.list-item {
  border: 1px solid #e5e6eb;
}
.top {
  display: flex;
  background-color: #f7f8fa;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: var(--color-666);
  padding: 0 20px;
}
.user-name {
  font-size: 18px;
  font-weight: 700;
  color: #555;
}
.user-info {
  color: var(--color-666);
  font-size: 14px;
  font-weight: 500;
}
:deep(.v-timeline-divider__dot--size-small) {
  width: 10px !important;
  height: 10px !important;
  margin-top: 10px !important;
}
:deep(.v-timeline-divider__inner-dot) {
  width: 10px !important;
  height: 10px !important;
}
.bottom {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  .experience {
    width: 54%;
    height: 100%;
  }
  .edu {
    width: 40%;
    height: 100%;
  }
}
.second-title {
  color: var(--color-666);
  font-size: 15px;
}
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-666);
  font-size: 13px;
  .timeline-item-name {
    width: 26%;
  }
}
:deep(.v-timeline-item__body) {
  width: 100%;
}
:deep(.v-timeline--vertical.v-timeline) {
  row-gap: 0;
}
</style>