1

src/components/postPush/postPush.vue

@@ -32,6 +32,13 @@
 						<el-input :disabled="type == 'updata' && postPushForm.status != 3" @click.stop="openPostPush()"
 							placeholder="请选择岗位类型" readonly class="inputClass" v-model="postPushForm.ruleClassifyName" />
 					</el-form-item>
+
+					<el-form-item prop="industry" :rules="[{ required: true, message: '请选择从事方向', trigger: 'blur', },]"
+						class="row45" label="从事方向">
+						<el-input :disabled="type == 'updata' && postPushForm.status != 3" @click.stop="openIndustry()"
+							placeholder="请选择从事方向" readonly class="inputClass" v-model="postPushForm.industry" />
+					</el-form-item>
+					
 					<el-form-item prop="address" :rules="[{ required: true, message: '请输入工作地址', trigger: 'blur', },]"
 						class="row45" label="工作地址">
 						<el-autocomplete style="width: 100%;" @input="workInput" v-model="postPushForm.address"
@@ -112,47 +119,6 @@
 			<!-- 协议弹窗 -->
 			<agreement title="岗位发布协议" v-if="dialogAgreements" :dialogAgreements="dialogAgreements" typeid="333"
 				@closeAgree="closeAgree" />
-			<!-- 行业选择 -->
-			<!-- <el-dialog class="workDialog" :draggable="true" destroy-on-close align-center center
-				v-model="industryDialog" title="选择行业">
-				<template #header>
-					<div class="my-header flex align-center">
-						<div class="my-header-title" style="font-weight: bold;">
-							选择行业
-						</div>
-						<div class="my-header-title flex align-center" style="margin-left: 40px;width: 500px;">
-							<el-select style="width: 300px;" @remove-tag="removeTag" :collapse-tags="true"
-								:max-collapse-tags="2" class="my-header-title-se" multiple-limit="3"
-								v-model="industryArr" multiple placeholder="请选择行业">
-								<el-option v-for="item in industryArrList" :key="item.industryName"
-									:label="item.industryName" :value="item.industryName" />
-							</el-select>
-							<span style="margin-left: 10px;font-size: 13px;color: #999999;">{{ industryArr.length
-								}}/3</span>
-							<el-button @click="addHangye()" style="margin-left: 10px;" type="primary">确定</el-button>
-						</div>
-					</div>
-				</template>
-				<div class="myHy flex align-center justify-center">
-					<div class="myHy-box">
-						<div class="myHy-box-item flex justify-between" v-for="(item, index) in industryList"
-							:key="index">
-							<div class="myHy-box-item-l">
-								{{ item.industryName }}
-							</div>
-							<div class="myHy-box-item-r flex align-center justify-between flex-wrap">
-								<div class="myHy-box-item-r-item" :style="ite.select ? 'color:#00DD9A' : ''"
-									@click="addIndustry(ite)" v-for="(ite, ind) in item.childrenList" :key="ind">
-									{{ ite.industryName }}
-								</div>
-								<div class="myHy-box-item-r-item"></div>
-								<div class="myHy-box-item-r-item"></div>
-							</div>
-						</div>
-						<el-empty v-if="industryList.length == 0" description="暂无行业" />
-					</div>
-				</div>
-			</el-dialog> -->
 		</el-dialog>
 		<!-- 岗位选择 -->
 		<el-dialog @close="type = false" class="workDialog" :draggable="true" destroy-on-close align-center center
@@ -202,6 +168,49 @@
 			</div>
 		</el-dialog>
 
+		<!-- 从事方向选择 -->
+		<el-dialog class="workDialog" :draggable="true" destroy-on-close align-center center
+			v-model="industryDialog" title="选择从事方向">
+			<template #header>
+				<div class="my-header flex align-center">
+					<div class="my-header-title" style="font-weight: bold">
+						选择从事方向
+					</div>
+					<div class="my-header-title flex align-center" style="margin-left: 40px; width: 600px">
+						<el-select @remove-tag="removeTag" :collapse-tags="true" :max-collapse-tags="5"
+							class="my-header-title-se" multiple-limit="5" v-model="industryArr" multiple
+							placeholder="请选择从事方向">
+							<el-option v-for="item in industryArrList" :key="item.postSkillName"
+								:label="item.postSkillName" :value="item.postSkillName" />
+						</el-select>
+						<span style="
+                                margin-left: 10px;
+                                font-size: 13px;
+                                color: #999999;
+                            ">{{ industryArr.length }}/5</span>
+						<el-button @click="saveIndustry()" style="margin-left: 10px" type="primary">确定</el-button>
+					</div>
+				</div>
+			</template>
+			<div class="preference-grid">
+				<div v-for="(parent, pIndex) in industryList" :key="pIndex" class="preference-group">
+					<!-- 一级标题 -->
+					<div class="preference-title">
+						<span>{{ parent.postSkillName }}</span>
+					</div>
+
+					<!-- 二级可选项 -->
+					<div class="preference-children">
+						<div v-for="(child, cIndex) in parent.childrenList" :key="cIndex" class="preference-tag"
+							:class="{ active: industryArr.includes(child.postSkillName) }"
+							@click="selectIndustry(child)">
+							<span>{{ child.postSkillName }}</span>
+						</div>
+					</div>
+				</div>
+				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -241,6 +250,7 @@ export default {
 			default: ''
 		}
 	},
