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

<template>
	<div>
		<template v-if="state">
			<a-form layout="vertical" class="resume-form">
				<a-tabs v-model:activeKey="activeKey" style="width: 100%" type="card">
					<a-tab-pane :key="1" tab="意向地区">
						<a-row :gutter="20">
							<a-col span="24">
								<a-form-item label="意向地区">
									<a-jilian :dict="2009" @saveCascader="areaSave" placeholder="请选择意向地区"
										:cascader_content="addOtherForm.area"></a-jilian>
								</a-form-item>
							</a-col>
							<a-col span="24">
								<a-flex justify="flex-end">
									<a-space>
										<a-button @click="resetForm('area')" size="large">取消</a-button>
										<a-button type="primary" @click="sumbitAreaForm" size="large">保存</a-button>
									</a-space>
								</a-flex>
							</a-col>
						</a-row>
					</a-tab-pane>
					<a-tab-pane :key="2" tab="意向职位" force-render>
						<a-row :gutter="20">
							<a-col span="24">
								<a-form-item label="意向职位">
									<a-jilian :dict="2004" @saveCascader="positionSave" placeholder="请选择意向职位"
										:cascader_content="addOtherForm.position"></a-jilian>
								</a-form-item>
							</a-col>
							<a-col span="24">
								<a-flex justify="flex-end">
									<a-space>
										<a-button @click="resetForm('position')" size="large">取消</a-button>
										<a-button type="primary" @click="sumbitPositionForm" size="large">保存</a-button>
									</a-space>
								</a-flex>
							</a-col>
						</a-row>
					</a-tab-pane>
					<a-tab-pane :key="3" tab="其他意向">
						<a-row :gutter="20">
							<a-col span="12">
								<a-form-item label="其他职位">
									<a-input v-model:value="basicForm.other_positions" placeholder="请输入其他职位"
										size="large" />
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="求职类型">
									<a-xuanze :dict="2019" placeholder="请选择求职类型" @saveSelect="saveJobType"
										:select_content="basicForm.job_type"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="人才类型">
									<a-xuanze :dict="2020" placeholder="请选择人才类型" @saveSelect="saveTalentType"
										:select_content="basicForm.talent_type"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="工作经验" name="work_experience">
									<a-xuanze :dict="2021" placeholder="请选择求工作经验" @saveSelect="saveWorkExperience"
										:select_content="basicForm.work_experience"></a-xuanze>
								</a-form-item>
							</a-col>

							<a-col span="12">
								<a-form-item label="月薪要求范围">
									<a-xuanze :dict="2005" placeholder="请选择月薪要求范围" @saveSelect="saveSalaryRange"
										:select_content="basicForm.salary_range"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="可到职日期">
									<a-xuanze :dict="2013" placeholder="请选择可到职日期" @saveSelect="saveAvailableDate"
										:select_content="basicForm.available_date"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="职称要求">
									<a-xuanze :dict="2014" placeholder="请选择职称要求" @saveSelect="saveTitleRequirement"
										:select_content="basicForm.title_requirement"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="技能认证">
									<a-xuanze :dict="2015" placeholder="请选择技能认证" @saveSelect="saveSkillCertification"
										:select_content="basicForm.skill_certification"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="食宿要求">
									<a-xuanze :dict="2016" placeholder="请选择食宿要求"
										@saveSelect="saveAccommodationRequirement"
										:select_content="basicForm.accommodation_requirement"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="12">
								<a-form-item label="节假日休息情况">
									<a-xuanze :dict="2017" placeholder="请选择节假日休息情况" @saveSelect="saveHolidayRest"
										:select_content="basicForm.holiday_rest"></a-xuanze>
								</a-form-item>
							</a-col>
							<a-col span="24">
								<a-flex justify="flex-end">
									<a-space>
										<a-button @click="resetForm('basic')" size="large">取消</a-button>
										<a-button type="primary" @click="sumbitBasicForm" size="large">保存</a-button>
									</a-space>
								</a-flex>
							</a-col>
						</a-row>
					</a-tab-pane>
				</a-tabs>
			</a-form>
		</template>
		<template v-else>
			<template v-if="positionList.length > 0">
				<a-typography>
					<a-typography-title :level="5">
						意向职位
					</a-typography-title>
				</a-typography>
				<a-typography-paragraph>
					<a-space direction="vertical">
						<template v-for="(item,index) in positionList">
							<div>
								{{item.level1_txt}}/{{item.level2_txt}}
								<a-divider type="vertical" />
								<a-button size="small" type="text" @click="toPositionEdit(item)">
									<EditOutlined />
								</a-button>
								<a-divider type="vertical" />
								<a-popconfirm title="是否删除该意向职位" @confirm="delPosition(item.id)">
									<a-button size="small" type="text">
										<DeleteOutlined />
									</a-button>
								</a-popconfirm>
							</div>
						</template>
					</a-space>
				</a-typography-paragraph>
			</template>

			<template v-if="areaList.length > 0">
				<a-typography>
					<a-typography-title :level="5">
						意向地区
					</a-typography-title>
				</a-typography>
				<a-typography-paragraph>
					<a-space direction="vertical">
						<template v-for="(item,index) in areaList">
							<div>
								{{item.level1_txt}}
								<span v-if="item.level2_txt">/</span>
								{{item.level2_txt}}
								<span v-if="item.level3_txt">/</span>
								{{item.level3_txt}}
								<span v-if="item.level4_txt">/</span>
								{{item.level4_txt}}
								<a-divider type="vertical" />
								<a-button size="small" type="text" @click="toEdit(item)">
									<EditOutlined />
								</a-button>
								<a-divider type="vertical" />
								<a-popconfirm title="是否删除该意向地区" @confirm="delArea(item.id)">
									<a-button size="small" type="text">
										<DeleteOutlined />
									</a-button>
								</a-popconfirm>
							</div>
						</template>
					</a-space>
				</a-typography-paragraph>
			</template>
			<template v-if="basic">
				<a-typography>
					<a-typography-title :level="5">
						其他意向
					</a-typography-title>
				</a-typography>
				<a-typography-paragraph>
					<div>{{basic.job_type_txt}}职位</div>
					<div>
						{{basic.talent_type_txt}}
						<a-divider type="vertical" />
						{{basic.holiday_rest_txt}}
						<a-divider type="vertical" />
						{{basic.salary_range_txt}}
						<a-divider type="vertical" />
						<a-button size="small" type="text" @click="toBasicEdit">
							<EditOutlined />
						</a-button>
						<a-divider type="vertical" />
						<a-popconfirm title="是否删除其他意向" @confirm="delBasic(basic.id)">
							<a-button size="small" type="text">
								<DeleteOutlined />
							</a-button>
						</a-popconfirm>
					</div>
				</a-typography-paragraph>
			</template>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostJobapplicantAdddesirearea, PostJobapplicantDeldesirearea, PostJobapplicantUpdatedesirearea, PostJobapplicantListdesirearea, PostJobapplicantDesireareadetail, PostJobapplicantAdddesireindustry, PostJobapplicantDeldesireindustry, PostJobapplicantUpdatedesireindustry, PostJobapplicantListdesireindustry, PostJobapplicantDesireindustrydetail, PostJobapplicantAdddesirebase, PostJobapplicantDeldesirebase, PostJobapplicantUpdatedesirebase, PostJobapplicantDesirebasedetail } from '@/apis/models';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataAreaForm, dataPositionForm, dataBasicForm, otherDataForm, reset } from '@/components/jobseeker/resume/intention/data.ts';
	import { EditOutlined, FileSearchOutlined, RedoOutlined, DeleteOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, commomParams, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let basic = ref<Object>(null)
	let positionList = ref<Object[]>([])
	let areaList = ref<Object[]>([])
	let activeKey = ref<Number>(1)
	let areaForm = ref<JobseekerIntentionType.JobseekerIntentionAreaFormType>(dataAreaForm)
	let positionForm = ref<JobseekerIntentionType.JobseekerIntentionPositionFormType>(dataPositionForm)
	let basicForm = ref<JobseekerIntentionType.JobseekerIntentionBasicFormType>(dataBasicForm)
	let addOtherForm = ref<JobseekerIntentionType.OtherFormType>(otherDataForm)

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

	const getBasic = () => {
		PostJobapplicantDesirebasedetail().then(res => {
			basic.value = res.data
			basicForm.value = intersectionAlike(basicForm.value, res.data)
			console.log(basicForm.value)
			basicForm.value.id = res.data.id;
		})
	}

	const getArea = () => {
		PostJobapplicantListdesirearea().then(res => {
			areaList.value = res.data.jobapplicantareas
			areaForm.value = intersectionAlike(areaForm.value, res.data)
		})
	}

	const getPosition = () => {
		PostJobapplicantListdesireindustry().then(res => {
			positionList.value = res.data.jobapplicantpositions
			positionForm.value = intersectionAlike(positionForm.value, res.data)
		})
	}

	// 意向地区
	const areaSave = (data) => {
		for (let i = 0; i < 4; i++) {
			areaForm.value[`level${i + 1}`] = data.arr1[i] || 0;
		}

	}

	// 保存意向地区
	const sumbitAreaForm = () => {
		if (areaForm.value.id) {
			PostJobapplicantUpdatedesirearea(areaForm.value).then(res => {
				successToast('保存成功');
				getArea();
				resetForm('area')
			}).catch(err => {
			})
		} else {
			PostJobapplicantAdddesirearea(areaForm.value).then(res => {
				successToast('保存成功');
				getArea();
				resetForm('area')
			}).catch(err => {
			})
		}
	}

	const toEdit = (item : Object) => {
		areaForm.value.id = item.id;
		getDetail(areaForm.value.id)
		emit("editEdit")
	}

	// 详情
	const getDetail = (val) => {
		PostJobapplicantDesireareadetail({ id: val }).then(res => {
			areaForm.value = intersectionAlike(areaForm.value, res.data)
			areaForm.value.id = res.data.id;
			for (var i = 1; i <= 4; i++) {
				if (res.data['level' + i]) {
					addOtherForm.value.area.push(res.data['level' + i]);
				}
			}
		})
	}
	const delArea = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostJobapplicantDeldesirearea(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			areaList.value = [];
			getArea();
		})
	}
	// 意向求职
	const positionSave = (data) => {
		for (let i = 0; i < 2; i++) {
			positionForm.value[`level${i + 1}`] = data.arr1[i] || 0;
		}
		console.log(positionForm.value)
	}
	const sumbitPositionForm = () => {
		if (positionForm.value.id) {
			PostJobapplicantUpdatedesireindustry(positionForm.value).then(res => {
				successToast('保存成功');
				getPosition();
				resetForm('position')
			}).catch(err => {
			})
		} else {
			PostJobapplicantAdddesireindustry(positionForm.value).then(res => {
				successToast('保存成功');
				getPosition();
				resetForm('position')
			}).catch(err => {
			})
		}
	}

	const toPositionEdit = (item : Object) => {
		positionForm.value.id = item.id;
		getPositionDetail(positionForm.value.id)
		activeKey.value = 2
		emit("editEdit")
	}

	// 详情
	const getPositionDetail = (val) => {
		PostJobapplicantDesireindustrydetail({ id: val }).then(res => {
			positionForm.value = intersectionAlike(positionForm.value, res.data)
			positionForm.value.id = res.data.id;
			for (var i = 1; i <= 2; i++) {
				if (res.data['level' + i]) {
					addOtherForm.value.position.push(res.data['level' + i]);
				}
			}
		})
	}
	const delPosition = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostJobapplicantDeldesireindustry(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			positionList.value = [];
			getPosition();
		})
	}

	// 求职类型
	const saveJobType = (data) => {
		basicForm.value.job_type = data.val.key;
	}
	// 人才类型
	const saveTalentType = (data) => {
		basicForm.value.talent_type = data.val.key;
	}

	// 工作经验
	const saveWorkExperience = (data) => {
		basicForm.value.work_experience = data.val.key;
	}


	// 月薪要求范围
	const saveSalaryRange = (data) => {
		basicForm.value.salary_range = data.val.key;
	}
	// 可到职日期
	const saveAvailableDate = (data) => {
		basicForm.value.available_date = data.val.key;
	}
	// 职称要求
	const saveTitleRequirement = (data) => {
		basicForm.value.title_requirement = data.val.key;
	}

	// 技能认证
	const saveSkillCertification = (data) => {
		basicForm.value.skill_certification = data.val.key;
	}

	// 食宿要求
	const saveAccommodationRequirement = (data) => {
		basicForm.value.accommodation_requirement = data.val.key;
	}

	// 节假日休息情况
	const saveHolidayRest = (data) => {
		basicForm.value.holiday_rest = data.val.key;
	}

	const sumbitBasicForm = () => {
		if (basicForm.value.id) {
			PostJobapplicantUpdatedesirebase(basicForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm('basic')
			}).catch(err => {
			})
		} else {
			PostJobapplicantAdddesirebase(basicForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm('basic')
			}).catch(err => {
			})
		}
	}

	const toBasicEdit = (item : Object) => {
		getBasic()
		activeKey.value = 3
		emit("editEdit")
	}

	const delBasic = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostJobapplicantDeldesirebase(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			basic.value = null;
			getBasic();
		})
	}


	const resetForm = (val) => {
		if (val == 'area') {
			areaForm.value = reset().dataAreaForm as JobseekerIntentionType.JobseekerIntentionAreaFormType;
		}
		if (val == 'position') {
			positionForm.value = reset().dataPositionForm as JobseekerIntentionType.JobseekerIntentionPositionFormType;
		}
		if (val == 'basic') {
			basicForm.value = reset().dataBasicForm as JobseekerIntentionType.JobseekerIntentionBasicFormType;
		}
		addOtherForm.value = reset().otherDataForm as JobseekerIntentionType.OtherFormType;
		state.value = false;
		emit("quitEdit")
	}

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

<style>
</style>