Skip to content

Y
yudao-cloud
提交 f2125e49 authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端：重构管理员模块~

上级 b3841796
隐藏空白字符变更
内嵌 并排
正在显示 包含 276 行增加 和 153 行删除
admin-web/helpers/PaginationHelper.js 0 → 100644
浏览文件 @ f2125e49
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};
admin-web/src/models/admin/adminList.js
浏览文件 @ f2125e49
import { message } from 'antd'; import {message} from 'antd';
import { buildTreeNode, findCheckedKeys } from '../../utils/tree.utils'; import {buildTreeNode, findCheckedKeys} from '../../utils/tree.utils';
import { import {
addAdmin, addAdmin,
updateAdmin, adminRoleAssign,
updateAdminStatus,
deleteAdmin, deleteAdmin,
queryAdmin, queryAdmin,
queryAdminRoleList, queryAdminRoleList,
adminRoleAssign, updateAdmin,
updateAdminStatus,
} from '../../services/admin'; } from '../../services/admin';
import { arrayToStringParams } from '../../utils/request.qs'; import {arrayToStringParams} from '../../utils/request.qs';
import PaginationHelper from '../../../helpers/PaginationHelper';
const SEARCH_PARAMS_DEFAULT = {
nickname: '',
};
export default { export default {
namespace: 'adminList', namespace: 'adminList',
state: { state: {
list: [], list: [],
count: 0, searchParams: SEARCH_PARAMS_DEFAULT,
pageNo: 0, pagination: PaginationHelper.defaultPaginationConfig,
pageSize: 10,
roleList: [], roleList: [],
roleCheckedKeys: [], roleCheckedKeys: [],
...@@ -26,6 +30,20 @@ export default { ...@@ -26,6 +30,20 @@ export default {
}, },
effects: { 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 }) { *add({ payload }, { call, put }) {
const { callback, body, queryParams } = payload; const { callback, body, queryParams } = payload;
const response = yield call(addAdmin, body); const response = yield call(addAdmin, body);
...@@ -74,18 +92,7 @@ export default { ...@@ -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 }) { *queryRoleList({ payload }, { call, put }) {
yield put({ yield put({
type: 'changeRoleAssignLoading', type: 'changeRoleAssignLoading',
......
admin-web/src/pages/Admin/AdminList.js
浏览文件 @ f2125e49
...@@ -8,14 +8,147 @@ import PageHeaderWrapper from '@/components/PageHeaderWrapper'; ...@@ -8,14 +8,147 @@ import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './AdminList.less'; import styles from './AdminList.less';
import moment from "moment"; import moment from "moment";
import Pagination from "antd/es/pagination"; import PaginationHelper from "../../../helpers/PaginationHelper";
const FormItem = Form.Item; const FormItem = Form.Item;
const { TreeNode } = Tree; const { TreeNode } = Tree;
const status = ['未知', '正常', '禁用']; 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 表单 // 添加 form 表单
const CreateForm = Form.create()(props => { const AddOrUpdateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props; const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
const okHandle = () => { const okHandle = () => {
...@@ -30,10 +163,6 @@ const CreateForm = Form.create()(props => { ...@@ -30,10 +163,6 @@ const CreateForm = Form.create()(props => {
}); });
}; };
const selectStyle = {
width: 200,
};
const title = modalType === 'add' ? '新建管理员' : '更新管理员'; const title = modalType === 'add' ? '新建管理员' : '更新管理员';
return ( return (
<Modal <Modal
...@@ -144,17 +273,23 @@ const RoleAssignModal = Form.create()(props => { ...@@ -144,17 +273,23 @@ const RoleAssignModal = Form.create()(props => {
}); });
@connect(({ adminList, loading }) => ({ @connect(({ adminList, loading }) => ({
list: adminList.list, // list: adminList.list,
// pagination: adminList.pagination,
...adminList,
data: adminList, data: adminList,
loading: loading.models.resourceList, loading: loading.models.resourceList,
})) }))
@Form.create() @Form.create()
class ResourceList extends PureComponent { class ResourceList extends PureComponent {
state = { state = {
// 添加 or 修改弹窗
modalVisible: false, modalVisible: false,
modalType: 'add', //add update modalType: undefined, // 'add' or 'update'
initValues: {}, initValues: {},
// 分配角色弹窗
modalRoleVisible: false, modalRoleVisible: false,
modalRoleRow: {}, modalRoleRow: {},
}; };
...@@ -163,7 +298,9 @@ class ResourceList extends PureComponent { ...@@ -163,7 +298,9 @@ class ResourceList extends PureComponent {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'adminList/query', type: 'adminList/query',
payload: {}, payload: {
...PaginationHelper.defaultPayload
},
}); });
} }
...@@ -312,54 +449,14 @@ class ResourceList extends PureComponent { ...@@ -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() { render() {
let that = this; let that = this;
const { list, data } = this.props; const { dispatch, list, searchParams, pagination, data } = this.props;
const { count, pageNo, pageSize, roleList, roleCheckedKeys, roleAssignLoading } = data; const { roleList, roleCheckedKeys, roleAssignLoading } = data;
const { const {
modalVisible, modalVisible,
modalType, modalType,
initValues, initValues,
defaultExpandAllRows,
modalRoleVisible, modalRoleVisible,
} = this.state; } = this.state;
...@@ -370,56 +467,28 @@ class ResourceList extends PureComponent { ...@@ -370,56 +467,28 @@ class ResourceList extends PureComponent {
initValues, initValues,
}; };
const columns = [ // 列表属性
{ const listProps = {
title: '用户名', dataSource: list,
dataIndex: 'username' pagination,
}, searchParams,
{ dispatch
title: '昵称', };
dataIndex: 'nickname',
}, // 搜索表单属性
{ const searchFormProps = {
title: '状态', dispatch,
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>
);
},
},
];
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<Card bordered={false}> <Card bordered={false}>
<div className={styles.tableList}> <div className={styles.tableList}>
<div className={styles.tableListForm}>{that.renderSimpleForm()}</div> <div className={styles.tableListForm}>
<SearchForm {...searchFormProps} />
</div>
<div className={styles.tableListOperator}> <div className={styles.tableListOperator}>
<Button <Button
icon="plus" icon="plus"
...@@ -430,20 +499,10 @@ class ResourceList extends PureComponent { ...@@ -430,20 +499,10 @@ class ResourceList extends PureComponent {
</Button> </Button>
</div> </div>
</div> </div>
<Table <List {...listProps} />
defaultExpandAllRows={defaultExpandAllRows}
columns={columns}
dataSource={list}
rowKey="id"
pagination={{
current: pageNo,
pageSize: pageSize,
total: count,
onChange: this.onPageChange
}}
/>
</Card> </Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} /> <AddOrUpdateForm {...parentMethods} modalVisible={modalVisible} />
<RoleAssignModal <RoleAssignModal
loading={roleAssignLoading} loading={roleAssignLoading}
......
admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/vo/AdminPageVO.java
浏览文件 @ f2125e49
...@@ -9,25 +9,25 @@ import java.util.List; ...@@ -9,25 +9,25 @@ import java.util.List;
public class AdminPageVO { public class AdminPageVO {
@ApiModelProperty(value = "管理员数组") @ApiModelProperty(value = "管理员数组")
private List<AdminVO> admins; private List<AdminVO> list;
@ApiModelProperty(value = "管理员总数") @ApiModelProperty(value = "管理员总数")
private Integer count; private Integer total;
public List<AdminVO> getAdmins() { public List<AdminVO> getList() {
return admins; return list;
} }
public AdminPageVO setAdmins(List<AdminVO> admins) { public AdminPageVO setList(List<AdminVO> list) {
this.admins = admins; this.list = list;
return this; return this;
} }
public Integer getCount() { public Integer getTotal() {
return count; return total;
} }
public AdminPageVO setCount(Integer count) { public AdminPageVO setTotal(Integer total) {
this.count = count; this.total = total;
return this; return this;
} }
......
admin/admin-service-api/src/main/java/cn/iocoder/mall/admin/api/bo/AdminPageBO.java
浏览文件 @ f2125e49
...@@ -7,27 +7,27 @@ public class AdminPageBO { ...@@ -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() { public List<AdminBO> getList() {
return admins; return list;
} }
public AdminPageBO setAdmins(List<AdminBO> admins) { public AdminPageBO setList(List<AdminBO> list) {
this.admins = admins; this.list = list;
return this; return this;
} }
public Integer getCount() { public Integer getTotal() {
return count; return total;
} }
public AdminPageBO setCount(Integer count) { public AdminPageBO setTotal(Integer total) {
this.count = count; this.total = total;
return this; return this;
} }
......
admin/admin-service-impl/src/main/java/cn/iocoder/mall/admin/service/AdminServiceImpl.java
浏览文件 @ f2125e49
...@@ -70,11 +70,11 @@ public class AdminServiceImpl implements AdminService { ...@@ -70,11 +70,11 @@ public class AdminServiceImpl implements AdminService {
public CommonResult<AdminPageBO> getAdminPage(AdminPageDTO adminPageDTO) { public CommonResult<AdminPageBO> getAdminPage(AdminPageDTO adminPageDTO) {
AdminPageBO adminPage = new AdminPageBO(); AdminPageBO adminPage = new AdminPageBO();
// 查询分页数据 // 查询分页数据
int offset = adminPageDTO.getPageNo() * adminPageDTO.getPageSize(); int offset = (adminPageDTO.getPageNo() - 1) * adminPageDTO.getPageSize();
adminPage.setAdmins(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(), adminPage.setList(AdminConvert.INSTANCE.convert(adminMapper.selectListByNicknameLike(adminPageDTO.getNickname(),
offset, adminPageDTO.getPageSize()))); offset, adminPageDTO.getPageSize())));
// 查询分页总数 // 查询分页总数
adminPage.setCount(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname())); adminPage.setTotal(adminMapper.selectCountByNicknameLike(adminPageDTO.getNickname()));
return CommonResult.success(adminPage); return CommonResult.success(adminPage);
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论