添加基层信息页校验 改样式

src/views/education/add-manager.vue

@@ -4,20 +4,19 @@
     <el-main>
       <el-row>
         <el-col :span="14">
-          <el-steps
-            :active="active"
-            finish-status="success"
-            simple
-            style="margin-bottom: 30px; background: #fff;"
-          >
-            <el-step title="基础信息">1</el-step>
+          <el-steps :active="active" simple style="margin-bottom: 30px; background: #fff;">
+            <span class="step-num">1</span>
+            <el-step title="基础信息"></el-step>
+            <span class="step-num">2</span>
             <el-step title="选择范围">2</el-step>
+            <span class="step-num">3</span>
             <el-step title="选择项目组件">3</el-step>
           </el-steps>
         </el-col>
         <el-col :span="5" :offset="5">
-          <el-button>暂存</el-button>
-          <el-button type="primary" @click="nextStep">下一步</el-button>
+          <el-button size="small">暂存</el-button>
+          <el-button v-if="active<2" size="small" type="primary" @click="nextStep">下一步</el-button>
+          <el-button v-if="active>=2" size="small" type="primary" @click="nextStep">完成</el-button>
         </el-col>
       </el-row>
       <div class="step1" v-if="active === 0">
@@ -96,7 +95,7 @@
                 :on-exceed="handleExceed"
                 :file-list="fileList"
               >
-                <el-button class="choose-button" type="primary" plain icon="el-icon-document">选择文件</el-button>
+                <el-button class="choose-button" plain icon="el-icon-document">选择文件</el-button>
                 <div slot="tip" class="el-upload__tip">支持文件类型：pdf</div>
               </el-upload>
             </el-col>
@@ -452,8 +451,25 @@ export default {
     //this.checkAll();
   },
   methods: {
+    submitForm(formName) {
+      console.log('校验表单:'+formName);
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
     nextStep() {
-      if (this.active++ > 2) this.active = 0;
+      if(this.active == 0) {
+        let formName = 'formData';
+        this.submitForm(formName);
+      }
     },
     onSubmit() {
       console.log("submit!");
@@ -597,4 +613,25 @@ export default {
   min-height: 700px;
   border: 1px solid #dddddd;
 }
+.is-text {
+  display: none;
+}
+.step-num {
+  display: block;
+  font-size: 12px;
+  border: 2px solid #5f5f60;
+  border-radius: 50%;
+  width: 25px;
+  height: 20px;
+  line-height: 15px;
+  text-align: center;
+}
+.choose-button {
+  background: #fff;
+  color: #409eff;
+  border: 1px solid #409eff;
+}
+.el-upload--text {
+  background: #f5f5f5;
+}
 </style>
\ No newline at end of file