前端:重构管理员模块~

This commit is contained in:
YunaiV 2019-03-20 23:23:43 +08:00
parent b384179610
commit f2125e49cf
6 changed files with 276 additions and 153 deletions

View File

@ -0,0 +1,57 @@
const DEFAULT_PAGE_NO = 1;
const DEFAULT_PAGE_SIZE = 10;
class PaginationHelper {
static defaultPaginationConfig = {
defaultCurrent: DEFAULT_PAGE_NO,
defaultPageSize: DEFAULT_PAGE_SIZE,
current: DEFAULT_PAGE_NO,
total: 0,
pageSize: DEFAULT_PAGE_SIZE,
showSizeChanger: true,
showQuickJumper: true,
showTotal: total => `${total}`
};
static formatPagination(data) {
return {
defaultCurrent: DEFAULT_PAGE_NO,
defaultPageSize: DEFAULT_PAGE_SIZE,
current: data.current,
total: data.total,
pageSize: data.size,
showSizeChanger: true,
showQuickJumper: true,
showTotal: total => `${total}`,
};
};
/**
* data.total 数据总数
* payload.pageNo 页码
* payload.pageSize 每页总数
*/
static formatPagination(data, payload) {
return {
defaultCurrent: DEFAULT_PAGE_NO,
defaultPageSize: DEFAULT_PAGE_SIZE,
current: payload.pageNo,
pageSize: payload.pageSize,
total: data.total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: total => `${total}`,
};
};
//获取初始页码
static defaultPayload = {
pageNo: DEFAULT_PAGE_NO,
pageSize: DEFAULT_PAGE_SIZE
}
}
export default PaginationHelper;
export {PaginationHelper};

View File

