添加 admin 管理

This commit is contained in:
sin 2019-03-06 22:02:59 +08:00
parent d51fc7f5d0
commit 69e6deed21
10 changed files with 424 additions and 513 deletions

View File

@ -1,10 +1,10 @@
/* eslint-disable */
import adminMenu from './geographic/admin-menu.json'; import adminMenu from './geographic/admin-menu.json';
import adminMenuAll from './geographic/admin-menu-all.json'; import adminMenuAll from './geographic/admin-menu-all.json';
import adminUrls from './geographic/admin-urls'; import adminUrls from './geographic/admin-urls';
import resourceTree from './geographic/resource-tree.json'; import resourceTree from './geographic/resource-tree.json';
import roleQuery from './geographic/role-query.json'; import roleQuery from './geographic/role-query.json';
/* eslint-disable */
function getAdminMenu(req, res) { function getAdminMenu(req, res) {
return res.json(adminMenu); return res.json(adminMenu);
} }
@ -26,8 +26,8 @@ function getQueryRole(req, res) {
} }
export default { export default {
'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll, 'GET /admin-api/admins/resource/admin_menu_tree': getAdminMenuAll,
'GET /admin-api/admin/resource/admin_url_list': getAdminUrls, 'GET /admin-api/admins/resource/admin_url_list': getAdminUrls,
'GET /admin-api/admin/resource/tree': getResourceTree, 'GET /admin-api/admins/resource/tree': getResourceTree,
'GET /admin-api/admin/role/page': getQueryRole, 'GET /admin-api/admins/role/page': getQueryRole,
}; };

View File

@ -0,0 +1,32 @@
{
"code": 0,
"message": "",
"data": [
{
"enumValue": "gender",
"values": [
{
"value": "1",
"displayName": "男"
},
{
"value": "2",
"displayName": "女"
}
]
},
{
"enumValue": "gender",
"values": [
{
"value": "1",
"displayName": "男"
},
{
"value": "2",
"displayName": "女"
}
]
}
]
}

View File

@ -0,0 +1,91 @@
import { message } from 'antd';
import {
addAdmin,
updateAdmin,
updateAdminStatus,
deleteAdmin,
queryAdmin,
} from '../../services/admin';
export default {
namespace: 'adminList',
state: {
list: [],
count: 0,
pageNo: 0,
pageSize: 10,
},
effects: {
*add({ payload }, { call, put }) {
const { callback, body, queryParams } = payload;
const response = yield call(addAdmin, body);
if (callback) {
callback(response);
}
yield put({
type: 'query',
payload: {
...queryParams,
},
});
},
*update({ payload }, { call, put }) {
const { callback, body, queryParams } = payload;
const response = yield call(updateAdmin, body);
if (callback) {
callback(response);
}
yield put({
type: 'query',
payload: {
...queryParams,
},
});
},
*updateStatus({ payload }, { call, put }) {
const { body, queryParams } = payload;
yield call(updateAdminStatus, body);
message.info('更新成功!');
yield put({
type: 'query',
payload: {
...queryParams,
},
});
},
*delete({ payload }, { call, put }) {
const { queryParams, body } = payload;
yield call(deleteAdmin, body);
message.info('删除成功!');
yield put({
type: 'query',
payload: {
...queryParams,
},
});
},
*query({ payload }, { call, put }) {
const response = yield call(queryAdmin, payload);
message.info('查询成功!');
const { count, admins } = response.data;
yield put({
type: 'querySuccess',
payload: {
list: admins,
count,
},
});
},
},
reducers: {
querySuccess(state, { payload }) {
return {
...state,
...payload,
};
},
},
};

View File

