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

<template>
	<div>
		<v-card elevation="5" class="px-10 py-10 d-flex flex-column justify-center" :height="items.length ? 'auto' : '300px'">
			<div class="d-flex align-center">
        <TextInput
          v-model="content"
          :item="textItem"
          @enter="handleSearch"
          @appendInnerClick="handleSearch"
        ></TextInput>
        <v-btn color="primary" width="100" class="ml-5" :loading="loading" @click="handleSearch">搜 索</v-btn>
      </div>
      <div v-if="!isSearch" class="color-999 mt-1 font-size-14">例如：有酒店筹开经验，且担任总经理的人</div>
		</v-card>

		<v-card v-if="isSearch" elevation="5" class="mt-3">
			<CtTable
				:items="items"
				class="pa-3"
				:headers="headers"
				:loading="loading"
				:disable-sort="true"
				:elevation="0"
				:isTools="false"
				:items-per-page="-1"
				height="calc(100vh - 400px)"
				:showFixedLastItem="true"
				itemKey="id"
			>
				<template #actions="{ item }">
					<v-btn variant="text" color="primary" @click.stop="handleDetail(item)">详 情</v-btn>
				</template>
			</CtTable>
		</v-card>

		<v-navigation-drawer v-model="showDetail" absolute location="right" rounded temporary width="700" class="pa-5">
      <!-- 名片 -->
      <div v-if="previewUrl">
        <div class="color-primary font-size-18 font-weight-bold">名片</div>
		    <div class="text-center cursor-pointer" @click="showPreview = true">
          <img width="300" height="400" :src="previewUrl" />
        </div>
      </div>
      <!-- 基本信息 -->
      <baseInfo :data="detail" :tagList="talentTags"></baseInfo>
      <!-- 职业轨迹 -->
      <careerPath :data="detail"></careerPath>
		</v-navigation-drawer>
	</div>

	<Loading :visible="detailLoading"></Loading>

  <PreviewImage v-if="showPreview" :initialIndex="0" :urlList="[previewUrl]" @close="showPreview = !showPreview" />
</template>

<script setup>
defineOptions({ name: 'NewTalentMapSearch' })
import { ref } from 'vue'
import { getTalentList, getBusinessCardDetails, getTalentCardByImagePath, getTalentTagById } from '@/api/recruit/enterprise/talentSearch'
import Snackbar from '@/plugins/snackbar'
import baseInfo from './components/baseInfo.vue'
import careerPath from './components/careerPath.vue'

const loading = ref(false)
const showPreview = ref(false)
const detailLoading = ref(false)
const content = ref('')
const items = ref([])
const headers = [
  { title: '中文名', key: 'name_zh', sortable: false },
  { title: '英文名', key: 'name_en', sortable: false },
  { title: '联系电话', key: 'mobile', sortable: false },
  { title: '电子邮箱', key: 'email', sortable: false },
  { title: '更新时间', key: 'updated_at', sortable: false },
  { title: '操作', key: 'actions', sortable: false, align: 'center' }
]
const textItem = ref({
  type: 'text',
  value: '',
  label: '请输入您的描述信息定位人才',
  placeholder: '请输入您的描述信息，例如：查找所有在上海的五星级酒店担任总经理职位的人才',
  clearable: true,
	hideDetails: true,
  appendInnerIcon: 'mdi-magnify'
})
const isSearch = ref(false)
const abortController = ref(null)

// 人才列表
const getList = async () => {
	loading.value = true
	try {
    abortController.value = new AbortController()
		const signal = abortController.value.signal
		const data = await getTalentList({ query_requirement: content.value }, signal)
    if (!data || !data.length) {
      Snackbar.warning('暂无数据，请更换查询条件后再试')
      items.value = []
      isSearch.value = false
      return
    }
    items.value = data || []
	} finally {
		loading.value = false
	}
}

// 查看详情
const showDetail = ref(false)
const detail = ref({})
const talentTags = ref([])
const previewUrl = ref(null)
const handleDetail = async ({ pg_id }) => {
	if (!pg_id) {
		return
	}

  detailLoading.value = true
	try {
    const result = await getBusinessCardDetails(pg_id)
    if (!result || !Object.keys(result).length) return Snackbar.warning('暂无详细信息，去查看其他人的信息吧~')
    detail.value = result

    // 获取名片预览
    if (result?.image_path) {
      const data = await getTalentCardByImagePath(result.image_path)
      previewUrl.value = URL.createObjectURL(data)
    }

    // 获取人才标签
		const tagData = await getTalentTagById(pg_id)
		talentTags.value = tagData ?? []

    showDetail.value = true
  } finally {
    detailLoading.value = false
  }
}

// 搜索
const handleSearch = async (value, type) => {
  if (type === 'clear') {
    items.value = []
    isSearch.value = false
    if (abortController.value) {
      abortController.value.abort() 
      abortController.value = null
    }
    return
  }
  isSearch.value = true
  if (!type && !content.value) return Snackbar.warning('请输入您的描述信息定位人才')
  getList()
}
</script>

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