menduner-uniapp/pagesA/resumeAnalysis/components/baseInfoEdit.vue

<template>
	<view class="f-straight wrapper">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="105px" label-align="right">
			<uni-forms-item required label="中文名" name="name">
        <uni-easyinput v-model="formData.name" placeholder="请输入中文名" />
			</uni-forms-item>
      <uni-forms-item label="性别" name="sex" required>
				<uni-data-checkbox v-model="formData.sex" :localdata="sexData" />
			</uni-forms-item>
      <uni-forms-item label="联系电话" name="phone" clearable>
        <uni-easyinput v-model="formData.phone" placeholder="请输入电话号码" />
			</uni-forms-item>
      <uni-forms-item label="常用邮箱" name="email" clearable required>
        <uni-easyinput v-model="formData.email" placeholder="请输入常用邮箱" />
			</uni-forms-item>
      <uni-forms-item required label="出生日期" name="birthday">
        <uni-datetime-picker type="date" return-type="timestamp" v-model="formData.birthday" />
			</uni-forms-item>
      <uni-forms-item label="首次工作时间" name="firstWorkTime">
        <uni-datetime-picker type="date" return-type="timestamp" v-model="formData.firstWorkTime" />
			</uni-forms-item>
			<uni-forms-item required label="工作年限" name="expType" >
				<uni-data-picker v-model="formData.expType" :localdata="dictObj.exp" :clear-icon="false" popup-title="请选择工作年限" :clear="false" :map="map"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item required label="最高学历" name="eduType" >
				<uni-data-picker v-model="formData.eduType" :localdata="dictObj.edu" :clear-icon="false" popup-title="请选择最高学历" :clear="false" :map="map"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item required label="求职类型" name="jobType" >
				<uni-data-picker v-model="formData.jobType" :localdata="dictObj.jobType" :clear-icon="false" popup-title="请选择求职类型" :map="map"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item required label="求职状态" name="jobStatus" >
				<uni-data-picker v-model="formData.jobStatus" :localdata="dictObj.jobStatus" :clear-icon="false" popup-title="请选择求职状态" :map="map"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="婚姻状况" name="maritalStatus" >
				<uni-data-picker v-model="formData.maritalStatus" :localdata="dictObj.marital" :clear-icon="true" popup-title="请选择婚姻状况" :map="map"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="所在城市" name="areaId" >
				<uni-data-picker v-model="formData.areaId" :localdata="dictObj.areaTreeData" :clear-icon="true" popup-title="请选择所在城市" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="户籍地" name="regId" >
				<uni-data-picker v-model="formData.regId" :localdata="dictObj.areaTreeData" :clear-icon="true" popup-title="请选择户籍所在地" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
import { cloneDeep } from 'lodash-es'
import { emailRequired } from '@/utils/validate'
import { dictObj } from '@/utils/position.js'
import { userStore } from '@/store/user'
// import { saveBaseInfo, updatePersonAvatar } from '@/api/user'
// import { uploadFile } from '@/api/file'
import { ref, watch } from 'vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const form = ref()
const sexData = ref([])
const map = { text: 'label', value: 'value' }
const useUserStore = userStore()

const formData = ref({})
const getInfo = (data) => {
  data.phone = data.phone || useUserStore?.baseInfo?.phone
  formData.value = cloneDeep(data) || {
    name: '',
    sex: '',
    regId: '',
    birthday: '1985-05-01',
    phone: '',
    email: '',
    eduType: '',
    firstWorkTime: '',
    expType: '',
    jobType: '',
    jobStatus: '',
    maritalStatus: '',
    areaId: ''
  }
}

watch(
  () => props.data,
  (newVal) => {
    if (newVal && Object.keys(newVal)) {
      getInfo(newVal)
    }
  },
  { immediate: true },
)

if (dictObj && dictObj?.sex) {
  sexData.value = dictObj.sex.map(e => {
    return { text: e.label, value: e.value, ...e }
  })
}

const rules = {
	name:{
		rules: [{required: true, errorMessage: '请输入姓名' }]
	},
	sex : {
		rules: [{required: true, errorMessage: '请选择您的性别' }]
	},
	birthday: {
		rules: [{required: true, errorMessage: '请选择您的出生日期' }]
	},
  email: emailRequired,
  expType: {
		rules: [{required: true, errorMessage: '请选择您的工作年限' }]
	},
  eduType: {
		rules: [{required: true, errorMessage: '请选择您的最高学历' }]
	},
  jobType: {
		rules: [{required: true, errorMessage: '请选择您的求职类型' }]
	},
  jobStatus: {
		rules: [{required: true, errorMessage: '请选择您的求职状态' }]
	}
}

// const submit = async () => {
//   const valid = await unref(form).validate()
//   if (!valid) return
// }

</script>

<style lang="less" scoped>

.wrapper{
	padding: 15px;
  // padding-top: 30px;
}
.upload-img{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
}
.upload-file{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>