添加导入部门按钮

src/views/recruit/postSkill.vue

@@ -1,54 +1,142 @@
 <template>
 	<div>
-				<div style="width: 100%;text-align: right;">
-					<el-button style="margin-bottom: 20px;" size="mini" type="primary" @click="cancel">刷新
-					</el-button>
-					<el-button style="margin:10px;" size="mini" type="primary" icon="document"
-						:disabled="!isAuth('positionList:add')" @click="classAdd(1)">添加
-					</el-button>
-				</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-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>
@@ -188,6 +276,7 @@
 				sanjiData: [],
 				erjiTypr: true,
 				sanjiTypr: '',
+				fileList: []
 			}
 		},
 		methods: {
@@ -623,11 +712,93 @@
 					})
 				}).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>
 
@@ -759,3 +930,4 @@
 		border-radius: 4px;
 	}
 </style>
+