menduner/src/views/recruit/enterprise/newTalentMap/labeling/index.vue

<template>
	<div>
		<v-card elevation="5" class="pa-10">
			<TextInput
        v-model="content"
        :item="textItem"
        @enter="handleSearch"
        @appendInnerClick="handleSearch"
      ></TextInput>
		</v-card>

		<v-card elevation="5" class="mt-3">
			<CtTable
				:items="items"
				class="pa-3"
				:headers="headers"
				:loading="loading"
				:disable-sort="true"
				:elevation="0"
				:isTools="false"
				:noDataText="!content ? '请先输入您的描述信息定位人才' : '暂无数据'"
				:items-per-page="-1"
				height="calc(100vh - 400px)"
				:showFixedLastItem="true"
				itemKey="id"
			>
				<template #actions="{ item }">
					<v-btn variant="text" color="primary" @click.stop="handleAnnotation(item)">标注</v-btn>
					<v-btn variant="text" color="error" @click.stop="handleDisabled(item)">禁用</v-btn>
					<v-btn variant="text" color="#008970" @click.stop="handleEnable(item)">启用</v-btn>
					<v-btn variant="text" color="error" @click.stop="handleDelete(item)">删除</v-btn>
				</template>
			</CtTable>
		</v-card>

		<!-- 标注 -->
		<CtDialog :visible="showAnnotationDialog" title="人才标注" :footer="false" widthType="1" @close="showAnnotationDialog = false">
			<v-row>
				<v-col cols="4">
					<v-card elevation="3" class="pa-3" style="height: 100%">
						<p>名片</p>
						<p>门墩儿新任命</p>
						<p>门墩儿用户简历</p>
					</v-card>
				</v-col>
				<v-col cols="8">
					<v-card elevation="3" class="pa-3">
						<div class="base-info pa-3">
							<div class="d-flex align-center">
								<div v-for="(val, index) in talentInfoKeys" :key="index" class="common-width">
									<p v-ellipse-tooltip>{{ talentItem[val.key] }}</p>
									<p v-ellipse-tooltip>{{ talentItem[val.value] }}</p>
								</div>
							</div>
							<div class="d-flex align-center my-6">
								<div class="common-width">{{ talentItem.phone }}</div>
								<div class="common-width">{{ talentItem.email }}</div>
							</div>
							<div>{{ talentItem.address }}</div>
						</div>
						<div class="my-5">
							<p>自动标注</p>
							<v-chip
								v-for="(item, index) in talentItem.automaticDimensionTags" :key="index"
								class="chip mx-2 mt-4"
								label color="primary"
							>
								{{ item }}
								<v-icon size="18" color="primary" style="margin-left: 6px;" @click="closeClick(index, 'automaticDimensionTags')">mdi-close-circle</v-icon>
							</v-chip>
						</div>
						<div>
							<p>人工标注</p>
							<v-chip
								v-for="(item, index) in talentItem.manualAnnotationTags" :key="index"
								class="chip mx-2 mt-4 cursor-pointer"
								label color="primary"
							>
								{{ item.name }}
								<v-icon size="18" color="primary" style="margin-left: 6px;" @click="closeClick(item, 'manualAnnotationTags')">mdi-close-circle</v-icon>
							</v-chip>

							<div class="mt-5">
								<v-chip
									v-for="(item, index) in tagList" :key="index"
									class="chip mx-2 mt-4 cursor-pointer"
									label color="primary"
									:disabled="talentItem.manualAnnotationTags.includes(item)"
									@click="handleAdd(item)"
								>
									<v-icon icon="mdi-plus" start></v-icon>
									{{ item.name }}
								</v-chip>
							</div>
						</div>
						<v-divider class="mt-5"></v-divider>
						<div class="d-flex justify-space-evenly my-5">
							<v-btn width="120" color="warning" elevation="5" @click="handleClose">取 消</v-btn>
							<v-btn width="120" color="primary" elevation="5" @click="handleSave">保 存</v-btn>
						</div>
					</v-card>
				</v-col>
			</v-row>
		</CtDialog>
	</div>

	<Loading :visible="annotationLoading"></Loading>
</template>

