<template> 
 | 
  <ContentScrollView :paddingH="false"> 
 | 
    <nut-form :model-value="form" ref="formRef" :rules="rules"> 
 | 
      <nut-form-item label="头像:" class="bole-form-item" prop="avatar"> 
 | 
        <Uploader v-model:file-list="form.avatar" :maximum="1" class="bole-uploader"> </Uploader> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="姓名:" class="bole-form-item" prop="name"> 
 | 
        <nut-input 
 | 
          v-model.trim="form.name" 
 | 
          placeholder="请输入姓名" 
 | 
          :disabled="userDetail.isReal" 
 | 
        /> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="手机号:" class="bole-form-item" prop="contactPhoneNumber" required> 
 | 
        <nut-input v-model.trim="form.contactPhoneNumber" placeholder="请输入手机号" type="text" /> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="身份:" class="bole-form-item" prop="personalIdentityCode"> 
 | 
        <ChooseInputWithPicker 
 | 
          v-model="form.personalIdentityCode" 
 | 
          placeholder="请选择身份" 
 | 
          :value-enum="identityList" 
 | 
        /> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="学历:" class="bole-form-item" prop="educationalBackgroundCode"> 
 | 
        <ChooseInputWithPicker 
 | 
          v-model="form.educationalBackgroundCode" 
 | 
          placeholder="请选择学历" 
 | 
          :value-enum="educationList" 
 | 
        /> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="常驻城市:" class="bole-form-item" prop="areaList"> 
 | 
        <ChooseInputWithAreaPicker 
 | 
          :columns="areaTree" 
 | 
          v-model="form.areaList" 
 | 
          placeholder="请选择常驻城市" 
 | 
        ></ChooseInputWithAreaPicker> 
 | 
      </nut-form-item> 
 | 
    </nut-form> 
 | 
  </ContentScrollView> 
 | 
  <PageFooter> 
 | 
    <PageFooterBtn type="primary" @click="handleConfirm">保存</PageFooterBtn> 
 | 
  </PageFooter> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; 
 | 
import { ChooseInputWithPicker, ChooseInputWithAreaPicker } from '@12333/components'; 
 | 
import { convertApi2FormUrlOnlyOne, Message, setOSSLink } from '@12333/utils'; 
 | 
import { useAreaTree, useDictionaryDataSelect, useUpdateResume } from '@12333/hooks'; 
 | 
import { AreaType, CategoryCode } from '@12333/constants'; 
 | 
import * as userResumeServices from '@12333/services/apiV2/userResume'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import { useQuery } from '@tanstack/vue-query'; 
 | 
import { useEventChannel } from 'senin-mini/hooks'; 
 | 
import { goBack } from '@/utils'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const { updateUserResume } = useUpdateResume(); 
 | 
  
 | 
const { userDetail } = useUser(); 
 | 
  
 | 
const eventChannel = useEventChannel(); 
 | 
  
 | 
const { dictionaryDataList: identityList } = useDictionaryDataSelect({ 
 | 
  categoryCode: CategoryCode.Identity, 
 | 
}); 
 | 
  
 | 
const { dictionaryDataList: educationList } = useDictionaryDataSelect({ 
 | 
  categoryCode: CategoryCode.Education, 
 | 
}); 
 | 
  
 | 
const { areaTree } = useAreaTree({ 
 | 
  maxLayer: AreaType.City, 
 | 
}); 
 | 
  
 | 
const form = reactive({ 
 | 
  avatar: [], 
 | 
  name: '', 
 | 
  contactPhoneNumber: '', 
 | 
  personalIdentityCode: '', 
 | 
  educationalBackgroundCode: '', 
 | 
  areaList: [] as string[], 
 | 
}); 
 | 
  
 | 
const { 
 | 
  isLoading, 
 | 
  isError, 
 | 
  data: detail, 
 | 
  refetch, 
 | 
} = useQuery({ 
 | 
  queryKey: ['userResumeServices/getUserResumePersonal'], 
 | 
  queryFn: async () => { 
 | 
    return await userResumeServices.getUserResumePersonal( 
 | 
      {}, 
 | 
      { 
 | 
        showLoading: false, 
 | 
      } 
 | 
    ); 
 | 
  }, 
 | 
  placeholderData: () => ({} as API.GetUserResumePersonalQueryResult), 
 | 
  onSuccess(data) { 
 | 
    form.avatar = convertApi2FormUrlOnlyOne(data.avatar); 
 | 
    form.name = data.name ?? ''; 
 | 
    form.contactPhoneNumber = data.contactPhoneNumber ?? ''; 
 | 
    form.personalIdentityCode = data.personalIdentityCode ?? ''; 
 | 
    form.educationalBackgroundCode = data.educationalBackgroundCode ?? ''; 
 | 
    form.areaList = [data.provinceCode, data.cityCode].filter(Boolean); 
 | 
  }, 
 | 
}); 
 | 
  
 | 
const rules = reactive<FormRules>({ 
 | 
  contactPhoneNumber: [{ required: true, message: '请输入手机号' }], 
 | 
  personalIdentityCode: [{ required: true, message: '请选择身份' }], 
 | 
  educationalBackgroundCode: [{ required: true, message: '请选择学历' }], 
 | 
  areaList: [ 
 | 
    { 
 | 
      required: true, 
 | 
      validator: () => { 
 | 
        if (!form.areaList.length) { 
 | 
          return Promise.reject('请选择常驻城市'); 
 | 
        } 
 | 
        return Promise.resolve(); 
 | 
      }, 
 | 
    }, 
 | 
  ], 
 | 
}); 
 | 
const formRef = ref<any>(null); 
 | 
function handleConfirm() { 
 | 
  if (!formRef.value) return; 
 | 
  formRef.value.validate().then(({ valid, errors }: any) => { 
 | 
    if (valid) { 
 | 
      confirm(); 
 | 
    } 
 | 
  }); 
 | 
} 
 | 
  
 | 
async function confirm() { 
 | 
  try { 
 | 
    let params: API.SaveUserResumePersonalCommand = { 
 | 
      name: form.name, 
 | 
      avatar: form.avatar?.[0]?.path ?? '', 
 | 
      contactPhoneNumber: form.contactPhoneNumber, 
 | 
      educationalBackgroundCode: form.educationalBackgroundCode, 
 | 
      personalIdentityCode: form.personalIdentityCode, 
 | 
      provinceCode: form.areaList?.[0] ?? '', 
 | 
      cityCode: form.areaList?.[1] ?? '', 
 | 
    }; 
 | 
    let res = await userResumeServices.saveUserResumePersonal(params); 
 | 
    if (res) { 
 | 
      Message.success('保存成功', { 
 | 
        onClosed() { 
 | 
          goBack(); 
 | 
          updateUserResume(); 
 | 
        }, 
 | 
      }); 
 | 
    } 
 | 
  } catch (error) {} 
 | 
} 
 | 
</script> 
 |