【共享单车】—— React后台管理系统开发手记：员工管理之增删改查
前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。
一、创建员工表单子组件
- 创建员工、编辑员工、员工详情、删除员工共用一个Modal弹框表单
<Modal
title={this.state.title}
visible={this.state.isVisible}
onOk={this.handleSubmit}
onCancel={() => {
this.userForm.props.form.resetFields();
this.setState({
isVisible: false
})
}}
width={600}
{...footer}
>
<UserForm type={this.state.type} userInfo={this.state.userInfo} wrappedComponentRef={(inst) => {this.userForm = inst;}}/>
</Modal> - 创建、编辑员工提交：共用handleSubmit()，判断type，通过axios.ajax()调用不同的Easy Mock数据接口请求
//创建编辑员工提交
handleSubmit = () => {
let type = this.state.types;
let data = this.userForm.props.form.getFieldsValue();
axios.ajax({
url: type=='create'?'/user/add':'/user/edit',
data: {
params: data
}
}).then((res) => {
if(res.code === 0){
this.userForm.props.form.resetFields();
this.setState({
isVisible: false
})
this.requestList();
}
})
} - 关键：
- getFieldDecorator实现表单数据双向绑定
const {getFieldDecorator} = this.props.form; - 获取this.props.userInfo：【编辑员工】中设置表单默认数据、【员工信息】中显示员工信息
- 判断this.props.type：当type == 'detail'时，直接渲染员工信息userInfo，不再渲染Form表单
- 判断this.state.type：当type == 'detail'时，不显示Modal的footer按钮
let footer = {};
if(this.state.type == 'detail'){
footer = {
footer: null
}
}
- 组件实现
//子组件：创建员工表单
class UserForm extends React.Component{ getState = (state) => {
let config = {
'1':'咸鱼一条',
'2':'风华浪子',
'3':'北大才子一枚',
'4':'百度FE',
'5':'创业者'
}
return config[state];
} render(){
let type = this.props.type;
let userInfo = this.props.userInfo || {};
const {getFieldDecorator} = this.props.form;
const formItemLayout= {
labelCol:{span: 5},
wrapperCol:{span: 19}
}
return (
<Form layout="horizontal">
<FormItem label="用户名" {...formItemLayout}>
{
type == 'detail' ? userInfo.userName :
getFieldDecorator('user_name',{
initialValue: userInfo.userName
})(
<Input type="text" placeholder="请输入用户名"/>
)
}
</FormItem>
<FormItem label="性别" {...formItemLayout}>
{
type == 'detail' ? userInfo.sex == 1 ? '男' : '女' :
getFieldDecorator('sex',{
initialValue: userInfo.sex
})(
<RadioGroup>
<Radio value={1}>男</Radio>
<Radio value={2}>女</Radio>
</RadioGroup>
)
}
</FormItem>
<FormItem label="状态" {...formItemLayout}>
{
type == 'detail' ? this.getState(userInfo.state) :
getFieldDecorator('state',{
initialValue: userInfo.state
})(
<Select>
<Option value={1}>咸鱼一条</Option>
<Option value={2}>风华浪子</Option>
<Option value={3}>北大才子一枚</Option>
<Option value={4}>百度FE</Option>
<Option value={5}>创业者</Option>
</Select>
)
}
</FormItem>
<FormItem label="生日" {...formItemLayout}>
{
type == 'detail' ? userInfo.birthday :
getFieldDecorator('birthday',{
initialValue: moment(userInfo.birthday)
})(
<DatePicker format="YYYY-MM-DD"/>
)
}
</FormItem>
<FormItem label="联系地址" {...formItemLayout}>
{
type == 'detail' ? userInfo.address :
getFieldDecorator('address',{
initialValue: userInfo.address
})(
<TextArea rows={3} placeholder="请输入联系地址"/>
)
}
</FormItem>
</Form>
)
}
}
UserForm = Form.create({})(UserForm);
二、功能区操作
- 创建员工、编辑员工、员工详情、删除员工共用一个功能操作函数handleOperate()
<Card style={{marginTop:10}} className="operate-wrap">
<Button type="primary" icon="plus" onClick={() => this.handleOperate('create')}>创建员工</Button>
<Button type="primary" icon="edit" onClick={() => this.handleOperate('edit')}>编辑员工</Button>
<Button type="primary" onClick={() => this.handleOperate('detail')}>员工详情</Button>
<Button type="primary" icon="delete" onClick={() => this.handleOperate('delete')}>删除员工</Button>
</Card> 关键：传入不同的参数[type]，通过判断type的值，执行不同的操作
//功能区操作
handleOperate = (type) => {
let item = this.state.selectedItem;
if(type == 'create'){
this.setState({
type,
isVisible: true,
title: '创建员工'
})
}else if(type == 'edit'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
this.setState({
type,
isVisible: true,
title: '编辑员工',
userInfo: item
})
}else if(type == 'detail'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
this.setState({
type,
isVisible: true,
title: '员工详情',
userInfo: item
})
}else if(type == 'delete'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
let _this = this;
Modal.confirm({
title: '确认删除',
content: `是否要删除当前选中的员工${item.id}`,
onOk(){
axios.ajax({
url: '/user/delete',
data: {
params: {
id: item.id
}
}
}).then((res) => {
if(res.code === 0){
_this.setState({
isVisible: false
})
_this.requestList();
}
})
}
})
}
}实例代码：
import React from 'react'
import {Card, Button, Form, Input, Select,Radio, Icon, Modal, DatePicker} from 'antd'
import axios from './../../axios'
import Utils from './../../utils/utils'
import BaseForm from './../../components/BaseForm'
import ETable from './../../components/ETable'
import moment from 'moment'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Option = Select.Option; export default class User extends React.Component{ state = {
list:[],
isVisible: false
} params = {
page: 1
} formList = [
{
type: 'INPUT',
label: '用户名',
field: 'user_name',
placeholder: '请输入名称',
width: 130
},
{
type: 'INPUT',
label: '手机号',
field: 'user_mobile',
placeholder: '请输入手机号',
width: 130
},
{
type: 'DATE',
label: '入职日期',
field: 'user_date',
placeholder: '请输入日期'
}
] componentDidMount(){
this.requestList();
} handleFilter = (params) => {
this.params = params;
this.requestList();
} requestList = () => {
axios.requestList(this, '/table/list1', this.params);
} //功能区操作
handleOperate = (type) => {
let item = this.state.selectedItem;
if(type == 'create'){
this.setState({
type,
isVisible: true,
title: '创建员工'
})
}else if(type == 'edit'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
this.setState({
type,
isVisible: true,
title: '编辑员工',
userInfo: item
})
}else if(type == 'detail'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
this.setState({
type,
isVisible: true,
title: '员工详情',
userInfo: item
})
}else if(type == 'delete'){
if(!item){
Modal.info({
title: '提示',
content: '请选择一个用户'
})
return;
}
let _this = this;
Modal.confirm({
title: '确认删除',
content: `是否要删除当前选中的员工${item.id}`,
onOk(){
axios.ajax({
url: '/user/delete',
data: {
params: {
id: item.id
}
}
}).then((res) => {
if(res.code === 0){
_this.setState({
isVisible: false
})
_this.requestList();
}
})
}
})
}
} //创建编辑员工提交
handleSubmit = () => {
let type = this.state.types;
let data = this.userForm.props.form.getFieldsValue();
axios.ajax({
url: type=='create'?'/user/add':'/user/edit',
data: {
params: data
}
}).then((res) => {
if(res.code === 0){
this.userForm.props.form.resetFields();
this.setState({
isVisible: false
})
this.requestList();
}
})
} render(){
const columns = [{
title: 'id',
dataIndex: 'id'
}, {
title: '用户名',
dataIndex: 'userName'
}, {
title: '性别',
dataIndex: 'sex',
render(sex){
return sex ==1 ?'男':'女'
}
}, {
title: '状态',
dataIndex: 'state',
render(state){
let config = {
'1':'咸鱼一条',
'2':'风华浪子',
'3':'北大才子一枚',
'4':'百度FE',
'5':'创业者'
}
return config[state];
}
},{
title: '婚姻',
dataIndex: 'isMarried',
render(isMarried){
return isMarried == 1 ?'已婚':'未婚'
}
},{
title: '生日',
dataIndex: 'birthday'
},{
title: '联系地址',
dataIndex: 'address'
},{
title: '早起时间',
dataIndex: 'time'
}
]; let footer = {};
if(this.state.type == 'detail'){
footer = {
footer: null
}
} return (
<div>
<Card>
<BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
</Card>
<Card style={{marginTop:10}} className="operate-wrap">
<Button type="primary" icon="plus" onClick={() => this.handleOperate('create')}>创建员工</Button>
<Button type="primary" icon="edit" onClick={() => this.handleOperate('edit')}>编辑员工</Button>
<Button type="primary" onClick={() => this.handleOperate('detail')}>员工详情</Button>
<Button type="primary" icon="delete" onClick={() => this.handleOperate('delete')}>删除员工</Button>
</Card>
<div className="content-wrap">
<ETable
columns={columns}
updateSelectedItem={Utils.updateSelectedItem.bind(this)}
selectedRowKeys={this.state.selectedRowKeys}
selectedItem={this.state.selectedItem}
dataSource={this.state.list}
pagination={this.state.pagination}
/>
</div>
<Modal
title={this.state.title}
visible={this.state.isVisible}
onOk={this.handleSubmit}
onCancel={() => {
this.userForm.props.form.resetFields();
this.setState({
isVisible: false
})
}}
width={600}
{...footer}
>
<UserForm type={this.state.type} userInfo={this.state.userInfo} wrappedComponentRef={(inst) => {this.userForm = inst;}}/>
</Modal>
</div>
)
}
} //子组件：创建员工表单
class UserForm extends React.Component{ getState = (state) => {
let config = {
'1':'咸鱼一条',
'2':'风华浪子',
'3':'北大才子一枚',
'4':'百度FE',
'5':'创业者'
}
return config[state];
} render(){
let type = this.props.type;
let userInfo = this.props.userInfo || {};
const {getFieldDecorator} = this.props.form;
const formItemLayout= {
labelCol:{span: 5},
wrapperCol:{span: 19}
}
return (
<Form layout="horizontal">
<FormItem label="用户名" {...formItemLayout}>
{
type == 'detail' ? userInfo.userName :
getFieldDecorator('user_name',{
initialValue: userInfo.userName
})(
<Input type="text" placeholder="请输入用户名"/>
)
}
</FormItem>
<FormItem label="性别" {...formItemLayout}>
{
type == 'detail' ? userInfo.sex == 1 ? '男' : '女' :
getFieldDecorator('sex',{
initialValue: userInfo.sex
})(
<RadioGroup>
<Radio value={1}>男</Radio>
<Radio value={2}>女</Radio>
</RadioGroup>
)
}
</FormItem>
<FormItem label="状态" {...formItemLayout}>
{
type == 'detail' ? this.getState(userInfo.state) :
getFieldDecorator('state',{
initialValue: userInfo.state
})(
<Select>
<Option value={1}>咸鱼一条</Option>
<Option value={2}>风华浪子</Option>
<Option value={3}>北大才子一枚</Option>
<Option value={4}>百度FE</Option>
<Option value={5}>创业者</Option>
</Select>
)
}
</FormItem>
<FormItem label="生日" {...formItemLayout}>
{
type == 'detail' ? userInfo.birthday :
getFieldDecorator('birthday',{
initialValue: moment(userInfo.birthday)
})(
<DatePicker format="YYYY-MM-DD"/>
)
}
</FormItem>
<FormItem label="联系地址" {...formItemLayout}>
{
type == 'detail' ? userInfo.address :
getFieldDecorator('address',{
initialValue: userInfo.address
})(
<TextArea rows={3} placeholder="请输入联系地址"/>
)
}
</FormItem>
</Form>
)
}
}
UserForm = Form.create({})(UserForm);
注：项目来自慕课网
【共享单车】—— React后台管理系统开发手记：员工管理之增删改查的更多相关文章
- 【共享单车】—— React后台管理系统开发手记：主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：Redux集成开发
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：项目工程化开发
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：城市管理和订单管理
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：权限设置和菜单调整（未完）
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：AntD Table高级表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记：AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- [CQOI2018]异或序列 (莫队,异或前缀和)
题目链接 Solution 有点巧的莫队. 考虑到区间 \([L,R]\) 的异或和也即 \(sum[L-1]~\bigoplus~sum[R]\) ,此处\(sum\)即为异或前缀和. 然后如何考虑 ...
- Codeforces Round #527 (Div. 3) ABCDEF题解
Codeforces Round #527 (Div. 3) 题解 题目总链接:https://codeforces.com/contest/1092 A. Uniform String 题意: 输入 ...
- Python设置函数调用超时
http://blog.sina.com.cn/s/blog_63041bb80102uy5o.html 背景: 最近写的Python代码不知为何,总是执行到一半卡住不动,为了使程序能够 ...
- redis的五种基本数据类型
redis基本数据类型 redis一共分为5中基本数据类型:String,Hash,List,Set,ZSet 第一种String String类型是包含很多种类型的特殊类型,并且是二进制安全的.比如 ...
- codeforce 570 problem E&& 51Nod-1503-猪和回文
1503 猪和回文 一只猪走进了一个森林.很凑巧的是,这个森林的形状是长方形的,有n行,m列组成.我们把这个长方形的行从上到下标记为1到n,列从左到右标记为1到m.处于第r行第c列的格子用(r,c)表 ...
- java IO的字节流和字符流及其区别
1. 字节流和字符流的概念 1.1 字节流继承于InputStream OutputStream, 1.2 字符流继承于InputStreamReader OutputStre ...
- eclipse非主窗口的停靠(正常), 恢复, 最小化, 最大化的切换
1. pydev package Explorer的停靠与内嵌等 正常的情况
- 转 Scrapy笔记（5）- Item详解
Item是保存结构数据的地方,Scrapy可以将解析结果以字典形式返回,但是Python中字典缺少结构,在大型爬虫系统中很不方便. Item提供了类字典的API,并且可以很方便的声明字段,很多Scra ...
- WebBrowser(超文本浏览框)控件默认使用IE9,IE10的方法
C#和易语言都可以使用该方法来变更默认的的IE版本 该文是通过修改注册表的方法实现,测试的时候发现易语言本身也是采用的这种方法 操作方法 打开注册表 HKEY_LOCAL_MACHINE (or HK ...
- flask的orm框架(SQLAlchemy)-操作数据
# 原创,转载请留言联系 Flask-SQLAlchemy 实现增加数据 用 sqlalchemy 添加数据时,一定要注意,不仅仅要连接到数据表,并且你的创建表的类也必须写进来.而且字段和约束条件要吻 ...