基于SprnigBoot+ElementUI 整合Vue案例【公司案件管理系统】（四）

package com.czxy.domain;
import lombok.Data;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Data
@Table(name = "`case`")
public class Case {
    @Id
    private String cno;
    private String anno;
    private Integer isvalid;
    @Column(name = "`type`")
    private Integer type;
    private String casegroup;
    private String keyno;
    private String cname;
}

package com.czxy.dao;
import com.czxy.domain.Case;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import tk.mybatis.mapper.common.Mapper;
import java.util.List;
@org.apache.ibatis.annotations.Mapper
public interface CaseMapper extends Mapper<Case> {
//    根据公司id查询所对应的案件列表
    @Select("select * from `case` where keyno = #{keyno}")
    List<Case> findByKeyno(@Param("keyno") String keyno);
}

package com.czxy.service;
import com.czxy.domain.Case;
import com.github.pagehelper.PageInfo;
import java.util.List;
public interface CaseService {
    //分页查询
    PageInfo<Case> condition(Integer pageSize, Integer pageNum);
    //根据公司id查询相关案件列表
    List<Case> findByKeyno(String keyno);
    //批量删除
    void batchDelete(List<String> ids);
}

package com.czxy.service;
import com.czxy.dao.CaseMapper;
import com.czxy.domain.Case;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;
import javax.annotation.Resource;
import java.util.List;
@Service
@Transactional
public class CaseServiceImpl implements CaseService {
    @Resource
    private CaseMapper caseMapper;
    @Override
    public PageInfo<Case> condition(Integer pageSize, Integer pageNum) {
        Example example = new Example(Case.class);
        PageHelper.startPage(pageNum,pageSize);
        List<Case> list = caseMapper.selectByExample(example);
        PageInfo<Case> pageInfo = new PageInfo<>(list);
        return pageInfo ;
    }
    @Override
    public List<Case> findByKeyno(String keyno) {
        List<Case> list = caseMapper.findByKeyno(keyno);
        return list ;
    }
    @Override
    public void batchDelete(List<String> ids) {
        for (String id : ids) {
            caseMapper.deleteByPrimaryKey(id);
        }
    }
}

package com.czxy.controler;
import com.czxy.domain.Case;
import com.czxy.service.CaseService;
import com.czxy.vo.BaseResult;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/case")
@CrossOrigin
public class CaseController {
    @Resource
    private CaseService caseService;
    @GetMapping("/{keyno}")
    public BaseResult findByKeyno(@PathVariable("keyno") String keyno) {
        List<Case> list = caseService.findByKeyno(keyno);
        return BaseResult.ok("查询成功",list);
    }
    @PostMapping("/condition/{pageSize}/{pageNum}")
    public BaseResult condition(
            @PathVariable("pageSize") Integer pageSize,
            @PathVariable("pageNum") Integer pageNum
    ) {
        PageInfo<Case> pageInfo = caseService.condition(pageSize, pageNum);
        return BaseResult.ok("查询成功！",pageInfo);
    }
    @PostMapping("/batchDelete")
    public BaseResult batchDelete(@RequestBody List<String> ids) {
        caseService.batchDelete(ids);
        return BaseResult.ok("批量删除成功");
    }
}

<template>
  <div>
     <!-- 列表 start-->
     <template>
        <el-table
            :data="pageInfo.list"
            border
            style="width: 100%"
            :row-class-name="tableRowClassName"
             @selection-change="handleSelectionChange">
             <el-table-column
            type="selection"
            width="55">
             </el-table-column>
            <el-table-column
            prop="cno"
            label="案件编号"
            width="180">
            </el-table-column>
            <el-table-column
            prop="anno"
            label="案件名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="isvalib"
            label="有效性">
              <template slot-scope="scope">
                {{scope.row.isvalib == 0 ? '无效' : '有效'}}
              </template>
            </el-table-column>
            <el-table-column
            prop="type"
            label="案件类型">
              <template slot-scope="scope">
                {{scope.row.type == 2 ? '被执行' : ''}}
                {{scope.row.type == 3 ? '限高' : ''}}
                {{scope.row.type == 4 ? '裁判文书' : ''}}
                {{scope.row.type == 5 ? '破产重整' : ''}}
                {{scope.row.type == 6 ? '终本案件' : ''}}
                {{scope.row.type == 7 ? '询价评估' : ''}}
                {{scope.row.type == 8 ? '股权冻结' : ''}}
                {{scope.row.type == 9 ? '送达公告' : ''}}
                {{scope.row.type == 11 ? '开庭公告' : ''}}
            </template>
            </el-table-column>
            <el-table-column
            prop="casegroup"
            label="所属案件组">
            </el-table-column>
            <el-table-column
            prop="cname"
            label="所属公司">
            </el-table-column>
        </el-table>
     </template>
     <!-- 列表 end-->
     <!-- 分页条start -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5,10,15,20,25,30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
     <!-- 分页条end -->
     <el-row>
        <el-button type="danger" @click="adddelete()">批量/单个删除</el-button>
    </el-row>
  </div>
</template>
<script>
import axios from 'axios';
 export default {
    methods: {
      // 隔行换色
      tableRowClassName({row, rowIndex}) {
        if (rowIndex %2 != 0) {
          return 'warning-row';
        } else if (rowIndex %2 == 0) {
          return 'success-row';
        }
        return '';
      },
      //多选
      handleSelectionChange(val){
        this.ids = val.map(company => company.cno )  
      },
    //   监听条数变化
    handleSizeChange(val) {
        this.pageInfo.pageSize = val ;
        this.pageInfo.pageNum = 1;
        this.condition();
      },
    //   监听页数变化
      handleCurrentChange(val) {
        this.pageInfo.pageNum = val;
        this.condition();
      },
    //   查询所有公司
    async condition(num) {
        if(num ){
            this.pageInfo.pageNum = num ;
        }
        let {data : baseResult } = await axios.post(`http://localhost:8888/case/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`);
        if (baseResult.code == 20000 ) {
            this.pageInfo = baseResult.data ;
        }
      },
      //批量删除
      async adddelete() {
        this.$confirm(`您确定要删除${this.ids.length}条数据吗？`, '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          let {data : baseResult } = await axios.post(`http://localhost:8888/case/batchDelete`,this.ids);
        if (baseResult.code == 20000 ) {
          this.$message.success(baseResult.msg);
            this.condition();
        }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    },
    data() {
      return {
        //   多选数组
        ids: [],
        // 分页对象
        pageInfo: {
            pageNum : 1,
            pageSize : 5 
        },
        // 案件列表
        caseList:[],
    }
  },
  mounted () {
    // 页面加载完成时执行
    this.condition();
  }
}
</script>
<style>
/* 隔行换色样式 */
.el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  /* 字体设置 */
  .link {
    padding-top: 1.5rem;
    text-align: right;
  }
</style>