From 7a04fb3e0058ad3188fb0b906cf665c38dc05139 Mon Sep 17 00:00:00 2001 From: 542634 <1322755174@qq.com> Date: Sat, 29 Dec 2018 16:09:55 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=9F=BA=E6=9C=AC?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/colors.js | 4 +- config/webpack.config.dev.js | 2 +- config/webpack.config.prod.js | 2 +- src/App.js | 30 +++++++------- src/components/AppFrame/AppFrame.js | 57 +++++++++++++++++++++++++++ src/components/AppFrame/AppFrame.less | 10 +++++ src/components/index.js | 2 + src/pages/SysSetting/SysSetting.js | 1 + src/pages/Users/Users.js | 7 ++++ src/pages/index.js | 6 +-- src/routes.js | 37 ++++++++++------- 11 files changed, 121 insertions(+), 37 deletions(-) create mode 100644 src/components/AppFrame/AppFrame.js create mode 100644 src/components/AppFrame/AppFrame.less create mode 100644 src/components/index.js create mode 100644 src/pages/SysSetting/SysSetting.js create mode 100644 src/pages/Users/Users.js diff --git a/config/colors.js b/config/colors.js index 24ac357..7782d5e 100644 --- a/config/colors.js +++ b/config/colors.js @@ -1,5 +1,5 @@ const colors = { - '@primary-color': 'red', //默认色 + '@primary-color': '#1890ff', // 全局主色 '@link-color': '#1890ff', // 链接色 '@success-color': '#52c41a', // 成功色 '@warning-color': '#faad14', // 警告色 @@ -14,4 +14,4 @@ const colors = { '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)' // 浮层阴影 } -module.export = colors +module.exports = colors diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 7875827..d020601 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -10,7 +10,6 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin') const getClientEnvironment = require('./env') const paths = require('./paths') const colors = require('./colors') - // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. const publicPath = '/' @@ -83,6 +82,7 @@ module.exports = { // for React Native Web. extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { + '@': path.join(process.cwd(), '/src'), // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web' diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 5a89a06..22b9674 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -90,7 +90,7 @@ module.exports = { // for React Native Web. extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], alias: { - + '@': path.join(process.cwd(), '/src'), // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', diff --git a/src/App.js b/src/App.js index 4de4b31..1640651 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,28 @@ import React, { Component } from 'react' import routes from './routes' import './App.less' -import {Route, Switch, Redirect} from 'react-router-dom' +import { Route, Switch, Redirect } from 'react-router-dom' +import { AppFrame } from './components' class App extends Component { render() { return ( -
+ - { - //渲染路由 - // - routes.map(route=>{ - return( - { + return ( + - ) - }) - } + path={route.path} + component={route.component} + /> + ) + })} + + -
+ ) } } diff --git a/src/components/AppFrame/AppFrame.js b/src/components/AppFrame/AppFrame.js new file mode 100644 index 0000000..e833761 --- /dev/null +++ b/src/components/AppFrame/AppFrame.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import { Layout, Menu, Icon } from 'antd' +import { withRouter } from 'react-router-dom' +import './AppFrame.less' +import routes from '@/routes' +const { Header, Content, Sider } = Layout +const navRoutes = routes.filter(route => route.isNav === true) +class AppFrame extends Component { + handleMenuItemClick = ({ key }) => { + // console.log(key) + this.props.history.push(key) + } + render() { + return ( + +
+
Hello world + 后台管理
+
+ + + + {navRoutes.map(route => { + return ( + + + {route.title} + + ) + })} + + + + + {this.props.children} + + + + + ) + } +} + +export default withRouter(AppFrame) diff --git a/src/components/AppFrame/AppFrame.less b/src/components/AppFrame/AppFrame.less new file mode 100644 index 0000000..6bf6c83 --- /dev/null +++ b/src/components/AppFrame/AppFrame.less @@ -0,0 +1,10 @@ +body, +html, +#root, +.r-layout { + height: 100%; +} +.logo { + color: #ffffff; + font-size: 24px; +} diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..8f049ad --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,2 @@ +import AppFrame from './AppFrame/AppFrame' +export { AppFrame } diff --git a/src/pages/SysSetting/SysSetting.js b/src/pages/SysSetting/SysSetting.js new file mode 100644 index 0000000..491d765 --- /dev/null +++ b/src/pages/SysSetting/SysSetting.js @@ -0,0 +1 @@ +rcc diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js new file mode 100644 index 0000000..49214ea --- /dev/null +++ b/src/pages/Users/Users.js @@ -0,0 +1,7 @@ +import React, { Component } from 'react' + +export default class Users extends Component { + render() { + return
人员管理
+ } +} diff --git a/src/pages/index.js b/src/pages/index.js index 17e54ff..f51f55f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,6 +1,4 @@ import DashBoard from './DashBoard/DashBoard' import NotFound from './NotFound/NotFound' -export { - DashBoard, - NotFound -} \ No newline at end of file +import Users from './Users/Users' +export { DashBoard, NotFound, Users } diff --git a/src/routes.js b/src/routes.js index 22a475f..eed7f7a 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,16 +1,23 @@ -import { - DashBoard, - NotFound -} from './pages' +import { DashBoard, NotFound, Users } from './pages' -const routes = [{ - path: '/dashboard', - isNav: true, - component: DashBoard, - title: '管理首页' -}, -{ - path: '/404', - component: NotFound -}] -export default routes \ No newline at end of file +const routes = [ + { + path: '/dashboard', + isNav: true, + component: DashBoard, + iconType: 'dashboard', + title: '管理首页' + }, + { + path: '/users', + isNav: true, + iconType: 'usergroup-add', + component: Users, + title: '用户管理' + }, + { + path: '/404', + component: NotFound + } +] +export default routes -- Gitee From 7e9232aa4e384b53a915f25eccbd8de080235dc3 Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Mon, 31 Dec 2018 13:33:16 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E4=B8=BA=E7=BA=A7=E5=88=AB=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=BF=9B=E8=A1=8C=E5=88=86=E7=89=87=E6=89=93=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SysSetting/SysSetting.js | 13 ++++++++++++- src/pages/index.js | 3 ++- src/routes.js | 9 ++++++++- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/pages/SysSetting/SysSetting.js b/src/pages/SysSetting/SysSetting.js index 491d765..bcf3244 100644 --- a/src/pages/SysSetting/SysSetting.js +++ b/src/pages/SysSetting/SysSetting.js @@ -1 +1,12 @@ -rcc +import React, { Component } from 'react' + +export default class SysSetting extends Component { + render() { + return ( +
+ 系统设置 +
+ ) + } +} + diff --git a/src/pages/index.js b/src/pages/index.js index f51f55f..b6c39e9 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,4 +1,5 @@ import DashBoard from './DashBoard/DashBoard' import NotFound from './NotFound/NotFound' import Users from './Users/Users' -export { DashBoard, NotFound, Users } +import SysSetting from './SysSetting/SysSetting' +export { DashBoard, NotFound, Users, SysSetting } diff --git a/src/routes.js b/src/routes.js index eed7f7a..5c48f79 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,4 +1,4 @@ -import { DashBoard, NotFound, Users } from './pages' +import { DashBoard, NotFound, Users, SysSetting } from './pages' const routes = [ { @@ -15,6 +15,13 @@ const routes = [ component: Users, title: '用户管理' }, + { + path: '/syssetting', + isNav: true, + component: SysSetting, + iconType: 'setting', + title: '系统管理' + }, { path: '/404', component: NotFound -- Gitee From e652b458fa658e86f76083f66928af9a33768aa1 Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Mon, 31 Dec 2018 15:35:12 +0800 Subject: [PATCH 3/9] =?UTF-8?q?fix=EF=BC=9A=E8=A7=A3=E5=86=B3=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E9=AB=98=E4=BA=AE=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AppFrame/AppFrame.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/AppFrame/AppFrame.js b/src/components/AppFrame/AppFrame.js index e833761..b9220bc 100644 --- a/src/components/AppFrame/AppFrame.js +++ b/src/components/AppFrame/AppFrame.js @@ -5,7 +5,22 @@ import './AppFrame.less' import routes from '@/routes' const { Header, Content, Sider } = Layout const navRoutes = routes.filter(route => route.isNav === true) -class AppFrame extends Component { +// 装饰器的写法 需要安装babel插件npm install --save-dev babel-plugin-transform-decorators-legacy +@withRouter +export default class AppFrame extends Component { + static getDerivedStateFromProps(props){ + console.log(props) + const selectedKey = `/${props.location.pathname.split('/').reverse()[0]}` || navRoutes[0].path + return { + selectedKey + } + } + constructor() { + super(); + this.state = { + selectedKey: navRoutes[0].path + } + } handleMenuItemClick = ({ key }) => { // console.log(key) this.props.history.push(key) @@ -22,7 +37,7 @@ class AppFrame extends Component { onClick={this.handleMenuItemClick} theme="light" mode="inline" - defaultSelectedKeys={[navRoutes[0].path]} + selectedKeys={[this.state.selectedKey]} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }} > @@ -54,4 +69,3 @@ class AppFrame extends Component { } } -export default withRouter(AppFrame) -- Gitee From e66f6295238a0a759704a9c83add7fe91c727c1d Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Mon, 31 Dec 2018 22:00:04 +0800 Subject: [PATCH 4/9] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0ajax?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 ++ src/components/AppFrame/AppFrame.js | 2 +- src/pages/Users/Users.js | 86 ++++++++++++++++++++++++++++- src/pages/index.js | 30 ++++++++-- src/requests/index.js | 29 ++++++++++ 5 files changed, 145 insertions(+), 7 deletions(-) create mode 100644 src/requests/index.js diff --git a/package.json b/package.json index 06254c5..93df11a 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "antd": "^3.11.6", "autoprefixer": "7.1.6", + "axios": "^0.18.0", "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", @@ -95,6 +96,7 @@ "react-app" ], "plugins": [ + "transform-decorators-legacy", [ "import", { @@ -103,5 +105,8 @@ } ] ] + }, + "devDependencies": { + "babel-plugin-transform-decorators-legacy": "^1.3.5" } } diff --git a/src/components/AppFrame/AppFrame.js b/src/components/AppFrame/AppFrame.js index b9220bc..d6d93be 100644 --- a/src/components/AppFrame/AppFrame.js +++ b/src/components/AppFrame/AppFrame.js @@ -9,7 +9,7 @@ const navRoutes = routes.filter(route => route.isNav === true) @withRouter export default class AppFrame extends Component { static getDerivedStateFromProps(props){ - console.log(props) + //console.log(props) const selectedKey = `/${props.location.pathname.split('/').reverse()[0]}` || navRoutes[0].path return { selectedKey diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index 49214ea..adcc96a 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -1,7 +1,89 @@ -import React, { Component } from 'react' +import React, { Component, Fragment } from 'react' +import { Table, Divider, Tag, Spin, Icon } from 'antd'; +import { posiUserList } from '@/requests' +const columns = [{ + title: '姓名', + dataIndex: 'name', + key: 'name', + render: text => {text}, +}, { + title: '年龄', + dataIndex: 'age', + key: 'age', +}, { + title: '性别', + dataIndex: 'gender', + key: 'gender', +}, { + title: '地址', + dataIndex: 'address', + key: 'address', +}, { + title: '职位', + key: 'position', + dataIndex: 'position', + render: pos => { + let color = "lime" + switch(pos) { + case '管理员': + color = "#2db7f5"; + break; + case '普通用户': + color = "blue"; + break; + case '经理': + color = "#f50" + break; + default: + break; + } + return {pos} + } +}, { + title: '操作', + key: 'action', + render: (text, record) => ( + + 编辑 + + 删除 + + ), +}]; + export default class Users extends Component { + constructor(){ + super(); + this.state = { + data : [], + isSpinning: true + } + } + componentDidMount() { + posiUserList() + .then(data => { + this.setState({ + data, + isSpinning:false + }) + }) + } render() { - return
人员管理
+ return( + +

人员管理

+ } + > + + + + ) } } diff --git a/src/pages/index.js b/src/pages/index.js index b6c39e9..2c30330 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,27 @@ -import DashBoard from './DashBoard/DashBoard' -import NotFound from './NotFound/NotFound' -import Users from './Users/Users' -import SysSetting from './SysSetting/SysSetting' +// import DashBoard from './DashBoard/DashBoard' +// import NotFound from './NotFound/NotFound' +// import Users from './Users/Users' +// import SysSetting from './SysSetting/SysSetting' +import React from 'react' +import Loadable from 'react-loadable' +const Loading = () =>
加载中....
+const DashBoard = Loadable({ + loader: () => import('./DashBoard/DashBoard'), + loading: Loading, +}); + +const NotFound = Loadable({ + loader: () => import('./NotFound/NotFound'), + loading: Loading, +}); + +const Users = Loadable({ + loader: () => import('./Users/Users'), + loading: Loading, +}); + +const SysSetting = Loadable({ + loader: () => import('./SysSetting/SysSetting'), + loading: Loading, +}); export { DashBoard, NotFound, Users, SysSetting } diff --git a/src/requests/index.js b/src/requests/index.js new file mode 100644 index 0000000..8edfd17 --- /dev/null +++ b/src/requests/index.js @@ -0,0 +1,29 @@ +import axios from 'axios' + +const ajax = axios.create({ + baseURL: 'http://rap2api.taobao.org/app/mock/122976' +}) + +ajax.interceptors.request.use(config => { + //console.log(config) + // config.headers.authToken = 'ajaxpost' + config.data = { + authToken : 'ajaxpost' + } + return config +}) + +ajax.interceptors.response.use(resp => { + if(resp.data.code === 200){ + return resp.data.data + } else { + return { + errorMsg: resp.data.msg || '出错了！！' + } + } + +}) + +export const posiUserList = () => { + return ajax.post('api/v1/userList') +} \ No newline at end of file -- Gitee From 2c8bed4b14a253595eb313ee5bf8024066114f0f Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Tue, 1 Jan 2019 15:23:34 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0ajax?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Users/Users.js | 51 ++++++++++++++++++++++++++++++++++------ src/requests/index.js | 14 ++++++++--- 2 files changed, 55 insertions(+), 10 deletions(-) diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index adcc96a..73187d3 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -1,6 +1,6 @@ import React, { Component, Fragment } from 'react' import { Table, Divider, Tag, Spin, Icon } from 'antd'; -import { posiUserList } from '@/requests' +import { postUserListPage } from '@/requests' const columns = [{ title: '姓名', dataIndex: 'name', @@ -57,15 +57,49 @@ export default class Users extends Component { super(); this.state = { data : [], - isSpinning: true + isSpinning: true, + pagination: { + current: 1, + total: 0, + } } } componentDidMount() { - posiUserList() - .then(data => { + this.fetchDate() + } + + handleTableChange = (pagination) => { + console.log(pagination) + this.setState({ + pagination + },() => { + console.log(111) + this.fetchDate() + }) + } + fetchDate(){ + // 前端分页方法 + // posiUserList() + // .then(data => { + // this.setState({ + // data, + // isSpinning:false + // }) + // }) + const offset = (this.state.pagination.current - 1) * 10 + postUserListPage({ + limited: 10, + offset + }) + .then(resp => { + console.log(resp) this.setState({ - data, - isSpinning:false + data: resp.list, + isSpinning:false, + pagination: { + total: resp.totalCount, + current: this.state.pagination.current + } }) }) } @@ -79,8 +113,11 @@ export default class Users extends Component { indicator={ } >
record.id} columns={columns} - dataSource={this.state.data} + dataSource={this.state.data} + pagination={this.state.pagination} + onChange={this.handleTableChange} /> diff --git a/src/requests/index.js b/src/requests/index.js index 8edfd17..2596ec8 100644 --- a/src/requests/index.js +++ b/src/requests/index.js @@ -8,14 +8,16 @@ ajax.interceptors.request.use(config => { //console.log(config) // config.headers.authToken = 'ajaxpost' config.data = { + ...config.data, authToken : 'ajaxpost' } return config }) ajax.interceptors.response.use(resp => { + //console.log(resp.data.data[0].list) if(resp.data.code === 200){ - return resp.data.data + return resp.data.data[0] } else { return { errorMsg: resp.data.msg || '出错了！！' @@ -24,6 +26,12 @@ ajax.interceptors.response.use(resp => { }) -export const posiUserList = () => { +// 前端分页接口 +export const postUserList = () => { return ajax.post('api/v1/userList') -} \ No newline at end of file +} +// 后端分页接口 +export const postUserListPage = (params) => { + console.log(params) + return ajax.post('/api/v1/userListPage',params) + } \ No newline at end of file -- Gitee From 1c1a50d8a2fdc2588c05aa269a76fd0ed28ddbec Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Tue, 1 Jan 2019 15:34:49 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Users/Users.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index 73187d3..7bd1675 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -71,7 +71,8 @@ export default class Users extends Component { handleTableChange = (pagination) => { console.log(pagination) this.setState({ - pagination + pagination, + isSpinning: true },() => { console.log(111) this.fetchDate() -- Gitee From 76fa8c2640b4e38229352c1fa0536586b89a8543 Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Tue, 1 Jan 2019 16:53:43 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat:=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=92=8C=E4=B8=80=E4=BA=9B=E9=AB=98=E5=BA=A6100%=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AppFrame/AppFrame.js | 2 +- src/pages/Users/Users.js | 168 +++++++++++++++++++--------- src/requests/index.js | 10 +- 3 files changed, 123 insertions(+), 57 deletions(-) diff --git a/src/components/AppFrame/AppFrame.js b/src/components/AppFrame/AppFrame.js index d6d93be..c748a24 100644 --- a/src/components/AppFrame/AppFrame.js +++ b/src/components/AppFrame/AppFrame.js @@ -51,7 +51,7 @@ export default class AppFrame extends Component { })} - + {text}, -}, { - title: '年龄', - dataIndex: 'age', - key: 'age', -}, { - title: '性别', - dataIndex: 'gender', - key: 'gender', -}, { - title: '地址', - dataIndex: 'address', - key: 'address', -}, { - title: '职位', - key: 'position', - dataIndex: 'position', - render: pos => { - let color = "lime" - switch(pos) { - case '管理员': - color = "#2db7f5"; - break; - case '普通用户': - color = "blue"; - break; - case '经理': - color = "#f50" - break; - default: - break; - } - return {pos} - } -}, { - title: '操作', - key: 'action', - render: (text, record) => ( - - 编辑 - - 删除 - - ), -}]; - - +import { + Table, + Tag, + Spin, + Icon, + Button, + Modal + } from 'antd'; +import { + postUserListPage, + postDeleteUser + } from '@/requests' export default class Users extends Component { constructor(){ super(); this.state = { + confirmLoading: false, + currentRecordId: null, + modalVisible: false, data : [], isSpinning: true, pagination: { @@ -64,10 +26,97 @@ export default class Users extends Component { } } } + + columns = [{ + title: '姓名', + dataIndex: 'name', + key: 'name', + render: text => {text}, + }, { + title: '年龄', + dataIndex: 'age', + key: 'age', + }, { + title: '性别', + dataIndex: 'gender', + key: 'gender', + }, { + title: '地址', + dataIndex: 'address', + key: 'address', + }, { + title: '职位', + key: 'position', + dataIndex: 'position', + render: pos => { + let color = "lime" + switch(pos) { + case '管理员': + color = "#2db7f5"; + break; + case '普通用户': + color = "blue"; + break; + case '经理': + color = "#f50" + break; + default: + break; + } + return {pos} + } + }, { + title: '操作', + key: 'action', + render: (text, record) => ( + + + + + + + ), + }]; componentDidMount() { this.fetchDate() } + handleDeleteButtonClick = (id) =>{ + this.setState({ + modalVisible: true, + currentRecordId: id + }) + } + + hideDeleteModal = ( ) =>{ + this.setState({ + modalVisible: false + }) + } + + handleDelete = () => { + // console.log(this.state.currentRecordId) + this.setState({ + confirmLoading: true + },() => { + postDeleteUser(this.state.currentRecordId) + .then(resp => { + this.fetchDate() + console.log(resp) + this.setState({ + confirmLoading: false, + modalVisible: false + }) + }) + }) + + } + handleTableChange = (pagination) => { console.log(pagination) this.setState({ @@ -115,12 +164,23 @@ export default class Users extends Component { >
record.id} - columns={columns} + columns={this.columns} dataSource={this.state.data} pagination={this.state.pagination} onChange={this.handleTableChange} /> + +

此操作不可逆！！！

+ ) } diff --git a/src/requests/index.js b/src/requests/index.js index 2596ec8..aa227df 100644 --- a/src/requests/index.js +++ b/src/requests/index.js @@ -16,8 +16,9 @@ ajax.interceptors.request.use(config => { ajax.interceptors.response.use(resp => { //console.log(resp.data.data[0].list) + console.log(resp) if(resp.data.code === 200){ - return resp.data.data[0] + return resp.data.data[0] || resp.data.data } else { return { errorMsg: resp.data.msg || '出错了！！' @@ -32,6 +33,11 @@ export const postUserList = () => { } // 后端分页接口 export const postUserListPage = (params) => { - console.log(params) + // console.log(params) return ajax.post('/api/v1/userListPage',params) + } + + // 删除接口 +export const postDeleteUser = (id) => { + return ajax.post(`/api/v1/user/delete/${id}`) } \ No newline at end of file -- Gitee From 9ced74f001bcf0b9c40720e155d8c317a87245d5 Mon Sep 17 00:00:00 2001 From: GTXing <1322755174@qq.com> Date: Tue, 1 Jan 2019 18:03:14 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat=EF=BC=9A=E7=BC=96=E8=BE=91ui=E7=AE=80?= =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 1 + src/pages/Users/UserEdit.js | 86 +++++++++++++++++++++++++++++++++++++ src/pages/Users/Users.js | 6 ++- src/pages/index.js | 7 ++- src/routes.js | 9 +++- 5 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 src/pages/Users/UserEdit.js diff --git a/src/App.js b/src/App.js index 1640651..96369f2 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,7 @@ class App extends Component { key={route.path} path={route.path} component={route.component} + exact={route.isExact} /> ) })} diff --git a/src/pages/Users/UserEdit.js b/src/pages/Users/UserEdit.js new file mode 100644 index 0000000..c025525 --- /dev/null +++ b/src/pages/Users/UserEdit.js @@ -0,0 +1,86 @@ +import React, { Component } from 'react' +import { + Row, + Col, + Form, + Icon, + Input, + Button, +} from 'antd'; +import { rule } from 'postcss'; + +@Form.create() +export default class UserEdit extends Component { + constructor(props){ + super() + this.state ={ + user: 'ajax' + } + } + componentDidMount(){ + this.props.form.setFieldsValue({ + userName: this.state.user + }) + } + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + } + }); + } + + validateUser = (rule, value, callback) => { + console.log(rule, value,) + callback() + } + render() { + const { getFieldDecorator } = this.props.form; + return ( + + + + + { + getFieldDecorator( + 'userName', + { + rules: [{ + required: true, + whitespace: true, + message: '请输入用户名' + },{ + max:10, + message: '用户名最多10位' + },{ + min: 4, + message: '用户名最少4位' + },{ + validator: this.validateUser + }], + } + )( + } + addonBefore="用户名" + placeholder="Username" + /> + )} + + + + + + + + + ); + } +} + diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index ee7cdfa..deae59d 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -71,7 +71,7 @@ export default class Users extends Component { render: (text, record) => ( - + - - { - getFieldDecorator( - 'userName', + + {getFieldDecorator('userName', { + rules: [ { - rules: [{ required: true, whitespace: true, - message: '请输入用户名' - },{ - max:10, + message: '请输入用户名' + }, + { + max: 10, message: '用户名最多10位' - },{ + }, + { min: 4, - message: '用户名最少4位' - },{ + message: '用户名最少2位' + }, + { validator: this.validateUser - }], } - )( - } - addonBefore="用户名" - placeholder="Username" - /> + ] + })( + } placeholder="Username" /> + )} + + + + {getFieldDecorator('age', { + rules: [ + { + required: true, + validator: (rule, value, cb) => { + const v = parseInt(value, 10) + if (!v) { + cb('请输入数字') + } else if (v < 18 || v > 55 || Number(value) !== v) { + cb('工作年龄应该是在18到55岁的正整数') + } else { + cb() + } + } + } + ] + })(} placeholder="age" />)} + + + + {getFieldDecorator('gender', { initialValue: 'M' })( + + 男 + 女 + )} + + + {getFieldDecorator('address', { + rules: [ + { + required: true, + whitespace: true, + message: '地址' + } + ] + })(} placeholder="address" />)} + + + + {getFieldDecorator('position')( + + 管理员 + 经理 + 普通用户 + + )} + + + + {getFieldDecorator('上传文件', { + valuePropName: 'fileList', + getValueFromEvent: this.normFile + })( + + + + )} + + - - + - ); + ) } } - diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js index deae59d..11f69c1 100644 --- a/src/pages/Users/Users.js +++ b/src/pages/Users/Users.js @@ -1,138 +1,148 @@ import React, { Component, Fragment } from 'react' -import { - Table, - Tag, - Spin, - Icon, - Button, - Modal - } from 'antd'; -import { - postUserListPage, - postDeleteUser - } from '@/requests' +import { Table, Tag, Spin, Icon, Button, Modal } from 'antd' +import { postUserList, postUserListPage, postDeleteUser } from '@/requests' export default class Users extends Component { - constructor(){ - super(); + constructor() { + super() this.state = { confirmLoading: false, currentRecordId: null, modalVisible: false, - data : [], + data: [], isSpinning: true, pagination: { current: 1, - total: 0, + total: 0 } } } - columns = [{ - title: '姓名', - dataIndex: 'name', - key: 'name', - render: text => {text}, - }, { - title: '年龄', - dataIndex: 'age', - key: 'age', - }, { - title: '性别', - dataIndex: 'gender', - key: 'gender', - }, { - title: '地址', - dataIndex: 'address', - key: 'address', - }, { - title: '职位', - key: 'position', - dataIndex: 'position', - render: pos => { - let color = "lime" - switch(pos) { - case '管理员': - color = "#2db7f5"; - break; - case '普通用户': - color = "blue"; - break; - case '经理': - color = "#f50" - break; - default: - break; - } - return {pos} + columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + render: text => {text} + }, + { + title: '年龄', + dataIndex: 'age', + key: 'age' + }, + { + title: '性别', + dataIndex: 'gender', + key: 'gender' + }, + { + title: '地址', + dataIndex: 'address', + key: 'address' + }, + { + title: '职位', + key: 'position', + dataIndex: 'position', + render: pos => { + let color = 'lime' + switch (pos) { + case '管理员': + color = '#2db7f5' + break + case '普通用户': + color = 'blue' + break + case '经理': + color = '#f50' + break + default: + break + } + return {pos} + } + }, + { + title: '操作', + key: 'action', + render: (text, record) => ( + + + + + + + ) } - }, { - title: '操作', - key: 'action', - render: (text, record) => ( - - - - - - - ), - }]; + ] componentDidMount() { - this.fetchDate() + this.fetchDate() } - handleDeleteButtonClick = (id) =>{ + handleDeleteButtonClick = id => { this.setState({ modalVisible: true, currentRecordId: id }) } - toEdit = (id) =>{ + toEdit = id => { this.props.history.push(`/users/edit_user/${id}`) } - hideDeleteModal = ( ) =>{ + hideDeleteModal = () => { this.setState({ modalVisible: false }) } handleDelete = () => { - // console.log(this.state.currentRecordId) - this.setState({ - confirmLoading: true - },() => { - postDeleteUser(this.state.currentRecordId) - .then(resp => { - this.fetchDate() - console.log(resp) - this.setState({ - confirmLoading: false, - modalVisible: false + // console.log(this.state.currentRecordId) + this.setState( + { + confirmLoading: true + }, + () => { + postDeleteUser(this.state.currentRecordId).then(resp => { + this.fetchDate() + console.log(resp) + this.setState({ + confirmLoading: false, + modalVisible: false + }) }) - }) - }) - + } + ) } - handleTableChange = (pagination) => { + handleTableChange = pagination => { console.log(pagination) - this.setState({ - pagination, - isSpinning: true - },() => { - console.log(111) - this.fetchDate() - }) + this.setState( + { + pagination, + isSpinning: true + }, + () => { + console.log(111) + this.fetchDate() + } + ) } - fetchDate(){ - // 前端分页方法 + fetchDate() { + // 前端分页方法 // posiUserList() // .then(data => { // this.setState({ @@ -144,12 +154,11 @@ export default class Users extends Component { postUserListPage({ limited: 10, offset - }) - .then(resp => { + }).then(resp => { console.log(resp) this.setState({ data: resp.list, - isSpinning:false, + isSpinning: false, pagination: { total: resp.totalCount, current: this.state.pagination.current @@ -158,16 +167,16 @@ export default class Users extends Component { }) } render() { - return( + return (

人员管理

} + spinning={this.state.isSpinning} + tip="加载中....." + indicator={} >
record.id} + rowKey={record => record.id} columns={this.columns} dataSource={this.state.data} pagination={this.state.pagination} @@ -185,7 +194,7 @@ export default class Users extends Component { >

此操作不可逆！！！

- - ) + + ) } } diff --git a/src/requests/index.js b/src/requests/index.js index aa227df..4c2e51a 100644 --- a/src/requests/index.js +++ b/src/requests/index.js @@ -7,37 +7,36 @@ const ajax = axios.create({ ajax.interceptors.request.use(config => { //console.log(config) // config.headers.authToken = 'ajaxpost' - config.data = { - ...config.data, - authToken : 'ajaxpost' - } + config.data = { + ...config.data, + authToken: 'ajaxpost' + } return config }) ajax.interceptors.response.use(resp => { //console.log(resp.data.data[0].list) console.log(resp) - if(resp.data.code === 200){ + if (resp.data.code === 200) { return resp.data.data[0] || resp.data.data } else { return { errorMsg: resp.data.msg || '出错了！！' } } - }) // 前端分页接口 export const postUserList = () => { - return ajax.post('api/v1/userList') + return ajax.post('api/v1/userList') } // 后端分页接口 -export const postUserListPage = (params) => { - // console.log(params) - return ajax.post('/api/v1/userListPage',params) - } +export const postUserListPage = params => { + // console.log(params) + return ajax.post('/api/v1/userListPage', params) +} - // 删除接口 -export const postDeleteUser = (id) => { +// 删除接口 +export const postDeleteUser = id => { return ajax.post(`/api/v1/user/delete/${id}`) - } \ No newline at end of file +} -- Gitee