|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div class="formBox">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formQuery"
|
|
|
+ label-width="128px"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">基础信息</div>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名（中）" prop="name_zh">
|
|
|
+ <el-input v-model="formQuery.name_zh" placeholder="请输入中文姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名（英）" prop="name_en">
|
|
|
+ <el-input v-model="formQuery.name_en" placeholder="请输入英文姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="职位/头衔（中）" prop="title_zh">
|
|
|
+ <el-input v-model="formQuery.title_zh" placeholder="请输入中文职位/头衔" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="职位/头衔（英）" prop="title_en">
|
|
|
+ <el-input v-model="formQuery.title_en" placeholder="请输入英文职位/头衔" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="生日" prop="birthday">
|
|
|
+ <el-input v-model="formQuery.birthday" placeholder="请输入出生日期" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="居住地" prop="residence">
|
|
|
+ <el-input v-model="formQuery.residence" placeholder="请输入当前居住地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">联系方式</div>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="手机号码" prop="mobile">
|
|
|
+ <el-input v-model="formQuery.mobile" placeholder="请输入手机号码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="固定电话" prop="phone">
|
|
|
+ <el-input v-model="formQuery.phone" placeholder="请输入固定电话" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="电子邮箱" prop="email">
|
|
|
+ <el-input v-model="formQuery.email" placeholder="请输入电子邮箱" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">酒店/公司信息</div>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="酒店/公司名称(中)" prop="hotel_zh">
|
|
|
+ <el-input v-model="formQuery.hotel_zh" placeholder="请输入中文酒店/公司名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="酒店/公司名称(英)" prop="hotel_en">
|
|
|
+ <el-input v-model="formQuery.hotel_en" placeholder="请输入英文酒店/公司名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="品牌名称（中）" prop="brand_zh">
|
|
|
+ <el-input v-model="formQuery.brand_zh" placeholder="请输入中文品牌名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="品牌名称（英）" prop="brand_en">
|
|
|
+ <el-input v-model="formQuery.brand_en" placeholder="请输入英文品牌名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隶属关系(中)" prop="affiliation_zh">
|
|
|
+ <el-input v-model="formQuery.affiliation_zh" placeholder="请输入中文隶属关系" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隶属关系(英)" prop="affiliation_en">
|
|
|
+ <el-input v-model="formQuery.affiliation_en" placeholder="请输入英文隶属关系" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="品牌组合" prop="brand_group">
|
|
|
+ <el-input v-model="formQuery.brand_group" placeholder="请输入品牌组合" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">职业轨迹</div>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" class="trajectoryBox" v-for="(item, index) of careerTrajectory" :key="'trajectory' + index">
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form-item label="酒店名称" prop="hotel_zh" label-width="128px">
|
|
|
+ <el-input v-model="item.hotel_zh" placeholder="请输入酒店名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="职位名称" prop="title_zh" label-width="128px">
|
|
|
+ <el-input v-model="item.title_zh" placeholder="请输入职位名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="任职时间" prop="date">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ type="date"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="flex justify-center items-center !h-100%" style="flex-direction: column;">
|
|
|
+ <el-button @click="addCareer(index)" type="primary" class="cursor-pointer" :icon="Plus" circle />
|
|
|
+ <el-button
|
|
|
+ v-if="careerTrajectory.length > 1"
|
|
|
+ class="mt-15px ml-0 cursor-pointer"
|
|
|
+ @click="removeCareer(index)"
|
|
|
+ type="danger"
|
|
|
+ :icon="Delete"
|
|
|
+ circle
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">地址信息</div>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="中文地址" prop="address_zh">
|
|
|
+ <el-input v-model="formQuery.address_zh" placeholder="请输入中文地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="英文地址" prop="address_en">
|
|
|
+ <el-input v-model="formQuery.address_en" placeholder="请输入英文地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="邮政编码（中）" prop="postal_code_zh">
|
|
|
+ <el-input v-model="formQuery.postal_code_zh" placeholder="请输入中文邮政编码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="邮政编码（英）" prop="postal_code_en">
|
|
|
+ <el-input v-model="formQuery.postal_code_en" placeholder="请输入英文邮政编码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <div class="m-title">系统信息</div>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-tag v-if="itemData.status" :type="itemData.status === 'active' ? 'success' : 'danger'">
|
|
|
+ {{ itemData.status === 'active' ? '已启用' : '已禁用' }}
|
|
|
+ </el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-tag v-if="itemData.created_at" type="primary" effect="light">{{ itemData.created_at }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="更新时间">
|
|
|
+ <el-tag v-if="itemData.updated_at" type="primary" effect="light">{{ itemData.updated_at }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { talentLabelingApi } from '@/api/menduner/system/talentMap/labeling'
|
|
|
+import { talentTagApi } from '@/api/menduner/system/talentMap/tag'
|
|
|
+import DefaultData from '@/views/menduner/system/talentMap/details/defaultData'
|
|
|
+import { getDict } from '@/hooks/web/useDictionaries'
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
+import { TalentMap } from '@/api/menduner/system/talentMap'
|
|
|
+import { Delete, Plus } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ itemData: Object
|
|
|
+})
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
+const formQuery = ref({
|
|
|
+ name_zh: undefined,
|
|
|
+ name_en: undefined,
|
|
|
+ title_zh: undefined,
|
|
|
+ title_en: undefined,
|
|
|
+ mobile: undefined,
|
|
|
+ phone: undefined,
|
|
|
+ email: undefined,
|
|
|
+ hotel_zh: undefined,
|
|
|
+ hotel_en: undefined,
|
|
|
+ brand_zh: undefined,
|
|
|
+ brand_en: undefined,
|
|
|
+ affiliation_zh: undefined,
|
|
|
+ affiliation_en: undefined,
|
|
|
+ brand_group: undefined,
|
|
|
+ address_zh: undefined,
|
|
|
+ address_en: undefined,
|
|
|
+ postal_code_zh: undefined,
|
|
|
+ postal_code_en: undefined,
|
|
|
+ birthday: undefined,
|
|
|
+ residence: undefined,
|
|
|
+})
|
|
|
+const careerTrajectory = ref([{ company_name: null, position: null, current_date: null }])
|
|
|
+
|
|
|
+if (props.itemData) {
|
|
|
+ formQuery.value = cloneDeep(props.itemData)
|
|
|
+ careerTrajectory.value = cloneDeep(props.itemData?.career_path) ?? []
|
|
|
+}
|
|
|
+
|
|
|
+const addCareer = () => {
|
|
|
+ careerTrajectory.value = careerTrajectory.value || []
|
|
|
+ careerTrajectory.value.push({ company_name: null, position: null, current_date: null })
|
|
|
+}
|
|
|
+const removeCareer = (index) => {
|
|
|
+ if (careerTrajectory.value.length <= 1) return
|
|
|
+ careerTrajectory.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ formQuery
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.formBox {
|
|
|
+ flex: 1;
|
|
|
+ max-height: 70vh;
|
|
|
+ padding: 12px;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ .m-title {
|
|
|
+ margin: 12px 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .trajectoryBox {
|
|
|
+ margin: 10px 20px;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Xiao_123