job-master/src/views/company/position/add/add.vue

<template>
	<a-modal v-model:visible="openAddModel" title="职位信息" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="60%" style="top: 20px">
		<a-form :model="createForm" layout="vertical">
			<a-steps :current="current" :items="steps"></a-steps>
			<div class="steps-content">
				<div v-show="current == 0">
					<a-row gutter="20">
				<!-- 		<a-col span="24">
							<a-form-item label="职位状态" name="status">
								<a-radio-group v-model:value="createForm.status" button-style="solid">
									<a-radio-button :value="1">发布中</a-radio-button>
									<a-radio-button :value="2">未发布</a-radio-button>
									<a-radio-button :value="3">暂停</a-radio-button>
									<a-radio-button :value="4">锁定</a-radio-button>
									<a-radio-button :value="5">回收站</a-radio-button>
									<a-radio-button :value="6">已过期</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col> -->
						<a-col span="12">
							<a-form-item required label="到期日期">
								<a-date-picker v-model:value="addOtherForm.daoqi_date" @Change="disabledDateChange"
									style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="有效天数" name="useful_life">
								<a-input-number :min="1" type="number" v-model:value="createForm.useful_life"
									placeholder="请输入有效天数" style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="是否紧急" name="urgent">
								<a-radio-group v-model:value="createForm.urgent" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="选择企业" name="company_id">
								<search-select placeholder="请选择企业" :list="company_list" :select_value="companyVal"
									@searchData="companySearch" @getSelectValue="getCompanyValue"></search-select>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="选择部门" name="department_id">
								<search-select placeholder="请选择部门" :list="department_list" :select_value="departmentVal"
									@searchData="departmentSearch" @getSelectValue="getDepartmentValue"></search-select>
							</a-form-item>
						</a-col>

						<a-col span="12">
							<a-form-item required label="职位名称" name="name">
								<a-input v-model:value="createForm.name" placeholder="请输入职位名称" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="招聘人数" name="invite_count">
								<a-input v-model:value="createForm.invite_count" placeholder="请输入招聘人数" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="职位类别">
								<a-shujilian :dict="2004" placeholder="职位类别(最多三个,多选只取前三)" @saveTreeNode="jobTypeChange"
									:tree_content="createForm.job_type"></a-shujilian>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="工作区域">
								<a-shujilian :dict="2009" placeholder="工作区域(最多四个,多选只取前四)"
									@saveTreeNode="jobAddressChange"
									:tree_content="createForm.job_location"></a-shujilian>
							</a-form-item>
						</a-col>

						<a-col span="24">
							<a-form-item required label="职位描述" name="describe_text">
								<QuillEditor theme="snow" :options="options" toolbar="full"
									v-model:content="addOtherForm.describe_content"
									@update:content="onEditorDescribeUpdate($event)" contentType="html" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="薪资范围" name="pay_range">
								<a-xuanze :dict="2005" placeholder="请选择月薪要求范围" @saveSelect="savePayRange"
									:select_content="createForm.pay_range"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="关键词">
								<a-input v-model:value="createForm.key_word" placeholder="请输入关键词" />
							</a-form-item>
						</a-col>

						<a-col span="8">
							<a-form-item label="是否全职" name="fulltime">
								<a-radio-group v-model:value="createForm.fulltime" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item label="是否兼职" name="parttime">
								<a-radio-group v-model:value="createForm.parttime" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item label="是否临时" name="casual">
								<a-radio-group v-model:value="createForm.casual" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item label="是否实习" name="practical">
								<a-radio-group v-model:value="createForm.practical" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item label="校园招聘" name="campus">
								<a-radio-group v-model:value="createForm.campus" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="食宿要求">
								<a-xuanze :dict="2016" placeholder="请选择食宿要求" @saveSelect="saveShisu"
									:select_content="createForm.shisu"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="节假日休息情况">
								<a-xuanze :dict="2017" placeholder="节假日休息情况" @saveSelect="saveHolidays"
									:select_content="createForm.holidays"></a-xuanze>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 1">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item required label="工作经验">
								<a-xuanze :dict="2021" placeholder="请选择工作经验" @saveSelect="saveExperience"
									:select_content="createForm.experience"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="学历">
								<a-xuanze :dict="2006" placeholder="请选择学历" @saveSelect="saveSchoolDegree"
									:select_content="createForm.school_degree"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="含最高学历" name="degree_better">
								<a-radio-group v-model:value="createForm.degree_better" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="职称要求">
								<a-xuanze :dict="2014" placeholder="请选择职称要求" @saveSelect="saveProfelevel"
									:select_content="createForm.profelevel"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="技能认证">
								<a-xuanze :dict="2015" placeholder="请选择技能认证" @saveSelect="saveCertification"
									:select_content="createForm.certification"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="语言要求">
								<a-xuanze :dict="2007" placeholder="请选择语言要求" @saveSelect="saveLanguage"
									:select_content="createForm.language"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="掌握程度">
								<a-xuanze :dict="2008" placeholder="请选择掌握程度" @saveSelect="saveLanguageDegree"
									:select_content="createForm.language_degree"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="专业" name="major">
								<a-input v-model:value="createForm.major" placeholder="请输入专业" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="籍贯要求" name="mandarin">
								<a-c-cascader :dict="2009" @saveCascader="compantJiguanSave" placeholder="请选择籍贯"
									:cascader_content="addOtherForm.company_jiguan_cascader"></a-c-cascader>
							</a-form-item>
						</a-col>
						<a-col span="8">
							<a-form-item required label="婚姻状况" name="marital_status">
								<a-radio-group v-model:value="createForm.marital_status" button-style="solid">
									<a-radio-button :value="1">已婚</a-radio-button>
									<a-radio-button :value="2">未婚</a-radio-button>
									<a-radio-button :value="3">不限</a-radio-button>
								</a-radio-group>
								<!-- <a-c-select :dict="2011" placeholder="请选择婚姻状况" @saveSelect="saveMandarinStatus"></a-c-select> -->
							</a-form-item>
						</a-col>

						<a-col span="8">
							<a-form-item label="性别要求" name="sex">
								<a-radio-group v-model:value="createForm.sex" button-style="solid">
									<a-radio-button :value="1">男</a-radio-button>
									<a-radio-button :value="2">女</a-radio-button>
									<a-radio-button :value="3">不限</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="4">
							<a-form-item label="最小年龄" name="age_min">
								<a-input-number :min="0" type="number" v-model:value="createForm.age_min"
									placeholder="请输入最小年龄" style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col span="4">
							<a-form-item label="最大年龄" name="age_max">
								<a-input-number :min="0" type="number" v-model:value="createForm.age_max"
									placeholder="请输入最大年龄" style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="证书要求">
								<a-checkbox-group v-model:value="createForm.license" @change="licenseChange">
									<template v-for="(item, index) in licenseOption">
										<a-checkbox :value="item.id">{{item.name}}</a-checkbox>
									</template>
								</a-checkbox-group>
							</a-form-item>
						</a-col>

						<a-col span="12">
							<a-form-item label="所在地要求" name="mandarin">
								<a-c-cascader :dict="2009" @saveCascader="compantSuozaidiSave" placeholder="请选择所在地"
									:cascader_content="addOtherForm.company_suozaidi_cascader"></a-c-cascader>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 2">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item required label="联系人" name="contact">
								<a-input v-model:value="createForm.contact" placeholder="请输入联系人" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="联系人职位" name="possession">
								<a-input v-model:value="createForm.possession" placeholder="请输入联系人职位" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="联系电话" name="phone">
								<a-input v-model:value="createForm.phone" placeholder="请输入联系电话" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开联系电话" name="phone_public">
								<a-radio-group v-model:value="createForm.phone_public" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="手机" name="mobile">
								<a-input v-model:value="createForm.mobile" placeholder="请输入手机" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开手机" name="mobile_public">
								<a-radio-group v-model:value="createForm.mobile_public" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="邮箱" name="email">
								<a-input v-model:value="createForm.email" placeholder="请输入邮箱" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开邮箱" name="email_public">
								<a-radio-group v-model:value="createForm.email_public" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="传真" name="fax">
								<a-input v-model:value="createForm.fax" placeholder="请输入传真" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="是否公开传真" name="fax_public">
								<a-radio-group v-model:value="createForm.fax_public" button-style="solid">
									<a-radio-button :value="1">是</a-radio-button>
									<a-radio-button :value="2">否</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="其他地址" name="other_address">
								<a-input v-model:value="createForm.other_address" placeholder="请输入其他地址" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="面试地址" name="interview_address">
								<a-input v-model:value="createForm.interview_address" placeholder="请输入面试地址" />
							</a-form-item>
						</a-col>
					</a-row>
				</div>
			</div>
			<div class="steps-action">
				<a-button v-if="current > 0" @click="prev">上一步</a-button>
				<a-button v-if="current < steps.length - 1" type="primary" style="margin-left: 12px"
					@click="next">下一步</a-button>
			</div>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { getCompanyList, GetCompanyDepartmentList, GetDictTree, PostCompanyJobAdd, PostCompanyJobEdit, PostCompanyJobInfo } from '@/apis/models';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { steps, dataForm, otherDataForm, reset } from '@/views/company/position/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, dayjs, richOption, message } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['edit_record']);
	const emit = defineEmits();
	const current = ref<number>(0);
	const next = () => {
		current.value++;
	};
	const prev = () => {
		current.value--;
	};

	const options = ref(richOption)

	let createForm = ref<companyListType.addFormType>(dataForm)
	let addOtherForm = ref<companyListType.addOtherFormType>(otherDataForm)

	let licenseOption = ref<Object[]>([])
	onMounted(async () => {
		companySearch({ page: 1, pagesize: 10 })
		GetDictTree({
			code: 2018
		}).then((res : object) => {
			licenseOption.value = res.data.dicts
		})
	})


	// 选择企业
	let company_list = ref<Object[]>([])
	let companyVal = ref<string>('')
	const companySearch = (val : Object) => {
		getCompanyList(val).then((res : object) => {
			const data = res.data.list.map((item : object) => ({
				label: item.full_name,
				value: item.id,
			}));
			company_list.value = data;
		})
	}
	const getCompanyValue = (val : Object) => {
		createForm.value.company_id = val.key;
		departmentSearch(val)
	}

	// 选择部门
	const department_list = ref<Object[]>([]);
	let departmentVal = ref<string>('')
	const departmentSearch = (val) => {
		GetCompanyDepartmentList({ company_id: val.key }).then(res => {
			const data = res.data.rows.map((item : object) => ({
				label: item.name,
				value: item.id,
			}));
			department_list.value = data;
		})
	}
	const getDepartmentValue = (val : Object) => {
		createForm.value.department_id = val.key;
	}

	// 职位类别
	const jobTypeChange = (data) => {
		createForm.value.job_type = data.arr1.slice(0, 3);
	}
	// 工作区域
	const jobAddressChange = (data) => {
		createForm.value.job_location = data.arr1.slice(0, 4);
	}

	// 职位描述
	const onEditorDescribeUpdate = (data) => {
		createForm.value.describe_text = data
	}

	// 薪资范围
	const savePayRange = (data) => {
		createForm.value.pay_range = data.val.key;
	}

	// 到期日期
	const disabledDateChange = (val) => {
		createForm.value.disabled_date = dayjsRef.value(val).format('YYYY-MM-DD');
	}

	// 食宿要求
	const saveShisu = (data) => {
		createForm.value.shisu = data.val.key;
	}

	// 节假日要求
	const saveHolidays = (data) => {
		createForm.value.holidays = data.val.key;
	}

	// 工作经验
	const saveExperience = (data) => {
		createForm.value.experience = data.val.key;
	}

	// 学历要求
	const saveSchoolDegree = (data) => {
		createForm.value.school_degree = data.val.keyl;
	}

	// 职称要求
	const saveProfelevel = (data) => {
		createForm.value.profelevel = data.val.key;
	}

	// 技能认证
	const saveCertification = (data) => {
		createForm.value.certification = data.val.key;
	}

	// 语言要求
	const saveLanguage = (data) => {
		createForm.value.language = data.val.key;
	}

	// 掌握程度
	const saveLanguageDegree = (data) => {
		createForm.value.language_degree = data.val.key;
	}

	// 婚姻状况
	const saveMandarinStatus = (data) => {
		createForm.value.marital_status = data.val;
	}


	// 选择籍贯
	const compantJiguanSave = (data) => {
		createForm.value.household_province = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.household_city = data.arr1[1] ? data.arr1[1] : 0;
	}

	// 选择所在地
	const compantSuozaidiSave = (data) => {
		createForm.value.location_province = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.location_city = data.arr1[1] ? data.arr1[1] : 0;
		createForm.value.location_town = data.arr1[2] ? data.arr1[2] : 0;
	}

	// 证书
	const licenseChange = (val) => {
		console.log(val)
	}

	const sumbitForm = () => {
		console.log(createForm.value)
		if (!createForm.value.id) {
			PostCompanyJobAdd(createForm.value).then(res => {
				message.success('新增职位成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		} else {
			PostCompanyJobEdit(createForm.value).then(res => {
				message.success('修改职位信息成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		}
	}

	const resetForm = () => {
		addOtherForm.value = reset().otherDataForm;
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		current.value = 0
		emit('closeAdd');
		resetForm();
		hideModal();
	}

	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	const addToLocationArray = (data) => {
		let locationArray = [];
		if (data.location_province !== 0) {
			locationArray.push(data.location_province);
		}
		if (data.location_city !== 0) {
			locationArray.push(data.location_city);
		}
		if (data.location_town !== 0) {
			locationArray.push(data.location_town);
		}
		return locationArray;
	}

	watch(() => props.edit_record, (newVal1) => {
		if (newVal1) {
			PostCompanyJobInfo({ id: newVal1.id }).then(res => {
				let resData = res.data;
				createForm.value = intersectionAlike(createForm.value, res.data)
				createForm.value.id = resData.id;
				createForm.value.status = newVal1.status;
				addOtherForm.value = {
					department_name: resData.department_id,
					describe_content: resData.describe_text,
					daoqi_date: dayjsRef.value(resData.disabled_date),
					pay_range_cascader: resData.pay_range,
					shisu_select: resData.shisu,
					holidays_select: resData.holidays,
					company_jiguan_cascader: [resData.household_province, resData.household_city],
					company_suozaidi_cascader: addToLocationArray(resData)
				}
				if (resData.fulltime == 1) {
					addOtherForm.value.job_nature = 1
				} else if (resData.parttime == 1) {
					addOtherForm.value.job_nature = 2
				} else if (resData.casual == 1) {
					addOtherForm.value.job_nature = 3
				} else if (resData.practical == 1) {
					addOtherForm.value.job_nature = 4
				} else if (resData.campus == 1) {
					addOtherForm.value.job_nature = 5
				}

			})
		}
	})
</script>


<style scoped>
	.steps-content {
		margin-top: 16px;
		border: 1px dashed #e9e9e9;
		border-radius: 6px;
		background-color: #fafafa;
		min-height: 200px;
		padding: 20px;
	}

	.steps-action {
		margin-top: 12px;
	}
</style>