el-steps分布展示页面

<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-form
        ref="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-upload
        class="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,
      //步骤1
      lineForm: {
        
      },
      lineRules: {
        
      },
      //步骤2
      equipmentForm: {
       
      },
      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>