Amadeus/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin.git synced 2024-04-21 12:32:14 +00:00
Code Issues Releases Wiki Activity

users

Browse Source
This commit is contained in:
zuiidea
2016-10-20 21:33:30 +08:00
parent 6307e31366
commit 00a28000e4
11 changed files with 163 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/users.js
+55 -46
View File
@@ -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})
}
}
package.json
+2 -1
View File
@@ -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\"",
proxy.config.js
-2
View File
@@ -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))
})
src/components/layout/common.less
+18
View File
@@ -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;
}
src/components/users/list.jsx
+1
View File
@@ -74,6 +74,7 @@ function list({
return (
<div>
<Table size="small"
className={styles.table}
bordered
columns={columns}
dataSource={dataSource}
src/components/users/list.less
+5
View File
@@ -4,3 +4,8 @@
border-radius: 50%;
}
}
.table{
td{
height: 38px;
}
}
src/components/users/modal.jsx
+55 -16
View File
@@ -1,5 +1,5 @@
import React, { PropTypes } from 'react'
import { Form, Input, Modal } from 'antd'
import { Form, Input, InputNumber, Radio, Modal } from 'antd'
const FormItem = Form.Item
const formItemLayout = {
@@ -32,19 +32,12 @@ const modal = ({
})
}
function checkNumber(rule, value, callback) {
if (!/^[\d]{1,2}$/.test(value)) {
callback(new Error('年龄不合法'))
} else {
callback()
}
}
const modalOpts = {
title: '修改用户',
visible,
onOk: handleOk,
onCancel,
wrapClassName:"vertical-center-modal"
}
return (
@@ -58,12 +51,29 @@ const modal = ({
{getFieldDecorator('name', {
initialValue: item.name,
rules: [
{ required: true, message: '名称未填写' },
{ required: true, message: '姓名未填写' },
],
})(
<Input type="text" />
<Input/>
)}
</FormItem>
<FormItem
label="性别"
hasFeedback
{...formItemLayout}
>
{getFieldDecorator('isMale', {
initialValue: item.isMale,
rules: [
{ required: true, message: '请选择性别' },
],
})(
<Radio.Group>
<Radio value={true}>男</Radio>
<Radio value={false}>女</Radio>
</Radio.Group>
)}
</FormItem>
<FormItem
label="年龄："
hasFeedback
@@ -71,12 +81,41 @@ const modal = ({
>
{getFieldDecorator('age', {
initialValue: item.age,
rules: [
{ required: true, message: '年龄未填写' },
{ validator: checkNumber },
rules: [{
required: true,
type:'number',
message: '年龄未填写' },
],
})(
<Input type="text" />
<InputNumber min={18} max={100}/>
)}
</FormItem>
<FormItem
label="电话："
hasFeedback
{...formItemLayout}
>
{getFieldDecorator('phone', {
initialValue: item.phone,
rules: [
{ required: true, message: '不能为空' },
],
})(
<Input/>
)}
</FormItem>
<FormItem
label="邮箱："
hasFeedback
{...formItemLayout}
>
{getFieldDecorator('email', {
initialValue: item.email,
rules: [
{ required: true, message: '不能为空' },
],
})(
<Input/>
)}
</FormItem>
<FormItem
@@ -90,7 +129,7 @@ const modal = ({
{ required: true, message: '不能为空' },
],
})(
<Input type="address" />
<Input/>
)}
</FormItem>
</Form>
src/models/users.js
+24 -25
View File
@@ -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 }
},
src/utils/index.js
+1 -1
View File
@@ -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 () {
src/utils/mock.js
+1 -1
View File
@@ -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 = {}
src/utils/request.js
+1
View File
@@ -33,4 +33,5 @@ export default function request(url, options) {
console.log(data);
return data
})
}