- 增加 管理员列表 页面
- 配置 menu 菜单
This commit is contained in:
sin
parent
23a821b236
commit
c198f93819
@ -21,6 +21,19 @@ export default [
|
|||||||
Routes: ['src/pages/Authorized'],
|
Routes: ['src/pages/Authorized'],
|
||||||
authority: ['admin', 'user'],
|
authority: ['admin', 'user'],
|
||||||
routes: [
|
routes: [
|
||||||
|
// admin
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
name: 'admin',
|
||||||
|
icon: 'user',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/admin/admin-list',
|
||||||
|
name: 'admin-list',
|
||||||
|
component: './Admin/AdminList',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
// dashboard
|
// dashboard
|
||||||
{ path: '/', redirect: '/dashboard/analysis' },
|
{ path: '/', redirect: '/dashboard/analysis' },
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
|
// admin
|
||||||
|
'menu.admin': 'Admin管理',
|
||||||
|
'menu.admin.admin-list': '管理员列表',
|
||||||
'menu.home': '首页',
|
'menu.home': '首页',
|
||||||
'menu.login': '登录',
|
'menu.login': '登录',
|
||||||
'menu.register': '注册',
|
'menu.register': '注册',
|
||||||
|
|||||||
307
admin-web/src/pages/Admin/AdminList.jsx
Normal file
307
admin-web/src/pages/Admin/AdminList.jsx
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
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;
|
||||||
195
admin-web/src/pages/Admin/AdminList.less
Normal file
195
admin-web/src/pages/Admin/AdminList.less
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.standardList {
|
||||||
|
:global {
|
||||||
|
.ant-card-head {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.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) {
|
||||||
|
.standardList {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user