job-pc/src/views/common/personal/index.vue

<template>
	<div v-if="mode== 'detail'">
		<a-page-header>
			<template #title>
				<a-button @click="back" type="link">
					<ArrowLeftOutlined />前往更多求职
				</a-button>
			</template>
			<a-list item-layout="vertical">
				<a-list-item>
					<a-list-item-meta>
						<template #title>
							<div style="font-size: 24px; font-family: bold;">{{companyDetail.full_name}}</div>

						</template>
						<template #description>
							<div>
								企业编号：{{companyDetail.id}}
							</div>
						</template>
					</a-list-item-meta>
				</a-list-item>
			</a-list>

			<a-tabs v-model:activeKey="activeKey" type="card" @change="activeChange">
				<a-tab-pane :key="1" tab="企业信息">
					<template v-if="activeKey == 1">
						<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
							<a-descriptions title="公司介绍" layout="vertical">
								<a-descriptions-item>
									<div v-html="companyDetail.introduction"></div>
								</a-descriptions-item>
							</a-descriptions>
						</div>
						<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;">
							<a-descriptions :column="7" title="公司概况" layout="vertical">
								<a-descriptions-item label="所属行业" span="2"
									v-if="companyDetail.situation">{{companyDetail.situation.industry_text}}/{{companyDetail.situation.industry2_text}}</a-descriptions-item>
								<a-descriptions-item label="公司性质"
									v-if="companyDetail.situation">{{companyDetail.situation.nature_text}}</a-descriptions-item>
								<a-descriptions-item label="公司规模"
									v-if="companyDetail.situation">{{companyDetail.situation.scale_text }}</a-descriptions-item>
								<a-descriptions-item label="成立时间"
									v-if="companyDetail.situation">{{companyDetail.situation.establishment_date }}</a-descriptions-item>
							</a-descriptions>
						</div>
						<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
							<a-descriptions :column="7" title="联系方式" layout="vertical">
								<a-descriptions-item label="联系地址"
									span="2">{{companyDetail.detail_address}}</a-descriptions-item>
								<a-descriptions-item label="联系人">{{companyDetail.contact}}</a-descriptions-item>
								<a-descriptions-item label="联系手机">{{companyDetail.mobile}}</a-descriptions-item>
								<a-descriptions-item label="联系电话">{{companyDetail.phone}}</a-descriptions-item>
								<a-descriptions-item label="Email">{{companyDetail.email}}</a-descriptions-item>
								<a-descriptions-item label="传真">{{companyDetail.fax}}</a-descriptions-item>
							</a-descriptions>
						</div>
						<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
							<a-descriptions :column="7" title="企业相册" layout="vertical">
								<a-descriptions-item><image-container :need="true"
										:imgObj="{src: imageprefix + companyDetail.photo,width: '200px',height:'200px', mode: 'fill'}"></image-container></a-descriptions-item>
							</a-descriptions>
						</div>
						<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
							<a-descriptions :column="1" title="地图位置" layout="vertical">
								<a-descriptions-item span="24">
										<map-marker v-if="companyDetail.latitude && companyDetail.longitude" :lat="companyDetail.latitude" :lng="companyDetail.longitude"></map-marker>
								</a-descriptions-item>
							</a-descriptions>
						</div>
					</template>
				</a-tab-pane>
				<a-tab-pane :key="2" tab="招聘职位" force-render>
					<template v-if="activeKey == 2">
						<template v-if="!jobList || jobList.length == 0">
							<a-empty style="height: 100vh;">
								<template #description>
									本企业未有招聘信息
								</template>
							</a-empty>
						</template>
						<template v-else>
							<a-row :gutter="10">
								<a-col span="8">
									<div style="background-color: #ffffff;padding-bottom: 20px; border-radius: 8px;">
										<job-card :list="jobList" @detail="toDetail"></job-card>
										<a-flex justify="center">
											<a-space>
												<a-pagination simple v-model:current="current" :total="total"
													@change="pageChange" />
											</a-space>
										</a-flex>
									</div>
								</a-col>
								<a-col span="16">
									<div  style="padding: 20px;background-color: #ffffff;border-radius: 8px;">
										<job-detail v-if="job_id" :id="job_id"></job-detail>
									</div>
								</a-col>
							</a-row>
						</template>
					</template>
				</a-tab-pane>
			</a-tabs>
		</a-page-header>
	</div>
	<div v-else>
		<job-list @detail="showDetail"></job-list>
		<job-internship @detail="showDetail"></job-internship>
		<!-- <job-detail></job-detail> -->
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue';
	import JobDetail from '@/components/job/detail/index.vue'
	import JobCard from '@/components/job/card/index.vue'
	import JobList from '@/components/job/list/index.vue'
	import JobInternship from '@/components/job/internship/index.vue'
	import MapMarker from '@/components/map/marker.vue'
	import { PostCompanyInfo, GetJobCompanyjobs } from '@/apis/models';
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import { router } from '@/router';
	import { useCommon } from '@/hooks/useCommon';
	let { imageprefix } = useCommon();
	let activeKey = ref<Number>(sessionStorage.getItem('tab_key') ? Number(sessionStorage.getItem('tab_key')) : 1)
	let companyDetail = ref<object>({})
	let jobList = ref<object[]>([])
	let pubilc_id = ref<Number>(0)
	let current = ref<Number>(1)
	let total = ref<Number>(0)
	let job_id = ref<Number>(0)
	let mode = ref<String>(sessionStorage.getItem('mode'))

	const toDetail = (data) => {
		job_id.value = data.id;
	}


	const pageChange = (page) => {
		current.value = page
		getJobCompanyjobs(page)
	}

	const getJobCompanyjobs = (page) => {
		GetJobCompanyjobs({ company_id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id'), page: page, pagesize: 3 }).then(res => {
			total.value = res.data.total;
			if (res.data.jobs.length > 3) {
				jobList.value = res.data.jobs.slice(0, 3)
			} else {
				jobList.value = res.data.jobs
			}
			job_id.value = jobList.value[0].id
		})
	}



	const back = (page) => {
		sessionStorage.removeItem('pubilc_id')
		sessionStorage.removeItem('mode')
		sessionStorage.removeItem('tab_key')
		sessionStorage.removeItem('job_id')
		mode.value = sessionStorage.getItem('mode')
	}

	const showDetail = (page) => {
		// mode.value = sessionStorage.getItem('mode')
		activeKey.value = sessionStorage.getItem('tab_key') ? Number(sessionStorage.getItem('tab_key')) : 1
		// job_id.value = sessionStorage.getItem('job_id') ? Number(sessionStorage.getItem('job_id')) : 0;
		// pubilc_id.value = sessionStorage.getItem('pubilc_id') ? Number(sessionStorage.getItem('pubilc_id')) : pubilc_id.value;
		// if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) {
		// 	PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => {
		// 		companyDetail.value = res.data
		// 	})
		// 	getJobCompanyjobs(current.value)
		// }
		window.open('/company/detail', "_blank");
	}
	



	onMounted(() => {
		if (mode.value == 'detail') {
			job_id.value = sessionStorage.getItem('job_id') ? Number(sessionStorage.getItem('job_id')) : 0;
			pubilc_id.value = sessionStorage.getItem('pubilc_id') ? Number(sessionStorage.getItem('pubilc_id')) : pubilc_id.value;
			if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) {
				PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => {
					companyDetail.value = res.data;
				})	
				getJobCompanyjobs(current.value)
			}
		}
	})

	onBeforeUnmount(() => {
		sessionStorage.removeItem('pubilc_id')
		sessionStorage.removeItem('mode')
		sessionStorage.removeItem('tab_key')
		sessionStorage.removeItem('job_id')
	})
</script>

<style scoped lang="less">
	:deep(.ant-list-item) {
		padding: 0 !important;
	}

	

	:deep(.ant-card) {
		padding: 0 !important;
	}

	:deep(.ant-card-body) {
		padding: 0 !important;
	}
</style>