人才地图-人才搜索

src/api/menduner/system/talentMap/search.ts

@@ -0,0 +1,20 @@
+import request from '@/config/axios'
+
+export const talentSearchApi = {
+	// 根据条件获取人才列表
+	getTalentList: async (data: any) => {
+		return await request.post({ 
+			url: `/api/parse/query-kg`,
+			data,
+			baseURL: import.meta.env.VITE_BASE_URL 
+		})
+	},
+
+	// 根据ID获取名片详情
+	getBusinessCardDetails: async (talent_id: number) => {
+		return await request.get({ 
+			url: `/api/parse/get-business-card/${talent_id}`, 
+			baseURL: import.meta.env.VITE_BASE_URL 
+		})
+	}
+}

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

@@ -0,0 +1,176 @@
+<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>
+      </div>
+    </div>
+  </ContentWrap>
+	
+  <ContentWrap v-if="isSearch">
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      row-key="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="中文名">{{ detail.name_zh }}</el-descriptions-item>
+					<el-descriptions-item label="英文名">{{ detail.name_en }}</el-descriptions-item>
+					<el-descriptions-item label="职位/头衔(中)">{{ detail.title_zh }}</el-descriptions-item>
+					<el-descriptions-item label="职位/头衔(英)">{{ detail.title_en }}</el-descriptions-item>
+					<el-descriptions-item label="手机号码">{{ detail.mobile }}</el-descriptions-item>
+					<el-descriptions-item label="电子邮箱">{{ detail.email }}</el-descriptions-item>
+					<el-descriptions-item label="酒店/公司名称(中)">{{ detail.hotel_zh }}</el-descriptions-item>
+					<el-descriptions-item label="酒店/公司名称(英)">{{ detail.hotel_eh }}</el-descriptions-item>
+					<el-descriptions-item label="地址(中)">{{ detail.address_zh }}</el-descriptions-item>
+					<el-descriptions-item label="地址(英)">{{ detail.address_en }}</el-descriptions-item>
+					<el-descriptions-item label="邮政编码(中)">{{ detail.postal_code_zh }}</el-descriptions-item>
+					<el-descriptions-item label="邮政编码(英)">{{ detail.postal_code_en }}</el-descriptions-item>
+					<el-descriptions-item label="品牌名称(中)">{{ detail.brand_zh }}</el-descriptions-item>
+					<el-descriptions-item label="品牌名称(英)">{{ detail.brand_en }}</el-descriptions-item>
+					<el-descriptions-item label="隶属关系(中)">{{ detail.affiliation_zh }}</el-descriptions-item>
+					<el-descriptions-item label="隶属关系(英)">{{ detail.affiliation_en }}</el-descriptions-item>
+					<el-descriptions-item label="品牌组合">{{ detail.brand_group }}</el-descriptions-item>
+					<el-descriptions-item label="固定电话">{{ detail.phone }}</el-descriptions-item>
+					<el-descriptions-item label="创建时间">{{ detail.created_at }}</el-descriptions-item>
+					<el-descriptions-item label="更新时间">{{ detail.updated_at }}</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="酒店名称" />
+						<el-table-column prop="position" label="职位名称" />
+						<el-table-column prop="address" label="日期" />
+					</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 drawer = ref(false)
+const detailsLoading = ref(false)
+const detail = ref({})
+const previewUrl = ref(null)
+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)
+    }
+  } finally {
+		detailsLoading.value = false
+	}
+}
+
+const getList = async () => {
+	loading.value = true
+	try {
+		const data = await talentSearchApi.getTalentList({ query_requirement: searchValue.value })
+		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
+		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>