nyx_server/ui/app/container/UserList.js

Node内容发布

import React from 'react';
import {Table , Modal , Input} from 'antd';
import { connect } from "react-redux";
import {
        userList,
        addUser ,
        openAddUser ,
        setUserFormField ,
        cleanAddUserState,
        userExist
       } from "../actions/Auth";
import {Button} from 'antd';
import UserForm from "../components/UserForm";


class UserList extends React.Component{

    onChange(pagination, filters, sorter) {
      //console.log('各类参数是', pagination, filters, sorter);
      const {userList} = this.props;
      userList(pagination); //发起用户列表请求
    }

    operationHandle(){
      alert(arguments);
    }

    columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '姓名',
        dataIndex: 'real_name',
        key: 'real_name',
    }, {
        title: '部门',
        dataIndex: 'dept',
        key: 'dept',
    }, {
        title: "操作",
        render: function() {
            return <span onClick={this.operationHandle}>修改</span>
        }.bind(this)
    }];

    setRowKey(record, index){ //设置row key
       return record.id;
    }

    handleCancel(){
        const {cleanAddUserState} = this.props;
        cleanAddUserState();
    }

    componentDidMount(){
        //初始化用户
        const {userList} = this.props;
        const {pagination} = this.props.userTable;
        userList(pagination); //发起用户列表请求
    }

    openAddUserClick(){
       var {openAddUser} = this.props;
       openAddUser(true);
    }

    submitCb(user){
      //form提交回调
      var {addUser} = this.props;
      addUser(user);
    }

    search(event){
       //event.
    }

    render() {
        console.log(this.props);
        const {userList , pagination} = this.props.userTable;
        const { userFormData , addUserResult ,openAddUserState
               ,setUserFormField , userExist
              } = this.props;
        return <div>
                <Button type="primary" style={{"marginBottom":"5px"}} onClick={this.openAddUserClick.bind(this)}>创建用户</Button>
                <div style={{float:"right"}}><Input onKeyDown={this.search.bind(this)}/></div>
                <Modal title="创建用户"  visible={!!addUserResult || !!openAddUserState} maskClosable={false}
                  footer={<div/>} onCancel={this.handleCancel.bind(this)}>
                    <UserForm submitCb={this.submitCb.bind(this)}
                        errorInfo={addUserResult}
                        setFormField={setUserFormField}
                        formData={userFormData}
                        userExist={userExist}/>
                </Modal>
                <Table dataSource={userList} columns={this.columns}
                  pagination={pagination} onChange={this.onChange.bind(this)} rowKey={this.setRowKey} bordered/>
               </div>
    }
}

function mapStateProps(state){

    var {auth} = state;
    return {
       userTable : auth.userTable,
       addUserResult : auth.addUserResult, //添加栏目结果
       openAddUserState : auth.openAddUserState,
       userFormData : auth.userFormData
    }
}

export default connect(mapStateProps
                       , {addUser , openAddUser , userList , userExist
                       , cleanAddUserState,setUserFormField
                      })(UserList)