VIP32/vue2.0/vue项目/vue-admin-template-master/src/views/level/addLevel.vue

<template>
<!-- 需求：
    1.输入等级名称
    2.点击提交 将等级名称提交到接口中 
    3.提交成功后 显示提示信息 
    4.跳转列表页面 获取列表信息
 -->
  <div class="addLevel">
    <el-form
      :model="newForm"
      ref="newForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="等级名称"
        prop="levelname"
        :rules="[
          { required: true, message: '等级名称不能为空' }
        ]"
      >
        <el-input
          v-model="newForm.levelname"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('newForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('newForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {insertOneLevel} from '@/api/level.js';
  export default {
    data() {
      return {
        newForm: {
          levelname: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            insertOneLevel({
              levelname:this.newForm.levelname
            }).then(res => {
              if(res.code == 101) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.resetForm('newForm')
                this.$router.push("./levelList")
              }
            }).catch(err=>{
              console.log(err,'失败')
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.addLevel {
  width: 50%;
  margin: 200px auto 0;
}
</style>