《代码实例前后端》Element-ui 批量删除

前端代码
UserList.vue

<template>
    <div>
        <el-row>
          <el-col :span="24">
              <!-- 搜索框部分 -->
              <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="用户名">
                  <el-input  placeholder="用户名" v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-input  placeholder="上架/下架" v-model="state"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="queryBtn">查询</el-button>
                  
                </el-form-item>
              </el-form>
              <el-button type="danger" @click="batchDel">批量删除</el-button>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24">
              <!-- 数据部分 -->
              <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"  
                @selection-change="handleSelectionChange">
               

                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>           
                <el-table-column
                  prop="id"
                  label="编号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="shopname"
                  label="商品名称"
                  align="center"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="shoptype"
                  label="小店分类">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="线上销售价格">
                </el-table-column>
                 <el-table-column
                  prop="shopnumber"
                  label="库存数量">
                </el-table-column> 
                <el-table-column
                  prop="shopstate"
                  label="商品状态">
                </el-table-column> 
                <el-table-column
                  prop="outnumber"
                  label="销量">
                </el-table-column>
                <el-table-column
                  prop="updatee"
                  label="上架时间">
                </el-table-column>



                <el-table-column
                  label="操作">

                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle @click="addshpooer"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeshopper(scope.row)"></el-button>
                </template>

                </el-table-column>

              </el-table>

          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24">
              <!-- 分页部分 -->
              <el-pagination
                background
                :page-sizes="[2, 10, 20]"               
                :page-size="pageSize"
                :current-page="pageNum"
                @prev-click="prevPage"
                @next-click="nextPage"
                @size-change="changePage"
                layout="total, sizes,prev, pager, next"
                :total="total">
              </el-pagination>
          </el-col>
        </el-row>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-row>
          <el-col :span="18">
            <el-form >
              <el-form-item label="日期" label-width="80px">
                <el-input v-model="dialogform.date"></el-input>
              </el-form-item>
              <el-form-item label="姓名" label-width="80px">
                <el-input v-model="dialogform.name"></el-input>
              </el-form-item>
              <el-form-item label="地址" label-width="80px">
                <el-input v-model="dialogform.address"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
    </el-dialog>

    </div>
  
</template>

<script>
export default {
    data(){
      return {
          pageNum:1,
          pageSize:2,
          total:0,
          name:'',
          state:'',
          dialogFormVisible:false,
          dialogform:{
            id:'',
            shopname:'',
            shoptype:'',
            price:'',
            shopnumber:'',
            shopstate:'',
            outnumber:''
          },

          menuList:[
              {index:'1',icon:'el-icon-location',name:'就业管理',
                childrenMenu:[
                  {index:'2',name:'模拟面试'},
                  {index:'3',name:'就业考核'}
                ]
              },
              {index:'5',icon:'el-icon-video-camera-solid',name:'尊严管理',
                childrenMenu:[
                  {index:'6',name:'尊严目标'},
                  {index:'7',name:'尊严冲刺'}
                ]}
          ],
          tableData: [],
          //全局变量
          selectionData:[]

      }
    },
    
    methods:{
      batchDel(){
        //怎么拿到选中id？
        let ids=[];
        this.selectionData.forEach(e=>{
          ids.push(e.id);
        });
        console.log(ids);
        if(ids.length==0){
          this.$message("请选择数据")
          return;
        }
        let jwt=localStorage.getItem('jwt');
        this.$axios.post("api/shopper/batchDel",ids,{headers:{'jwt':jwt}})
        .then(res=>{

          if(res.data.code==200){
            this.$message({
              message:'删除成功',
              type:'success'
            });
            this.queryBtn();
          }
          
        })

      },
      //批量选择
      handleSelectionChange(val){
        //每行数据
        console.log(val)
        this.selectionData=val;
      },
      updateData(row){
          this.dialogFormVisible = true;
          this.dialogform = JSON.parse(JSON.stringify(row));
      },
      prevPage(val){
        this.pageNum=val;
        this.queryBtn();
      },
      nextPage(val){
        this.pageNum=val;
        this.queryBtn();
        
      },
      changePage(val){
        this.pageNum=1;
        this.pageSize=val;
        this.queryBtn();
      },
      queryBtn(){
        let jwt=localStorage.getItem('jwt');
        let param={};
        param.pageNum=this.pageNum;
        param.pageSize=this.pageSize;
        let data={};
        data.shopname=this.name;
        data.shopstate=this.state;
        param.data=data;
        this.$axios.post('api/shopper/queryShopper',param,{headers:{'jwt':jwt}})
        .then(res=>{
            console.log(res.data);
            if(res.data.code==200){
                let pageData=res.data.data;
                this.tableData=pageData.list;
                this.pageNum=pageData.pageNum;
                this.pageSize=pageData.pageSize;
                this.total=pageData.total
            }
        })
      },
      addshpooer(){
        this.$router.push({name:'shopperAdd'})
      },
      removeshopper(row){
          
          this.dialogform = JSON.parse(JSON.stringify(row));
          const jwt=localStorage.getItem("jwt");
                this.$axios.get('api/shopper/removeShopper?id='+this.dialogform.id,{headers:{'jwt':jwt}})
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code==5000){
                        alert("没有操作权限!!!")
                    }
                    if(res.data.code==200){
                        this.queryBtn();
                    }
                })
      },
      created(){
        this.queryBtn();
      }

    }
}
</script>

<style scoped>

</style>

后端代码
ShopperDao.xml

<delete id="batchDel">
        delete from shopper where id in
        <foreach collection="ids" item="id" open="(" separator="," close=")">
            #{id}
        </foreach>
    </delete>

ShopperDao.java

package com.x.springsecurityday01.dao;

import com.x.springsecurityday01.domain.Shopper;
import com.x.springsecurityday01.domain.Users;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface ShopperDao {

   
    //批量删除
    void batchDel(List<Integer> ids);
}

ShopperService.java

package com.x.springsecurityday01.service;

import com.x.springsecurityday01.domain.Shopper;
import com.x.springsecurityday01.domain.Users;
import com.x.springsecurityday01.util.RequestParams;
import com.x.springsecurityday01.util.ResponseResult;

import java.util.List;

public interface ShopperService {

   

    ResponseResult<?> batchDel(List<Integer> ids);
}

ShopperServiceImpl.java

package com.x.springsecurityday01.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.x.springsecurityday01.dao.ShopperDao;
import com.x.springsecurityday01.domain.Shopper;
import com.x.springsecurityday01.domain.Users;
import com.x.springsecurityday01.service.ShopperService;
import com.x.springsecurityday01.util.RequestParams;
import com.x.springsecurityday01.util.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
@Service
public class ShopperServiceImpl implements ShopperService {
  

    @Override
    public ResponseResult<?> batchDel(List<Integer> ids) {
        try {
            shopperDao.batchDel(ids);
            return new ResponseResult().ok();
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseResult().fail();
        }
    }
}

ShopperController.java

package com.x.springsecurityday01.controller;

import com.x.springsecurityday01.domain.Shopper;
import com.x.springsecurityday01.domain.Users;
import com.x.springsecurityday01.service.ShopperService;
import com.x.springsecurityday01.util.RequestParams;
import com.x.springsecurityday01.util.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/shopper")
public class ShopperController {
    @Autowired
    private ShopperService shopperService;

    @PostMapping("batchDel")
    //@PreAuthorize("hasAuthority('stu:query')")
    public ResponseResult<?> batchDel(@RequestBody List<Integer> ids){
        return shopperService.batchDel(ids);
    }
}