ES5中引入antd表格的使用

来源：互联网发布：linux 驱动编写步骤编辑：程序博客网时间：2024/05/17 08:19
/** *  * 人员列表 */var React = require('react');import {connect} from 'react-redux';import { Spin, Table,Input, Icon, Button, Popconfirm, } from 'antd';import EditableCell from '../RoomMaintenance/EditableCell';//编辑场景名称控件import './RoleList.css';import {fetchMaintain,DeleteMaintainPerson,UpdateRolePassword} from '../../actions/MaintainActions';class MaintainPersonList extends React.Component {    constructor(props) {        super(props);        this.columns = [            {title: 'id', dataIndex: 'id', key: 'id', className:'columns',                render: (text, record, index) => {                    return(                        <div><text>{index+1}</text></div>                    )                }},            {title: '手机号', dataIndex: 'phone', key:'phone', className:'columns'},            {title: '邮箱', dataIndex: 'email', key:'email', className:'columns'},            {title: '账号', dataIndex: 'username', key:'username', className:'columns'},            {title: '权限', dataIndex: 'role', key:'role', className:'columns',                render: (text, record, index) => {                    var accountRole = "";                    if(text=="zero"){                        accountRole = "普通用户";                    }else if(text=="one"){                        accountRole = "一级审核";                    }else if(text=="two"){                        accountRole = "二级审核";                    }else if(text=="three"){                        accountRole = "最高权限";                    }                    return(                        <div>                            <text>{accountRole}</text>                        </div>                    )                }            },            {title: '操作', dataIndex: 'operation', key:'operation', className:'columns',                render: (text, record, index) => {                    return (                        <div>                            <Popconfirm title="是否删除?" className='delete' onConfirm={this.onDelete(record,index)}>                                <a href="#">删除</a>                            </Popconfirm>                            <Popconfirm title="是否重置密码?" className='reset' onConfirm={() => this.onReset(record,index)}>                                <a style={{backgroundColor:'none',paddingLeft:15}} href="#">重置密码</a>                            </Popconfirm>                        </div>                    );                }        }];        this.state = {            width:'100%',            height:400,            pagination: true, //分页器            count: 6        };    }    componentDidMount(){        const{dispatch}=this.props;        dispatch(fetchMaintain());    }    /*    * 删除指定人员    * record :删除指定的当前行元素    * index：删除指定的当前行元素下标    * */    onDelete(record,index){        return () => {          const{dispatch}=this.props;          dispatch(DeleteMaintainPerson('token',record.id));        };    }    /*     * 删除指定人员     * record :删除指定的当前行元素     * index：删除指定的当前行元素下标     * */    onReset(record,index){        alert("请及时修改修改重置后生成的随机密码："+RndNum(6)+"谢谢您的使用！");        var resetPwd=RndNum(6);        var params={            "id":record.id,            "password": resetPwd        };        return () => {            const{dispatch}=this.props;            dispatch(UpdateRolePassword(params));        };    }    render() {        const {maintain}=this.props;        const columns = this.columns;        if (maintain.fetched==false){            return(                <div style={{marginTop:'40%',textAlign:'center'}}>                    <Spin size="large" />                </div>            )        }else {            return (                <div>                    <div className='module_header'>                        <div className='title'>                            人员                        </div>                    </div>                    <div className='module_content'>                        <Table                            bordered                            rowKey="id"                            width={this.state.width}                            height={this.state.height}                            dataSource={maintain.MaintainPersonData}                            columns={columns} />                    </div>                </div>            );        }    }}/** * 生成6位数字的随机数 * @param n * @returns {string} * @constructor */function RndNum(n){    var rnd="";    for(var i=0;i<n;i++){        rnd += Math.floor(Math.random()*10);    }    return rnd;}function mapStateToProps(state) {  const {maintain} = state;  return {    maintain  }}export default connect(mapStateToProps)(MaintainPersonList);
0 0