@ -2,23 +2,27 @@ import { message } from 'antd';
import {buildTreeNode, findCheckedKeys} from '../../utils/tree.utils';
import {
addAdmin,
updateAdmin,
updateAdminStatus,
adminRoleAssign,
deleteAdmin,
queryAdmin,
queryAdminRoleList,
adminRoleAssign,
updateAdmin,
updateAdminStatus,
} from '../../services/admin';
import {arrayToStringParams} from '../../utils/request.qs';
import PaginationHelper from '../../../helpers/PaginationHelper';
const SEARCH_PARAMS_DEFAULT = {
nickname: '',
};
export default {
namespace: 'adminList',
state: {
list: [],
count: 0,
pageNo: 0,
pageSize: 10,
searchParams: SEARCH_PARAMS_DEFAULT,
pagination: PaginationHelper.defaultPaginationConfig,
roleList: [],
roleCheckedKeys: [],
@ -26,6 +30,20 @@ export default {
},
effects: {
// 查询列表
* query({ payload }, { call, put }) {
const response = yield call(queryAdmin, payload);
yield put({
type: 'querySuccess',
payload: {
list: response.data.list,
pagination: PaginationHelper.formatPagination(response.data, payload),
searchParams: {
nickname: payload.nickname || ''
}
},
});
},
*add({ payload }, { call, put }) {
const { callback, body, queryParams } = payload;
const response = yield call(addAdmin, body);
@ -74,18 +92,7 @@ export default {
},
});
},
*query({ payload }, { call, put }) {
const response = yield call(queryAdmin, payload);
const { count, admins } = response.data;
yield put({
type: 'querySuccess',
payload: {
list: admins,
count,
pageNo: payload.pageNo + 1
},
});
},
*queryRoleList({ payload }, { call, put }) {
yield put({
type: 'changeRoleAssignLoading',

View File

@ -8,14 +8,147 @@ import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './AdminList.less';
import moment from "moment";
import Pagination from "antd/es/pagination";
import PaginationHelper from "../../../helpers/PaginationHelper";
const FormItem = Form.Item;
const { TreeNode } = Tree;
const status = ['未知', '正常', '禁用'];
// 列表
function List ({ dataSource, pagination, searchParams, dispatch }) {
const columns = [
{
title: '用户名',
dataIndex: 'username'
},
{
title: '昵称',
dataIndex: 'nickname',
},
{
title: '状态',
dataIndex: 'status',
render(val) {
return <span>{status[val]}</span>; // TODO 芋艿此处要改
},
},
{
title: '创建时间',
dataIndex: 'createTime',
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
},
{
title: '操作',
width: 360,
render: (text, record) => {
const statusText = record.status === 1 ? '禁用' : '禁用';
return (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" />
<a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
{statusText}
</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
</Fragment>
);
},
},
];
function onPageChange(page) {
dispatch({
type: 'adminList/query',
payload: {
pageNo: page.current,
pageSize: page.pageSize,
...searchParams
}
})
};
return (
<Table
columns={columns}
dataSource={dataSource}
rowKey="id"
// pagination={{
// current: pageNo,
// pageSize: pageSize,
// total: count,
// onChange: this.onPageChange
// }}
pagination={pagination}
onChange={onPageChange}
/>
)
}
// 搜索表单
// TODO 芋艿,有没办法换成上面那种写法
const SearchForm = Form.create()(props => {
const {
form,
form: { getFieldDecorator },
dispatch
} = props;
function search() {
dispatch({
type: 'adminList/query',
payload: {
...PaginationHelper.defaultPayload,
...form.getFieldsValue()
}
})
}
// 提交搜索
function handleSubmit(e) {
// 阻止默认事件
e.preventDefault();
// 提交搜索
search();
}
// 重置搜索
function handleReset() {
// 重置表单
form.resetFields();
// 执行搜索
search();
}
return (
<Form onSubmit={handleSubmit} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="昵称">
{getFieldDecorator('nickname')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
重置
</Button>
</span>
</Col>
</Row>
</Form>
);
});
// 添加 form 表单
const CreateForm = Form.create()(props => {
const AddOrUpdateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
const okHandle = () => {
@ -30,10 +163,6 @@ const CreateForm = Form.create()(props => {
});
};
const selectStyle = {
width: 200,
};
const title = modalType === 'add' ? '新建管理员' : '更新管理员';
return (
<Modal
@ -144,17 +273,23 @@ const RoleAssignModal = Form.create()(props => {
});
@connect(({ adminList, loading }) => ({
list: adminList.list,
// list: adminList.list,
// pagination: adminList.pagination,
...adminList,
data: adminList,
loading: loading.models.resourceList,
}))
@Form.create()
class ResourceList extends PureComponent {
state = {
// 添加 or 修改弹窗
modalVisible: false,
modalType: 'add', //add update
modalType: undefined, // 'add' or 'update'
initValues: {},
// 分配角色弹窗
modalRoleVisible: false,
modalRoleRow: {},
};
@ -163,7 +298,9 @@ class ResourceList extends PureComponent {
const { dispatch } = this.props;
dispatch({
type: 'adminList/query',
payload: {},
payload: {
...PaginationHelper.defaultPayload
},
});
}
@ -312,54 +449,14 @@ class ResourceList extends PureComponent {
});
};
onPageChange = (page = {}) => {
const { dispatch } = this.props;
// debugger;
dispatch({
type: 'adminList/query',
payload: {
pageNo: page - 1,
pageSize: 10,
}
});
}
renderSimpleForm() { // TODO 芋艿,搜索功能未完成
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="昵称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
</span>
</Col>
</Row>
</Form>
);
}
render() {
let that = this;
const { list, data } = this.props;
const { count, pageNo, pageSize, roleList, roleCheckedKeys, roleAssignLoading } = data;
const { dispatch, list, searchParams, pagination, data } = this.props;
const { roleList, roleCheckedKeys, roleAssignLoading } = data;
const {
modalVisible,
modalType,
initValues,
defaultExpandAllRows,
modalRoleVisible,
} = this.state;
@ -370,56 +467,28 @@ class ResourceList extends PureComponent {
initValues,
};
const columns = [
{
title: '用户名',
dataIndex: 'username'
},
{
title: '昵称',
dataIndex: 'nickname',
},
{
title: '状态',
dataIndex: 'status',
render(val) {
return <span>{status[val]}</span>; // TODO 芋艿此处要改
},
},
{
title: '创建时间',
dataIndex: 'createTime',
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
},
{
title: '操作',
width: 360,
render: (text, record) => {
const statusText = record.status === 1 ? '禁用' : '禁用';
return (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" />
<a onClick={() => this.handleRoleAssign(record)}>角色分配</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
{statusText}
</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
</Fragment>
);
},
},
];
// 列表属性
const listProps = {
dataSource: list,
pagination,
searchParams,
dispatch
};
// 搜索表单属性
const searchFormProps = {
dispatch,
};
// 添加
return (
<PageHeaderWrapper>
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>{that.renderSimpleForm()}</div>
<div className={styles.tableListForm}>
<SearchForm {...searchFormProps} />
</div>
<div className={styles.tableListOperator}>
<Button
icon="plus"
@ -430,20 +499,10 @@ class ResourceList extends PureComponent {
</Button>
</div>
</div>
<Table
defaultExpandAllRows={defaultExpandAllRows}
columns={columns}
dataSource={list}
rowKey="id"
pagination={{
current: pageNo,
pageSize: pageSize,
total: count,
onChange: this.onPageChange
}}
/>
<List {...listProps} />
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
<AddOrUpdateForm {...parentMethods} modalVisible={modalVisible} />
<RoleAssignModal
loading={roleAssignLoading}

View File

@ -9,25 +9,25 @@ import java.util.List;
public class AdminPageVO {
@ApiModelProperty(value = "管理员数组")
private List<AdminVO> admins;
private List<AdminVO> list;
@ApiModelProperty(value = "管理员总数")
private Integer count;
private Integer total;
public List<AdminVO> getAdmins() {
return admins;
public List<AdminVO> getList() {
return list;
}
public AdminPageVO setAdmins(List<AdminVO> admins) {
this.admins = admins;
public AdminPageVO setList(List<AdminVO> list) {
this.list = list;
return this;
}
public Integer getCount() {
return count;
public Integer getTotal() {
return total;
}
public AdminPageVO setCount(Integer count) {
this.count = count;
public AdminPageVO setTotal(Integer total) {
this.total = total;
return this;
}

View File

@ -7,27 +7,27 @@ public class AdminPageBO {
/**
* 管理员数组
*/
private List<AdminBO> admins;
private List<AdminBO> list;
/**
* 总量
*/
private Integer count;
private Integer total;
public List<AdminBO> getAdmins() {
return admins;
public List<AdminBO> getList() {
return list;
}
public AdminPageBO setAdmins(List<AdminBO> admins) {
this.admins = admins;
public AdminPageBO setList(List<AdminBO> list) {
this.list = list;
return this;
}
public Integer getCount() {
return count;
public Integer getTotal() {
return total;
}
public AdminPageBO setCount(Integer count) {
this.count = count;
public AdminPageBO setTotal(Integer total) {
this.total = total;
return this;
}

View File

@ -70,11 +70,11 @@ public class AdminServiceImpl implements AdminService {
public CommonResult<AdminPageBO> getAdminPage(AdminPageDTO adminPageDTO) {
AdminPageBO adminPage = new AdminPageBO();
// 查询分页数据
int offset = adminPageDTO.getPageNo() * adminPageDTO.getPageSize();
adminPage.setAdmins(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(),
int offset = (adminPageDTO.getPageNo() - 1) * adminPageDTO.getPageSize();
adminPage.setList(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(),
offset, adminPageDTO.getPageSize())));
// 查询分页总数
adminPage.setCount(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname()));
adminPage.setTotal(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname()));
return CommonResult.success(adminPage);
}