yizhizan-pc/src/views/myPostPush/myPostPush.vue

<template>
	<div class="myPostPush">
		<!-- tbas -->
		<div class="tab flex align-center justify-center">
			<div class="tab-box flex align-center">
				<div @click="selectTab(index)" :class="tabIndex==index?'active':''" class="tab-box-item"
					v-for="(item,index) in tabs" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<div class="list flex align-center justify-center">
			<div class="list-box flex justify-between">
				<div class="list-box-l" v-if="postPushList.length>0">
					<div class="list-box-l-item" v-for="(item,index) in postPushList" :key="index">
						<div class="list-box-l-item-top flex align-center justify-between">
							<div class="list-box-l-item-top-l flex align-center">
								<img :src="item.company?.companyLogo?item.company.companyLogo:'/default.jpg'" alt="" />
								<span style="font-weight: 500;margin-left: 20px;">
									{{ item.company?.companyName || item.company?.companyAllName }}
								</span>
							</div>
							<div class="list-box-l-item-top-r flex align-center justify-center "
								:class="item.status==1?'shz':(item.status==2?'zpz':(item.status==3?'yjj':'yxx'))">
								{{item.statusName}}
							</div>

						</div>
						<div class="list-box-l-item-title">
							{{item.ruleClassifyName}}
							<span style="margin-left: 20px;color: #00DD9A;">{{item.salaryRange}} <span
									v-if="item.salaryTimes">--{{ item.salaryTimes }}</span></span>
						</div>
						<div v-if="item.auditContent" class="list-box-l-item-con" style="color: red;">
							拒绝原因：{{ item.auditContent }}
						</div>
						<div class="list-box-l-item-bom">
							<div style="font-size: 13px;margin-bottom: 10px;color: #999;">{{ item.city }} {{ item.county
								}} {{ item.address }}</div>
							<div class="list-box-l-item-tag flex algin-center">
								<div class="list-box-l-item-tag-i">{{ item.education }}</div>
								<div class="list-box-l-item-tag-i">{{ item.experience }}</div>
							</div>
						</div>
						<div class="list-box-l-item-con">
							<div v-if="isHtml(item.positionDetails)" v-html="formatHtml(item.positionDetails)"></div>
							<template v-else>{{ item.positionDetails }}</template>
						</div>
						<div class="list-box-l-item-bom flex align-center justify-between">
							<div class="list-box-l-item-tag flex algin-center" v-if="item.welfareTag">
								<div class="list-box-l-item-tag-i" style="background: #fce9dc;color: #016bf6;"
									v-for="(welfareTagName, index) in item.welfareTag?item.welfareTag.split(';') : []"
									:key="index">{{ welfareTagName }}
								</div>
							</div>
							<div class="" style="padding: 0 0 20px 0;">
								<!-- <el-button v-if="item.status==1"
									@click="cancelProject(item.postPushId)">取消招聘</el-button> -->
								<el-button v-if="item.status == 2"
									@click="closeJob(item.postPushId,'close')">关闭岗位</el-button>
								<el-button v-if="item.status == 5"
									@click="closeJob(item.postPushId,'open')">开启岗位</el-button>
								<el-button v-if="item.status == 1 || item.status == 3 || item.status == 4 || item.status == 6"
									@click="updataServeType(item.postPushId,'save')">重新发布</el-button>
								<el-button
									v-if="item.status == 1 || item.status==6"
									@click="updataServeType(item.postPushId,'updata')">修改内容</el-button>
							</div>
						</div>

					</div>
					<div class=" flex align-center justify-end" style="width: 100%;">
						<el-pagination background layout="prev, pager, next" v-model="page" :default-page-size="limit"
							:page-count="pages" @current-change="currentChange" />
					</div>
				</div>
				<div class="list-box-l" style="height: 200px;" v-else>
					<el-empty description="暂无岗位" />
				</div>
				<div class="list-box-r">
					<resume @goDetails="goDetails" />
				</div>
			</div>
		</div>
		<!-- 岗位组件 -->
		<postPush :postPushId="postPushId" :type="type" @closePostPush="closePostPush" v-if="dialogPostPush"
			:dialogPostPushs="dialogPostPush" />
	</div>
</template>

