<template><div class="app-container automation"><el-steps :active="active" finish-status="success"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"></el-step></el-steps><div class="step-one" v-show="active == 0"><el-form ref="lineForm" :rules="lineRules" :model="lineForm" label-width="120px"><step1 :dataLine="lineForm"></step1></el-form></div><div class="step-two" v-show="active == 1"><el-formref="equipmentForm":rules="equipmentRules":model="equipmentForm"label-width="120px"><step2 :dataEqu="equipmentForm" :dataLine="lineForm"></step2></el-form></div><div class="step-three" v-show="active == 2"><el-uploadclass="upload-demo"action="https://httpbin.org/post":limit="1":file-list="fileList":before-upload="beforeUpload":on-change="handleChange":on-success="handleSuccess":on-remove="handleRemove":on-exceed="handleExceed"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div></el-upload></div><div class="step-buttons"><el-button @click="prev" v-if="active == 1 || active == 2">上一步</el-button><el-button @click="next(active)" v-if="active == 0 || active == 1">下一步</el-button><el-button @click="submit" v-if="active == 2">提交</el-button><el-button @click="resetForm(active)" v-if="active == 0 || active == 1">重置</el-button></div></div>
</template>

 

 

 

<script>
import step1 from "./step1";
import step2 from "./step2";export default {data() {return {active: 0,//步骤1lineForm: {},lineRules: {},//步骤2equipmentForm: {},equipmentRules: {},limit: 1, // 上传excell时，同时允许上传的最大数fileList: [], // excel文件列表typeFormArr: ["lineForm", "equipmentForm"],};},methods: {// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传beforeUpload(file) {let extension = file.name.substring(file.name.lastIndexOf(".") + 1);let size = file.size / 1024 / 1024;console.log(file);console.log(extension);if (extension !== "xlsx") {this.$message.warning("只能上传后缀是.xlsx的文件");}if (size > 10) {this.$message.warning("文件大小不得超过10M");}},// 文件状态改变handleChange(file, fileList) {if (file) {this.fileList = fileList.slice(-3);}},// 删除文件handleRemove(file, fileList) {// this.fileList = [];return this.$confirm(`确定移除 ${file.name}？`);},// 文件超出个数限制handleExceed(files, fileList) {this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);},// 文件上传成功handleSuccess(res, file, fileList) {this.$message.success("文件上传成功");},// 文件上传失败handleError(err, file, fileList) {this.$message.error("文件上传失败");},// 覆盖默认的上传行为，自定义上传的实现uploadFile() {if (this.fileList.length === 0) {this.$message.warning("请上传文件");} else {const data = new FormData();const fileUps = file.file;data.append("file", fileUps);this.$axios({headers: {"Content-Type": "multipart/form-data",},url: "/user/batch",data: data,method: "post",}).then((res) => {console.log(res);},(err) => {console.log(err);});}},prev() {--this.active;if (this.active < 0) this.active = 0;},next(formName) {this.$refs[this.typeFormArr[formName]].validate((valid) => {if (valid) {console.log("sus submit!!");if (this.active++ > 2) this.active = 0;} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[this.typeFormArr[formName]].resetFields();},submit() {},},components: {step1,step2,},
};
</script>

 

 

<style lang="scss">
.automation {.step-one,.step-two,.step-three {margin: 20px 0;padding: 20px 0;}.step-three {padding: 20px;.upload-demo {width: 400px;}}.step-buttons {margin: 20px;text-align: center;}
}
</style>