人才地图

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

@@ -7,53 +7,79 @@
       <el-form-item label="用户头像" prop="avatar">
         <UploadImg v-model="formData.avatar" height="140px" />
       </el-form-item>
-      <el-form-item label="用户姓名" prop="name">
-        <el-input v-model="formData.name"/>
-      </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别" @change="val => handleChangeSelect(val, 'MENDUNER_SEX', 'sexStr')">
-          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_SEX)" :key="dict.value" :label="dict.label" :value="dict.value.toString()"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="联系电话" prop="phone">
-        <el-input v-model="formData.phone" />
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-        <el-input v-model="formData.email" />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker v-model="formData.birthday" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择出生日期" />
-      </el-form-item>
-      <el-form-item label="学历" prop="eduType">
-        <el-select v-model="formData.eduType" placeholder="请选择学历" @change="val => handleChangeSelect(val, 'MENDUNER_EDUCATION_TYPE', 'eduTypeStr')">
-          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EDUCATION_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="工作经验" prop="expType">
-        <el-select v-model="formData.expType" placeholder="请选择工作经验" @change="val => handleChangeSelect(val, 'MENDUNER_EXP_TYPE', 'expTypeStr')">
-          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EXP_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="婚姻状况" prop="maritalStatus">
-        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" @change="val => handleChangeSelect(val, 'MENDUNER_MARITAL_STATUS', 'maritalStatusStr')">
-          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_MARITAL_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="首次工作时间" prop="firstWorkTime">
-        <el-date-picker v-model="formData.firstWorkTime" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择首次工作时间" />
-      </el-form-item>
-      <el-form-item label="现居城市" prop="areaId">
-        <el-cascader v-model="formData.areaId" :options="areaTreeData" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true }"  class="!w-240px" />
-      </el-form-item>
-      <el-form-item label="意向城市" prop="interestedAreaIdList">
-        <el-cascader v-model="formData.interestedAreaIdList" :options="areaTreeData" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true, multiple: true }"  class="!w-240px" />
-      </el-form-item>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户姓名" prop="name">
+            <el-input v-model="formData.name"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="性别" prop="sex">
+            <el-select v-model="formData.sex" placeholder="请选择性别" @change="val => handleChangeSelect(val, 'MENDUNER_SEX', 'sexStr')">
+              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_SEX)" :key="dict.value" :label="dict.label" :value="dict.value.toString()"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="formData.phone" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生日期" prop="birthday">
+            <el-date-picker v-model="formData.birthday" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择出生日期" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="学历" prop="eduType">
+            <el-select v-model="formData.eduType" placeholder="请选择学历" @change="val => handleChangeSelect(val, 'MENDUNER_EDUCATION_TYPE', 'eduTypeStr')">
+              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EDUCATION_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工作经验" prop="expType">
+            <el-select v-model="formData.expType" placeholder="请选择工作经验" @change="val => handleChangeSelect(val, 'MENDUNER_EXP_TYPE', 'expTypeStr')">
+              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EXP_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="婚姻状况" prop="maritalStatus">
+            <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" @change="val => handleChangeSelect(val, 'MENDUNER_MARITAL_STATUS', 'maritalStatusStr')">
+              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_MARITAL_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="现居城市" prop="areaId">
+            <el-cascader v-model="formData.areaId" :options="areaTreeData" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true }" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="意向城市" prop="interestedAreaIdList">
+            <el-cascader v-model="formData.interestedAreaIdList" :options="areaTreeData" collapse-tags collapse-tags-tooltip :max-collapse-tags="1" :props="{ label: 'name', value: 'id', emitPath: false, checkStrictly: true, multiple: true }" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="首次工作时间" prop="firstWorkTime">
+            <el-date-picker v-model="formData.firstWorkTime" type="date" :disabledDate="disabledDates" value-format="x" placeholder="选择首次工作时间" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
       <el-form-item label="个人优势" prop="advantage">
         <el-input v-model="formData.advantage" :rows="8" type="textarea" placeholder="请输入您的个人优势" />
       </el-form-item>
     </el-form>
     <div v-if="isEdit" class="text-right">
-      <el-button type="primary" @click="handleSave">保 存</el-button>
+      <el-button class="!w-120px" type="primary" @click="handleSave">保 存</el-button>
     </div>
   </el-card>
 </template>
@@ -63,12 +89,12 @@ defineOptions({ name: 'EnterpriseDetailsInfo'})
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { cloneDeep } from 'lodash-es'
 import { timesTampChange } from '@/utils/transform/date'
