Vue分頁插件的前后端配置與使用

<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper</artifactId>
 <version>5.1.10</version>
</dependency>
<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
 <version>1.2.10</version>
</dependency>

* @param commonRequest 前端請求
 * @return 返回給前端的數(shù)據(jù)
 */
@PostMapping(value = "/queryByCondition")
public CommonResponse<PageInfo<OrganizationDataListVO>> queryByCondition(@RequestBody CommonRequest<OrganizationQueryConditionVO> commonRequest){
 CommonRequestUtils.checkCommonRequest(commonRequest);
 try {
 OrganizationDTO dto = (OrganizationDTO) ConversionUtils.convertSimpleObject(commonRequest.getBody(),OrganizationDTO.class);
 PageInfo<OrganizationDTO> dtoPageInfo = organizationService.queryByCondition(dto);
 List<OrganizationDTO> dtoList = dtoPageInfo.getList();
 List<OrganizationDataListVO> vos = ConversionUtils.convertSimpleList(dtoList, OrganizationDataListVO.class);
 PageInfo<OrganizationDataListVO> voPageInfo = (PageInfo<OrganizationDataListVO>) ConversionUtils.convertSimpleObject(dtoPageInfo, PageInfo.class);
 voPageInfo.setList(vos);
 return CommonResponseUtils.makeSuccessCommonResponse(voPageInfo, "0", null, null, null);
 } catch (ServiceException exception) {
 throw new BusinessException(exception);
 } catch (IllegalAccessException | InstantiationException e) {
 throw new BusinessException(SystemExceptionEnum.SYSTEM_ERROR);
 }
}

package com.bosssoft.bes.userpermission.pojo.vo;

import com.bosssoft.bes.userpermission.pojo.base.DataListVO;

import java.io.Serializable;

/**
 * @author 
 * @date 2019-08-25 18:43
 */
public class OrganizationDataListVO extends DataListVO implements Serializable {

 /**
 * 機(jī)構(gòu)名稱
 */
 protected String name;

 /**
 * 機(jī)構(gòu)代碼
 */
 protected String code;

 /**
 * 負(fù)責(zé)人
 */
 protected String master;

 /**
 * 電話
 */
 protected String tel;

 /**
 * 地址
 */
 protected String address;

 public OrganizationDataListVO() {
 }

}

package com.bosssoft.bes.userpermission.pojo.vo;

import com.bosssoft.bes.userpermission.pojo.base.QueryConditionVO;

import java.io.Serializable;

/**
 * @author 
 * @date 2019-08-15 14:05

 */
public class OrganizationQueryConditionVO extends QueryConditionVO implements Serializable {

 /**
 * 機(jī)構(gòu)名稱
 */
 protected String name;

 public OrganizationQueryConditionVO() {
 }

 
}

/**
 *
 * @param organizationDTO
 * @return
 * @throws ServiceException
 */
public PageInfo<OrganizationDTO> queryByCondition(OrganizationDTO organizationDTO) {
 Condition condition = new Condition(Organization.class);
 Example.Criteria criteria = condition.createCriteria();
 if (!StringUtils.isEmpty(organizationDTO.getName())) {
 criteria.andLike("name", organizationDTO.getName() + "%");
 }
 condition.setOrderByClause("updated_time DESC");
 PageHelper.startPage(organizationDTO.getPageNum(), organizationDTO.getPageSize());
 List<Organization> results = organizationDao.selectByExample(condition);
 PageInfo<Organization> organizationPageInfo = new PageInfo<Organization>(results);
 List<OrganizationDTO> dtos = null;
 OrganizationDTO dto = null;
 dtos = new ArrayList<OrganizationDTO>(results.size());
 for (Organization result : results) {
 dto = new OrganizationDTO();
 BeanUtils.copyProperties(result, dto);
 dtos.add(dto);
 }
 PageInfo<OrganizationDTO> organizationDtoPageInfo = new PageInfo<OrganizationDTO>();
 BeanUtils.copyProperties(organizationPageInfo, organizationDtoPageInfo);
 organizationDtoPageInfo.setList(dtos);
 return organizationDtoPageInfo;
}

