diff --git a/admin-web/config/router.config.js b/admin-web/config/router.config.js index 840fe8334..429db6aa5 100644 --- a/admin-web/config/router.config.js +++ b/admin-web/config/router.config.js @@ -21,6 +21,19 @@ export default [ Routes: ['src/pages/Authorized'], authority: ['admin', 'user'], routes: [ + // admin + { + path: '/admin', + name: 'admin', + icon: 'user', + routes: [ + { + path: '/admin/admin-list', + name: 'admin-list', + component: './Admin/AdminList', + }, + ], + }, // dashboard { path: '/', redirect: '/dashboard/analysis' }, { diff --git a/admin-web/src/locales/zh-CN/menu.js b/admin-web/src/locales/zh-CN/menu.js index 5657c6e05..1d4cbc3cc 100644 --- a/admin-web/src/locales/zh-CN/menu.js +++ b/admin-web/src/locales/zh-CN/menu.js @@ -1,4 +1,7 @@ export default { + // admin + 'menu.admin': 'Admin管理', + 'menu.admin.admin-list': '管理员列表', 'menu.home': '首页', 'menu.login': '登录', 'menu.register': '注册', diff --git a/admin-web/src/pages/Admin/AdminList.jsx b/admin-web/src/pages/Admin/AdminList.jsx new file mode 100644 index 000000000..e984b8361 --- /dev/null +++ b/admin-web/src/pages/Admin/AdminList.jsx @@ -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 = ( +
+ + ({})} /> +
+ ); + + const paginationProps = { + showSizeChanger: true, + showQuickJumper: true, + pageSize: 5, + total: 50, + }; + + const ListContent = ({ data: { owner, createdAt, percent, status } }) => ( +
+
+ Owner +

{owner}

+
+
+ 开始时间 +

{moment(createdAt).format('YYYY-MM-DD HH:mm')}

+
+
+ +
+
+ ); + + const MoreBtn = props => ( + editAndDelete(key, props.current)}> + 编辑 + 删除 + + } + > + + 更多 + + + ); + + const getModalContent = () => { + if (done) { + return ( + + 知道了 + + } + className={styles.formResult} + /> + ); + } + return ( +
+ + {getFieldDecorator('title', { + rules: [{ required: true, message: '请输入任务名称' }], + initialValue: current.title, + })()} + + + {getFieldDecorator('createdAt', { + rules: [{ required: true, message: '请选择开始时间' }], + initialValue: current.createdAt ? moment(current.createdAt) : null, + })( + + )} + + + {getFieldDecorator('owner', { + rules: [{ required: true, message: '请选择任务负责人' }], + initialValue: current.owner, + })( + + )} + + + {getFieldDecorator('subDescription', { + rules: [{ message: '请输入至少五个字符的产品描述！', min: 5 }], + initialValue: current.subDescription, + })(