人才标注

src/views/menduner/system/talentMap/labeling/LabelingForm.vue

@@ -1,35 +1,30 @@
 <template>
   <Dialog title="人才标注" v-model="dialogVisible" class="!w-90%">
-		<el-row>
-			<el-col :span="8">
-				<div>
-					<p :class="{'cursor-pointer': previewUrl}" :style="{'color': previewUrl ? '#2d8cf0' : ''}">
-						名片
-						<Icon v-if="previewUrl" :size="20" icon="ep:zoom-out" />
-					</p>
-					<img v-if="previewUrl" width="100%" class="cursor-pointer" :src="previewUrl" />
+		<el-row :gutter="20">
+			<el-col :span="9">
+				<el-card>
+					<p :style="{'color': previewUrl ? '#2d8cf0' : ''}">名片</p>
+					<el-image v-if="previewUrl" width="100%" :preview-src-list="[previewUrl]" class="cursor-pointer" :src="previewUrl" />
 					<p class="mb-3" :class="{'mt-3': !previewUrl}">门墩儿新任命</p>
 					<p>门墩儿用户简历</p>
-				</div>
+				</el-card>
 			</el-col>
-			<el-col :span="16">
-				<div>
+			<el-col :span="15">
+				<el-card>
 					<div class="base-info">
-						<div class="mb-15px">
-							{{ talentItem.name_zh }}
-							<span v-if="talentItem.name_en">（{{ talentItem.name_en }}）</span>
-						</div>
-						<div class="flex align-center">
-							<div v-for="(val, index) in talentInfoKeys" :key="index" class="common-width info-item">
-								<p>{{ talentItem[val.key] }}</p>
-								<p>{{ talentItem[val.value] }}</p>
-							</div>
-						</div>
-						<div class="flex align-center my-24px">
-							<div class="common-width pr-12px">{{ talentItem.mobile }}</div>
-							<div class="flex-1">{{ talentItem.email }}</div>
-						</div>
-						<div>{{ talentItem.address_zh }}</div>
+						<el-descriptions :column="1" direction="vertical">
+							<el-descriptions-item :label="talentItem.name_en ? `${talentItem.name_zh}（${ talentItem.name_en }）` : talentItem.name_zh" />
+						</el-descriptions>
+						<el-descriptions :column="3" direction="vertical">
+							<el-descriptions-item width="33.3%" :label="talentItem['title_zh']">{{ talentItem['title_en'] }}</el-descriptions-item>
+							<el-descriptions-item width="33.3%" :label="talentItem['hotel_zh']">{{ talentItem['hotel_en'] }}</el-descriptions-item>
+							<el-descriptions-item width="33.3%" :label="talentItem['brand_zh']">{{ talentItem['brand_en'] }}</el-descriptions-item>
+							<el-descriptions-item label="">{{ talentItem.mobile }}</el-descriptions-item>
+							<el-descriptions-item label="">{{ talentItem.email }}</el-descriptions-item>
+						</el-descriptions>
+						<el-descriptions :column="1" direction="vertical">
+							<el-descriptions-item label="">{{ talentItem.address_zh }}</el-descriptions-item>
+						</el-descriptions>
 					</div>
 
 					<div class="my-5">
@@ -61,11 +56,11 @@
 							</el-tag>
 						</div>
 					</div>
-				</div>
+				</el-card>
 			</el-col>
 		</el-row>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="loading">确 定</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="loading">更 新</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -79,14 +74,9 @@ const message = useMessage() // 消息弹窗
 const loading = ref(false)
 const dialogVisible = ref(false) // 弹窗的是否展示
 const talentItem = ref({})
-const previewUrl = ref<string>()
+const previewUrl = ref()
 const talentSelectedTags = ref([])
 const tagList = ref([])
-const talentInfoKeys = [
-	{ key: 'title_zh', value: 'title_en' },
-	{ key: 'hotel_zh', value: 'hotel_en' },
-	{ key: 'brand_zh', value: 'brand_en' },
-]
 
 // 获取人才标签
 const getTagList = async () => {
@@ -101,6 +91,7 @@ const getTagList = async () => {
 
 /** 打开弹窗 */
 const open = async (data: any) => {
+	previewUrl.value = null
   dialogVisible.value = true
 	talentItem.value = data
 
@@ -145,6 +136,7 @@ const submitForm = async () => {
   // 提交请求
   try {
     await talentLabelingApi.updateTalentTags(tags)
+		message.success('人才标签更新成功')
     dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
@@ -160,21 +152,12 @@ const submitForm = async () => {
 	border-radius: 6px;
 	padding: 15px;
 }
-.common-width {
-	width: 33.3%;
-	max-width: 33.3%;
-}
-.info-item {
-	padding-right: 12px;
-	&:nth-child(3n) {
-		padding-right: 0;
+:deep {
+	.el-descriptions__content {
+		color: #303133;
 	}
-	p {
-		height: 24px;
+	.el-descriptions__body {
+		background-color: #f7f8fa;
 	}
 }
-.active {
-	color: var(--v-primary-base);
-	cursor: pointer;
-}
 </style>

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

@@ -45,6 +45,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" row-key="id">
+      <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="姓名" align="center" prop="name_zh" />
       <el-table-column label="职位" align="center" prop="title_zh" :show-overflow-tooltip="true" />
       <el-table-column label="酒店" align="center" prop="hotel_zh" :show-overflow-tooltip="true" />