package com.bosssoft.bes.userpermission.pojo.dto;

import com.bosssoft.bes.userpermission.pojo.base.BaseDTO;

import java.util.List;

/**
 * @author 
 * @date 2019-08-15 14:09

 */
public class OrganizationDTO extends BaseDTO {

 /**
 * 所含公司列表
 */
 protected List<CompanyDTO> companyDtoList;

 /**
 * 機(jī)構(gòu)名稱
 */
 protected String name;

 /**
 * 機(jī)構(gòu)代碼
 */
 protected String code;

 /**
 * 負(fù)責(zé)人
 */
 protected String master;

 /**
 * 電話
 */
 protected String tel;

 /**
 * 地址
 */
 protected String address;

 public OrganizationDTO() {
 }
 
}

package com.bosssoft.bes.userpermission.pojo.entity;

import com.bosssoft.bes.userpermission.pojo.base.BaseEntity;
import org.springframework.stereotype.Repository;

import javax.persistence.Table;
import java.io.Serializable;

/**
 * @author 
 * @date 2019-08-15 10:49

 */
@Repository
@Table(name = "t_organization")
public class Organization extends BaseEntity implements Serializable {
 //private static final long serialVersionUID = 1L;

 /**
 * 機(jī)構(gòu)名稱
 */
 protected String name;

 /**
 * 機(jī)構(gòu)代碼
 */
 protected String code;

 /**
 * 負(fù)責(zé)人
 */
 protected String master;

 /**
 * 電話
 */
 protected String tel;

 /**
 * 地址
 */
 protected String address;

 public Organization() {
 }



}

<!-- 組織機(jī)構(gòu)管理 -->
<!-- 新頁面 -->

