yizhizan-manager/src/views/recruit/postSkill.vue

<template>
	<div>
			<!-- 关键：用flex布局强制横向排列，禁止换行 -->
		<div class="button-toolbar" style="margin-bottom: 20px;">
			<!-- 按钮组：刷新 + 添加 + 导入 -->
			<el-button-group class="btn-group">
			<!-- 刷新按钮 -->
			<el-button
				size="default"
				type="primary"
				@click="cancel"
				style="margin-right: 10px;"
			>
				刷新
			</el-button>

			<!-- 添加按钮 -->
			<el-button
				size="default"
				type="primary"
				:disabled="!isAuth('positionList:add')"
				@click="classAdd(1)"
				style="margin-right: 10px;"
			>
				添加
			</el-button>

			<!-- Excel导入按钮（核心：强制inline-block，消除换行） -->
			<el-upload
				class="upload-btn-wrapper"
				action="#"
				:auto-upload="false"
				:on-change="handleFileChange"
				:on-remove="handleFileRemove"
				:file-list="fileList"
				accept=".xlsx,.xls"
				:show-file-list="false"
				style="display: inline-block;"
				:disabled="!isAuth('positionList:import')"
			>
				<el-button
					size="default"
					type="primary"
					style="margin-right: 5px;"
				>
				导入Excel
				</el-button>
			</el-upload>
			</el-button-group>

			<!-- 确认导入按钮（可选，同排显示） -->
			<el-button
				v-if="fileList.length"
				size="default"
				type="success"
				@click="handleImport"
			>
			确认导入
			</el-button>
		</div>
				<!-- <div style="width: 100%;text-align: right;">
					<div class="excel-import-container">
						<el-upload
							class="upload-excel"
							action="#"
							:auto-upload="false"
							:on-change="handleFileChange"
							:on-remove="handleFileRemove"
							:file-list="fileList"
							accept=".xlsx,.xls"
							drag
						>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或<em>点击上传</em>
						</div>
						<div class="el-upload__tip" slot="tip">
							仅支持.xls/.xlsx格式文件，单个文件大小不超过10MB
						</div>
						</el-upload>
						<br></br>
						<el-button
							type="primary"
							icon="el-icon-upload2"
							@click="handleImport"
							:disabled="!fileList.length"
							style="margin-top: 20px;"
							>
							确认导入
						</el-button>
						<el-button style="margin-bottom: 20px;" size="" type="primary" @click="cancel">刷新
						</el-button>
						<el-button style="margin:10px;" size="" type="primary" icon="document"
							:disabled="!isAuth('positionList:add')" @click="classAdd(1)">添加
						</el-button>
					</div>
				</div> -->
				<!-- 职业方向-->
			<el-table v-loading="tableDataLoading" :data="tableData.records">
				<el-table-column prop="postSkillId" label="编号" width="160">
				</el-table-column>
				<el-table-column prop="postSkillName" label="职业方向">
				</el-table-column>
				<el-table-column prop="sort" label="排序">
				</el-table-column>
				<el-table-column prop="isEnable" label="状态" >
					<template slot-scope="scope">
						<el-switch v-model="scope.row.isEnable" @change="change(scope.row.postSkillId,scope.row.isEnable,scope.row)"
							:disabled="!isAuth('positionList:update')" :active-value="openValue2"
							:inactive-value="closeValue2" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="ruleClassifyId"  label="岗位ID" width="160">
				</el-table-column> -->
				<el-table-column prop="ruleClassifyName" label="岗位名称" >
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="180">
				</el-table-column>
				<el-table-column label="操作" prop="id" width="200" fixed='right' align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" style="margin: 5px;"
							@click="classList(scope.row,2)">职业技能列表
						</el-button>
						<el-button size="mini" type="primary" :disabled="!isAuth('positionList:update')" style="margin: 5px;"
							@click="classAdd(0,scope.row)">修改
						</el-button>
						<el-button size="mini" type="danger" :disabled="!isAuth('positionList:delete')" style="margin: 5px;"
							@click="classdelete(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
				</el-pagination>
			</div>
			<!-- </el-tab-pane> -->
			<!--    图片展示-->
			<el-dialog title="二级岗位列表" :visible.sync="dialogVisible" width="70%" center>
				<div style="margin:2% 0;display: inline-block;">
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="classAdd(2)">
						添加
					</el-button>
				</div>
				<el-table v-loading="tableDataLoading4" :data="stationList.records">
					<el-table-column prop="postSkillId" label="编号" width="160">
					</el-table-column>
					<el-table-column prop="postSkillName" label="职业技能">
					</el-table-column>
					<el-table-column prop="sort" label="排序">
					</el-table-column>
					<el-table-column prop="isEnable" label="状态">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.isEnable" @change="change(scope.row.postSkillId,scope.row.isEnable,scope.row)"
								:disabled="!isAuth('positionList:update')" :active-value="openValue2"
								:inactive-value="closeValue2" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="ruleClassifyId" label="岗位ID" >
					</el-table-column> -->
					<el-table-column prop="ruleClassifyName" label="岗位名称" >
					</el-table-column>
					<el-table-column prop="updateTime" label="更新时间" width="180">
					</el-table-column>
					<el-table-column label="操作" fixed='right' width="180">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('positionList:update')"
								@click="classAdd(0,scope.row,2)">修改
							</el-button>
							<el-button size="mini" type="danger" :disabled="!isAuth('positionList:delete')"
								@click="stationDelete(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChangeGw" @current-change="handleCurrentChangeGw"
						:page-sizes="[5, 10, 15, 20]" :page-size="size1" :current-page="page1"
						layout="total,sizes, prev, pager, next,jumper" :total="stationList.total">
					</el-pagination>
				</div>
			</el-dialog>
			<!-- 添加、修改职业技能 -->
			<el-dialog :title="titles" :visible.sync="dialogFormVisible9" center>
				<div style="margin-bottom: 10px;position: relative;">
					<div style="width: 200px;display: inline-block;text-align: right;position: absolute;top: 0;">所属岗位：</div>
					<div class="ruleitem" style="display: inline-block;margin-left: 200px;">
						<div>
							<span>一级岗位分类：<el-radio v-for="(item,index) in yijiData" :key="index" v-model="yijiid"
									:label="item.ruleClassifyId"
									@change="yijiBtn(yijiid)">{{item.ruleClassifyName}}</el-radio></span>
						</div>
						<div v-if="yijiid!=''">
							<span>二级级岗位分类：<el-radio v-for="(item,index) in erjiData" :key="index" v-model="erjiId"
									:label="item.ruleClassifyId"
									@change="erjiBtn(erjiId)">{{item.title}}</el-radio></span>
						</div>
						<div v-if="erjiId!=''">
							<span>岗位名称：<el-radio v-for="(item,index) in sanjiData" :key="index" v-model="sanjiTypr"
									:label="item.ruleClassifyId">{{item.ruleClassifyName}}</el-radio></span>
						</div>
					</div>
				</div>

				<div style="margin-bottom: 10px;" v-if="parentId==0">
					<span style="width: 200px;display: inline-block;text-align: right;">职业方向名称：</span>
					<el-input style="width:50%;" v-model="postSkillName" type="text" placeholder="请输入职业方向名称"></el-input>
				</div>
				<div style="margin-bottom: 10px;" v-if="parentId!=0">
					<span style="width: 200px;display: inline-block;text-align: right;">职业技能名称：</span>
					<el-input style="width:50%;" v-model="postSkillName" type="text" placeholder="请输入职业技能名称"></el-input>
				</div>

				<div style="margin-bottom: 10px;display:flex;">
					<span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
					<el-input-number size="medium" v-model="sort"></el-input-number>
				</div>
				<div style="margin-bottom: 10px;display:flex;">
					<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
					<el-radio-group v-model="gameStatus">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="0">禁用</el-radio>
					</el-radio-group>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible9 = false">取 消</el-button>
					<el-button type="primary" @click="refuseto1()">确 定</el-button>
				</div>
			</el-dialog>

		<!-- </el-tabs> -->
	</div>