-import { getDict } from '@/hooks/web/useDictionaries'
 import { TalentMap } from '@/api/menduner/system/talentMap';
 
 const props = defineProps({
   modelValue: Object,
-  isEdit: Boolean
+  isEdit: Boolean,
+  areaTreeData: Array
 })
 
 const message = useMessage() // 消息弹窗
@@ -76,7 +102,8 @@ const formRef = ref()
 const formData = ref({})
 const formLoading = ref(false)
 const formRules = reactive({
-  // schoolName: [{ required: true, message: '学校名称不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+  phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }]
 })
 
 watch(() => props.modelValue, (newVal) => {
@@ -88,21 +115,6 @@ const disabledDates = (date) => {
   return date.getTime() > Date.now()
 }
 
-// 地区列表
-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 handleChangeSelect = (val, dictType, labelKey) => {
   const dict = getIntDictOptions(DICT_TYPE[dictType])
@@ -123,4 +135,8 @@ const handleSave = async () => {
     formLoading.value = false
   }
 }
+
+defineExpose({
+  formRef
+})
 </script>

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

@@ -43,17 +43,19 @@
       </el-col>
 
       <el-col :span="12">
-        <div :style="{'height': height, 'overflow-y': 'auto'}">
+        <div ref="content" :style="{'height': height, 'overflow-y': 'auto'}">
           <el-tabs type="border-card">
             <el-tab-pane label="简历解析内容">
-              <Info v-model="result.person" :isEdit="isEdit" />
+              <Info ref="InfoRef" v-model="result.person" :areaTreeData="areaTreeData" :isEdit="isEdit" />
               <JobIntention v-model="result.person.jobInterestedList" />
               <Edu v-model="result.eduList" :isEdit="isEdit"  />
               <Exp v-model="result.workList" :isEdit="isEdit" />
               <Training v-model="result.trainList" :isEdit="isEdit" />
               <div class="text-center m-t-30px">
-                <el-button @click="push('/menduner/talentMap')">取 消</el-button>
-                <el-button v-if="id === 'add'" type="primary" @click="handleSave">保 存</el-button>
+                <el-affix position="bottom" :offset="20">
+                  <el-button @click="push('/menduner/talentMap')" type="warning" plain size="large" class="!w-120px">取 消</el-button>
+                  <el-button v-if="id === 'add'" type="primary" @click="handleSave" size="large" class="!w-120px">保 存</el-button>
+                </el-affix>
               </div>
             </el-tab-pane>
             <el-tab-pane label="标签">
@@ -100,6 +102,9 @@ import { TalentMap } from '@/api/menduner/system/talentMap'
 import { useUpload } from '@/components/UploadFile/src/useUpload'
 import { commonApi } from '@/api/menduner/common'
 import { Base64 } from 'js-base64'
+import { getDict } from '@/hooks/web/useDictionaries'
+import DefaultData from './defaultData'
+import { cloneDeep } from 'lodash-es';
 
 import Info from './components/info.vue'
 import Edu from './components/edu.vue'
@@ -110,9 +115,6 @@ import Tags from './components/tags.vue'
 import TagsRecommend from './components/tagsRecommend.vue'
 import Search from './components/search.vue'
 
-import DefaultData from './defaultData'
-import { cloneDeep } from 'lodash-es';
-
 const { push } = useRouter()
 const addNewTag = ref(false)
 const newTagText = ref('')
@@ -130,6 +132,8 @@ const data = ref({ path: '' })
 const { uploadUrl, httpRequest } = useUpload()
 
 /** 初始化 */
+const InfoRef = ref()
+const content = ref()
 const message = useMessage() // 消息弹窗
 const height = ref(0)
 const { currentRoute } = useRouter() // 路由
@@ -138,6 +142,21 @@ const { id } = route.params
 const baseUrl = import.meta.env.VITE_PREVIEW_URL
 const isEdit = ref(false)
 
+// 地区树状列表
+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 getTalentMap = async () => {
   loading.value = true
@@ -226,6 +245,15 @@ const handleDetail = async (userId) => {
 const handleSave = async () => {
   if (result.value?.resume) delete result.value.resume
   console.log(result.value, 'result-add')
+
+  // 效验基本信息中必填项是否有填写
+  if (!result.value?.person.name || !result.value.person.phone) {
+    message.notifyWarning('请将必填项填写完整')
+    InfoRef.value.formRef.validate()
+    content.value.scrollTo({ top: 0, behavior: 'smooth' })
+    return
+  }
+
   saveLoading.value = true
   try {
     await TalentMap.createTalentMapInfo(result.value)