|
|
@@ -0,0 +1,183 @@
|
|
|
+<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="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="中文名">{{ 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="current_date" 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 abortController = ref(null)
|
|
|
+
|
|
|
+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 {
|
|
|
+ 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>
|
