添加跨境标签

src/components/postPush/postPush.vue

@@ -33,10 +33,10 @@
 							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-form-item prop="positionTag" :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" />
+							placeholder="请选择跨境标签" readonly class="inputClass" v-model="positionTagDisplay" />
 					</el-form-item>
 					
 					<el-form-item prop="address" :rules="[{ required: true, message: '请输入工作地址', trigger: 'blur', },]"
@@ -72,18 +72,6 @@
 								:value="item.value" />
 						</el-select>
 					</el-form-item>
-					<el-form-item prop="positionTag" :rules="[{ required: true, message: '请添加岗位关键词', trigger: 'blur', },]"
-						class="row45" label="岗位关键词">
-						<el-tag size="large" style="margin-right: 10px;" v-for="(item, index) in postPushForm.positionTag"
-							:key="item" closable :disable-transitions="false" @close="handleClose(index)">
-							{{ item }}
-						</el-tag>
-						<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: fit-content;"
-							size="default" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
-						<el-button v-else class="button-new-tag ml-1" size="default" @click="inputVisible = true">
-							+ 新增
-						</el-button>
-					</el-form-item>
 					<el-form-item prop="welfareTag"
 						:rules="[{ required: true, message: '请选择岗位福利', trigger: 'blur', },]" class="row45" label="岗位福利">
 						<el-select v-model="postPushForm.welfareTag" multiple placeholder="请选择岗位福利"
@@ -169,7 +157,7 @@
 		</el-dialog>
 
 		<!-- 从事方向选择 -->
-		<el-dialog class="workDialog" :draggable="true" destroy-on-close align-center center
+		<el-dialog class="workDialog" @close="type = false" :draggable="true" destroy-on-close align-center center
 			v-model="industryDialog" title="选择从事方向">
 			<template #header>
 				<div class="my-header flex align-center">
@@ -178,17 +166,13 @@
 					</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
+							class="my-header-title-se" multiple-limit="20" v-model="postPushForm.positionTag" 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>
+						<span style="margin-left: 10px;font-size: 13px;color: #999999;">{{ postPushForm.positionTag.length }}/20</span>
+						<el-button @click="addHangye()" style="margin-left: 10px" type="primary">确定</el-button>
 					</div>
 				</div>
 			</template>
@@ -202,12 +186,24 @@
 					<!-- 二级可选项 -->
 					<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)">
+							:class="{ active: postPushForm.positionTag.includes(child.postSkillName) }"
+							@click="togglePreference(child.postSkillName)">
 							<span>{{ child.postSkillName }}</span>
 						</div>
 					</div>
 				</div>
+				<!-- 已选择的自定义标签 -->
+				<div v-for="(item, index) in customTags" :key="index" style="margin-right: 10px; display: inline-block;">
+					<el-tag size="large" closable :disable-transitions="false" @close="handleClose(postPushForm.positionTag.indexOf(item))">
+						{{ item }}
+					</el-tag>
+				</div>
+				<!-- 自定义标签输入框 -->
+				<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: fit-content;"
+					size="default" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+				<el-button v-else class="button-new-tag ml-1" size="default" @click="inputVisible = true">
+					+ 新增
+				</el-button>
 				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
 			</div>
 		</el-dialog>
