测试数据

src/views/menduner/system/talentMap/store/components/info.vue

@@ -2,7 +2,7 @@
   <div style="height: 65vh; overflow-y: auto;" >
     <slot name="header"></slot>
     <el-descriptions title="基础信息" :column="2" border>
-      <el-descriptions-item min-width="120" label="姓名（中）">--</el-descriptions-item>
+      <el-descriptions-item min-width="120" label="姓名（中）">{{ data?.title || '--' }}</el-descriptions-item>
       <el-descriptions-item min-width="120" label="姓名（英）">--</el-descriptions-item>
       <el-descriptions-item min-width="120" label="职位/头衔（中）">--</el-descriptions-item>
       <el-descriptions-item min-width="120" label="职位/头衔（英）">--</el-descriptions-item>
@@ -47,9 +47,14 @@
 
 <script setup>
 defineOptions({ name: 'TalentMapStoreMergeInfo' })
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
 
-
-const talentTags = ref([{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}])
+const talentTags = ref(props.data?.talentTags || [])
 
 </script>
 

src/views/menduner/system/talentMap/store/components/merge.vue

@@ -13,7 +13,7 @@
 					<template #header>
 						<CardTitle title="当前记录" />
 					</template>
-					<infoForm />
+					<infoForm :data="currentData" />
 				</el-card>
 			</el-col>
 			<el-col :span="12">
@@ -21,24 +21,26 @@
 					<template #header>
 						<CardTitle title="重复记录" />
 					</template>
-					<el-carousel :autoplay="false" indicator-position="none" height="65vh">
-						<el-carousel-item v-for="(info, infoIndex) in infoList" :key="infoIndex + 'info'" >
-							<infoForm >
-								<template #header>
-									<el-button type="primary" size="small" style="margin-bottom: 10px;">点击合并到此记录</el-button>
-								</template>
-								<template #thumbnail>
-									<div style="height: 140px;"></div>
-								</template>
-								<!-- 缩略图 -->
-							</infoForm>
-						</el-carousel-item>
-					</el-carousel>
+					<infoForm :data="activeThumbnail">
+						<template #header>
+							<el-button type="primary" size="small" style="margin-bottom: 10px;">点击合并到此记录</el-button>
+						</template>
+						<template #thumbnail>
+							<div style="height: 140px;"></div>
+						</template>
+						<!-- 缩略图 -->
+					</infoForm>
 					<div class="thumbnail">
-						<el-carousel :autoplay="false" height="120px" style="padding: 10px 80px;" :arrow="infoList?.length > 1 ? 'always' : 'none'">
+						<el-carousel :autoplay="false" :indicator-position="thumbnails?.length > 1 ? '' : 'none'" height="120px" :arrow="thumbnails?.length > 1 ? 'always' : 'none'" style="padding: 10px 80px;">
 							<el-carousel-item v-for="(val, index) in thumbnails" :key="index+'carousel'">
 								<div class="carouselContent">
-									<div v-for="(item, index1) in val" :key="index1+'carousel'" class="carouselItem">
+									<div
+										v-for="(item, index1) in val"
+										:key="index1+'carousel'"
+										class="carouselItem"
+										:class="{'carouselItemAct': index*chunkSize + index1 === activeIndex}"
+										@click="handleSwitch(item, index, index1)"
+									>
 										<div>{{ item?.title }}</div>
 										<div>{{ item?.description }}</div>
 										<div>{{ item?.shortDesc }}</div>
@@ -91,7 +93,8 @@ const infoList = ref([
 	{
 		title: '姓名1',
 		description: '暂无描述',
-		shortDesc: '记录1暂无描述'
+		shortDesc: '记录1暂无描述',
+		talentTags: [{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}]
 	},
 	{
 		title: '姓名2',
@@ -176,6 +179,15 @@ const open = async (data) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+const activeIndex = ref(0)
+const activeThumbnail = ref(infoList.value[0])
+const currentData = ref(infoList.value[0])
+// 切换重合记录
+const handleSwitch = (item, index, index1) => {
+	activeIndex.value = index*chunkSize + index1
+	activeThumbnail.value = item
+}
+
 // 人才合并
 const handleMerge = async (id) => {
 	console.log(id, 'merge')
@@ -194,11 +206,10 @@ const submitForm = async () => {
 </script>
 
 <style scoped>
-.el-carousel__item h3 {
-  /* color: #475669; */
+/* .el-carousel__item h3 {
   margin: 0;
   text-align: center;
-}
+} */
 
 /* .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
@@ -236,6 +247,11 @@ const submitForm = async () => {
 			overflow: hidden;
 			cursor: pointer;
 		}
+		.carouselItemAct {
+			/* color: #67C23A; */
+			border: 1px solid #62a4e698;
+			background-color: #62a4e623;
+		}
 	}
 }
 </style>