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

<template>
	<template v-if="state">
		<a-form :model="createForm" layout="vertical"  class="resume-form">
			<a-row :gutter="20">
				<a-col span="12">
					<a-form-item  label="培训/教育时间">
						<a-range-picker  v-model:value="time" @Change="getRange" picker="month" size="large" style="width: 100%;"/>
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item  label="是否至今">
						<a-radio-group v-model:value="createForm.end_today" 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="school_or_institution">
						<a-input v-model:value="createForm.school_or_institution" placeholder="请输入学校/培训机构"
							size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item   label="专业" name="major">
						<a-input v-model:value="createForm.major" placeholder="请输入专业" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="获得证书" name="certificate">
						<a-input v-model:value="createForm.certificate" placeholder="请输入获得证书" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="曾获学校奖项或技能比赛奖项" name="certificate">
						<a-input v-model:value="createForm.awards" placeholder="请输入曾获学校奖项或技能比赛奖项" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="曾任职务" name="positions_held">
						<a-input v-model:value="createForm.positions_held" placeholder="请输入曾任职务" 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="saveForm" size="large">保存</a-button>
						</a-space>
					</a-flex>
				</a-col>
			</a-row>
		</a-form>
	</template>
	<template v-else>
		<a-list :data-source="trainList">
			<template #loadMore>
				<a-flex justify="center">
					<a-space>
						<div v-if="!loading" >
							<a-button @click="onLoadMore">加载更多</a-button>
						</div>
					</a-space>
				</a-flex>
				
			</template>
			<template #renderItem="{ item }">
				<a-list-item>
					<a-skeleton avatar :title="false" :loading="!!loading" active>
						<a-card :title="item.school_or_institution" style="width: 100%">
							<template #extra>
								<a-space>
									<a-button @click="toEdit(item)" type="primary" size="small">
										编辑
									</a-button>
									<a-popconfirm title="是否删除该经历" @confirm="del(item.id)">
										<a-button size="small" danger>
											删除
										</a-button>
									</a-popconfirm>
								</a-space>
							</template>
							<p>专业：{{item.major}}</p>
							<p>教育/培训时间：{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}</p>
							<p>曾担任的职务：{{item.positions_held}}</p>
							<p>获得的证书：{{item.certificate}}</p>
							<p>获得的奖项：{{item.awards}}</p>
						</a-card>
					</a-skeleton>
				</a-list-item>
			</template>
		</a-list>
	</template>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostJobapplicantAddtraining, PostJobapplicantDeltraining, PostJobapplicantUpdatetraining, PostJobapplicantListtraining, PostJobapplicantTrainingdetail } from '@/apis/models';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/jobseeker/resume/train/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let loading = ref<Boolean>(true);
	let trainList = ref([]);
	let createForm = ref<JobseekerTrainType.JobseekerTrainFormType>(dataForm)
	let time = ref('')

	onMounted(() => {
		getData();
	})

	const searchData = (data : object) => {
		commomParams.value.search = data
		getData();
	}

	const clearData = (data : object) => {
		if (data) {
			commomParams.value.search = data
		} else {
			commomParams.value.search = {
				page: 1,
				pagesize: 10,
				sort: 'id',
				sortby: 'asc',
				keyword: ''
			}
		}
		getData();
	}


	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			let res = await PostJobapplicantListtraining(commomParams.value.search);
			loading.value = false;
			if(!res.data.jobapplicanttrainings ||  res.data.jobapplicanttrainings.length <= 0) {
				warnToast('无更多数据')
			}
			trainList.value = res.data.jobapplicanttrainings ? trainList.value.concat(res.data.jobapplicanttrainings) : trainList.value.concat([]);
			commomParams.value.page = {
				current: commomParams.value.search.page,
				pageSize: commomParams.value.search.pagesize,
				total: res.data.total,
				pageSizeOptions: ['10', '20', '30', '40'],
				hideOnSinglePage: false,
				showSizeChanger: true
			};
		} catch {
			loading.value = false;
		}
	}


	const onLoadMore = () => {
		commomParams.value.search.page = commomParams.value.search.page + 1;
		getData();
	}
	
	// 详情
	const getDetail = (val) => {
		PostJobapplicantTrainingdetail({id: val, customer_id: sessionStorage.getItem('id')}).then(res => {
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.id;
			time.value = [dayjsRef.value(`${res.data.start_year}-${res.data.start_month}`), dayjsRef.value(`${res.data.end_year}-${res.data.end_month}`)]
		})
	}


	const getRange = (val) => {
		let day1 = dayjsRef.value(val[0]).format('YYYY-MM-DD').split('-');
		let day2 = dayjsRef.value(val[1]).format('YYYY-MM-DD').split('-');
		createForm.value.start_year = parseInt(day1[0], 10);
		createForm.value.start_month = parseInt(day1[1], 10);
		createForm.value.end_year = parseInt(day2[0], 10);
		createForm.value.end_month = parseInt(day2[1], 10);
	}

	const saveForm = () => {
		if (createForm.value.id) {
			PostJobapplicantUpdatetraining(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		} else {
			PostJobapplicantAddtraining(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		}
	}

	const resetForm = () => {
		trainList.value = [];
		time.value = ''
		createForm.value = reset().dataForm as JobseekerTrainType.JobseekerTrainFormType;
		state.value = false;
		getData();
		emit("quitEdit")
	}

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

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

	const del = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostJobapplicantDeltraining(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			trainList.value = [];
			getData();
		})
	}
</script>


<style scoped>
	:deep(.ant-list-item:last-child) {
		border-block-end: none !important;
	}
</style>