job-pc/src/views/company/home/index.vue

<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[20,20]" type="flex" justify="center">
			<a-col span="18">
				<div style="width: 100%; background-color: #fff;">
					<a-list item-layout="vertical">
						<a-list-item>
							<a-list-item-meta>
								<template #title>
									{{basic.contact}}
								</template>
								<template #description>
									企业编号：{{basic.id}}
								</template>
								<template #avatar>
									<image-container :need="true"
										:imgObj="{src: '/images/onlylogo.jpg',width: '48px',height:'48px'}"></image-container>
								</template>
							</a-list-item-meta>
							<div style="margin-left: 64px;">
								<a-descriptions :column="2">
									<a-descriptions-item
										label="登录账号">{{basic.login_name ? basic.login_name : '未知'}}</a-descriptions-item>
									<a-descriptions-item
										label="会员始止时间">{{basic.start_date}}至{{basic.end_date}}</a-descriptions-item>
									<a-descriptions-item
										label="联系电话">{{basic.mobile ? basic.mobile : '未填写'}}</a-descriptions-item>
									<a-descriptions-item label="服务终止日期">{{basic.end_date}}</a-descriptions-item>
									<a-descriptions-item
										label="电子邮箱">{{basic.email ? basic.email : '未填写'}}</a-descriptions-item>
									<a-descriptions-item
										label="被访问次数">{{basic.click_count ? basic.click_count : '0'}}次</a-descriptions-item>
								</a-descriptions>
							</div>
						</a-list-item>
					</a-list>
				</div>
			</a-col>
			<a-col span="18">
				<div style="width: 100%; background-color: #fff;padding: 10px 20px;">
					当月已查看<a-tag :bordered="false" color="red">{{basic.month_look_resume_qty}}</a-tag>份简历，还可以查看<a-tag
						:bordered="false" color="green">{{basic.limit_resume_qty}}</a-tag>份简历
				</div>
			</a-col>
			<a-col span="18">
				<a-space align="cneter" direction="vertical">
					<div style="width: 100%;font-size: 24px;">
						推荐简历
					</div>
					<a-row :gutter="[20,20]">
						<a-col span="12" v-for="(item, index) in jobList">
							<div class="talent-box">
								<a-list>
									<a-list-item>
										<template #actions>
											<a-button @click="putInTatent(item.customer_id)">
												放入人才库
											</a-button>
											<a-button @click="interview(item)" >
												邀请面试
											</a-button>
										</template>
										<a-list-item-meta>
											<template #title>
												<div @click="detail(item)"> <span style="font-weight: bold;font-size: 16px;cursor: pointer;">{{item.seekername}} </span></div>
											</template>
											<template #description>
												<div>
													{{item.gender}}
													<a-divider type="vertical" />
													{{item.education_text}}
													<a-divider type="vertical" />
													{{item.now_level1_text}}{{item.now_level2_text}}
												</div>
												<div style="margin-top: 10px; overflow: hidden;
												display: -webkit-box;
												-webkit-line-clamp: 1;
												-webkit-box-orient: vertical;
												text-overflow: ellipsis;">
													<div v-html="item.introduction"></div>
												</div>
											</template>
											<template #avatar>
												<image-container :need="true"
													:imgObj="{src: item.photo ? imageprefix+ item.photo : '/images/onlylogo.jpg',width: '48px',height:'48px'}"></image-container>
											</template>
										</a-list-item-meta>
									</a-list-item>
								</a-list>
							</div>
						</a-col>
						<a-col span="24" v-if="jobList.length > 0">
							<a-flex justify="center">
								<a-button size="large"  type="primary" @click="onLoadMore">查看更多</a-button>
							</a-flex>
						</a-col>
					</a-row>
				</a-space>
			</a-col>
		</a-row>
	</div>
	<a-modal v-model:open="openInterview" centered title="面试邀请" @ok="interviewOk">
		<a-space direction="vertical" style="width: 100%;">
			<a-select v-model:value="position_name" @change="positionChange"
				placeholder="请进行搜索选择职位" show-search :filter-option="false" label-in-value
				@search="positionSearch"  size="large" style="width: 100%;">
				<a-select-option v-for="item in position_list" :key="item.id" :value="item.id"
					:label="item.name" label-in-value>{{item.name}}</a-select-option>
			</a-select>
			<a-date-picker v-model:value="time" @Change="timeChange" show-time style="width: 100%;" placeholder="请选择面试日期"
				size="large" :disabled-date="disabledDate" />
		</a-space>
	</a-modal>
	<resume-detail v-if="detail_record" :detail_record="detail_record"></resume-detail>