</template>

<script>
	export default {

		data() {
			return {
				size: 10,
				page: 1,
				size1: 10,
				page1: 1,
				limit: 10,
				openValue2: 1,
				closeValue2: 0,
				title: '',
				type: '',
				name: '',
				activeName: 'first',
				tableDataLoading: true,
				tableDataLoading4: false,
				dialogFormVisible9: false,
				dialogVisible: false,
				tableData: {},
				titles: '添加服务分类',
				ruleClassifyId: '',
				sort:1,
				gameStatus: 1,
				stationList:{},
				postSkillId:'',
				postSkillName:'',
				flname:'',
				parentId:0,
				parentIdEr:'',
				postSkillIdT: '',
				ruleClassifyName: '',
				yijiid: '',
				erjiId: '',
				yijiData: [],
				erjiData: [],
				sanjiData: [],
				erjiTypr: true,
				sanjiTypr: '',
				fileList: []
			}
		},
		methods: {
			handleSizeChange(val) {
				this.limit = val
				this.classSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.classSelect()
			},
			handleSizeChangeGw(val) {
				this.size1 = val
				this.stationClass()
			},
			handleCurrentChangeGw(val) {
				this.page1 = val
				this.stationClass()
			},
			handleClick(tab, event) {

				this.page = 1
				if (tab._props.label == '岗位分类') {

					this.classSelect()
				}
			},
			// 取消
			cancel() {
				this.page = 1
				this.classSelect()
			},
			// 获取服务分类数据
			classSelect() {
        this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('postSkill/selectPostSkillList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						});
					}


				})
			},

			// 添加服务分类
			classAdd(index,row,jibie) {  // index 1添加职业方向 2添加职业技能, 0修改   // jibie 1职业方向 2职业技能
				console.log(index,'row', row)
				this.classSelectYiji();
				if (index==0) {
					this.titles = '修改职业方向'
					this.postSkillName = row.postSkillName
					this.postSkillId = row.postSkillId
					this.sort = row.sort
					this.parentId = row.parentId;
					this.gameStatus = row.isEnable
					this.ruleClassifyId = row.ruleClassifyId
					this.sanjiTypr = ''
					this.erjiId = ''
					this.yijiid = ''
					if(jibie==2){
						this.titles = '修改职业技能'	
					}

				} else {
					this.titles = '添加职业方向'
					if(jibie==2){
						this.titles = '添加职业技能'		
					}
					if(index==1){
						this.parentId = 0		
					}else if(index==2){
						this.parentId = this.postSkillIdT
					}
					this.postSkillId=''
					this.ruleClassifyId = ''
					this.postSkillName = ''
					this.sort = 1
					this.gameStatus = 1
					this.sanjiTypr = ''
					this.erjiId = ''
					this.yijiid = ''

				}
				this.dialogFormVisible9 = true

			},
			// 获取一级岗位数据
			classSelectYiji() {
				this.$http({
					url: this.$http.adornUrl('admin/rule/adminGetClassifyList'),
					method: 'get',
					params: this.$http.adornParams({

					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.yijiData = returnData.records
						// this.erjiTypr = false
						if (this.title == '修改') {
							this.classSelectErT()
						}
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						});
					}

				})
			},
			// 获取二级岗位数据
			classSelectErT() {
				this.$http({
					url: this.$http.adornUrl('admin/rule/adminGetParentId'),
					method: 'get',
					params: this.$http.adornParams({
						'parentId': this.yijiid,
						'industryName': '',
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.erjiData = returnData.records
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						});
					}

				})
			},
			// 选择一级岗位分类
			yijiBtn(yijiid) {
				this.erjiId = ''
				this.sanjiTypr = ''
				this.classSelectErT()
			},
			// 选择二级岗位分类
			erjiBtn(erjiId) {
				this.sanjiTypr = ''
				for (var i in this.erjiData) {
					if (this.erjiId == this.erjiData[i].ruleClassifyId) {
						if (this.erjiData[i].childrens) {
							this.sanjiData = this.erjiData[i].childrens
						} else {
							this.sanjiData = []
						}

					}
				}
			},
			// 启用与否
			change(id, isEnable,row) {
				this.$http({
					url: this.$http.adornUrl('postSkill/updatePostSkill'),
					method: 'post',
					// data: this.$http.adornData({
					params: this.$http.adornParams({
						'isEnable': isEnable,
						'sort':row.sort,
						'postSkillId': row.postSkillId,
						'postSkillName': row.postSkillName,
						'ruleClassifyId': row.ruleClassifyId,
						'parentId': row.parentId

					})
				}).then(({
					data
				}) => {
					if(data.code==0){
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								if(row.parentId==0){
									this.classSelect()
								}else{
									this.stationClass()
								}
							}
						})
					}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
									if(row.parentId==0){
										this.classSelect()
									}else{
										this.stationClass()
										// this.stationClass2()
									}
								}
							})
						}

				})
			},
			// 提交修改、添加服务分类
			refuseto1() {

				if (this.postSkillName == '' && this.parentId==0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入职业方向名称',
						type: 'warning'
					})
					return
				}

				if (this.sanjiTypr == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择所属岗位',
						type: 'warning'
					});
					return
				}

				if (this.postSkillName == '' && this.parentId!=0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入职业技能名称',
						type: 'warning'
					})
					return
				}

				if (this.sort === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择排序',
						type: 'warning'
					})
					return
				}

					if (this.titles == '添加职业方向' || this.titles == '添加职业技能') {
						var urls = 'postSkill/addPostSkill'
					} else {
						var urls = 'postSkill/updatePostSkill'
					}
					this.$http({
						url: this.$http.adornUrl(urls),
						method: 'post',
						params: this.$http.adornParams({
							'isEnable': this.gameStatus,
							'sort': this.sort,
							'ruleClassifyId': this.sanjiTypr,
							'parentId':this.parentId,
							'postSkillName': this.postSkillName,
							'postSkillId': this.postSkillId
						})
					}).then(({
						data
					}) => {
						if(data.code==0){
							this.dialogFormVisible9 = false
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									if(this.parentId==0){
										this.classSelect()
									}else{
										this.stationClass()
									}
								}
							})
						}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
								}
							})
						}

					})
			},
			// 删除分类
			classdelete(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('postSkill/deletePostSkill'),
						method: 'get',
						params: this.$http.adornParams({
							'postSkillId': row.postSkillId
						})
					}).then(({
						data
					}) => {
						if(data.code==0){
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
										this.classSelect()
									// this.dialogVisibleS = false
								}
							})
						}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
								}
							})
						}

					})
				}).catch(() => {})
			},
			// 岗位列表
			classList(row,index){

				if(index==2){
					this.postSkillIdT = row.postSkillId
					this.stationClass()
					this.dialogVisible = true
				}

			},
			stationlick(){
				this.page1 = 1
				this.stationClass()
			},
			// 获取岗位列表
			stationClass() {
        	this.tableDataLoading4 = true
				this.$http({
					url: this.$http.adornUrl('postSkill/selectPostSkillList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page1,
						'limit': this.size1,
						'parentId': this.postSkillIdT
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading4 = false
					for(var i in data.data.records){
						data.data.records[i].flname = ''

					}
					let returnData = data.data
					this.stationList = returnData
				})
			},

			// 删除岗位
			stationDelete(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('postSkill/deletePostSkill'),
						method: 'get',
						params: this.$http.adornParams({
							'postSkillId': row.postSkillId
						})
					}).then(({
						data
					}) => {
						if(data.code==0){
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
										this.stationClass()
										// this.stationClass2()
									// this.dialogVisibleS = false
								}
							})
						}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
								}
							})
						}

					})
				}).catch(() => {})
			},
			// 文件选择/改变时触发
			handleFileChange(file, fileList) {
				this.fileList = fileList
				// 校验文件类型和大小
				const isExcel = file.raw.type === 'application/vnd.ms-excel' ||
								file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				const isLt10M = file.raw.size / 1024 / 1024 < 10

				if (!isExcel) {
					this.$message.error('仅支持上传.xls/.xlsx格式的Excel文件！')
					this.fileList = [] // 清空文件列表
					return
				}
				if (!isLt10M) {
					this.$message.error('上传文件大小不能超过10MB！')
					this.fileList = [] // 清空文件列表
					return
				}
			},

			// 移除文件时触发
			handleFileRemove() {
				this.fileList = []
			},

			// 确认导入
			async handleImport() {
				try {
					this.$loading({ text: '正在导入数据，请稍候...' })
					// 获取选中的文件
					const file = this.fileList[0].raw
					// 调用导入接口
					// const res = await importExcel(file)
					const formData = new FormData()
					formData.append('file', file)
					this.$http({
						url: this.$http.adornUrl('admin/rule/import'),
						method: 'post',
						data: formData
					}).then(({
						data
					}) => {
						if(data.code==0){
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
										this.stationClass()
										// this.stationClass2()
									// this.dialogVisibleS = false
								}
							})
						}

					})

					this.$loading().close()
					// this.$message.success(res.msg || '导入成功！')
					// 清空文件列表
					this.fileList = []
					// 可选：刷新页面数据
					// this.$emit('refreshData')
				} catch (error) {
					this.$loading().close()
					this.$message.error('导入失败：' + (error.message || '服务器异常'))
					this.fileList = []
				}
			},
			// importExcel(file) {
			// 	const formData = new FormData()
			// 	formData.append('file', file) // 注意：key必须和后端@RequestParam("file")一致
			// 	return request({
			// 		url: '/admin/rule/import', // 后端接口路径
			// 		method: 'post',
			// 		data: formData,
			// 		// 文件上传需设置Content-Type为multipart/form-data（axios会自动处理，无需手动设置）
			// 		headers: {
			// 		'Content-Type': 'multipart/form-data'
			// 		}
			// 	})
			// }

		},
		mounted() {
			this.classSelect()
		},
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
</style>