一、页面查询功能带分页
后端代码：javascript
/**
* @Author Mc
* @Description: 根据条件查询角色列表信息
* @Date 2018/4/19 10:49
*/
@Override
public Response<Paging<BvsRole>> findListPage(BvsRole bvsRole){
try {
// 调用PageHelper封装方法设置其实分页（拦截器）
PageHelper.startPage(bvsRole.getPageNo(),bvsRole.getPageSize());
// 查询角色数据
List<BvsRole> bvsRoles = bvsRoleDao.findList(bvsRole);
// 因重名，故全名引入
com.github.pagehelper.PageInfo pageInfo = com.github.pagehelper.PageInfo.of(bvsRoles);
// 转化为本身的paging对象，此方法可重写
Paging<BvsRole> paging = new Paging(pageInfo.getTotal(), bvsRoles);
// 检查状态
checkState(!Arguments.isNullOrEmpty(bvsRoles),"find.bvsRole.by.bvsRole.is.null");
return Response.ok(paging);
} catch (NullPointerException | IllegalStateException e) {
log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
return Response.fail(e.getMessage());
} catch (Exception e) {
log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
return Response.fail("find.bvsRole.by.bvsRole.fail");
}
}
前端代码：前端
// JS页面
// post 请求发送对象
export function post(api, params = null) {
return request
.post(api)
.send(params)
.then(response => checkData(response), error => errorCatch(error));
}
// 查询用户角色
export function getRoles(params) {
return (dispatch) => {
dispatch(receiveInit());
return post('/api/bvsRole/bvsRoleListPage', params==undefined?{}:params).then((data) => {
dispatch(receiveBvsRoles(data));
}, () => {
dispatch(receiveErrors());
});
};
}
//jsx页面
// 分页
const PAGE = {
current: 1,
pageSize: 10,
showSizeChanger: true,
showQuickJumper: true,
};
// 分页事件
handleTableChange(pagination) {
const { current, pageSize } = pagination;
const { form, query } = this.props;
const fieldsValues = form.getFieldsValue();
query({
pageNo: current,
pageSize,
...fieldsValues,
});
this.setState({
pagination: {
current,
pageSize,
},
});
}
<Table
columns={columns}
dataSource={bvsRoles.data}
loading={bvsRoles.fetching}
pagination={pagination}
onChange={
(paginations) => {
this.handleTableChange(paginations);
}
}
/>
二、钻取方法获取树列表功能
后端代码：java
package net.haier.bvs.pub.util;
import io.terminus.common.model.Response;
import io.terminus.common.utils.Arguments;
import lombok.extern.slf4j.Slf4j;
import net.haier.bvs.pub.model.TreeNode;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.Collection;
import java.util.LinkedList;
import java.util.List;
import static com.google.common.base.Preconditions.checkState;
import static com.google.common.base.Throwables.getStackTraceAsString;
@Slf4j
public class TreeUtil {
private static final String TREEID = "getTreeId";
private static final String TREENAME = "getTreeName";
private static final String PARENTID = "getParentId";
/**
* @Author Mc
* @Description: 经过树列表
* @Date 2018/5/14 15:29
* @param roots 根级数据
* @param allData 全部数据
*/
public static <T> Response<List<TreeNode>> getTree(List<T> roots , List<T> allData){
List<TreeNode> nodes = new ArrayList<TreeNode>();
try {
// 选中树节点时不返回任何数据
// if(!"0".equals(this.id)) return null;
// 构建树结构
LinkedList<T> list = listToLinkedList(allData);
// 循环寻找子节点
roots.forEach(t -> {
TreeNode treeNode = buildNode(t);
buildTree(list, treeNode);
nodes.add(treeNode);
});
// 校验返回值
checkState(!Arguments.isNullOrEmpty(nodes),"find.nodes.by.nodes.is.null");
return Response.ok(nodes);
} catch (NullPointerException | IllegalStateException e) {
log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
return Response.fail(e.getMessage());
} catch (Exception e) {
log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
return Response.fail("find.nodes.by.nodes.fail");
}
}
/**
* @Author Mc
* @Description: listToLinkedList
* @Date 2018/5/5 16:08
*/
private static <T> LinkedList<T> listToLinkedList(List<T> allData){
if(allData instanceof LinkedList)
return (LinkedList<T>)allData;
LinkedList<T> result = new LinkedList<T>();
allData.forEach( r -> result.add(r));
return result;
}
/**
* @Author Mc
* @Description: 建立TreeNode对象
* @Date 2018/5/5 17:54
*/
private static <T> TreeNode buildNode(T t) {
// 树对象的建立
TreeNode treeNode = new TreeNode();
try {
// 获取泛型T的Class对象，反向的调用get方法，获取数据
Class listClass = t.getClass();
// 获取get()方法
Method treeId = listClass.getMethod(TREEID);
Method treeName = listClass.getMethod(TREENAME);
// 调用get()方法
treeNode.setKey(treeId.invoke(t) != null ? treeId.invoke(t).toString() : null);
treeNode.setTitle(treeName.invoke(t) != null ? treeName.invoke(t).toString() : null);
} catch (IllegalAccessException | InvocationTargetException | NoSuchMethodException e) {
e.printStackTrace();
log.error("find by key fail treeNode: {}, cause: {}", treeNode, getStackTraceAsString(e));
}
return treeNode;
}
/**
* @Author Mc
* @Description: 构建资源树
* @Date 2018/5/4 17:57
*/
private static <T> void buildTree(LinkedList<T> allDate,TreeNode parentNode){
if(allDate.isEmpty() || parentNode == null) return;
Collection<TreeNode> children = parentNode.getChildren();
if(children == null) parentNode.setChildren(new ArrayList<TreeNode>());
Long parentNodeId = Long.valueOf(parentNode.getKey());
try {
// 获取泛型T的Class对象，反向的调用get方法，获取数据
Class listClass = allDate.getFirst().getClass();
// 获取get()方法
Method treeId = listClass.getMethod(TREEID);
Method parentId = listClass.getMethod(PARENTID);
// 调用get()方法
allDate.forEach((T r) ->{
// 设置该资源的直接子元素-剔除自身
try {
if(parentNodeId.equals(parentId.invoke(r) != null ? Long.valueOf(parentId.invoke(r).toString()) : null)
&& !parentNodeId.equals(treeId.invoke(r)!= null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
TreeNode treeNode = buildNode(r);
parentNode.getChildren().add(treeNode);
}
// 从列表中删除父节点
if(parentNodeId.equals(treeId.invoke(r) != null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
r = (T) new LinkedList<T>();
return;
}
} catch (IllegalAccessException | InvocationTargetException e) {
e.printStackTrace();
}
});
} catch (NoSuchMethodException e) {
e.printStackTrace();
}
// 对子节点遍历
parentNode.getChildren().forEach(c->buildTree(allDate,c));
}
}
前端代码：node
js：git
// 查询资源
export function findResource() {
return (dispatch) => {
dispatch(receiveInit());
post('/api/resourceInfo/resourceTree',{}).then((data) => {
dispatch(receiveResourceTree(data));
}, () => {
dispatch(receiveErrors());
});
};
}
// 赋值资源树数据
export function receiveResourceTree(treeDate) {
return {
type: RECEIVE_ADDROLE,
payload: {
fetching: false,
treeDate,
},
};
}
jsx：github
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
// 展开树事件
onExpand = (expandedKeys) => {
console.log('onExpand', arguments);
this.setState({
expandedKeys,
autoExpandParent: false,
});
}
// 勾选树事件
onCheck = (checkedKeys) => {
console.log('onCheck', checkedKeys);
this.setState({ checkedKeys });
}
// 选择树事件
onSelect = (selectedKeys, info) => {
console.log('onSelect', info);
this.setState({ selectedKeys });
}
// 数据加载事件
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} />;
});
}
<Row>
{addRole.treeDate.length ?
<Tree
checkable
onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
onCheck={this.onCheck}
checkedKeys={this.state.checkedKeys}
onSelect={this.onSelect}
selectedKeys={this.state.selectedKeys}
>
{this.renderTreeNodes(addRole.treeDate)}
</Tree>
: 'loading tree'}
</Row>
三、新增&编辑功能
后端代码：后端
/**
* @Author Mc
* @Description: 新增角色功能
* @Date 2018/4/19 16:06
*/
@Override
public Response<Boolean> saveBvsRole(BvsRole bvsRole) {
try {
boolean success = false;
// 根据isNewRcord和id判断新增仍是修改
if(bvsRole.getId() == null || bvsRole.getIsNewRecord()){
// 新增操做
bvsRole.setId(bvsRoleDao.getRoleId());
bvsRole.setGmtCreate(new Date());
bvsRole.setGmtModified(new Date());
checkNotNull(bvsRole, "bvsRole.is.empty");
success = bvsRoleDao.create(bvsRole);
// 新增RoleResource表数据
bvsRoleDao.createRoleResource(bvsRole);
}else{
// 编辑操做
bvsRole.setGmtModified(new Date());
success = bvsRoleDao.update(bvsRole);
// 编辑下先所有删除RoleResource表数据
bvsRoleDao.deleteRoleResource(bvsRole.getId());
// 而后新增RoleResource表数据
bvsRoleDao.createRoleResource(bvsRole);
}
checkState(success, "create.bvsRole.fail");
return Response.ok(Boolean.TRUE);
} catch (NullPointerException e) {
log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
return Response.fail(e.getMessage());
} catch (Exception e) {
log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
return Response.fail("create.role.fail");
}
前端代码：api
// 新增角色 js页面
export function createRole(param) {
return (dispatch) => {
dispatch(receiveInit());
return post('/api/bvsRole/saveBvsRole', param).then((data) => {
dispatch(receiveAddroles({data}));
return Promise.resolve(data);
}, () => {
dispatch(receiveErrors());
return Promise.reject(null);
});
};
}
// jsx页面
// 新增页面跳转
handleAdd(e) {
e.preventDefault();
browserHistory.push('/addRole');
}
// 编辑事件
editRole(e, id) {
e.preventDefault();
browserHistory.push(`/addRole?id=${id}&isNewRecord=false`);
}
componentWillMount (){
const { location,resource,findById } = this.props;
// 若是编辑的话查询数据
if(location.query.isNewRecord === "false"){
// 赋值路由传值
this.setState({
isNewRecord: location.query.isNewRecord,
id: location.query.id,
});
// 执行完findById后能获取到数据
findById(location.query).then(
() => {
const {addRole, form } = this.props;
form.setFieldsValue(addRole.bvsRole);
this.setState({
checkedKeys: addRole.checkTree,
expandedKeys: addRole.checkTree,
});}
);
}
// 调用树资源方法
resource();
}
// 提交方法
handleSubmit(e) {
e.preventDefault();
const { form, createRole } = this.props;
form.validateFields((err, values) => {
if (err) {
return;
}else{
const fieldsValues = form.getFieldsValue();
const values = {
...fieldsValues,
createBy:'mc',
lastModifiedBy:'mc',
pageNo: PAGE.current,
pageSize: PAGE.pageSize,
pagingFlag : 0,
checkedKeys: this.state.checkedKeys,
isNewRecord: this.state.isNewRecord,
id: this.state.id,
};
this.props.createRole(values).then((msg) => {
if (msg && msg.success == true) {
notification.success({
message: '操做成功',
description: `${values.isNewRecord == true ? '新增' : '编辑'}角色成功!`,
});
browserHistory.goBack();
}else{
notification.error({
message: '操做失败',
description: `${values.isNewRecord == true ? '新增' : '编辑'}角色失败!`,
});
}
});
}
});
this.setState({
pagination: {
...PAGE,
},
});
}
欢迎指正错误！antd