人才标注改为和人才信息详情的编辑一致

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

@@ -10,65 +10,98 @@
 				</el-card>
 			</el-col>
 			<el-col :span="15">
-				<el-card>
-					<div class="base-info">
-						<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">
-						<p>人才标签</p>
-						<div v-if="talentSelectedTags?.length" class="mt-4 px-3 pb-3" style="border: 1px dashed #67c23a; border-radius: 4px;">
-							<el-tag 
-								v-for="(item, index) in talentSelectedTags" 
-								:key="index"
-								closable
-								size="large"
-								type="success"
-								class="mr-14px mt-14px"
-								@close="closeClick(item)"
-							>
-								{{ item.name }}
-							</el-tag>
-						</div>
-						<div :class="{'mt-5': talentSelectedTags?.length > 0}">
-							<el-tag 
-								v-for="(item, index) in tagList" :key="index"
-								size="large"
-								type="primary"
-								class="mr-14px mt-14px"
-								:class="{'cursor-pointer': !talentSelectedTags.find(k => k.name === item.name)}"
-								:effect="talentSelectedTags.find(k => k.name === item.name) ? 'info' : 'default'"
-								@click="handleAdd(item)"
-							>
-								+ {{ item.name }}
-							</el-tag>
-						</div>
-					</div>
-				</el-card>
+				<!-- <el-card></el-card> -->
+				<div style="height: 100%; overflow-y: auto;">
+					<el-tabs type="border-card">
+						<el-tab-pane label="人才信息">
+							<Info ref="InfoRef" v-model="result.person" :areaTreeData="areaTreeData" isEdit />
+							<JobIntention v-model="result.person.jobInterestedList" isEdit @change="handleUpdateJobIntention" />
+							<Edu v-model="result.eduList" isEdit />
+							<Exp v-model="result.workList" isEdit />
+							<Training v-model="result.trainList" isEdit />
+						</el-tab-pane>
+						<el-tab-pane label="标签">
+							<el-card shadow="never">
+								<!-- <template #header>
+									<CardTitle title="已有标签" />
+								</template> -->
+								<div class="my-5">
+									<p>人才标签</p>
+									<div class="mt-4 px-3 pb-3" style="border: 1px dashed #67c23a; border-radius: 4px;">
+										<div v-if="talentSelectedTags?.length">
+											<el-tag 
+												v-for="(item, index) in talentSelectedTags" 
+												:key="index"
+												closable
+												size="large"
+												type="success"
+												class="mr-14px mt-14px"
+												@close="closeClick(item)"
+											>
+												{{ item.name }}
+											</el-tag>
+										</div>
+										<div v-else style="color: #777; text-align: center; line-height: 50px; margin-top: 12px;">请添加标签</div>
+									</div>
+									
+									<div :class="{'mt-5': talentSelectedTags?.length > 0}">
+										<el-tag 
+											v-for="(item, index) in tagList" :key="index"
+											size="large"
+											type="primary"
+											class="mr-14px mt-14px"
+											:class="{'cursor-pointer': !talentSelectedTags.find(k => k.name === item.name)}"
+											:effect="talentSelectedTags.find(k => k.name === item.name) ? 'info' : 'default'"
+											@click="handleAdd(item)"
+										>
+											+ {{ item.name }}
+										</el-tag>
+									</div>
+								</div>
+							</el-card>
+							<div style="text-align: right; margin-top: 12px;">
+								<el-button @click="submitForm" type="primary" :disabled="loading">确 认</el-button>
+								<el-button @click="handleCancel">取消</el-button>
+							</div>
+						</el-tab-pane>
+					</el-tabs>
+				</div>
+				<!-- <div class="base-info">
+					<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> -->
 			</el-col>
 		</el-row>
-    <template #footer>
+    <!-- <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="loading">更 新</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
+    </template> -->
   </Dialog>
 </template>
 
 <script setup>
 import { talentLabelingApi } from '@/api/menduner/system/talentMap/labeling'
 import { talentTagApi } from '@/api/menduner/system/talentMap/tag'