<template>
 <div>
 <!--查詢部分 -->
 <el-form :inline="true" :model="searchKeywords" class="demo-form-inline" >
 <el-form-item label="組織名稱">
 <el-input type="text" v-model="searchKeywords.name" placeholder="組織名稱"></el-input>
 </el-form-item>
 <el-form-item>
 <el-button type="primary" @click="searchItem(1)">查詢</el-button>
 </el-form-item>
 </el-form>
 <br /><br /><br />
 <!-- 操作區(qū) -->
 <div >
 <el-button type="text" class="el-icon-plus"  @click="showAddDialog">增加</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
 <el-button type="text" class="el-icon-delete"  @click="deleteMultipleItems()">刪除</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
 <el-button type="text" class="el-icon-edit"  @click="multipleUpdateAttemptProcess()">修改</el-button>
 </div>

 <!-- 顯示數(shù)據(jù)字典的表單 -->
 <div>
 <el-table ref="multipleTable" :data="items" tooltip-effect="dark"  @selection-change="handleSelectionChange" v-loading="loading" @row-dblclick="editRow">
 <el-table-column type="selection" width="55"></el-table-column>
 <el-table-column prop="name" label="機(jī)構(gòu)名稱" sortable width="120"></el-table-column>
 <el-table-column prop="code" label="機(jī)構(gòu)代碼" sortable width="100"></el-table-column>
 <el-table-column prop="master" label="負(fù)責(zé)人" width="100"></el-table-column>
 <el-table-column prop="tel" label="電話" width="120"></el-table-column>
 <el-table-column prop="address" label="地址" width="180"></el-table-column>
 <el-table-column prop="status" label="是否啟用" sortable width="95" :formatter="statusFormat"></el-table-column>
 <el-table-column prop="operate" label="操作" width="100">
  <template slot-scope="scope">
  <el-button type="text" class="el-icon-plus" @click="showAddDialog"></el-button>
  <el-button type="text" class="el-icon-delete" @click="deleteSingleItem(scope.row)"></el-button>
  <el-button type="text" class="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
  </template>
 </el-table-column>
 </el-table>
 </div>

 <!--添加與修改字典彈窗-->
 <div>
 <el-form :model="dialogDataValues" :label-position="labelPosition" :rules="rules" ref="itemModify" >
 <el-dialog :title="dialogTitle"  :close-on-click-modal="false" :visible.sync="isDialogShowed" width="60%">
  <el-form-item label="組織機(jī)構(gòu)名" :label-width="formLabelWidth" prop="name">
  <el-input v-model="dialogDataValues.name" placeholder="組織機(jī)構(gòu)名"></el-input>
  </el-form-item>
  <el-form-item label="機(jī)構(gòu)代碼" :label-width="formLabelWidth" prop="code">
  <el-input v-model="dialogDataValues.code" placeholder="機(jī)構(gòu)代碼"></el-input>
  </el-form-item>
  <el-form-item label="負(fù)責(zé)人" :label-width="formLabelWidth" prop="master">
  <el-input v-model="dialogDataValues.master" placeholder="負(fù)責(zé)人"></el-input>
  </el-form-item>
  <el-form-item label="電話" :label-width="formLabelWidth" prop="tel">
  <el-input v-model="dialogDataValues.tel" placeholder="電話"></el-input>
  </el-form-item>
  <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
  <el-input v-model="dialogDataValues.address" placeholder="地址"></el-input>
  </el-form-item>
  <el-form-item label="是否啟用" :label-width="formLabelWidth" prop="status">
  <el-radio v-model="dialogDataValues.status" :label="1">是</el-radio>
  <el-radio v-model="dialogDataValues.status" :label="0">否</el-radio>
  </el-form-item>
  <span slot="footer" class="dialog-footer">
  <el-button size="mini" @click="cancelEdit">取 消</el-button>
  <el-button size="mini" type="primary" : @click="submitAddForm('itemModify')">保 存</el-button>
  <el-button size="mini" type="primary" : @click="submitUpdateForm('itemModify')">修 改</el-button>
  </span>
 </el-dialog>
 </el-form>
 </div>

 <div class="block">
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="currentPageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="recordNumber">
 </el-pagination>
 </div>
 </div>
