menduner/src/views/enterprise/personnelManagement/components/table.vue

<template>
  <div>
    <div class="text-end">
      <v-btn v-if="tab === '0'" color="primary" :disabled="selected.length ? false : true" variant="tonal" @click="handleAction('all', 0)">不合适</v-btn>
      <v-btn v-if="tab === '1'" color="primary" :disabled="selected.length ? false : true" variant="tonal" @click="handleAction('all', 1)">入职</v-btn>
    </div>
    <v-data-table
      class="mt-3"
      v-model="selected"
      :items="items"
      :headers="headers"
      hover
      show-select
      height="60vh"
      item-value="id"
    >
      <template #bottom></template>
      <template v-slot:item.name="{ item }">
        <div class="d-flex align-center cursor-pointer" @click="handleToPersonDetail(item)">
          <v-badge
            bordered
            offset-y="6"
            :color="badgeColor(item)"
            :icon="badgeIcon(item)">
            <v-avatar size="40" :image="item.person.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
          </v-badge>
          <span class="defaultLink ml-3">{{ item?.person?.name }}</span>
        </div>
      </template>
      <template v-slot:item.exp="{ item }">
        <span v-if="item?.jobExperience && Object.keys(item?.jobExperience).length">{{ item.jobExperience.positionName }} {{ item.jobExperience.enterpriseName }}</span>
        <span v-else>未填写工作经历</span>
      </template>
      <template v-slot:item.edu="{ item }">
        <span v-if="item?.eduExperience && Object.keys(item?.eduExperience).length">{{ timesTampChange(item.eduExperience.startTime).slice(0, 4) }}-{{ timesTampChange(item.eduExperience.endTime).slice(0, 4) }} {{ item.eduExperience.schoolName }}</span>
        <span v-else>未填写教育经历</span>
      </template>
      <template v-slot:item.actions="{ item }">
        <div v-if="tab === '0'">
          <v-btn color="primary" variant="text" @click="previewFile(item.url)">查看简历</v-btn>
          <v-btn color="primary" variant="text" @click="handleAction('', 0, item)">不合适</v-btn>
        </div>
        <div v-if="tab === '1'">
          <v-btn color="primary" variant="text" @click="handleAction('', 1, item)">入职</v-btn>
        </div>
      </template>
    </v-data-table>
  </div>
</template>

<script setup>
defineOptions({ name: 'table-page'})
import { ref, computed } from 'vue'
import { previewFile } from '@/utils'
import { timesTampChange } from '@/utils/date'
import { joinEliminate, personEntryByEnterprise } from '@/api/enterprise'
import { useI18n } from '@/hooks/web/useI18n'
import Snackbar from '@/plugins/snackbar'

const { t } = useI18n()
const emit = defineEmits(['refresh'])
defineProps({
  tab: String,
  items: Array
})

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'
})

const selected = ref([])
const headers = [
  { title: '牛人', value: 'name' },
  { title: '基本信息', key: 'info', value: item => `${item.eduName}·${ item.expName }` },
  { title: '最近工作经历', value: 'exp' },
  { title: '教育经历', key: 'edu' },
  { title: '应聘职位', value: 'job.name' },
  { title: '操作', value: 'actions' }
]

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

const apiList = [
  joinEliminate, // 不合适
  personEntryByEnterprise // 入职
]

// 不合适、入职
const handleAction = async (type, index, item) => {
  const ids = type ? selected.value : [item?.id]
  if (!ids) return
  await apiList[index](ids)
  Snackbar.success(t('common.operationSuccessful'))
  emit('refresh')
}
</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;
  color: #767778;
}
</style>