SPA项目表单验证

表单验证

		<el-dialog :title="title" :visible.sync="dialogFormVisible"
     :close-on-click-modal="false" @close="closeDialog">
      <el-form :model="bookForm" :rules="rules" ref="bf">
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="bookForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
          <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model.number="bookForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
          <el-select v-model="bookForm.booktype" placeholder="---请选择书本类型---" style="width: 100%;">
            <!-- <el-option label="---请选择书本类型---" value=""></el-option> -->
            <el-option v-for="t in btype" :key="t.id" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>




  export default {
    data: function() {
      return {
        bookname: null,
        result: [],
        page:1,
        rows:10,
        total:0,
        title:'书本新增',
        methodname:null,
        dialogFormVisible:false,
        bookForm:{
          id:null,
          bookname:null,
          price:null,
          booktype:null
        },
        formLabelWidth:'80px',
        btype:[
          {id:'修仙',name:'修仙'},
          {id:'文学',name:'文学'},
          {id:'计算机',name:'计算机'},
          {id:'玄幻',name:'玄幻'},
          {id:'古典',name:'古典'}
        ],
        rules:{
          bookname:[
            { required: true, message: '请输入书本名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          price:[
            { required: true, message: '请输入书本价格', trigger: 'blur' }
          ],
          booktype:[
             { required: true, message: '请选择书本类型', trigger: 'change' }
          ]
        }
      };
    },

清空表单验证信息
this.$refs[formName].resetFields();

增删改的实现

<template>
  <div class="div-container">
    <!-- 1.导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.搜索栏-->
    <el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
      <el-form-item label="书本名称:">
        <el-input v-model="bookname"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query(1)">
          <span class="el-icon-search">查询</span>
        </el-button>
        <el-button type="success" @click="toAdd()">
          <span class="el-icon-plus">新增</span>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 3.数据表格 -->
    <el-table :data="result"  style="width: 100%;" :border="true" max-height="550">
      <el-table-column :index="indexMethod" type="index" > </el-table-column>
      <el-table-column prop="id" label="书本编号" min-width="30" align="center"></el-table-column>
      <el-table-column prop="bookname" label="书本名称" min-width="80"></el-table-column>
      <el-table-column prop="price" label="书本价格" min-width="20"></el-table-column>
      <el-table-column prop="booktype" label="书本类型" min-width="70"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 4.分页栏-->
    <el-pagination style="margin-top: 15px;"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 弹出框用于新增和编辑 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible"
     :close-on-click-modal="false" @close="closeDialog">
      <el-form :model="bookForm" :rules="rules" ref="bf">
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="bookForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
          <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model.number="bookForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
          <el-select v-model="bookForm.booktype" placeholder="---请选择书本类型---" style="width: 100%;">
            <!-- <el-option label="---请选择书本类型---" value=""></el-option> -->
            <el-option v-for="t in btype" :key="t.id" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        bookname: null,
        result: [],
        page:1,
        rows:10,
        total:0,
        title:'书本新增',
        methodname:null,
        dialogFormVisible:false,
        bookForm:{
          id:null,
          bookname:null,
          price:null,
          booktype:null
        },
        formLabelWidth:'80px',
        btype:[
          {id:'修仙',name:'修仙'},
          {id:'文学',name:'文学'},
          {id:'计算机',name:'计算机'},
          {id:'玄幻',name:'玄幻'},
          {id:'古典',name:'古典'}
        ],
        rules:{
          bookname:[
            { required: true, message: '请输入书本名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          price:[
            { required: true, message: '请输入书本价格', trigger: 'blur' }
          ],
          booktype:[
             { required: true, message: '请选择书本类型', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      //数据表格的操作
      handleEdit:function(index,row){
        this.bookForm.id=row.id;
        this.bookForm.bookname=row.bookname;
        this.bookForm.price=row.price;
        this.bookForm.booktype=row.booktype;
        //设置标题为编辑
        this.title="书本编辑";
        //显示对话框
        this.dialogFormVisible=true;
      },
      handleDelete:function(index,row){
         this.$confirm('确认删除当前行信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url=this.axios.urls.BOOK_BOOKLIST;
          let params={
            id:row.id,
            methodName:'delBook'
          };
          this.axios.post(url,params).then(resp=>{

           let json=resp.data;
           if(json.success){
             this.$message({
               message:json.msg,
               type:'success'
             });
              //刷新数据表格查询出最新添加的数据信息
             this.query();
           }else{
             this.$message({
               message:json.msg,
               type:'error'
             });
           }

          }).catch(resp=>{
          });

        }).catch();
      },
      //保存书本信息
      doSave:function(){
        //表单验证
         this.$refs['bf'].validate((valid) => {
            if (valid) {
              let url=this.axios.urls.BOOK_BOOKLIST;
              if(this.title=="书本编辑"){
                this.methodname='editBook';
              }else if(this.title=="书本新增"){
                this.methodname='addBook';
              }
              let params={
                id:this.bookForm.id,
                bookname:this.bookForm.bookname,
                price:this.bookForm.price,
                booktype:this.bookForm.booktype,
                methodName:this.methodname
              };
              console.log(params);
               //提交表单，发送axios请求
              this.axios.post(url,params).then(resp=>{
                let json=resp.data;
                if(json.success){
                  this.$message({
                    message:json.msg,
                    type:'success'
                  });
                  //关闭对话框
                  this.dialogFormVisible=false;
                   //刷新数据表格查询出最新添加的数据信息
                  this.query();
                }else{
                  this.$message({
                    message:json.msg,
                    type:'error'
                  });
                }
              }).catch(resp=>{

              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });



      },
      //对话框的关闭事件
      closeDialog:function(){
        //清空表单中的数据信息
        this.bookForm.id=null;
        this.bookForm.bookname=null;
        this.bookForm.price=null;
        this.bookForm.booktype=null;
        //清空表单验证
        this.$refs['bf'].resetFields();
        //将对话框的标题改为新增
        this.title="书本新增";
      },
      //自定义索引
      indexMethod:function(index) {
        console.log(index);
        return index * 2;
      },
      toAdd:function(){
          this.dialogFormVisible=true;
      },
      query: function(page) {
        if(null!=page){
          this.page=page;
        }
          let url=this.axios.urls.BOOK_BOOKLIST;
          let params={
            methodName:'queryBookPager',
            bookname:this.bookname,
            page:this.page,
            rows:this.rows
          };
          /* this.axios.get(url,{params:params})
          .then(resp=>{
              console.log(resp.data);
              let data=resp.data;
              //获取查询结果集
              this.result=data.data.rows;
              //获取总记录数
              this.total=data.data.total;
          }).catch(resp=>{

          }); */

          this.axios.post(url,params).then(resp => {
              console.log(resp.data);
              let data=resp.data;
              //获取查询结果集
              this.result=data.data.rows;
              //获取总记录数
              this.total=data.data.total;
          }).catch(resp=>{});

      },
      //改变每页显示条数所出发的事件
      handleSizeChange:function(rows){
        this.rows=rows;
        this.page=1;
        this.query(null);
      },
      //点击分页按钮所出发的事件
      handleCurrentChange:function(page){
         console.log(page);
         this.page=page;
         this.query(null);
      }
    }
  }
</script>

<style>
  .div-container {
    margin: 15px;
  }
</style>

结果图：