</template>
<script>
import {
 queryOrganization,
 addOrganization,
 updateOrganization,
 deleteOrganization
} from "../../api/systemcenter";
export default {
 data() {
 return {
 // ===========================
 // 前端屬性
 // ===========================
 //默認(rèn)隱藏編輯按鈕
 visibleEdit: "none",
 //默認(rèn)顯示新增按鈕
 visibleSave: "",
 // 添加彈窗顯示與否
 isDialogShowed: false,
 // 標(biāo)簽寬度
 formLabelWidth: "120px",
 // 在表格中顯示的數(shù)據(jù)
 items: [],
 // 添加彈窗中的數(shù)值
 dialogDataValues: {
 id: "",
 name: "",
 code: "",
 master: "",
 tel: "",
 address: "",
 status: ""
 },
 // 修改彈窗數(shù)值
 form: {},

 // 前端校驗 @blur 當(dāng)元素失去焦點時觸發(fā)blur事件
 rules: {
 name: [{ required: true, message: "組織機(jī)構(gòu)名稱必填", trigger: "blur" }],
 code: [{ required: true, message: "組織機(jī)構(gòu)代碼必填", trigger: "blur" }],
 // tel: [{ required: true, message: "組織機(jī)構(gòu)電話號碼必填", trigger: "blur" }],
 // master: [{ required: true, message: "組織機(jī)構(gòu)負(fù)責(zé)人必填", trigger: "blur" }],
 // address: [{ required: true, message: "組織機(jī)構(gòu)地址必填", trigger: "blur" }],
 status: [{ required: true, message: "狀態(tài)必選", trigger: "blur" }]
 },
 // 彈窗數(shù)據(jù)右對齊
 labelPosition: "right",
 // 導(dǎo)入
 fileUploadBtnText: "導(dǎo)入",
 // 通過checkbox進(jìn)行多選的數(shù)據(jù)
 selectedItems: {},
 // 搜索框數(shù)據(jù)
 searchKeywords: {},
 //數(shù)據(jù)總量
 recordNumber: 0,
 //當(dāng)前頁數(shù)
 currentPage: 1,
 //當(dāng)前每頁數(shù)量：
 currentPageSize: 10,
 loading: true
 };
 },
 // 頁面加載完成后加載數(shù)據(jù)
 mounted: function() {
 this.loadDataList();
 },
 methods: {
 // ==========================
 // 頁面處理
 // ==========================

 editRow(row){
 this.showEditDialog(row)
 },

 //參數(shù)校驗
 submitAddForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
  this.addItem();
 } else {
  return false;
 }
 });
 },

 submitUpdateForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
  this.updateItem();
 } else {
  return false;
 }
 });
 },

 //狀態(tài)值的轉(zhuǎn)化
 statusFormat(row, column) {
 if (row.status === 0) {
 return "否";
 } else if (row.status === 1) {
 return "是";
 }
 },

 // 每一行多選選中時觸發(fā)該方法
 handleSelectionChange(selectedItems) {
 this.selectedItems = selectedItems;
 },

 // 顯示添加數(shù)據(jù)彈窗
 showAddDialog() {
 this.visibleSave = "";
 this.visibleEdit = "none";
 this.dialogTitle = "添加組織機(jī)構(gòu)";
 this.isDialogShowed = true;
 this.dialogDataValues.name = "";
 this.dialogDataValues.code = "";
 this.dialogDataValues.master = "";
 this.dialogDataValues.tel = "";
 this.dialogDataValues.address = "";
 this.dialogDataValues.status = 1;
 this.dialogDataValues.id = "";
 this.dialogDataValues.version = "";
 },

 // 顯示修改數(shù)據(jù)彈窗
 showEditDialog(obj) {
 this.visibleSave = "none";
 this.visibleEdit = "";
 this.dialogTitle = "修改組織機(jī)構(gòu)";
 this.isDialogShowed = true;
 this.dialogDataValues.name = obj.name;
 this.dialogDataValues.code = obj.code;
 this.dialogDataValues.master = obj.master;
 this.dialogDataValues.tel = obj.tel;
 this.dialogDataValues.address = obj.address;
 this.dialogDataValues.status = obj.status;
 this.dialogDataValues.id = obj.id;
 this.dialogDataValues.version = obj.version;
 },

 // 取消彈窗
 cancelEdit() {
 this.isDialogShowed = false;
 this.dialogDataValues.name = "";
 this.dialogDataValues.code = "";
 this.dialogDataValues.master = "";
 this.dialogDataValues.tel = "";
 this.dialogDataValues.address = "";
 this.dialogDataValues.status = "";
 this.dialogDataValues.id = "";
 this.dialogDataValues.version = "";
 },

 // 多選修改處理
 multipleUpdateAttemptProcess() {
 if (this.selectedItems.length == 1) {
 this.showEditDialog(this.selectedItems[0]);
 } else if (this.selectedItems.length == null || this.selectedItems.length == 0) {
 this.$message({type: "info", message: "未選中數(shù)據(jù)", duration: 1000});
 } else {
 this.$message({type: "error", message: "無法一次修改多個數(shù)據(jù)", duration: 1000});
 }
 },

 // ==========================
 // 數(shù)據(jù)處理
 // ==========================

 queryData(queryCondition) {
 var _this = this;
 _this.loading = true;
 queryOrganization(queryCondition).then(resp => {
 if (resp && resp.responseHead.code === "0") {
  _this.recordNumber = resp.body.total;
  _this.items = resp.body.list;
  _this.loading = false;
 }
 }).catch(() => {
 _this.$message({showClose: true, message: "網(wǎng)絡(luò)異常", type: 'error'})
 _this.loading = false;
 });
 },

 // 加載數(shù)據(jù)方法
 loadDataList() {
 this.queryData({
 pageNum: this.currentPage,
 pageSize: this.currentPageSize
 });
 },

 // 搜索功能
 searchItem(currentPage) {
 this.queryData({
 pageNum: currentPage,
 pageSize: this.currentPageSize,
 name: this.searchKeywords.name
 });
 },
 
 handleSizeChange: function(currentPageSize) {
 this.currentPageSize = currentPageSize;
 this.currentPage = 1;
 this.searchItem(1);
 },

 handleCurrentChange: function(currentPage) {
 this.currentPage = currentPage;
 this.searchItem(currentPage);
 },

 // 增加數(shù)據(jù)
 addItem() {
 addOrganization({
 name: this.dialogDataValues.name,
 code: this.dialogDataValues.code,
 master: this.dialogDataValues.master,
 tel: this.dialogDataValues.tel,
 address: this.dialogDataValues.address,
 status: this.dialogDataValues.status
 }).then(resp => {
  if (resp && resp.responseHead.code == "0") {
  this.$notify({title: "成功",message: "數(shù)據(jù)已成功插入",type: "success",duration: 1500});
  this.loadDataList();
  this.isDialogShowed = false;
  } else {
  this.$message({
  type: "error",
  message: "數(shù)據(jù)插入失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +resp.responseHead.message,
  duration: 1000
  });
  }
 }).catch(() => {});
 },
 // 編輯數(shù)據(jù)

 updateItem() {
 updateOrganization({
 name: this.dialogDataValues.name,
 code: this.dialogDataValues.code,
 master: this.dialogDataValues.master,
 tel: this.dialogDataValues.tel,
 address: this.dialogDataValues.address,
 status: this.dialogDataValues.status,
 id: this.dialogDataValues.id,
 version: this.dialogDataValues.version
 }).then(resp => {
  if (resp && resp.responseHead.code == "0") {
  this.$notify({title: "成功", message: "數(shù)據(jù)已成功修改", type: "success", duration: 1000});
  this.loadDataList();
  this.isDialogShowed = false;
  } else {
  this.$message({
  type: "error",
  message: "數(shù)據(jù)修改失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +resp.responseHead.message,
  duration: 1000
  });
  }
 }).catch(() => {});
 },

 //刪除數(shù)據(jù)
 deleteData(datalist) {
 deleteOrganization(datalist).then(resp => {
 if (resp && resp.responseHead.code === "0") {
  this.$notify({title: "成功", message: "數(shù)據(jù)已成功刪除", type: "success", duration: 1000});
  // 若刪除成功則重新刷新頁面
  this.loadDataList();
 } else {
  this.$notify({
  title: "失敗",
  message: "數(shù)據(jù)刪除失敗 錯誤碼："+resp.responseHead.code+" 錯誤信息：" +resp.responseHead.message,
  type: "error",
  duration: 1000
  });
 }
 });
 },

 deleteSingleItem(obj) {
 this.$confirm("確認(rèn)要刪除該數(shù)據(jù)嗎?", "信息", {
 confirmButtonText: "確定",
 cancelButtonText: "取消",
 type: "warning"
 }).then(() => {
  this.deleteData([{id: obj.id, version: obj.version}]);
 }).catch(() => {
  this.$message({type: "info",message: "已取消刪除", duration: 1000});
 });
 },

 // 批量刪除數(shù)據(jù)
 deleteMultipleItems() {
 if (this.selectedItems.length == null || this.selectedItems.length == 0) {
 this.$message({
  type: "error",
  message: "未選擇任何數(shù)據(jù)",
  duration: 1000
 });
 } else {
 this.$confirm("確認(rèn)要刪除該數(shù)據(jù)嗎?", "信息", {
  confirmButtonText: "確定",
  cancelButtonText: "取消",
  type: "warning"
 }).then(() => {
  this.deleteData(this.selectedItems);
  }).catch(() => {
  this.$message({type: "info",message: "已取消刪除", duration: 1000});
 });
 }
 }
 }
};
</script>