【共享单车】—— 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();
              }
          })
  }　　　　

• 关键：

1. getFieldDecorator实现表单数据双向绑定

    const {getFieldDecorator} = this.props.form;　　

2. 获取this.props.userInfo：【编辑员工】中设置表单默认数据、【员工信息】中显示员工信息
3. 判断this.props.type：当type == 'detail'时，直接渲染员工信息userInfo，不再渲染Form表单
4. 判断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);

---

注：项目来自慕课网