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

<!-- 精英管理 -->
<template>
  <v-card class="pa-3 card-box">
    <div class="d-flex justify-space-between mb-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
        <v-tab v-for="k in tabList" :value="k.value" :key="k.value">{{ k.label }}</v-tab>
      </v-tabs>
      <!-- <div class="d-flex align-center">
        <TextInput v-model="textItems.value" :item="textItems" @appendInnerClick="handleSearch" @enter="handleSearch"></TextInput>
      </div> -->
      <v-btn color="primary" prependIcon="mdi-filter-multiple-outline" class="ml-3" @click="showDrawer = true">筛选{{ rawData.length > 0 ? rawData.length : '' }}</v-btn>
    </div>

    <div class="d-flex justify-space-between align-center mb-3" v-if="tab === 0">
      <div class="mr-5 d-flex align-center">
        <v-radio-group v-model="bounty" inline style="height: 28px;" @update:modelValue="handleChangeBounty">
          <v-radio v-model="bounty" label="普通职位" :value="false" color="primary" hide-details density="compact" class="mr-3"></v-radio>
          <v-radio v-model="bounty" label="赏金职位" :value="true" color="primary" hide-details density="compact"></v-radio>
        </v-radio-group>

        <v-radio-group class="ml-5" v-model="selected" inline style="height: 28px;" @update:modelValue="handleSelect">
          <v-radio v-model="selected" label="新投递" value="0" color="primary" hide-details density="compact" class="mr-3"></v-radio>
          <v-radio v-model="selected" label="已查看" value="1" color="primary" hide-details density="compact"></v-radio>
        </v-radio-group>
      </div>
      <div class="color-primary font-size-14 cursor-pointer" @click="FilterPageRef.handleReset(false)">重置</div>
    </div>
    <div v-if="rawData && rawData.length > 0">
      <v-chip v-for="item in rawData" :key="item.key" closable class="mr-2 mb-2" label @click:close="handleClose(item)">{{ item.title }}： {{ item.label || item.value }}</v-chip>
    </div>

    <!-- 筛选抽屉 -->
    <v-navigation-drawer v-model="showDrawer" location="right" absolute temporary width="700">
      <FilterPage ref="FilterPageRef" :jobId="route.query?.id" :jobFairId="route.query?.jobFairId" @confirm="handleConfirm" @cancel="showDrawer = false" @reset="handleScreenReset" />
    </v-navigation-drawer>

    <v-window v-model="tab" class="mt-1">
      <v-window-item v-for="k in tabList" :value="k.value" :key="k.value">
        <TablePage :items="items" :total="total"  :pageInfo="query" :tab="k.value" :statusList="statusList" @refresh="getList" @page="handleChangePage"></TablePage>
      </v-window-item>
    </v-window>
  </v-card>
</template>

<script setup>
defineOptions({ name: 'enterprise-elite-management'})
import { ref, onMounted } from 'vue'
import { getPersonCvPage } from '@/api/enterprise'
import { personCvUnfitPage } from '@/api/recruit/enterprise/personnel'
import { dealDictObjData } from '@/utils/position'
import { getDict } from '@/hooks/web/useDictionaries'
import { getInterviewInvitePage } from '@/api/recruit/enterprise/interview'
import TablePage from './components/table.vue'
import { timesTampChange } from '@/utils/date'
import { useRoute } from 'vue-router'
import FilterPage from './components/filterPage.vue'

const route  = useRoute()
const total = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10,
  status: null,
  type: null
})
const selected = ref()
const bounty = ref(null)
const showDrawer = ref(false)
const FilterPageRef = ref()
const tab = ref(0)
const tabList = ref([
  { label: '投递简历', value: 0, api: getPersonCvPage, status: null },
  { label: '已邀约', value: 1, api: getInterviewInvitePage, status: '0' },
  { label: '已入职', value: 2, api: getInterviewInvitePage, status: '1' },
  { label: '已结算', value: 3, api: getInterviewInvitePage, status: '2' },
  { label: '不合适', value: 4, api: personCvUnfitPage },
])
const textItems = ref({
  type: 'text',
  value: '',
  width: 250,
  label: '搜索姓名',
  hideDetails: true,
  clearable: true,
  appendInnerIcon: 'mdi-magnify'
})

// 状态字典
const statusList = ref([])
getDict('menduner_interview_invite_status').then(({data}) => {
  if (data && data.length) statusList.value = data
})

// 获取牛人列表
const items = ref([])
const getList = async () => {
  const api = tabList.value[tab.value].api
  if (tab.value !== 0) {
    query.value.conversationStatus = tabList.value[tab.value].status
    delete query.value.status
    delete query.value.type
  }

  const { list, total: number } = await api(query.value)
  if (!list.length) {
    items.value = []
    total.value = 0
    return
  }
  total.value = number
  items.value = list.map(e => {
    let obj = e
    obj.jobClosed = e?.job?.status === '1' || false // 职位已关闭
    if (e.person) obj.person = Object.assign(e.person, dealDictObjData({}, e.person))
    obj.job = Object.assign(e.job, dealDictObjData({}, e.job))
    obj.createTime = timesTampChange(e.createTime, 'Y-M-D h:m')
    return obj
  })
}
// 没有带id时一进来才刷新，带id由组件传值刷新
if (!route.query?.id) getList()

onMounted(() => {
  // 众聘职位
  if (route.query?.hire) {
    query.value.hire = true
    bounty.value = true
  }
  // 招聘会职位
  if (route.query?.jobFairId) {
    if (tab.value !== 0) return delete query.value.jobFairId
    query.value.jobFairId = route.query.jobFairId
  }
})

// 分页
const handleChangePage = (i) => {
  query.value.pageNo = i
  getList()
}

// 牛人姓名检索
const handleSearch = () => {
  if (textItems.value.value) query.value.name = textItems.value.value
  else delete query.value.name
  query.value.pageNo = 1
  getList()
}

// 筛选
const rawData = ref([])
const handleConfirm = (params, data) => {
  rawData.value = data
  query.value.pageNo = 1
  query.value = Object.assign(query.value, params)
  showDrawer.value = false
  getList()
}

// 筛选条件单个清除
const handleClose = (item) => {
  FilterPageRef.value.handleClear(item)
  delete query.value[item.key]
  rawData.value = rawData.value.filter(e => e.key !== item.key)
  getList()
}

// 重置
const handleScreenReset = (close) => {
  rawData.value = []
  bounty.value = ''
  selected.value = ''
  query.value = {
    pageSize: 10,
    pageNo: 1,
    status: tab.value
  }
  if (tab.value === 0) {
    query.value.status = null
    query.value.type = null
  }
  if (close) showDrawer.value = false
  getList()
}

// 职位类型选择
const handleSelect = (e) => {
  query.value.pageNo = 1
  query.value.status = e
  getList()
}

// 赏金职位
const handleChangeBounty = (e) => {
  query.value.type = e ? 1 : 0
  query.value.pageNo = 1
  getList()
}

const handleChangeTab = (val) => {
  query.value.pageNo = 1
  if (val === 0) {
    query.value.status = null
    query.value.type = null
  } else query.value.status = val
  getList()
}
</script>

<style scoped lang="scss">
</style>