+	
 	data() {
 		return {
 			workTypeList: [], //岗位类型
@@ -249,9 +259,11 @@ export default {
 			workDialog: false, //是否打开岗位选择
 			dialogAgreements: false, //协议弹窗
 			checked: false, //是否同意协议
-			industryArr: [],
-			industryArrList: [], //可选择的行业列表
-			industryDialog: false,
+			industryArr: [], // 选择的从事方向数组
+			industryArrList: [], // 可选择的从事方向列表
+			industryList: [], // 从事方向列表
+			industryDialog: false, // 是否打开从事方向选择
+			industryName: '', // 从事方向
 			inputValue: '',
 			inputVisible: false,
 			postTypeList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
@@ -267,8 +279,8 @@ export default {
 				salaryRange: '', //薪资范围
 				salaryTimes: '',
 				positionTag: [], //岗位关键词
-				// industry: '', //行业要求
-				welfareTag: '', //岗位福利
+				industry: '', //从事方向
+				welfareTag: [], //岗位福利
 				positionDetails: '', //岗位介绍
 				province: '', //省
 				city: '', //市
@@ -346,6 +358,23 @@ export default {
 			}
 		}
 	},
+	watch: {
+		//监听行业选择变化
+		industryArr: {
+			handler(newItems) {
+				this.industryArr.map(item => {
+					this.industryList.map(ite => {
+						ite.childrenList.map(it => {
+							if (item == it.industryName) {
+								it.select = true;
+							}
+						});
+					});
+				});
+			},
+			deep: true // 使用deep属性来监听数组中元素的变化
+		},
+	},
 	computed: {
 		rightList() {
 			return this.workTypeList.length > 0 ? this.workTypeList[this.workCurrent].childrens : []
@@ -364,6 +393,43 @@ export default {
 		// this.getFuliList()
 	},
 	methods: {
+		// 切换从事方向选择状态
+		togglePreference(skillName) {
+			// 查找索引
+			const index = this.industryArr.indexOf(skillName);
+
+			if (index > -1) {
+				// 如果已选择，则取消选择
+				this.industryArr.splice(index, 1);
+			} else {
+				// 如果未选择，检查是否达到选择上限
+				if (this.industryArr.length >= 5) {
+					ElMessage({
+						message: '最多添加五条',
+						type: 'info',
+						duration: 1500,
+						offset: this.screenHeight / 2
+					});
+					return;
+				}
+				// 添加选择
+				this.industryArr.push(skillName);
+			}
+		},
+		removeTag(e) {
+			console.log(e, '2222222');
+			this.industryList.map(item => {
+				if (item.childrenList.length > 0) {
+					item.childrenList.map(ite => {
+						if (ite.industryName == e) {
+							ite.select = false;
+						}
+					});
+				}
+			});
+			console.log(this.industryList, '111111111');
+			console.log(this.industryArr, '已出tag');
+		},
 		selectJob(info) {
 			console.log(info)
 			this.postPushForm.ruleClassifyName = info.ruleClassifyName
@@ -495,9 +561,155 @@ export default {
 			}).then(res => {
 				if (res.code == 0) {
 					this.price = res.data.price
+					// 同时更新表单其他字段
+					if (res.data.minSalary && res.data.maxSalary) {
+						this.postPushForm.salaryRange = res.data.minSalary + '-' + res.data.maxSalary
+					}
+					if (res.data.salaryTimes) {
+						this.postPushForm.salaryTimes = res.data.salaryTimes
+					}
+					if (res.data.experience) {
+						this.postPushForm.experience = res.data.experience
+					}
+					if (res.data.education) {
+						this.postPushForm.education = res.data.education
+					}
 				}
 			})
 		},
+		// 打开从事方向选择弹窗
+		openIndustry() {
+			// 检查是否已选择岗位类型
+			if (!this.postPushForm.ruleClassifyId) {
+				ElMessage({
+					message: '请先选择岗位类型',
+					type: 'warning',
+					duration: 1500,
+					offset: this.screenHeight / 2
+				});
+				return;
+			}
+			
+			// 重置选择数组
+			this.industryArr = [];
+			
+			// 如果已经有选择的从事方向，初始化选择数组
+			if (this.postPushForm.industry) {
+				this.industryArr = this.postPushForm.industry.split(',');
+			}
+			
+			// 获取从事方向列表
+			this.getIndustryList();
+		},
+		// 获取从事方向列表
+		getIndustryList() {
+			let data = {
+				ruleClassifyId: this.postPushForm.ruleClassifyId
+			};
+			
+			this.$Request.get('/app/userFirst/getPostSkill', { params: data }).then(res => {
+				if (res.code == 0) {
+					// 处理返回的层级数据，添加展开状态
+					this.industryList = res.data.map(item => ({
+						...item,
+						isOpen: false
+					}));
+					
+					// 构建可选择的从事方向列表（扁平化）
+					let flatList = [];
+					this.industryList.forEach(parent => {
+						parent.childrenList.forEach(child => {
+							flatList.push(child);
+						});
+					});
+					this.industryArrList = flatList;
+					// 打开弹窗
+					this.industryDialog = true;
+				} else {
+					ElMessage({
+						message: res.msg,
+						type: 'error',
+						duration: 1500,
+						offset: this.screenHeight / 2
+					});
+				}
+			});
+		},
+		// 选择从事方向
+		selectIndustry(item) {
+			const skillName = item.postSkillName;
+			
+			// 检查是否已达到选择上限
+			if (this.industryArr.length >= 5 && !this.industryArr.includes(skillName)) {
+				ElMessage({
+					message: '最多只能选择5个从事方向',
+					type: 'warning',
+					duration: 1500,
+					offset: this.screenHeight / 2
+				});
+				return;
+			}
+			
+			// 切换选择状态
+			if (this.industryArr.includes(skillName)) {
+				const index = this.industryArr.indexOf(skillName);
+				this.industryArr.splice(index, 1);
+			} else {
+				this.industryArr.push(skillName);
+			}
+		},
+		// 从事方向变化时的处理
+		changeIndustry() {
+			// 限制最多选择5个
+			if (this.industryArr.length >= 5) {
+				ElMessage({
+					message: '最多只能选择5个从事方向',
+					type: 'warning',
+					duration: 1500,
+					offset: this.screenHeight / 2
+				});
+			}
+		},
+		// 全选从事方向
+		addAllIndustry() {
+			// 构建所有可选项
+			let allSkills = [];
+			this.industryArrList.forEach(item => {
+				allSkills.push(item.postSkillName);
+			});
+			
+			// 限制最多选择5个
+			if (allSkills.length > 5) {
+				ElMessage({
+					message: '最多只能选择5个从事方向',
+					type: 'warning',
+					duration: 1500,
+					offset: this.screenHeight / 2
+				});
+				this.industryArr = allSkills.slice(0, 5);
+			} else {
+				this.industryArr = allSkills;
+			}
+		},
+		// 保存选择的从事方向
+		saveIndustry() {
+			// 检查是否有选择
+			if (this.industryArr.length == 0) {
+				ElMessage({
+					message: '请至少选择一个从事方向',
+					type: 'warning',
+					duration: 1500,
+					offset: this.screenHeight / 2
+				});
+				return;
+			}
+			
+			// 更新从事方向字段
+			this.postPushForm.industry = this.industryArr.join(',');
+			
+			// 关闭弹窗
+			this.industryDialog = false;
+		},
 		//发布岗位
 		savePostPush() {
 			let formPost = this.$refs.formPost;
@@ -625,38 +837,6 @@ export default {
 			}
 			ite.select = !ite.select
 		},
-		// //确认行业
-		// addHangye() {
-		// 	this.postPushForm.industry = this.industryArr.join(',')
-		// 	this.industryDialog = false
-		// },
-		/**
-		 * 获取行业数据
-		 */
-		getIndustryList() {
-			this.$Request.get('/app/industry/getIndustryList').then(res => {
-				if (res.code == 0) {
-					let arr = JSON.parse(JSON.stringify(res.data))
-					arr.map(item => {
-						item.childrenList.map((ite, ind) => {
-							ite.select = false
-							if (ind < 6) {
-								this.industryArrList.push(ite)
-							}
-						})
-					})
-					this.industryList = arr
-					this.industryDialog = true
-				} else {
-					ElMessage({
-						message: res.msg,
-						type: 'error',
-						duration: 1500,
-						offset: this.screenHeight / 2
-					})
-				}
-			})
-		},
 		//删除关键词
 		handleClose(index) {
 			this.postPushForm.positionTag.splice(index, 1)
@@ -1024,4 +1204,49 @@ export default {
 		}
 	}
 }
+/* 从事方向选择样式 */
+.preference-grid {
+	padding: 20px;
+	max-height: 400px;
+	overflow-y: auto;
+}
+
+.preference-group {
+	margin-bottom: 20px;
+}
+
+.preference-title {
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 10px;
+	color: #333;
+}
+
+.preference-children {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.preference-tag {
+	padding: 8px 16px;
+	border: 1px solid #dcdfe6;
+	border-radius: 20px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	background-color: #fff;
+	font-size: 14px;
+	color: #606266;
+}
+
+.preference-tag:hover {
+	border-color: #00DD9A;
+	color: #00DD9A;
+}
+
+.preference-tag.active {
+	background-color: #00DD9A;
+	border-color: #00DD9A;
+	color: #fff;
+}
 </style>