From 00a28000e45e7240890ba798a98feb068329f23c Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 20 Oct 2016 21:33:30 +0800 Subject: [PATCH] users --- mock/users.js | 101 ++++++++++++++++-------------- package.json | 3 +- proxy.config.js | 2 - src/components/layout/common.less | 18 ++++++ src/components/users/list.jsx | 1 + src/components/users/list.less | 5 ++ src/components/users/modal.jsx | 71 ++++++++++++++++----- src/models/users.js | 49 +++++++-------- src/utils/index.js | 2 +- src/utils/mock.js | 2 +- src/utils/request.js | 1 + 11 files changed, 163 insertions(+), 92 deletions(-) diff --git a/mock/users.js b/mock/users.js index 9673bc1..613eb7b 100644 --- a/mock/users.js +++ b/mock/users.js @@ -1,37 +1,46 @@ -'use strict' - const qs = require('qs') -const mockjs = require('mockjs') +const Mock = require('mockjs') +const Watch = require("watchjs") -// 数据持久 -let tableListData = {} -if (!global.tableListData) { - const data = mockjs.mock({ - 'data|100': [ - { - 'id|+1': 1, - name: '@cname', - nickName: '@name', - phone: /^1[34578]\d{9}$/, - 'age|11-99': 1, - address: '@county(true)', - isMale: '@boolean', - email: '@email', - createTime: '@datetime', - avatar: mockjs.Random.image('100x100', mockjs.Random.color()) +let usersListData = {} +if (!global.usersListData) { + const data = !!localStorage.getItem("antdUsersListData") + ? JSON.parse(localStorage.getItem("antdUsersListData")) + : Mock.mock({ + 'data|100': [ + { + 'id|+1': 1, + name: '@cname', + nickName: '@last', + phone: /^1[34578]\d{9}$/, + 'age|11-99': 1, + address: '@county(true)', + isMale: '@boolean', + email: '@email', + createTime: '@datetime', + avatar: function(){ + return Mock.Random.image('100x100', Mock.Random.color(),"#757575",'png',this.nickName.substr(0,1)) + } + } + ], + page: { + total: 100, + current: 1 } - ], - page: { - total: 100, - current: 1 - } - }) - tableListData = data - global.tableListData = tableListData + }) + usersListData = data + global.usersListData = usersListData + if (!localStorage.getItem("antdUsersListData")) { + localStorage.setItem("antdUsersListData", JSON.stringify(usersListData)) + } } else { - tableListData = global.tableListData + usersListData = global.usersListData } +Watch.watch(usersListData, function () { + localStorage.setItem("antdUsersListData", JSON.stringify(usersListData)) +}) + module.exports = { 'GET /api/users' (req, res) { @@ -42,7 +51,7 @@ module.exports = { let data let newPage - let newData = tableListData.data.concat() + let newData = usersListData.data.concat() if (page.field) { const d = newData.filter(function (item) { @@ -56,11 +65,11 @@ module.exports = { total: d.length } } else { - data = tableListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize) - tableListData.page.current = currentPage * 1 + data = usersListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize) + usersListData.page.current = currentPage * 1 newPage = { - current: tableListData.page.current, - total: tableListData.page.total + current: usersListData.page.current, + total: usersListData.page.total } } res.json({success: true, data, page: newPage}) @@ -69,44 +78,44 @@ module.exports = { 'POST /api/users' (req, res) { const newData = qs.parse(req.body) - newData.id = tableListData.data.length + 1 - tableListData.data.unshift(newData) + newData.id = usersListData.data.length + 1 + usersListData.data.unshift(newData) - tableListData.page.total = tableListData.data.length - tableListData.page.current = 1 + usersListData.page.total = usersListData.data.length + usersListData.page.current = 1 - global.tableListData = tableListData - res.json({success: true, data: tableListData.data, page: tableListData.page}) + global.usersListData = usersListData + res.json({success: true, data: usersListData.data, page: usersListData.page}) }, 'DELETE /api/users' (req, res) { const deleteItem = qs.parse(req.body) - tableListData.data = tableListData.data.filter(function (item) { + usersListData.data = usersListData.data.filter(function (item) { if (item.id == deleteItem.id) { return false } return true }) - tableListData.page.total = tableListData.data.length + usersListData.page.total = usersListData.data.length - global.tableListData = tableListData - res.json({success: true, data: tableListData.data, page: tableListData.page}) + global.usersListData = usersListData + res.json({success: true, data: usersListData.data, page: usersListData.page}) }, 'PUT /api/users' (req, res) { const editItem = qs.parse(req.body) - tableListData.data = tableListData.data.map(function (item) { + usersListData.data = usersListData.data.map(function (item) { if (item.id == editItem.id) { return editItem } return item }) - global.tableListData = tableListData - res.json({success: true, data: tableListData.data, page: tableListData.page}) + global.usersListData = usersListData + res.json({success: true, data: usersListData.data, page: usersListData.page}) } } diff --git a/package.json b/package.json index e9a7610..42d313f 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "glob": "^7.0.5", "mockjs": "^1.0.1-beta3", "redbox-react": "^1.2.10", - "robe-ajax": "^1.0.0" + "robe-ajax": "^1.0.0", + "watchjs": "^0.0.0" }, "scripts": { "start": "dora --plugins \"proxy,webpack,webpack-hmr\"", diff --git a/proxy.config.js b/proxy.config.js index ccdf9e5..d3c83e0 100644 --- a/proxy.config.js +++ b/proxy.config.js @@ -4,8 +4,6 @@ const mock = {} require('fs').readdirSync(require('path').join(__dirname + '/mock')) .forEach(function (file) { - console.log(file); - console.log(require('./mock/' + file)); Object.assign(mock, require('./mock/' + file)) }) diff --git a/src/components/layout/common.less b/src/components/layout/common.less index c4479de..5f90d0c 100644 --- a/src/components/layout/common.less +++ b/src/components/layout/common.less @@ -80,3 +80,21 @@ body { border-radius: 0; box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); } + +:global .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; + + .ant-modal { + top: 0; + + .ant-modal-body { + max-height: 500px; + overflow-y: auto; + } + } +} +:global .ant-form-item-control{ + vertical-align:middle; +} diff --git a/src/components/users/list.jsx b/src/components/users/list.jsx index 0da39c4..1a376d1 100644 --- a/src/components/users/list.jsx +++ b/src/components/users/list.jsx @@ -74,6 +74,7 @@ function list({ return (
+ )} + + {getFieldDecorator('isMale', { + initialValue: item.isMale, + rules: [ + { required: true, message: '请选择性别' }, + ], + })( + + 男 + 女 + + )} + {getFieldDecorator('age', { initialValue: item.age, - rules: [ - { required: true, message: '年龄未填写' }, - { validator: checkNumber }, + rules: [{ + required: true, + type:'number', + message: '年龄未填写' }, ], })( - + + )} + + + {getFieldDecorator('phone', { + initialValue: item.phone, + rules: [ + { required: true, message: '不能为空' }, + ], + })( + + )} + + + {getFieldDecorator('email', { + initialValue: item.email, + rules: [ + { required: true, message: '不能为空' }, + ], + })( + )} + )} diff --git a/src/models/users.js b/src/models/users.js index 6fb02ad..93d3390 100644 --- a/src/models/users.js +++ b/src/models/users.js @@ -55,8 +55,14 @@ export default { const data = yield call(remove, { id: payload }) if (data && data.success) { yield put({ - type: 'deleteSuccess', - payload, + type: 'querySuccess', + payload: { + list: data.data, + pagination:{ + total: data.page.total, + current: data.page.current, + } + }, }) } }, @@ -66,8 +72,14 @@ export default { const data = yield call(create, payload) if (data && data.success) { yield put({ - type: 'createSuccess', - payload, + type: 'querySuccess', + payload: { + list: data.data, + pagination:{ + total: data.page.total, + current: data.page.current, + } + }, }) } }, @@ -79,8 +91,14 @@ export default { const data = yield call(update, newUser) if (data && data.success) { yield put({ - type: 'updateSuccess', - payload: newUser, + type: 'querySuccess', + payload: { + list: data.data, + pagination:{ + total: data.page.total, + current: data.page.current, + } + }, }) } }, @@ -90,25 +108,6 @@ export default { showLoading(state) { return { ...state, loading: true } }, - createSuccess(state, action) { - const newUser = action.payload - return { ...state, list: [newUser, ...state.list], loading: false } - }, - deleteSuccess(state, action) { - const id = action.payload - const newList = state.list.filter(user => user.id !== id) - return { ...state, list: newList, loading: false } - }, - updateSuccess(state, action) { - const updateUser = action.payload - const newList = state.list.map(user => { - if (user.id === updateUser.id) { - return { ...user, ...updateUser } - } - return user - }) - return { ...state, list: newList, loading: false } - }, querySuccess(state, action) { return { ...state, ...action.payload, loading: false } }, diff --git a/src/utils/index.js b/src/utils/index.js index fbc9ea5..338571f 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,7 +1,7 @@ import config from './config' import menu from './menu' import request from './request' -require('./mock.js'); +require('./mock.js') // 连字符转驼峰 String.prototype.hyphenToHump = function () { diff --git a/src/utils/mock.js b/src/utils/mock.js index 2c4e1a4..8cf2239 100644 --- a/src/utils/mock.js +++ b/src/utils/mock.js @@ -13,7 +13,7 @@ function serialize(str) { for (let i in mockData) { for (let key in mockData[i]) { - Mock.mock(eval("/" + key.split(" ")[1]), key.split(" ")[0].toLowerCase(), function (options) { + Mock.mock(eval("/"+key.split(" ")[1].replace(/\//g,"\\\/")+"/"), key.split(" ")[0].toLowerCase(), function (options) { options.query = !!options.url.split("?")[1] ? serialize(options.url.split("?")[1]) : (!!options.body ? serialize(options.body) : {}) let res = {} let result = {} diff --git a/src/utils/request.js b/src/utils/request.js index 63d08df..c29f6ae 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -33,4 +33,5 @@ export default function request(url, options) { console.log(data); return data }) + }