menduner-admin/src/views/menduner/system/talentMap/search/index.vue

<template>
  <ContentWrap>
    <div class="box flex items-center justify-center decoration-column transition-duration-500" :class="{ active: isSearch }">
      <div class="!w-75%">
        <el-input
          v-model.trim="searchValue"
          size="large"
					clearable
          placeholder="请输入您的描述信息定位人才"
          @keydown.enter="handleSearch"
					@clear="handleSearch('clear')"
        >
					<template #append>
						<el-button :icon="Search" @click="handleSearch" />
					</template>
				</el-input>
				<el-text v-if="!isSearch" class="text-xs !color-gray-400">例如：有酒店筹开经验，担任总经理的人</el-text>
      </div>
    </div>
  </ContentWrap>
	
  <ContentWrap v-if="isSearch">
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      row-key="pg_id"
    >
      <el-table-column label="中文名" align="left" prop="name_zh" />
      <el-table-column label="英文名" align="left" prop="name_en" />
      <el-table-column label="联系电话" align="center" prop="mobile" />
      <el-table-column label="电子邮箱" align="center" prop="email" />
      <el-table-column label="更新时间" align="center" prop="updated_at" />
      <el-table-column label="操作" align="left">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetails(scope.row.pg_id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

	<el-drawer
		v-model="drawer"
		class="!w-50vw"
		:with-header="false"
	>
		<div v-loading="detailsLoading">
			<div v-if="detail && Object.keys(detail).length > 0">
				<div class="mb-30px" v-if="previewUrl">
					<div class="el-descriptions__header el-descriptions__title">名片</div>
					<div class="text-center w-100% cursor-pointer">
						<el-image :src="previewUrl" class="w-300px h-500px" :preview-src-list="[previewUrl]" />
					</div>
				</div>

				<el-descriptions title="基本信息" :column="1" border>
					<el-descriptions-item label="人才标签">
						<el-tag v-for="k in talentTags" :key="k.talent" type="success" class="mr-10px my-10px">{{ k.tag }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item 
						v-for="val in keyArr" 
						:key="val.value" 
						:label="val.label"
					>
						{{ detail[val.value] ?? '' }}
					</el-descriptions-item>
					<el-descriptions-item label="状态">
						<el-tag :type="detail.status === 'active' ? 'primary' : 'danger'">
							{{ detail.status === 'active' ? '已启用' : '已禁用' }}
						</el-tag>
					</el-descriptions-item>
				</el-descriptions>

				<div class="mt-30px career">
					<div class="el-descriptions__header el-descriptions__title">职业轨迹</div>
					<el-table :data="detail.career_path" border>
						<el-table-column prop="company_name" label="酒店名称">
							<template #default="{ row }">{{ row.company_name ?? '-'}}</template>
						</el-table-column>
						<el-table-column prop="position" label="职位名称">
							<template #default="{ row }">{{ row.position ?? '-'}}</template>
						</el-table-column>
						<el-table-column prop="current_date" label="日期">
							<template #default="{ row }">{{ row.current_date ?? '-'}}</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<el-empty v-else description="暂无详细信息，去查看其他人的信息吧~" />
		</div>
	</el-drawer>

</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { talentSearchApi } from '@/api/menduner/system/talentMap/search'
import { talentLabelingApi } from '@/api/menduner/system/talentMap/labeling'

const message = useMessage() // 消息弹窗
const searchValue = ref(null)
const formRef = ref()
const loading = ref(false)
const list = ref([])
const abortController = ref(null)

const drawer = ref(false)
const detailsLoading = ref(false)
const detail = ref({})
const talentTags = ref([])
const previewUrl = ref(null)
const keyArr = [
  { label: '中文名', value: 'name_zh' },
  { label: '英文名', value: 'name_en' },
  { label: '职位/头衔(中)', value: 'title_zh' },
  { label: '职位/头衔(英)', value: 'title_en' },
  { label: '手机号码', value: 'mobile' },
  { label: '电子邮箱', value: 'email' },
  { label: '酒店/公司名称(中)', value: 'hotel_zh' },
  { label: '酒店/公司名称(英)', value: 'hotel_eh' },
  { label: '地址(中)', value: 'address_zh' },
  { label: '地址(英)', value: 'address_en' },
  { label: '邮政编码(中)', value: 'postal_code_zh' },
  { label: '邮政编码(英)', value: 'postal_code_en' },
  { label: '品牌名称(中)', value: 'brand_zh' },
  { label: '品牌名称(英)', value: 'brand_en' },
  { label: '隶属关系(中)', value: 'affiliation_zh' },
  { label: '隶属关系(英)', value: 'affiliation_en' },
  { label: '品牌组合', value: 'brand_group' },
  { label: '固定电话', value: 'phone' },
  { label: '创建时间', value: 'created_at' },
  { label: '更新时间', value: 'updated_at' }
]

const handleDetails = async (id) => {
	if (!id) return

	drawer.value = true
	detailsLoading.value = true
	try {
    const result = await talentSearchApi.getBusinessCardDetails(id)
    detail.value = result || {}

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

		// 获取人才标签
		const tagData = await talentLabelingApi.getTalentTagById(id)
		talentTags.value = tagData ?? []
  } finally {
		detailsLoading.value = false
	}
}

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

const isSearch = ref(false)
const handleSearch = (type='search') => {
	if (type === 'clear') {
		list.value = []
		isSearch.value = false
		if (abortController.value) {
      abortController.value.abort() 
      abortController.value = null
    }
		return
	}
	isSearch.value = true
	if (!searchValue.value) return message.warning('请输入查询条件')
	getList()
}
</script>

<style scoped lang="scss">
.box {
  min-height: 500px;
  &.active {
    min-height: unset;
  }
}
:deep {
	.career {
		.el-table th.el-table__cell {
			background-color: #f5f7fa;
		}
	}
}
</style>