+import Info from '../details/components/info.vue'
+import Edu from '../details/components/edu.vue'
+import Exp from '../details/components/exp.vue'
+import JobIntention from '../details/components/jobIntention.vue'
+import Training from '../details/components/training.vue'
+import DefaultData from '../details/defaultData'
+import { getDict } from '@/hooks/web/useDictionaries'
+import { cloneDeep } from 'lodash-es'
+import { TalentMap } from '@/api/menduner/system/talentMap'
 
 const message = useMessage() // 消息弹窗
 const loading = ref(false)
@@ -78,6 +111,8 @@ const previewUrl = ref()
 const talentSelectedTags = ref([])
 const tagList = ref([])
 
+const result = ref(cloneDeep(DefaultData))
+
 // 获取人才标签
 const getTagList = async () => {
 	loading.value = true
@@ -89,11 +124,41 @@ const getTagList = async () => {
 	}
 }
 
+// 地区树状列表
+const areaTreeData = ref([])
+const getDictData = async () => {
+  const { data } = await getDict('areaTreeData', {}, 'areaTreeData')
+  const obj = data.find(e => e.name === '中国')
+  const list = obj?.children ? obj.children.map(e =>{
+    // 市辖区直接显示区
+    const municipality = e.children && e.children.length && e.children[0].name === '市辖区'
+    if (municipality && e.children[0].children?.length) e.children = e.children[0].children
+    return e
+  }) : []
+  areaTreeData.value = list.length ? list : []
+}
+getDictData()
+
+// 获取人才标签
+const getTalentTagById = async() => {
+	const id = talentItem.value?.id
+	if (!id) {
+		talentSelectedTags.value = []
+		return
+	}
+	const tagData = await talentLabelingApi.getTalentTagById(id)
+	talentSelectedTags.value = tagData ? tagData.map((i) => {
+		return { id: i.talent, name: i.tag }
+	}) : []
+}
+
 /** 打开弹窗 */
 const open = async (data) => {
 	previewUrl.value = null
   dialogVisible.value = true
 	talentItem.value = data
+	
+	// await getTalentMap()
 
 	// 获取所有人才标签
 	await getTagList()
@@ -105,10 +170,7 @@ const open = async (data) => {
 	}
 
 	// 获取人才标签
-	const tagData = await talentLabelingApi.getTalentTagById(data.id)
-	talentSelectedTags.value = tagData ? tagData.map((i) => {
-		return { id: i.talent, name: i.tag }
-	}) : []
+	await getTalentTagById()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -123,6 +185,11 @@ const handleAdd = (item) => {
 	talentSelectedTags.value.push(item)
 }
 
+// 取消编辑标签
+const handleCancel = () => {
+	getTalentTagById()
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -144,6 +211,42 @@ const submitForm = async () => {
     loading.value = false
   }
 }
+
+// 获取人才详情
+const getTalentMap = async () => {
+	result.value = cloneDeep(DefaultData)
+	const id = talentItem.value?.id
+	if (!id) {
+		return
+	}
+  loading.value = true
+  try {
+    const data = await TalentMap.getTalentMapDetails(id)
+    if (!data || !Object.keys(data).length) return
+    if (data.person?.resumeUrl) {
+      fileUrl.value = !data.person?.resumeUrl.includes('.pdf') ?  `${baseUrl}/onlinePreview?url=${encodeURIComponent(Base64.encode(data.person?.resumeUrl))}` : data.person?.resumeUrl
+    } else activeName.value = 'personnelSearch'
+    result.value = data
+    result.value.person.interestedAreaIdList = result.value.person.interestedAreaIdList && result.value.person.interestedAreaIdList.length ? result.value.person.interestedAreaIdList.map(e => Number(e)) : []
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查看详情-编辑求职意向
+const handleUpdateJobIntention = async (val, type) => {
+  try {
+    await TalentMap.updateTalentMapInfo(result.value.person)
+    message.success((type === 'add' ? '新增' : type === 'edit' ? '编辑' : '删除') + '成功')
+  } catch (error) {
+    console.log(error)
+  } finally {
+    formLoading.value = false
+  }
+}
+
 </script>
 
 <style scoped lang="scss">