</template>



<script setup lang="ts">
	import { ref, onMounted, computed, defineEmits, createVNode } from 'vue';
	import JobTalents from '@/components/job/talents/index.vue'
	import ResumeDetail from '@/components/jobseeker/resume/detail/index.vue'
	import { PostCompanyProfile, GetCompanyRecommentResume, PostCompanyTalentPoolAdd, PostCompanyResumeInterviewAdd ,PostCompanyJobList} from '@/apis/models';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams, ExclamationCircleOutlined, Modal, dayjs, disabledDate, showOtherModal1 , imageprefix} = useCommon();
	const dayjsRef = ref(dayjs);
	let jobList = ref<Object[]>([])
	let basic = ref<Object>({})
	let page = ref<Number>(1)
	const onLoadMore = () => {
		page.value = page.value + 1;
		getData();
	}

	const getData = () => {
		GetCompanyRecommentResume({ page: page.value, pagesize: 10 }).then(res => {
			jobList.value = res.data.list ? jobList.value.concat(res.data.list) : jobList.value.concat([])
		})
	}

	// 邀请面试
	let openInterview = ref<Boolean>(false);
	let form = {
		job_id: '',
		customer_id: '',
		interview_date_time: ''
	}
	

	const interview = (record : Object) => {
		positionSearch('')
		console.log(record)
		openInterview.value = true
		form.job_id = '';
		form.customer_id = record.customer_id;
		form.interview_date_time = ''
		time.value = '';
		position_name.value = null;
	}
	// 选择职位
	let position_list = ref<Object[]>([])
	let position_name = ref<String>(null)
	const positionSearch = (val) => {
		PostCompanyJobList({ keyword: val }).then(res => {
			position_list.value = res.data.list;
		})
	}
	const positionChange = (val : Object) => {
		position_name.value = val.option.label;
		form.job_id = Number(val.key);
	}
	let time = ref<String>('');
	const timeChange = (val) => {
		form.interview_date_time = dayjsRef.value(val).format('YYYY-MM-DD HH:mm:ss');
	}

	const interviewOk = () => {
		console.log(form)
		if (!form.interview_date_time) {
			warnToast('请选择面试时间')
			return;
		} else {
			PostCompanyResumeInterviewAdd(form).then(res => {
				successToast('已发送邀请')
				openInterview.value = false;
				jobList.value = []
				getData();
			})
		}

	}

	let detail_record = ref<Object>(null)
	const detail = (record) => {
		detail_record.value = record;
		showOtherModal1()
	}


	// 放入人才库
	const putInTatent = (id) => {
		Modal.confirm({
			title: `是否要放入人才库`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostCompanyTalentPoolAdd({ customer_id: id }).then(res => {
					successToast('已放入人才库')
					jobList.value = []
					getData();
				})
			},
			onCancel() {

			},
		});
	}

	onMounted(() => {
		PostCompanyProfile().then(res => {
			basic.value = res.data
		})
		getData();

	})
</script>

<style scoped lang="less">
	.talent-box {
		border-radius: 8px;
		background-color: #fff;
	}

	.applyRouteStyles(@routeName) {
		& when (@routeName =company) {
			:deep(.ant-list-item-meta) {
				flex: none !important;
				width: 40% !important;
			}

			:deep(.ant-list-item-action) {
				margin-inline-start: 0 !important;
			}
		}
	}

	// :deep(.ant-list-item-meta) {
	// 	flex: none !important;
	// 	width: 40% !important;
	// }

	// :deep(.ant-list-item-action) {
	// 	margin-inline-start: 0 !important;
	// }
</style>