人才对比、人才合并

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

@@ -0,0 +1,60 @@
+<template>
+  <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="姓名（英）">--</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>
+      <el-descriptions-item min-width="120" label="居住地">--</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions title="联系方式" class="module" :column="2" border>
+      <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>
+    </el-descriptions>
+    <el-descriptions title="酒店/公司信息" class="module" border>
+      <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>
+      <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>
+      <el-descriptions-item min-width="120" label="品牌组合">--</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions title="职业轨迹" class="module" border />
+    <el-timeline style="padding-left: 12px;">
+      <el-timeline-item color="#0bbd87" center>
+        <el-descriptions title="" border>
+          <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>
+        </el-descriptions>
+      </el-timeline-item>
+    </el-timeline>
+    <el-descriptions title="地址信息" class="module" :column="2" border>
+      <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>
+      <el-descriptions-item min-width="120" label="邮政编码（英）">--</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions title="人才标签" class="module" :column="2" border />
+    <el-tag v-for="k in talentTags" :key="k.talent" type="success" class="mr-10px my-10px">{{ k.tag }}</el-tag>
+    <slot name="thumbnail"></slot>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'TalentMapStoreMergeInfo' })
+
+
+const talentTags = ref([{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}])
+
+</script>
+
+<style scoped>
+.module {
+	margin-top: 20px;
+}
+</style>

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

@@ -13,19 +13,40 @@
 					<template #header>
 						<CardTitle title="当前记录" />
 					</template>
+					<infoForm />
 				</el-card>
 			</el-col>
 			<el-col :span="12">
-				<el-card>
+				<el-card style="position: relative;">
 					<template #header>
 						<CardTitle title="重复记录" />
 					</template>
-					<el-carousel :autoplay="false">
-						<el-carousel-item v-for="item in 3" :key="item">
-							<el-button type="primary" size="small">点击合并到此记录</el-button>
-							<h3 text="2xl" justify="center">{{ item }}</h3>
+					<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>
+					<div class="thumbnail">
+						<el-carousel :autoplay="false" height="140px" style="padding: 10px 80px;" :arrow="infoList?.length > 1 ? 'always' : 'none'">
+							<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>{{ item?.title }}</div>
+										<div>{{ item?.description }}</div>
+										<div>{{ item?.shortDesc }}</div>
+									</div>
+								</div>
+							</el-carousel-item>
+						</el-carousel>
+					</div>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -39,6 +60,7 @@
 
 <script setup>
 defineOptions({ name: 'TalentMapStoreMerge' })
+import infoForm from './info.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -64,6 +86,90 @@ const list = ref([
 		avatar: 'https://minio.menduner.com/dev/person/1/img/933de4dc9eb28e2bdf79a1da518a8e1a0e14bf4b78358ea9452fb8e8fdd2f7f6.jpeg'
 	}
 ])
+const talentTags = ref([{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}])
+const infoList = ref([
+	{
+		title: '姓名1',
+		description: '这是第一条记录的详细描述内容...',
+		shortDesc: '记录1的简短描述'
+	},
+	{
+		title: '姓名2',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名3',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名4',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名5',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名2-1',
+		description: '这是第一条记录的详细描述内容...',
+		shortDesc: '记录1的简短描述'
+	},
+	{
+		title: '姓名2-2',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名2-3',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名2-4',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名2-5',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名3-1',
+		description: '这是第一条记录的详细描述内容...',
+		shortDesc: '记录1的简短描述'
+	},
+	{
+		title: '姓名3-2',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名3-3',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	},
+	{
+		title: '姓名3-4',
+		description: '这是第二条记录的详细描述内容...',
+		shortDesc: '记录2的简短描述'
+	}
+])
+
+function chunkArray(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+
+const chunkSize = 5 // 每组缩略图数量
+const thumbnails = chunkArray(infoList.value, chunkSize)
 
 const open = async (data) => {
   dialogVisible.value = true
@@ -89,18 +195,43 @@ const submitForm = async () => {
 
 <style scoped>
 .el-carousel__item h3 {
-  color: #475669;
-  /* opacity: 0.75; */
-  /* line-height: 200px; */
+  /* color: #475669; */
   margin: 0;
   text-align: center;
 }
 
-.el-carousel__item:nth-child(2n) {
+/* .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
+} */
+
+.module {
+	margin-top: 20px;
+}
+.thumbnail {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 140px;
+	width: 100%;
+	background-color: #fff;
+	overflow: hidden;
+	.carouselContent {
+		display: flex;
+		height: 100px;
+		.carouselItem {
+			border: 1px solid rgba(128, 128, 128, 0.34);
+			border-radius: 5px;
+			margin: 0 10px;
+			padding: 10px;
+			background-color: #fff;
+			font-size: 12px;
+			overflow: hidden;
+			cursor: pointer;
+		}
+	}
 }
 </style>