@ -0,0 +1,243 @@
/* eslint-disable */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card, Form, Input, Select, Button, Modal, message, Table, Divider } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './AdminList.less';
const FormItem = Form.Item;
const { Option } = Select;
const status = ['未知', '正常', '禁用'];
// 添加 form 表单
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd({
fields: fieldsValue,
modalType,
initValues,
});
});
};
const selectStyle = {
width: 200,
};
const title = modalType === 'add' ? '添加一个 Resource' : '更新一个 Resource';
const okText = modalType === 'add' ? '添加' : '更新';
return (
<Modal
destroyOnClose
title={title}
visible={modalVisible}
onOk={okHandle}
okText={okText}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="名称">
{form.getFieldDecorator('username', {
rules: [{ required: true, message: '请输入名称!', min: 2 }],
initialValue: initValues.username,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="昵称">
{form.getFieldDecorator('nickname', {
rules: [{ required: true, message: '请输入昵称!', min: 2 }],
initialValue: initValues.nickname,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="密码">
{form.getFieldDecorator('password', {
initialValue: initValues.password,
})(<Input placeholder="请输入" type="password" />)}
</FormItem>
</Modal>
);
});
@connect(({ adminList, loading }) => ({
list: adminList.list,
data: adminList,
loading: loading.models.resourceList,
}))
@Form.create()
class ResourceList extends PureComponent {
state = {
modalVisible: false,
modalType: 'add', //add update
initValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'adminList/query',
payload: {},
});
}
handleModalVisible = (flag, modalType, initValues) => {
this.setState({
modalVisible: !!flag,
initValues: initValues || {},
modalType: modalType || 'add',
});
};
handleAdd = ({ fields, modalType, initValues }) => {
const { dispatch, data } = this.props;
const queryParams = {
pageNo: data.pageNo,
pageSize: data.pageSize,
};
if (modalType === 'add') {
dispatch({
type: 'adminList/add',
payload: {
body: {
...fields,
},
queryParams,
callback: () => {
message.success('添加成功');
this.handleModalVisible();
},
},
});
} else {
dispatch({
type: 'adminList/update',
payload: {
body: {
...initValues,
...fields,
},
queryParams,
callback: () => {
message.success('更新成功');
this.handleModalVisible();
},
},
});
}
};
handleStatus(row) {
const { dispatch, data } = this.props;
const queryParams = {
pageNo: data.pageNo,
pageSize: data.pageSize,
};
const title = row.status === 1 ? '确认禁用' : '取消禁用';
const updateStatus = row.status === 1 ? 2 : 1;
Modal.confirm({
title: `${title}?`,
content: `${row.username}`,
onOk() {
dispatch({
type: 'adminList/updateStatus',
payload: {
body: {
id: row.id,
status: updateStatus,
},
queryParams,
},
});
},
onCancel() {},
});
}
render() {
const { list } = this.props;
const { modalVisible, modalType, initValues, defaultExpandAllRows } = this.state;
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
modalType,
initValues,
};
const columns = [
{
title: 'id',
dataIndex: 'id',
render: text => <strong>{text}</strong>,
},
{
title: '用户名',
dataIndex: 'username',
render: text => <a>{text}</a>,
},
{
title: '昵称',
dataIndex: 'nickname',
},
{
title: '状态',
dataIndex: 'status',
render(val) {
return <span>{status[val]}</span>;
},
},
{
title: '操作',
render: (text, record) => {
const statusText = record.status === 1 ? '确认禁用' : '取消禁用';
return (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', 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 (
<PageHeaderWrapper title="查询表格">
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListOperator}>
<Button
icon="plus"
type="primary"
onClick={() => this.handleModalVisible(true, 'add', {})}
>
新建
</Button>
</div>
</div>
<Table
defaultExpandAllRows={defaultExpandAllRows}
columns={columns}
dataSource={list}
rowKey="id"
/>
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
</PageHeaderWrapper>
);
}
}
export default ResourceList;

View File

@ -1,307 +0,0 @@
import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { connect } from 'dva';
import {
List,
Card,
Input,
Progress,
Button,
Icon,
Dropdown,
Menu,
Avatar,
Modal,
Form,
DatePicker,
Select,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import styles from './AdminList.less';
const FormItem = Form.Item;
const SelectOption = Select.Option;
const { Search, TextArea } = Input;
@connect(({ list, loading }) => ({
list,
loading: loading.models.list,
}))
@Form.create()
class AdminList extends PureComponent {
state = { visible: false, done: false };
formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
}
showModal = () => {
this.setState({
visible: true,
current: undefined,
});
};
showEditModal = item => {
this.setState({
visible: true,
current: item,
});
};
handleDone = () => {
setTimeout(() => this.addBtn.blur(), 0);
this.setState({
done: false,
visible: false,
});
};
handleCancel = () => {
setTimeout(() => this.addBtn.blur(), 0);
this.setState({
visible: false,
});
};
handleSubmit = e => {
e.preventDefault();
const { dispatch, form } = this.props;
const { current } = this.state;
const id = current ? current.id : '';
setTimeout(() => this.addBtn.blur(), 0);
form.validateFields((err, fieldsValue) => {
if (err) return;
this.setState({
done: true,
});
dispatch({
type: 'list/submit',
payload: { id, ...fieldsValue },
});
});
};
deleteItem = id => {
const { dispatch } = this.props;
dispatch({
type: 'list/submit',
payload: { id },
});
};
render() {
const {
list: { list },
loading,
} = this.props;
const {
form: { getFieldDecorator },
} = this.props;
const { visible, done, current = {} } = this.state;
const editAndDelete = (key, currentItem) => {
if (key === 'edit') this.showEditModal(currentItem);
else if (key === 'delete') {
Modal.confirm({
title: '删除任务',
content: '确定删除该任务吗?',
okText: '确认',
cancelText: '取消',
onOk: () => this.deleteItem(currentItem.id),
});
}
};
const modalFooter = done
? { footer: null, onCancel: this.handleDone }
: { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
const extraContent = (
<div className={styles.extraContent}>
<Button
type="primary"
icon="plus"
onClick={this.showModal}
ref={component => {
/* eslint-disable */
this.addBtn = findDOMNode(component);
/* eslint-enable */
}}
>
添加
</Button>
<Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
</div>
);
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
pageSize: 5,
total: 50,
};
const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
<div className={styles.listContent}>
<div className={styles.listContentItem}>
<span>Owner</span>
<p>{owner}</p>
</div>
<div className={styles.listContentItem}>
<span>开始时间</span>
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
</div>
<div className={styles.listContentItem}>
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
</div>
</div>
);
const MoreBtn = props => (
<Dropdown
overlay={
<Menu onClick={({ key }) => editAndDelete(key, props.current)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>
}
>
<a>
更多 <Icon type="down" />
</a>
</Dropdown>
);
const getModalContent = () => {
if (done) {
return (
<Result
type="success"
title="操作成功"
description="一系列的信息描述,很短同样也可以带标点。"
actions={
<Button type="primary" onClick={this.handleDone}>
知道了
</Button>
}
className={styles.formResult}
/>
);
}
return (
<Form onSubmit={this.handleSubmit}>
<FormItem label="任务名称" {...this.formLayout}>
{getFieldDecorator('title', {
rules: [{ required: true, message: '请输入任务名称' }],
initialValue: current.title,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem label="开始时间" {...this.formLayout}>
{getFieldDecorator('createdAt', {
rules: [{ required: true, message: '请选择开始时间' }],
initialValue: current.createdAt ? moment(current.createdAt) : null,
})(
<DatePicker
showTime
placeholder="请选择"
format="YYYY-MM-DD HH:mm:ss"
style={{ width: '100%' }}
/>
)}
</FormItem>
<FormItem label="任务负责人" {...this.formLayout}>
{getFieldDecorator('owner', {
rules: [{ required: true, message: '请选择任务负责人' }],
initialValue: current.owner,
})(
<Select placeholder="请选择">
<SelectOption value="付晓晓">付晓晓</SelectOption>
<SelectOption value="周毛毛">周毛毛</SelectOption>
</Select>
)}
</FormItem>
<FormItem {...this.formLayout} label="产品描述">
{getFieldDecorator('subDescription', {
rules: [{ message: '请输入至少五个字符的产品描述!', min: 5 }],
initialValue: current.subDescription,
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
</FormItem>
</Form>
);
};
return (
<PageHeaderWrapper>
<div className={styles.standardList}>
<Card
className={styles.listCard}
bordered={false}
title="管理员列表"
style={{ marginTop: 24 }}
bodyStyle={{ padding: '0 32px 40px 32px' }}
extra={extraContent}
>
<List
size="large"
rowKey="id"
loading={loading}
pagination={paginationProps}
dataSource={list}
renderItem={item => (
<List.Item
actions={[
<a
onClick={e => {
e.preventDefault();
this.showEditModal(item);
}}
>
编辑
</a>,
<MoreBtn current={item} />,
]}
>
<List.Item.Meta
avatar={<Avatar src={item.logo} shape="square" size="large" />}
title={<a href={item.href}>{item.title}</a>}
description={item.subDescription}
/>
<ListContent data={item} />
</List.Item>
)}
/>
</Card>
</div>
<Modal
title={done ? null : `任务${current.id ? '编辑' : '添加'}`}
className={styles.standardListForm}
width={640}
bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
destroyOnClose
visible={visible}
{...modalFooter}
>
{getModalContent()}
</Modal>
</PageHeaderWrapper>
);
}
}
export default AdminList;

View File

@ -1,195 +1,15 @@
@import '~antd/lib/style/themes/default.less'; @import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less'; @import '~@/utils/utils.less';
.standardList { .tableList {
:global { .tableListOperator {
.ant-card-head { margin-bottom: 16px;
border-bottom: none; button {
} margin-right: 8px;
.ant-card-head-title {
padding: 24px 0;
line-height: 32px;
}
.ant-card-extra {
padding: 24px 0;
}
.ant-list-pagination {
margin-top: 24px;
text-align: right;
}
.ant-avatar-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
}
.headerInfo {
position: relative;
text-align: center;
& > span {
display: inline-block;
margin-bottom: 4px;
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
}
& > p {
margin: 0;
color: @heading-color;
font-size: 24px;
line-height: 32px;
}
& > em {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 56px;
background-color: @border-color-split;
}
}
.listContent {
font-size: 0;
.listContentItem {
display: inline-block;
margin-left: 40px;
color: @text-color-secondary;
font-size: @font-size-base;
vertical-align: middle;
> span {
line-height: 20px;
}
> p {
margin-top: 4px;
margin-bottom: 0;
line-height: 22px;
}
}
}
.extraContentSearch {
width: 272px;
margin-left: 16px;
}
}
@media screen and (max-width: @screen-xs) {
.standardList {
:global {
.ant-list-item-content {
display: block;
flex: none;
width: 100%;
}
.ant-list-item-action {
margin-left: 0;
}
}
.listContent {
margin-left: 0;
& > div {
margin-left: 0;
}
}
.listCard {
:global {
.ant-card-head-title {
overflow: visible;
}
}
} }
} }
} }
@media screen and (max-width: @screen-sm) { .tableDelete {
.standardList { color: red;
.extraContentSearch {
width: 100%;
margin-left: 0;
}
.headerInfo {
margin-bottom: 16px;
& > em {
display: none;
}
}
}
}
@media screen and (max-width: @screen-md) {
.standardList {
.listContent {
& > div {
display: block;
}
& > div:last-child {
top: 0;
width: 100%;
}
}
}
.listCard {
:global {
.ant-radio-group {
display: block;
margin-bottom: 8px;
}
}
}
}
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
.standardList {
.listContent {
& > div {
display: block;
}
& > div:last-child {
top: 0;
width: 100%;
}
}
}
}
@media screen and (max-width: @screen-xl) {
.standardList {
.listContent {
& > div {
margin-left: 24px;
}
& > div:last-child {
top: 0;
}
}
}
}
@media screen and (max-width: 1400px) {
.standardList {
.listContent {
text-align: right;
& > div:last-child {
top: 0;
}
}
}
}
.standardListForm {
:global {
.ant-form-item {
margin-bottom: 12px;
&:last-child {
margin-bottom: 32px;
padding-top: 4px;
}
}
}
}
.formResult {
width: 100%;
[class^='title'] {
margin-bottom: 8px;
}
} }

View File

@ -104,7 +104,7 @@ class ResourceList extends PureComponent {
componentDidMount() { componentDidMount() {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'roleList/tree', type: 'resourceList/tree',
payload: {}, payload: {},
}); });
} }

View File

@ -6,7 +6,7 @@ import moment from 'moment';
import { Card, Form, Input, Select, Button, Modal, message, Table, Divider } from 'antd'; import { Card, Form, Input, Select, Button, Modal, message, Table, Divider } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ResourceList.less'; import styles from './RoleList.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select; const { Option } = Select;

View File

@ -1,38 +1,70 @@
import { stringify } from 'qs'; import { stringify } from '@/utils/request.qs';
import request from '@/utils/request'; import request from '@/utils/request';
// auth // auth
export async function getAdminMenus() { export async function getAdminMenus() {
return request('/admin-api/admin/resource/admin_menu_tree'); return request('/admin-api/admins/resource/admin_menu_tree');
} }
export async function getAdminUrls(params) { export async function getAdminUrls(params) {
return request(`/admin-api/admin/resource/admin_url_list?${stringify(params)}`); return request(`/admin-api/admins/resource/admin_url_list?${stringify(params)}`);
}
// admin
export async function queryAdmin(params) {
return request(`/admin-api/admins/admin/page?${stringify(params)}`, {
method: 'GET',
});
}
export async function addAdmin(params) {
return request(`/admin-api/admins/admin/add?${stringify(params)}`, {
method: 'POST',
});
}
export async function updateAdmin(params) {
return request(`/admin-api/admins/admin/update?${stringify(params)}`, {
method: 'POST',
});
}
export async function updateAdminStatus(params) {
return request(`/admin-api/admins/admin/update_status?${stringify(params)}`, {
method: 'POST',
});
}
export async function deleteAdmin(params) {
return request(`/admin-api/admins/admin/delete?${stringify(params)}`, {
method: 'POST',
});
} }
// resource // resource
export async function addResource(params) { export async function addResource(params) {
return request(`/admin-api/admin/resource/add?${stringify(params)}`, { return request(`/admin-api/admins/resource/add?${stringify(params)}`, {
method: 'POST', method: 'POST',
}); });
} }
export async function updateResource(params) { export async function updateResource(params) {
return request(`/admin-api/admin/resource/update?${stringify(params)}`, { return request(`/admin-api/admins/resource/update?${stringify(params)}`, {
method: 'POST', method: 'POST',
}); });
} }
export async function deleteResource(params) { export async function deleteResource(params) {
return request(`/admin-api/admin/resource/delete?${stringify(params)}`, { return request(`/admin-api/admins/resource/delete?${stringify(params)}`, {
method: 'POST', method: 'POST',
}); });
} }
export async function resourceTree(params) { export async function resourceTree(params) {
return request(`/admin-api/admin/resource/tree?${stringify(params)}`, { return request(`/admin-api/admins/resource/tree?${stringify(params)}`, {
method: 'GET', method: 'GET',
}); });
} }
@ -40,25 +72,25 @@ export async function resourceTree(params) {
// role // role
export async function queryRole(params) { export async function queryRole(params) {
return request(`/admin-api/admin/role/page?${stringify(params)}`); return request(`/admin-api/admins/role/page?${stringify(params)}`);
} }
export async function deleteRole(params) { export async function deleteRole(params) {
return request(`/admin-api/admin/role/delete?${stringify(params)}`, { return request(`/admin-api/admins/role/delete?${stringify(params)}`, {
method: 'POST', method: 'POST',
body: {}, body: {},
}); });
} }
export async function addRole(params) { export async function addRole(params) {
return request(`/admin-api/admin/role/add?${stringify(params)}`, { return request(`/admin-api/admins/role/add?${stringify(params)}`, {
method: 'POST', method: 'POST',
body: {}, body: {},
}); });
} }
export async function updateRole(params) { export async function updateRole(params) {
return request(`/admin-api/admin/role/update?${stringify(params)}`, { return request(`/admin-api/admins/role/update?${stringify(params)}`, {
method: 'POST', method: 'POST',
body: {}, body: {},
}); });

View File

@ -1,4 +1,4 @@
import { stringify } from 'qs'; import { stringify } from '@/utils/request.qs';
import request from '@/utils/request'; import request from '@/utils/request';
export async function queryProjectNotice() { export async function queryProjectNotice() {