el-steps分布展示页面

Dear 丶 2022-11-29 13:19 133阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20221124/99838f761e6f486e8e87e9a32a2d33fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA页面展示

【1】项目下内容： ➢工程下的src类似于Eclipse下的src目录，用于存放代码。。 ➢工程下的.idea 和TestProject.iml文件都是IDEA工程特有的。

冷不防/ 2023年09月27日 15:37/ 0 赞/ 162 阅读

相关 Vue、Nuxt页面展示MarkDown

> 文章优先发表在个人博客，后期更新可能忘记同步到CSDN上面，给你带来不便抱歉 > 个人博客本篇文章地址： [https://www.xdx97.com/article?

深碍√TFBOYSˉ_/ 2023年07月02日 12:25/ 0 赞/ 22 阅读

相关 SpringBoot页面展示Thymeleaf

官方网站：[Thymeleaf][] 开发传统的javaWeb工程时，我们可以使用jsp页面模板语言，但是在springboot中已经不推荐使用了。springBoot支持如

比眉伴天荒/ 2023年06月30日 04:28/ 0 赞/ 1 阅读

相关 SpringBoot页面展示Thymeleaf

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言 Thymelea

Bertha 。/ 2023年06月07日 05:58/ 0 赞/ 86 阅读

相关 el-steps分布展示页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3l

Dear 丶/ 2022年11月29日 13:19/ 0 赞/ 134 阅读

相关 js页面展示省市联动

1、regions.js var s=["attr_gsdq","attr_gsdq2"]; var opt0 = ["请选择","请选择"];

- 日理万妓/ 2022年07月16日 05:49/ 0 赞/ 251 阅读

相关 jsp页面展示PDF文档

<%@ page language="java" import="java.util.\,java.io.\" pageEncoding="ISO-8859-1"%>

青旅半醒/ 2022年07月15日 13:01/ 0 赞/ 374 阅读

相关酷炫页面产品图片展示

平时看惯了一些基本的图片展示效果，今天给大家分享一个比较酷炫页面产品图片展示，感觉用在黑科技展示的效果会更好一点。老规矩，先上图： ![这里写图片描述][SouthE

青旅半醒/ 2022年06月16日 06:57/ 0 赞/ 230 阅读

相关 SpringBoot页面展示Thymeleaf

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言 Thymelea

港控/mmm°/ 2022年02月21日 12:21/ 0 赞/ 263 阅读

相关 docker：搭建nginx 展示页面

nginx官网下载地址（各种版本都有）： [https://nginx.org/download/][https_nginx.org_download] nginx1.9.

柔光的暖阳◎/ 2022年02月20日 12:27/ 0 赞/ 321 阅读