<script setup>
defineOptions({ name: 'NewTalentMapAnnotation' })
import { ref } from 'vue'
import { getLabelingList } from '@/api/recruit/enterprise/talentMap/labeling'
import { getTalentTagList } from '@/api/recruit/enterprise/talentMap/tag'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()
const loading = ref(false)
const showAnnotationDialog = ref(false)
const content = ref('查找所有在上海的五星级酒店担任总经理职位的人才')
const items = ref([
  {
    "姓名": "张三",
    "邮箱": "zhang@example.com",
    "职位": "总经理",
    "酒店名称": "上海四季酒店"
  },
  {
    "姓名": "李四",
    "邮箱": "li@example.com",
    "职位": "执行总经理",
    "酒店名称": "上海浦东丽思卡尔顿酒店"
  }
])
const headers = [
  { title: '姓名', key: '姓名', sortable: false },
  { title: '酒店名称', key: '酒店名称', sortable: false },
  { title: '职位', key: '职位', sortable: false },
  { title: '邮箱', key: '邮箱', 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 getList = async () => {
	loading.value = true
	try {
		const data = await getLabelingList({ query_requirement: content.value })
		console.log(data, '列表========')
		items.value = data || []
	} finally {
		loading.value = false
	}
}
getList()


// 搜索
const handleSearch = async () => {
	console.log('搜索', content.value)
	if (!content.value) return Snackbar.warning('请输入您的描述信息定位人才')
	getList()
}

// 标注
const talentItem = ref({
	name: '张三',
	enName: 'Tom',
	postName: '总经理',
	enPostName: 'General Manager',
	inaugurationHotel: '南京洲际酒店',
	enInaugurationHotel: 'Nanjing InterContinental Hotel',
	groupName: '洲际集团',
	enGroupName: 'IHG',
	phone: '13800138000',
	email: 'zhangsan@163.com',
	address: '南京市人民路123号',
	automaticDimensionTags: ['富强', '民主', '文明', '和谐'],
	manualAnnotationTags: [],
})
const talentInfoKeys = [
	{ key: 'name', value: 'enName' },
	{ key: 'postName', value: 'enPostName' },
	{ key: 'inaugurationHotel', value: 'enInaugurationHotel' },
	{ key: 'groupName', value: 'enGroupName' },
]

// 获取人才标签
const tagList = ref([])
const getTagList = async () => {
	annotationLoading.value = true
	try {
		const data = await getTalentTagList()
		tagList.value = data || []
	} finally {
		annotationLoading.value = false
	}
}

// 标注
const annotationLoading = ref(false)
const handleAnnotation = async (item) => {
	await getTagList()
	showAnnotationDialog.value = true
}

// 删除
const closeClick = (index, dataKey) => {
	if (dataKey === 'manualAnnotationTags') {
		const dataIndex = talentItem.value[dataKey].findIndex((i) => i === index)
		if (dataIndex !== -1) index = dataIndex
	}
	talentItem.value[dataKey].splice(index, 1)
}

// 手动标注添加
const handleAdd = (item) => {
	talentItem.value.manualAnnotationTags.push(item)
}

// 禁用
const handleDisabled = (item) => {
	console.log(item, '禁用')
	Confirm(t('common.confirmTitle'), '是否确定禁用此人才数据？').then(async () => {
    Snackbar.success(t('common.operationSuccessful'))
  })
}

// 启用
const handleEnable = (item) => {
	console.log(item, '启用')
	Confirm(t('common.confirmTitle'), '是否确定启用此人才数据？').then(async () => {
    Snackbar.success(t('common.operationSuccessful'))
  })
}

// 删除
const handleDelete = (item) => {
	console.log(item, '删除')
	Confirm(t('common.confirmTitle'), '是否确定删除？').then(async () => {
    // await deleteInvoiceTitle(id)
    Snackbar.success(t('common.delMsg'))
    // getList()
  })
}

const handleClose = () => {
	showAnnotationDialog.value = false
}

const handleSave = async () => {
	handleClose()
}
</script>

<style scoped lang="scss">
.base-info {
	background-color: #f7f8fa;
	border-radius: 6px;
}
.common-width {
	width: 25%;
	max-width: 25%;
}
</style>