5.品牌管理小demo前端

核心代码如下：

前端

<template>
<div>

<!--1.搜索-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="品牌名称">
      <el-input v-model="formInline.brandName" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-form-item label="企业名称">
      <el-input v-model="formInline.companyName" placeholder="企业名称"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button type="warning" @click="onAdd">新增</el-button>
      <el-button type="danger" @click="batchDel">批量删除</el-button>
    </el-form-item>
  </el-form>

<!--  table-->

  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        label="序号"
        type="index"
        width="120">
    </el-table-column>
    <el-table-column
        prop="brandName"
        label="品牌名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="companyName"
        label="企业名称"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="ordered"
        label="排序"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="description"
        label="描述"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        label="状态"
        show-overflow-tooltip>

      <template slot-scope="scope">
        {{scope.row.status == 1 ? '启用' : '禁用'}}
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        show-overflow-tooltip>

      <template slot-scope="scope">
        <el-button type="primary" size="mini"   @click="toEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini"  @click="toDel(scope.row.id)">删除</el-button>
      </template>

    </el-table-column>

  </el-table>

<!-- 分页 -->
  <el-pagination
      background

      @current-change="changePageNum"
      :page-size="pageSize"
      :page-count="pages"
      :current-page="pageNum"
      layout="prev, pager, next"
      :total="total">
  </el-pagination>


  <el-dialog
      title="新增/编辑"
      :visible.sync="dialogVisible"
      width="50%"
      >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="品牌名称" prop="brandName">
        <el-input v-model="ruleForm.brandName"></el-input>
      </el-form-item>
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model="ruleForm.companyName"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="ordered">
        <el-input v-model="ruleForm.ordered"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1" >启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
  </el-dialog>






</div>
</template>

<script>
import axios from "axios";
export default {
  name: 'IndexView',


  data(){
    return {
      ruleForm: {
        id:'',
        brandName: '',
        companyName: '',
        status: '',
        ordered: '',
        description: '',
      },
      rules: {
        brandName: [
          {required: true, message: '请输入品牌名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        companyName: [
          {required: true, message: '请输入企业名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        ordered: [
          {required: true, message: '请输入排序', trigger: 'blur'},
          {pattern: /^[1-9]\d*$/, message: '必须是一个正整数', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'},
        ],
        description: [
          {required: true, message: '请输入描述', trigger: 'blur'},
        ],
      },

      dialogVisible: false,

      pageNum: 1,
      pageSize: 5,
      pages: 0,
      total: 0,

      formInline:{
        brandName: '',
        companyName: '',
        status: '',
      },
      tableData: [],
      multipleSelection: [],
      batchIds:[]

    }
  },
  methods:{

    batchDel(){

      if (this.batchIds.length == 0) {
        this.$message.error("至少选一条数据")
      }else{
        axios({
          url: '/dev-api/brand?op=batchDel&ids='+this.batchIds,
          method: 'delete'
        }).then( res =>{
          console.log(res);
          if(res.data.code==2000){
            this.$message.success("操作成功")

            this.getPage()
          }else{

            this.$message.error(res.data.mess)

          }
        })
      }

    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {//用户正常输入了表单

          //发送axios请求提交表单

          axios({
            url: '/dev-api/brand?op=add',
            method : 'post',
            data: this.ruleForm
          }).then(res => {
            console.log(res)

            if(res.data.code == 2000){
              this.$message.success(res.data.mess)

              this.dialogVisible=false
              this.getPage()
            }else{
              this.$message.error("操作出现异常")
            }
          })
        } else {//不符合规定
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    onAdd(){
      this.dialogVisible=true
    },

    changePageNum(val){
      this.pageNum=val
      this.getPage()

    },

    toEdit(raw){

      console.log(raw)
      // this.ruleForm=raw
      this.ruleForm.id=raw.id
      this.ruleForm.brandName=raw.brandName
      this.ruleForm.companyName=raw.companyName
      this.ruleForm.status=raw.status
      this.ruleForm.ordered=raw.ordered
      this.ruleForm.description=raw.description

      this.dialogVisible=true



    },
    toDel(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        axios({
          url: '/dev-api/brand?op=del&id='+id,
          method: 'delete',
        }).then( res =>{

          console.log(res)
          if (res.data.code == 2000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.getPage()
          }else{
            this.$message({
              type: 'error',
              message: res.data.mess
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    handleSelectionChange(val){
      this.multipleSelection = val;
      let ids=[]
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      console.log(ids )
      this.batchIds=ids


    },
    getPage(){
      axios({
        url: '/dev-api/brand?op=queryPage&brandName='+this.formInline.brandName
            +"&companyName="+this.formInline.companyName
            +"&pageNum="+this.pageNum
            +"&pageSize="+this.pageSize
            +"&status="+this.formInline.status,
        method: 'get',
      }).then( res => {
        console.log(res)
        this.tableData=res.data.data.data
        this.pageNum=res.data.data.pageNum
        this.pageSize=res.data.data.pageSize
        this.pages=res.data.data.pages
        this.total=res.data.data.total


      })
    },

    onSearch(){

      this.pageNum=1

      this.getPage()

    }

  },
  created() {
    this.getPage()

  }

}
</script>

<style scoped>

</style>

注意批量删除和新增修改弹框共用

后端

主要是注意下批量删除的代码

 @Override
    public void batchDel(String[] ids) {
        StringBuffer sql = new StringBuffer("DELETE FROM tb_brand WHERE id in (");
        List<Object> parms= new ArrayList<>();

        for (int i = 0; i < ids.length; i++) {
            sql.append("?");
            if(i < ids.length-1){
                sql.append(",");
            }

            parms.add(ids[i]);

        }
        sql.append(")");
        DbHelper.update(sql.toString(),parms.toArray());


    }