CUD+表单验证

目录

对话框

表单验证 

修改 

删除

---

1.后台数据接口准备
   增删改接口 

添加一个新增的按钮

对话框

close-on-click-modal

是否可以通过点击 modal 关闭 Dialog，默认true

 注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
  注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose" 

 

表单验证 

通过 rules 属性传入约定的验证规则，prop 属性设置为需校验的字段名即可

ref="book" 区分判断表单验证是哪一个 

清空表单验证（放到对话框关闭事件）
this.$refs['book'].resetFields();

 

修改 

  

在表单添加两个按钮 

 

删除

 

<template>
  <div class="div-main">
    <!-- 1）面包屑，路径导航 -->
    <el-breadcrumb style="font-size:16px ;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2）搜索栏 -->
    <el-form :inline="true" style="margin-top:15px;margin-bottom: -15px;">
      <el-form-item label="书本名称">
        <el-input v-model="bookName" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 3）数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号">
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称">
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
      <el-table-column>
        <!-- 插槽 -->
      <template slot-scope="scope">
         <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
       </template>
      </el-table-column>
    </el-table>
    <!-- 4）分页栏 -->
    <el-pagination background style="margin-top: 15px;" @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>
    <!-- 5,对话框（新增和修改） -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="dialogClose">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" style="width: 100%;" placeholder="请选择书本类型">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="言情" value="言情"></el-option>
            <el-option label="散文" value="散文"></el-option>
            <el-option label="恐怖" value="恐怖"></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="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'BookList',
    data: function() {
      return {
        bookName: '',
        tableData: [],
        page: 1,
        rows: 10,
        total: 0,
        title: '新增页面',
        dialogFormVisible: false,
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },
        formLabelWidth: '100px',
        rules: {
          bookname: [{
            required: true,
            message: '请输入书本名称',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入书本价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请选择书本类型',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      //修改
      handleEdit:function(row){
        //设置对话框为显示状态
        this.dialogFormVisible = true;
        //设置标题为编辑书本
        this.title="编辑书本";
        //赋值表单数据
        this.book={
          id: row.id,
          bookname: row.bookname,
          price: row.price,
          booktype: row.booktype
        };
      },
       //删除
      handleDelete:function(row){
        this.$confirm('您真的要删除莫？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  //定义请求路径
                  let url = this.axios.urls.BOOK_MANAGER;
                  //定义请求参数
                  let params ={
                    id:row.id,
                    methodName:'delBook'
                  };
                  //发起ajax
                  this.axios.post(url,params).then(resp => {
                    let data = resp.data; //{msg:'',success:}
                    this.$message({
                      message: data.msg,
                      type: data.success == true ? 'success' : 'error'
                    });
                    if (data.success) {
                      //刷新数据列表
                      this.query(this.page);
                    }
                  }).catch(err => {
                    console.log(err);
                  });
                }).catch(() => {

                });
      },
      //对话框关闭事件
      dialogClose: function() {
        //清空表单数据
        this.book = {
            id: '',
            bookname: '',
            price: '',
            booktype: '',
          },
          //清空表单验证
          this.$refs['book'].resetFields();
          //重置对话框标题
          this.title="新增书本";
      },
      //对话框打开事件
      open: function() {
        this.dialogFormVisible = true;
      },
      //新增和修改保存事件
      save: function() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            //定义请求路径
            let url = this.axios.urls.BOOK_MANAGER;
            let methodName = 'addBook';
            if (this.title == "编辑书本")
              methodName = 'updaBook';
            //定义请求参数
            //this.book -> {id:'',bookname:'', ..methodName='' }
            this.book['methodName'] = methodName;
            //发起ajax
            this.axios.post(url, this.book).then(resp => {
              let data = resp.data; //{msg:'',success:}
              this.$message({
                message: data.msg,
                type: data.success == true ? 'success' : 'error'
              });
              if (data.success) {
                //关闭对话框
                this.dialogFormVisible = false;
                //刷新数据列表
                this.query(this.page);
              }
            }).catch(err => {
              console.log(err);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //每页显示条数的改变事件
      handleSizeChange: function(r) {
        console.log(r);
        this.rows = r;
        //this.page=1;
        this.query(1);
      },
      //当前页码的改变事件
      handleCurrentChange: function(p) {
        console.log(p);
        //this.page=p;
        this.query(p);
      },
      query: function(p) {
        this.page = p;
        //定义请求路径
        let url = this.axios.urls.BOOK_MANAGER;
        //定义请求参数
        let params = {
          methodName: 'queryBookPager',
          bookname: this.bookName,
          page: p,
          rows: this.rows
        };
        //发起ajax的请求
        this.axios.post(url, params).then(resp => {
          let data = resp.data;
          console.log(data);
          this.total = data.data.total;
          this.tableData = data.data.rows;
        }).catch(err => {
          console.log(err);
        });
      }
    }
  }
</script>

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