@@ -259,11 +255,10 @@ export default {
 			workDialog: false, //是否打开岗位选择
 			dialogAgreements: false, //协议弹窗
 			checked: false, //是否同意协议
-			industryArr: [], // 选择的从事方向数组
 			industryArrList: [], // 可选择的从事方向列表
 			industryList: [], // 从事方向列表
 			industryDialog: false, // 是否打开从事方向选择
-			industryName: '', // 从事方向
+			availableBackendTags: [], // 可用的后端标签
 			inputValue: '',
 			inputVisible: false,
 			postTypeList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
@@ -278,8 +273,7 @@ export default {
 				education: '', //学历要求
 				salaryRange: '', //薪资范围
 				salaryTimes: '',
-				positionTag: [], //岗位关键词
-				industry: '', //从事方向
+				positionTag: [], //从事方向（包含选择的和自定义的）
 				welfareTag: [], //岗位福利
 				positionDetails: '', //岗位介绍
 				province: '', //省
@@ -359,16 +353,18 @@ export default {
 		}
 	},
 	watch: {
-		//监听行业选择变化
-		industryArr: {
+		//监听从事方向选择变化
+		'postPushForm.positionTag': {
 			handler(newItems) {
-				this.industryArr.map(item => {
+				newItems.map(item => {
 					this.industryList.map(ite => {
-						ite.childrenList.map(it => {
-							if (item == it.industryName) {
-								it.select = true;
-							}
-						});
+						if (ite.childrenList) {
+							ite.childrenList.map(it => {
+								if (item == it.postSkillName) {
+									it.select = true;
+								}
+							});
+						}
 					});
 				});
 			},
@@ -378,6 +374,15 @@ export default {
 	computed: {
 		rightList() {
 			return this.workTypeList.length > 0 ? this.workTypeList[this.workCurrent].childrens : []
+		},
+		positionTagDisplay() {
+			return this.postPushForm.positionTag.join(',')
+		},
+		customTags() {
+			// 过滤出真正的自定义标签（不在后端标签列表中的标签）
+			return this.postPushForm.positionTag.filter(tag => {
+				return !this.availableBackendTags.includes(tag);
+			});
 		}
 	},
 	mounted() {
@@ -396,16 +401,16 @@ export default {
 		// 切换从事方向选择状态
 		togglePreference(skillName) {
 			// 查找索引
-			const index = this.industryArr.indexOf(skillName);
+			const index = this.postPushForm.positionTag.indexOf(skillName);
 
 			if (index > -1) {
 				// 如果已选择，则取消选择
-				this.industryArr.splice(index, 1);
+				this.postPushForm.positionTag.splice(index, 1);
 			} else {
 				// 如果未选择，检查是否达到选择上限
-				if (this.industryArr.length >= 5) {
+				if (this.postPushForm.positionTag.length >= 20) {
 					ElMessage({
-						message: '最多添加五条',
+						message: '最多添加二十条',
 						type: 'info',
 						duration: 1500,
 						offset: this.screenHeight / 2
@@ -413,25 +418,21 @@ export default {
 					return;
 				}
 				// 添加选择
-				this.industryArr.push(skillName);
+				this.postPushForm.positionTag.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) {
+						if (ite.postSkillName == e) {
 							ite.select = false;
 						}
 					});
 				}
 			});
-			console.log(this.industryList, '111111111');
-			console.log(this.industryArr, '已出tag');
 		},
 		selectJob(info) {
-			console.log(info)
 			this.postPushForm.ruleClassifyName = info.ruleClassifyName
 			this.postPushForm.ruleClassifyId = info.ruleClassifyId
 			this.price = info.price
@@ -439,7 +440,6 @@ export default {
 		},
 		//选择岗位
 		handleSelectWork(item) {
-			console.log(item)
 			this.postPushForm.ruleClassifyName = item.ruleClassifyName
 			this.postPushForm.ruleClassifyId = item.ruleClassifyId
 			this.price = item.price
@@ -532,9 +532,8 @@ export default {
 					this.postPushForm.experience = obj.experience
 					this.postPushForm.education = obj.education
 					this.postPushForm.salaryRange = obj.salaryRange
-					this.postPushForm.positionTag = obj.positionTag.split(',')
-					// this.postPushForm.industry = obj.industry
-					this.postPushForm.welfareTag = obj.welfareTag.split(';')
+					this.postPushForm.positionTag = obj.positionTag ? obj.positionTag.split(',') : []
+					this.postPushForm.welfareTag = obj.welfareTag ? obj.welfareTag.split(';') : []
 					this.postPushForm.positionDetails = obj.positionDetails
 					this.postPushForm.province = obj.province
 					this.postPushForm.city = obj.city
@@ -543,6 +542,10 @@ export default {
 					this.postPushForm.lat = obj.lat
 					this.postPushForm.status = obj.status
 					this.postPushForm.salaryTimes = obj.salaryTimes
+					// 如果有岗位ID，加载从事方向列表，确保标签能够正确回显
+					if (this.postPushForm.ruleClassifyId) {
+						this.getIndustryList(false);
+					}
 					if (this.type == 'save') {
 						this.getJobPrice(obj.ruleClassifyId)
 					} else if (this.postPushForm.status == 3) {
@@ -590,19 +593,11 @@ export default {
 				return;
 			}
 			
-			// 重置选择数组
-			this.industryArr = [];
-			
-			// 如果已经有选择的从事方向，初始化选择数组
-			if (this.postPushForm.industry) {
-				this.industryArr = this.postPushForm.industry.split(',');
-			}
-			
 			// 获取从事方向列表
 			this.getIndustryList();
 		},
 		// 获取从事方向列表
-		getIndustryList() {
+		getIndustryList(openDialog = true) {
 			let data = {
 				ruleClassifyId: this.postPushForm.ruleClassifyId
 			};
@@ -623,8 +618,14 @@ export default {
 						});
 					});
 					this.industryArrList = flatList;
-					// 打开弹窗
-					this.industryDialog = true;
+					
+					// 保存所有可用的后端标签名称
+					this.availableBackendTags = flatList.map(item => item.postSkillName);
+					
+					// 根据参数决定是否打开弹窗
+					if (openDialog) {
+						this.industryDialog = true;
+					}
 				} else {
 					ElMessage({
 						message: res.msg,
@@ -635,86 +636,13 @@ export default {
 				}
 			});
 		},
-		// 选择从事方向
-		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;
 			formPost.validate((valid) => {
 				if (valid) {
+					let obj = JSON.parse(JSON.stringify(this.postPushForm))
 					if (!obj.lng || !obj.lat) {
 						ElMessage({
 							message: '请选择搜索出来的地址',
@@ -724,81 +652,19 @@ export default {
 						})
 						return
 					}
-					console.log(this.postPushForm)
-					let obj = JSON.parse(JSON.stringify(this.postPushForm))
 					obj.welfareTag = obj.welfareTag.join(';')
 					obj.positionTag = obj.positionTag.join(',')
 					obj.type = obj.postType;
-					// if (!this.checked) {
-					// 	ElMessage({
-					// 		message: '请阅读并同意《岗位发布协议》',
-					// 		type: 'info',
-					// 		duration: 1500,
-					// 		offset: this.screenHeight / 2
-					// 	})
-					// 	return
-					// }
 					if (this.type == 'save') {
-						// ElMessageBox.confirm(
-						// 	'发布该岗位需支付' + this.price + '钻石，确认发布吗？',
-						// 	'温馨提示', {
-						// 	confirmButtonText: '确认',
-						// 	cancelButtonText: '取消',
-						// 	type: 'warning',
-						// }
-						// ).then(() => {
-						// 	//发布岗位
-						// 	this.pay(obj)
-						// }).catch(() => {
-
-						// })
-						this.pay(obj)
-
+						this.pay(obj, this.postPushId)
 					} else if (this.type == 'updata') {
 						if (this.postPushForm.status == 3) { //拒绝重新发布
-							// ElMessageBox.confirm(
-							// 	'发布该岗位为热门岗位，需支付' + this.price + '钻石，确认发布吗？',
-							// 	'温馨提示', {
-							// 	confirmButtonText: '确认',
-							// 	cancelButtonText: '取消',
-							// 	type: 'warning',
-							// }
-							// ).then(() => {
-								
-							// }).catch(() => {
-
-							// })
-							//发布岗位
 							this.pay(obj)
 						} else {
-							// ElMessageBox.confirm(
-							// 	'本次修改岗位信息免费，确认发布吗？',
-							// 	'温馨提示', {
-							// 	confirmButtonText: '确认',
-							// 	cancelButtonText: '取消',
-							// 	type: 'warning',
-							// }
-							// ).then(() => {
-								
-							// }).catch(() => {
-
-							// })
 							//发布岗位
 							this.pay(obj, this.postPushId)
 						}
 					} else {
-						// ElMessageBox.confirm(
-						// 	'发布该岗位为热门岗位，需支付' + this.price + '钻石，确认发布吗？',
-						// 	'温馨提示', {
-						// 	confirmButtonText: '确认',
-						// 	cancelButtonText: '取消',
-						// 	type: 'warning',
-						// }
-						// ).then(() => {
-							
-						// }).catch(() => {
-
-						// })
 						//发布岗位
 						this.pay(obj)
 					}
@@ -806,36 +672,9 @@ export default {
 				}
 			})
 		},
-		//福利列表
-		// getFuliList() {
-		// 	let data = {
-		// 		type: '项目福利'
-		// 	}
-		// 	this.$Request.get('/app/dict/list', {
-		// 		params: data
-		// 	}).then(res => {
-		// 		if (res.code == 0) {
-		// 			this.flList = res.data
-		// 		}
-		// 	})
-		// },
-		// 添加行业
-		addIndustry(ite) {
-			if (ite.select == false) {
-				if (this.industryArr.length == 3) {
-					ElMessage({
-						message: '最多添加三条',
-						type: 'info',
-						duration: 1500,
-						offset: this.screenHeight / 2
-					})
-					return
-				}
-				this.industryArr.push(ite.industryName)
-			} else {
-				this.industryArr.splice(this.industryArr.indexOf(ite.industryName), 1)
-			}
-			ite.select = !ite.select
+		// 确定选择
+		addHangye() {
+			this.industryDialog = false;
 		},
 		//删除关键词
 		handleClose(index) {
@@ -844,6 +683,19 @@ export default {
 		//确认
 		handleInputConfirm() {
 			if (this.inputValue) {
+				// 检查是否达到选择上限
+				if (this.postPushForm.positionTag.length >= 20) {
+					ElMessage({
+						message: '最多添加二十条',
+						type: 'info',
+						duration: 1500,
+						offset: this.screenHeight / 2
+					});
+					this.inputVisible = false;
+					this.inputValue = '';
+					return;
+				}
+				
 				this.postPushForm.positionTag.push(this.inputValue)
 				this.inputVisible = false
 				this.inputValue = ''