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

<template>
  <v-card class="card-box pa-5">
    <div class="d-flex justify-space-between">
      <div></div>
      <v-btn color="primary" prependIcon="mdi-filter-multiple-outline" class="half-button" variant="tonal" @click="openDrawer">筛选</v-btn>
    </div>
    <div v-if="dataList?.length" class="mt-3">
      <v-data-table
        class="mt-3"
        :items="dataList"
        :headers="headers"
        hover
        :disable-sort="true"
        item-value="id"
      >
        <template #bottom></template>
        <template v-slot:[`item.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 v-slot:[`item.advantage`]="{ item }">
          <template v-if="item.advantage">
            <v-btn color="primary" variant="tonal" @click="advantageDetail(item.advantage)">查看</v-btn>
          </template>
        </template>
        <template v-slot:[`item.actions`]="{ item }">
          <v-btn color="primary" variant="text" @click="handleRemove(item)">移除</v-btn>
          <v-btn color="primary" variant="text" @click="talentPoolDetails(item)">人才详情</v-btn>
        </template>
      </v-data-table>
      <CtPagination
        :total="total"
        :page="pageInfo.pageNo"
        :limit="pageInfo.pageSize"
        @handleChange="handleChangePage"
      ></CtPagination>
    </div>
    <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-card>
</template>

<script setup>
// import { useRouter } from 'vue-router'
// const router = useRouter()
defineOptions({ name: 'enterprise-talent-pool'})
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import { computed, reactive, ref } from 'vue'
import Snackbar from '@/plugins/snackbar'
import FilterPage from './components/filter.vue'
import { dealDictArrayData } from '@/utils/position'
import { getTalentPoolPage } from '@/api/recruit/enterprise/talentPool'
import { removeFormTalentPool } from '@/api/recruit/enterprise/personnel'
import { timesTampChange } from '@/utils/date'
import { getUserAvatar } from '@/utils/avatar'


let query = {}
const screen = ref(false)
const dataList = ref([])
// dataList.value = [] // 暂定无数据展示
const tipsText = ref('暂无数据')
const total = ref(2)
const pageInfo = reactive({ pageNo: 1, pageSize: 10 })


// 获取数据
const getData = async () => {
  const obj = { ...pageInfo, ...query }
  const { list, total: number } = await getTalentPoolPage(obj)
  total.value = number
  dataList.value = list?.length ? dealDictArrayData([], list) : []
}
getData()


// 移出人才库 
const handleRemove = async (item) => {
  if (!item.userId) return Snackbar.warning('数据异常')
  await removeFormTalentPool(item.userId)
  Snackbar.success(t('common.operationSuccessful'))
  getData()
}

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

// 筛选
const handleConfirm = (params) => {
  screen.value = false
  pageInfo.pageNo = 1
  query = { ...params }
  getData()
}

const FilterPageRef = ref()
const openDrawer = () => {
  screen.value = true
  if (Object.keys(query).length) FilterPageRef.value?.setValue(query)
  else FilterPageRef.value?.resetValue()
}

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: 'createTime', sortable: false, value: item =>  timesTampChange(item.createTime, '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 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 talentPoolDetails = ({ userId, id }) => {
  if (!userId || !id) return
  window.open(`/recruit/enterprise/talentPool/details/${userId}?id=${id}`)
}
</script>

<style scoped lang="scss">
.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>