《代码实例前后端》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);
}
}