From 69e6deed2128ee6b6933ec1e450553c72f7c102c Mon Sep 17 00:00:00 2001 From: sin <2943460818@qq.com> Date: Wed, 6 Mar 2019 22:02:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20admin=20=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/mock/admin.js | 10 +- admin-web/mock/geographic/dic-value.json | 32 +++ admin-web/src/models/admin/adminList.js | 91 +++++++ admin-web/src/pages/Admin/AdminList.js | 243 +++++++++++++++++ admin-web/src/pages/Admin/AdminList.jsx | 307 ---------------------- admin-web/src/pages/Admin/AdminList.less | 194 +------------- admin-web/src/pages/Admin/ResourceList.js | 2 +- admin-web/src/pages/Admin/RoleList.js | 2 +- admin-web/src/services/admin.js | 54 +++- admin-web/src/services/api.js | 2 +- 10 files changed, 424 insertions(+), 513 deletions(-) create mode 100644 admin-web/mock/geographic/dic-value.json create mode 100644 admin-web/src/models/admin/adminList.js create mode 100644 admin-web/src/pages/Admin/AdminList.js delete mode 100644 admin-web/src/pages/Admin/AdminList.jsx diff --git a/admin-web/mock/admin.js b/admin-web/mock/admin.js index f5c359a7c..60c11d9c5 100644 --- a/admin-web/mock/admin.js +++ b/admin-web/mock/admin.js @@ -1,10 +1,10 @@ +/* eslint-disable */ import adminMenu from './geographic/admin-menu.json'; import adminMenuAll from './geographic/admin-menu-all.json'; import adminUrls from './geographic/admin-urls'; import resourceTree from './geographic/resource-tree.json'; import roleQuery from './geographic/role-query.json'; -/* eslint-disable */ function getAdminMenu(req, res) { return res.json(adminMenu); } @@ -26,8 +26,8 @@ function getQueryRole(req, res) { } export default { - 'GET /admin-api/admin/resource/admin_menu_tree': getAdminMenuAll, - 'GET /admin-api/admin/resource/admin_url_list': getAdminUrls, - 'GET /admin-api/admin/resource/tree': getResourceTree, - 'GET /admin-api/admin/role/page': getQueryRole, + 'GET /admin-api/admins/resource/admin_menu_tree': getAdminMenuAll, + 'GET /admin-api/admins/resource/admin_url_list': getAdminUrls, + 'GET /admin-api/admins/resource/tree': getResourceTree, + 'GET /admin-api/admins/role/page': getQueryRole, }; diff --git a/admin-web/mock/geographic/dic-value.json b/admin-web/mock/geographic/dic-value.json new file mode 100644 index 000000000..f7b4f8abe --- /dev/null +++ b/admin-web/mock/geographic/dic-value.json @@ -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": "女" + } + ] + } + ] +} diff --git a/admin-web/src/models/admin/adminList.js b/admin-web/src/models/admin/adminList.js new file mode 100644 index 000000000..a21faa0d3 --- /dev/null +++ b/admin-web/src/models/admin/adminList.js @@ -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, + }; + }, + }, +}; diff --git a/admin-web/src/pages/Admin/AdminList.js b/admin-web/src/pages/Admin/AdminList.js new file mode 100644 index 000000000..ab25d77c7 --- /dev/null +++ b/admin-web/src/pages/Admin/AdminList.js @@ -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 ( + handleModalVisible()} + > + + {form.getFieldDecorator('username', { + rules: [{ required: true, message: '请输入名称！', min: 2 }], + initialValue: initValues.username, + })()} + + + {form.getFieldDecorator('nickname', { + rules: [{ required: true, message: '请输入昵称！', min: 2 }], + initialValue: initValues.nickname, + })()} + + + {form.getFieldDecorator('password', { + initialValue: initValues.password, + })()} + + + ); +}); + +@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 => {text}, + }, + { + title: '用户名', + dataIndex: 'username', + render: text => {text}, + }, + { + title: '昵称', + dataIndex: 'nickname', + }, + { + title: '状态', + dataIndex: 'status', + render(val) { + return {status[val]}; + }, + }, + { + title: '操作', + render: (text, record) => { + const statusText = record.status === 1 ? '确认禁用' : '取消禁用'; + return ( + + this.handleModalVisible(true, 'update', record)}>更新 + + this.handleStatus(record)}> + {statusText} + + + this.handleDelete(record)}> + 删除 + + + ); + }, + }, + ]; + + return ( + + +
+
+ +
+
+ + + + + ); + } +} + +export default ResourceList; diff --git a/admin-web/src/pages/Admin/AdminList.jsx b/admin-web/src/pages/Admin/AdminList.jsx deleted file mode 100644 index e984b8361..000000000 --- a/admin-web/src/pages/Admin/AdminList.jsx +++ /dev/null @@ -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 = ( -
- - ({})} /> -
- ); - - 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, - })(