kede-client/js/component/manageCenter/set/userManagement/member.jsx

import React from 'react';
import { Table, Button, Spin, message, Icon, Select, Input } from 'antd';
import { provinceSelect, provinceList, getProvince } from '../../../NewDicProvinceList.js';
import { companySearch } from '../../../tools';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import TheModal from './modal.jsx';

const Member = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/supervise/adminList",
            dataType: "json",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                province: this.state.searchProvince,
                mobile: this.state.searchMobile,
                name: this.state.searchName,
                department:this.state.departmentt
            },
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        this.state.onlyProvince = thisdata.province;
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            mobile: thisdata.mobile,
                            name: thisdata.name,
                            email: thisdata.email,
                            createTime: thisdata.createTime,
                            number: thisdata.number,
                            province: thisdata.province,
                            city:thisdata.city,
                            position: thisdata.position,
                            departmentName:thisdata.departmentName,
                            departmentId:thisdata.departmentId,
                            superior: thisdata.superior,
                            superiorId: thisdata.superiorId,
                            createTimeFormattedDate: thisdata.createTimeFormattedDate
                        });
                    };
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                this.setState({
                    data: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadInitialData() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/roles',
            cache: false
        }).done((rolesres) => {
            let theAdminRole = [], rolesObj = {};
            if (rolesres.data && window.adminData) {
                rolesres.data.map((item) => {
                    theAdminRole.push(item.id);
                    rolesObj[item.id] = item.roleName;
                })
            }
            this.setState({
                roles: rolesres.data,
                theAdminRole: theAdminRole,
                rolesObj:rolesObj,
                loading: false
            });
        })
    },
    loadBindRoles(uid) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/role',
            cache: false,
            data: {
                "uid": window.adminData.uid
            }
        }).done((data) => {
            this.setState({
                currentRoles: data.data || [],
                loading: false
            });
        })
    },
    getInitialState() {
        return {
            data: [],
            roles: [],
            currentRoles:[],
            rolesObj: {},
            theAdminRole: [],
            provinceList: [],
            dataSource: [],
            selectedRowKeys: [],
            selectedRows: [],
            departmentArr:[],
            loading: false,
            modalData: {},
            modalShow: false,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '编号',
                    dataIndex: 'number',
                    key: 'number'
                }, {
                    title: '登录账号',
                    dataIndex: 'mobile',
                    key: 'mobile'
                }, {
                    title: '名字',
                    dataIndex: 'name',
                    key: 'name'
                }, {
                    title: '职位',
                    dataIndex: 'position',
                    key: 'position'
                },{
                    title: '部门',
                    dataIndex: 'departmentName',
                    key: 'departmentName'
                }, {
                    title: '上级管理员',
                    dataIndex: 'superior',
                    key: 'superior'
                }, {
                    title: '省份',
                    dataIndex: 'province',
                    key: 'province',
                    render: text => {
                        return text ? text.split(',').map((item) => {
                            return getProvince(item) + ' '
                        }) : []
                    }
                }, {
                    title: '邮箱',
                    dataIndex: 'email',
                    key: 'email'
                }, {
                    title: '创建时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate'
                }
            ]
        }
    },
    //部门
	departmentList() {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/organization/selectSuperId",
			data: {

			},
			success: function(data) {
				let thedata = data.data;
				let theArr=[];
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thedata = {};
				}else{
					thedata.map(function(item,index){
						theArr.push({
							key:index,
							name:item.name,
							id:item.id,
							depNo:item.depNo
						})
					})
				}
				this.setState({
					departmentArr:theArr,
				})
			}.bind(this),
			}).always(function() {
				this.setState({
					loading: false
				});
			}.bind(this));
	},
    componentWillMount() {
        this.state.provinceList = provinceSelect();
        this.loadData();
        this.departmentList()
        this.loadInitialData();
        this.loadBindRoles();
    },
    addNew() {
        let e = {}
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    edit(e) {
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    reset() {
    	this.state.departmentt=undefined;
        this.state.searchMobile = undefined;
        this.state.searchName = undefined;
        this.state.searchProvince = undefined;
        this.loadData();
    },
    handleReturn(show, render) {
        this.state.modalShow = show;
        if (render) {
            this.loadData();
        }
    },
    render() {
    	let departmentArr = this.state.departmentArr || [];
        return (
            <Spin spinning={this.state.loading}>
                <div className="set-content">
                    <div className="set-title">
                        <span>管理员设置</span>
                        <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
                            onClick={this.addNew}>添加<Icon type="plus" /></Button>
                    </div>
                    <div className="set-search">
                        <Input placeholder="登录号"
                            value={this.state.searchMobile}
                            onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
                        <Input placeholder="管理员名字"
                            value={this.state.searchName}
                            onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
                        <Select placeholder="选择部门" style={{width:'120px'}}
                            value={this.state.departmentt}
                            onChange={(e) => { this.setState({ departmentt: e }) }}>
                            {
                                departmentArr.map(function (item) {
                                        return <Select.Option key={item.id} >{item.name}</Select.Option>
                                })
                            }
	                    </Select>
                        <Select style={{ width: 120 }}
                            placeholder="选择一个省份"
                            showSearch
                            filterOption={companySearch}
                            value={this.state.searchProvince}
                            onChange={(e) => { this.setState({ searchProvince: e }) }} >
                            {this.state.provinceList.map((item) => {
                                return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
                            })}
                        </Select>
                        <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
                        <Button onClick={this.reset}>重置</Button>
                    </div>
                    <TheModal
                        theAdminRole={this.state.theAdminRole}
                        currentRoles={this.state.currentRoles}
                        roles={this.state.roles}
                        rolesObj={this.state.rolesObj}
                        data={this.state.modalData}
                        onlyProvince={this.state.onlyProvince}
                        show={this.state.modalShow}
                        departmentArr={this.state.departmentArr}
                        handleReturn={this.handleReturn} />
                    <Table size="middle" className='member-table'
                        columns={this.state.columns}
                        style={{
                           cursor: 'pointer',
                        }}
                        onRowClick={this.edit}
                        dataSource={this.state.data}
                        pagination={this.state.pagination} />
                </div>
            </Spin>
        );
    }
});
export default Member;