<script>
	import resume from '../../components/resume/resume.vue'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import postPush from '../../components/postPush/postPush.vue'
	export default {
		components: {
			resume,
			postPush
		},
		data() {
			return {
				dialogPostPush: false,
				tabs: [{
					name: '全部',
					status: 0
				}, {
					name: '待审核',
					status: 1
				}, {
					name: '招聘中',
					status: 2
				}, {
					name: '已拒绝',
					status: 3
				}, {
					name: '已取消',
					status: 4
				}, {
					name: '已关闭',
					status: 5
				}],
				tabIndex: 0, // tab下标
				postPushList: [], //岗位列表
				page: 1,
				pages: 1,
				limit: 10,
				screenHeight: 0,
				postPushId: '', //岗位id
				type: '',
				companyList:[]
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.tabIndex = this.$route.query.tabIndex
			this.getTabsList();
			this.getlist()
		},
		methods: {
			formatHtml(html) {
				return html.replace(/<p>/g, '<p style="margin:0;padding:0;">')
			},
			isHtml(str) {
				return /<\/?[a-z][\s\S]*>/i.test(str)
			},
			//关闭发布岗位组件的回调
			closePostPush(data) {
				//关闭组件
				this.dialogPostPush = data
				//清除岗位id
				this.postPushId = ''
				//清除类型
				this.type = ''
				//刷新列表
				this.page = 1
				this.getlist()
			},
			//修改/重新发布 type:updata save
			updataServeType(postPushId, type) {
				if (type == 'updata') { //修改岗位
					ElMessageBox.confirm(
						'确认修改吗？',
						'温馨提示', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					).then(() => {
						this.type = type
						this.postPushId = postPushId
						this.dialogPostPush = true
					}).catch(() => {})

				} else { //重新发布
					this.type = type
					this.postPushId = postPushId
					this.dialogPostPush = true
				}
			},
			//取消招聘
			cancelProject(postPushId) {
				ElMessageBox.confirm(
					'确认取消该招聘？',
					'温馨提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					let data = {
						postPushId: postPushId
					}
					this.$Request.post('/app/postPush/cancelPostPush', data).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: '取消成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.getlist()
						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})
				}).catch(() => {

				})
			},
			//关闭岗位/开启岗位
			closeJob(postPushId, type) {
				ElMessageBox.confirm(
					type == 'close' ? '关闭岗位后，该岗位不会再推荐给用户，是否关闭？' : '开启岗位后，该岗位会重新推荐给用户，是否开启？',
					'温馨提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(res => {
					let data = {
						postPushId: postPushId
					}
					this.$Request.get('/app/postPush/closeOrOpen', {
						params: data
					}).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: type == 'close' ? '已关闭' : '已开启',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.getlist()
						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})
				}).catch(() => {

				})
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getlist()
			},
			//切换状态
			selectTab(index) {
				this.tabIndex = index
				this.getlist()
			},
			//岗位列表
			getlist() {
				let data = {
					status: this.tabIndex == 0 ? '' : this.tabIndex,
					page: this.page,
					limit: this.limit,
					companyId: localStorage.getItem('companyId')
				}
				this.$Request.get('/app/postPush/getMyPostPush', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.pages = res.data.pages
						res.data.records.forEach(ret => {
							ret.showpeop = false
							if (ret.status == 1) {
								ret.statusName = '待审核'
							} else if (ret.status == 2) {
								ret.statusName = '招聘中'
							} else if (ret.status == 3) {
								ret.statusName = '已拒绝'
							} else if (ret.status == 4) {
								ret.statusName = '已取消'
							} else if (ret.status == 5) {
								ret.statusName = '已关闭'
							} else if (ret.status == 6) {
								ret.statusName = '暂存'
							}
						})
						this.postPushList = res.data.records
					}
				})

			},
			//获取发布的岗位
			getTabsList() {
				let data = {
					companyId: this.$store.state.companyId ? this.$store.state.companyId : localStorage.getItem('companyId')
				}
				this.$Request.get('/app/postPush/getCompanyClassify', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.companyList = res.data;
					}
				})
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (this.companyList.length == 0) {
					ElMessage({
						message: '请先发布职位！',
						type: 'warning',
					})
					return;
				}
				if (localStorage.getItem('token')) {
					this.$router.push({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId
						}
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;

	.shz {
		background-color: #00DD9A;
		color: #ffffff;
	}

	.zpz {
		background-color: #D0E4F9;
		color: #2650EC;
	}

	.yjj {
		background-color: #FFD7D7;
		color: #F13D3D;
	}

	.yxx {
		background-color: #F3F3F3;
		color: #666666;
	}

	.myPostPush {
		padding-bottom: 40px;
	}

	.active {
		border-bottom: 4px solid #00DD9A !important;
		color: #00DD9A !important;
	}

	.tab {
		width: 100%;
		margin-top: 20px;

		.tab-box {
			width: calc(100% - $marginTop-60 * 2);
			background-color: #ffffff;
			border-radius: 12px;
		}

		.tab-box-item {
			border-bottom: 4px solid #ffffff;
			margin-left: 40px;
			padding: 20px 0;
			cursor: pointer;
			color: #666666;
		}
	}

	.list {
		width: 100%;
		margin-top: 20px;

		.list-box {
			width: calc(100% - $marginTop-60 * 2);
		}

		.list-box-l {
			width: 65%;

			.list-box-l-item:hover {
				box-shadow: 0 10px 10px 0 rgba(153, 153, 153, 0.3);
			}

			.list-box-l-item {
				margin-bottom: 20px;
				background-color: #ffffff;
				border-radius: 12px;
				cursor: pointer;
			}

			.list-box-l-item-top {
				background-color: #F7FCFB;
				padding: 10px 20px;
				border-radius: 12px 12px 0 0;

				img {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					object-fit: cover;
				}

				.list-box-l-item-top-l {}

				.list-box-l-item-top-r {
					font-size: 14px;
					width: 70px;
					height: 30px;
					border-radius: 4px;
				}
			}

			.list-box-l-item-title {
				font-weight: 500;
				padding: 10px 20px;
			}

			.list-box-l-item-con {
				font-size: 13px;
				color: #999999;
				padding: 0 20px 10px 20px;
				white-space: pre-wrap;
			}

			.list-box-l-item-bom {
				padding: 0 20px;
			}

			.list-box-l-item-tag {
				.list-box-l-item-tag-i {
					font-size: 13px;
					padding: 4px 8px;
					border-radius: 8px;
					background-color: #F8F8F8;
					margin-right: 20px;
					margin-bottom: 20px;
				}
			}
		}

		.list-box-r {
			width: calc(35% - 20px);
			height: fit-content;
			border-radius: 13px;
			background-color: #ffffff;
		}
	}
</style>