job-pc/src/components/jobseeker/resume/basic/basic.vue

<template>

	<div style="width: 100%;">
		<template v-if="state">
			<a-form :model="createForm" layout="vertical" class="resume-form">
				<a-row :gutter="20">
					<a-col span="24">
						<a-form-item label="上传相片" name="photo">
							<upload upload_txt="上传相片" @uploadSuccess="uploadPhotoSuccess"
								:success_image="addOtherForm.photo_img" images_length="1" image_type="1"></upload>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="简历是否可见" name="hide_resume">
							<a-radio-group v-model:value="createForm.hide_resume" button-style="solid" size="large"
								style="width: 100%;">
								<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
								<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="家政版块是否可见" name="house_keeping_status">
							<a-radio-group v-model:value="createForm.house_keeping_status" button-style="solid"
								size="large" style="width: 100%;">
								<a-radio-button :value="1" style="width: 50%;">是</a-radio-button>
								<a-radio-button :value="2" style="width: 50%;">否</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="姓名" name="name">
							<a-input v-model:value="createForm.name" placeholder="请输入姓名" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="性别" name="gender">
							<a-radio-group v-model:value="createForm.gender" button-style="solid" size="large"
								style="width: 100%;">
								<a-radio-button value="男" style="width: 50%;">男</a-radio-button>
								<a-radio-button value="女" style="width: 50%;">女</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="出生日期" name="dob">
							<a-date-picker v-model:value="addOtherForm.dob" @Change="dobChange" style="width: 100%;"
								size="large" :disabledDate="disabledDateFront" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="身份证" name="id_number">
							<a-input v-model:value="createForm.id_number" placeholder="请输入身份证" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="工作经验(年)" name="work_experience">
							<a-input-number :min="0" type="number" v-model:value="createForm.work_experience"
								placeholder="请输入工作经验" style="width: 100%;" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="学历" name="education">
							<a-xuanze :dict="2006" placeholder="请选择学历" @saveSelect="saveEducation"
								:select_content="createForm.education"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="户口所在地">
							<a-jilian :dict="2009" @saveCascader="regLevelSave" placeholder="请选择户口所在地"
								:cascader_content="addOtherForm.reg_level_cascader"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="现居地">
							<a-jilian :dict="2009" @saveCascader="nowLevelSave" placeholder="请选择现居地"
								:cascader_content="addOtherForm.now_level_cascader"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="职称">
							<a-xuanze :dict="2014" placeholder="请选择职称" @saveSelect="saveTitle"
								:select_content="createForm.title"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="婚姻状况">
							<a-xuanze :dict="2011" placeholder="请选择婚姻状况" @saveSelect="saveMaritalStatus"
								:select_content="createForm.marital_status"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="民族">
							<a-xuanze :dict="2012" placeholder="请选择民族" @saveSelect="saveEthnicity"
								:select_content="createForm.ethnicity"></a-xuanze>
						</a-form-item>
					</a-col>

					<a-col span="12">
						<a-form-item label="政治面貌">
							<a-xuanze :dict="2010" placeholder="请选择政治面貌" @saveSelect="savePoliticalStatus"
								:select_content="createForm.political_status"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="籍贯">
							<a-jilian :dict="2009" @saveCascader="nativePlaceSave" placeholder="请选择籍贯"
								:cascader_content="addOtherForm.native_place_txt"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="身高(厘米cm)">
							<a-input-number :min="0" type="number" v-model:value="createForm.height" placeholder="请输入身高"
								style="width: 100%;" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="体重(千克kg)">
							<a-input-number :min="0" type="number" v-model:value="createForm.weight" placeholder="请输入体重"
								style="width: 100%;" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-flex justify="flex-end">
							<a-space>
								<a-button @click="resetForm" size="large">取消</a-button>
								<a-button type="primary" @click="sumbitForm" size="large">保存</a-button>
							</a-space>
						</a-flex>
					</a-col>
				</a-row>
			</a-form>
		</template>
		<template v-else>
			<template v-if="detail">
				<a-row :gutter="[20,20]">
					<a-col span="10">
						<a-row>
							<a-space direction="vertical">
								<a-col span="24">
									姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{detail.name}}
								</a-col>
								<a-col span="24">
									性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：{{detail.gender}}
								</a-col>
								<a-col span="24">
									身份证号：{{detail.id_number}}
								</a-col>
								<a-col span="24">
									民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：{{detail.ethnicity_txt}}
								</a-col>
								<a-col span="24">
									身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：{{detail.height}}cm
								</a-col>
								<a-col span="24">
									政治面貌：{{detail.political_status_txt}}
								</a-col>
								<a-col span="24">
									联系方式：{{detail.mobile}}
								</a-col>
								<a-col span="24">
									邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：{{detail.email}}
								</a-col>
							</a-space>

						</a-row>
					</a-col>
					<a-col span="8">
						<a-row>
							<a-space direction="vertical">
								<a-col span="24">
									出生日期：{{detail.dob}}
								</a-col>
								<a-col span="24">
									婚姻状况：{{detail.marital_status_txt}}
								</a-col>
								<a-col span="24">
									学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：{{detail.education_txt}}
								</a-col>
								<a-col span="24">
									体&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重：{{detail.weight}}kg
								</a-col>
								<a-col span="24">
									现居地址：{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
								</a-col>
								<a-col span="24">
									籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：{{detail.native_place_txt}}
								</a-col>
								<a-col span="24">
									户口地址：{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
								</a-col>
							</a-space>
						</a-row>
					</a-col>
					<a-col span="6">
						<image-container v-if="detail.photo" :need="true"
							:imgObj="{src: imageprefix + detail.photo ,width: '150px',height:'210px'}"></image-container>
					</a-col>
				</a-row>
			</template>
			<template v-else>
				<a-row>
					<a-col span="24">
						<a-empty>
							<template #description>
								暂无信息
							</template>
						</a-empty>
					</a-col>
				</a-row>
			</template>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostJobapplicantAdd, PostJobapplicantUpdate, GetJobapplicantDetail } from '@/apis/models';
	import Upload from '@/components/form/upload.vue';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/jobseeker/resume/basic/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, ExclamationCircleOutlined, Modal, imageprefix, disabledDateFront } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let detail = ref(null)
	let createForm = ref<JobseekerBasicType.JobseekerBasicFormType>(dataForm)
	let addOtherForm = ref<JobseekerBasicType.OtherFormType>(otherDataForm)

	onMounted(() => {
		getBasic()
	})

	const getBasic = () => {
		GetJobapplicantDetail().then(res => {
			detail.value = res.data;
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.id;
			addOtherForm.value = {
				dob: dayjsRef.value(res.data.dob),
				reg_level_cascader: [res.data.reg_level1, res.data.reg_level2, res.data.reg_level3, res.data.reg_level4],
				now_level_cascader: [res.data.now_level1, res.data.now_level2, res.data.now_level3, res.data.now_level4],
				native_place_txt: res.data.native_place_txt,
				photo_img: imageprefix + res.data.photo
			}
		})
	}
	
	// 营业执照
	const uploadPhotoSuccess = (data : Object) => {
		addOtherForm.value.photo_img = imageprefix + data
		createForm.value.photo = data
	}

	// 出生日期
	const dobChange = (val) => {
		createForm.value.dob = dayjsRef.value(val).format('YYYY-MM-DD');
	}

	// 学历
	const educationPlaceholder = ref('请选择学历');
	const saveEducation = (data) => {
		createForm.value.education = data.val.key;
	}

	// 职称
	const titlePlaceholder = ref('请选择职称')
	const saveTitle = (data) => {
		createForm.value.title = data.val.key;
	}

	// 婚姻状态
	const maritalStatusPlaceholder = ref('请选择婚姻状态')
	const saveMaritalStatus = (data) => {
		createForm.value.marital_status = data.val.key;
	}

	// 民族
	const ethnicityPlaceholder = ref('请选择民族')
	const saveEthnicity = (data) => {
		createForm.value.ethnicity = data.val.key;
	}

	// 政治面貌
	const politicalStatusPlaceholder = ref('请选择政治面貌')
	const savePoliticalStatus = (data) => {
		createForm.value.political_status = data.val.key;
	}


	// 户口所在地
	const regLevelSave = (data) => {
		for (let i = 0; i < 4; i++) {
			createForm.value[`reg_level${i + 1}`] = data.arr1[i] || 0;
		}
	}

	// 现居地
	const nowLevelSave = (data) => {
		for (let i = 0; i < 4; i++) {
			createForm.value[`now_level${i + 1}`] = data.arr1[i] || 0;
		}
	}

	// 籍贯
	const nativePlaceSave = (data) => {
		if (data.arr1.length == 1) {
			return false;
		} else {
			createForm.value.native_place = data.arr1[1];
		}
	}

	const sumbitForm = () => {
		if (createForm.value.id) {
			PostJobapplicantUpdate(createForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm()
			}).catch(err => {
			})
		} else {
			PostJobapplicantAdd(createForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm()
			}).catch(err => {
			})
		}
	}

	const resetForm = () => {
		createForm.value = reset().dataForm as JobseekerBasicType.JobseekerBasicFormType;
		addOtherForm.value = reset().otherDataForm as JobseekerBasicType.OtherFormType;
		state.value = false;
		emit("quitEdit")
	}

	watch(() => [props.form_state], (newVal) => {
		state.value = newVal[0];
		getBasic();
	})
</script>

<style>
</style>