ES5中引入antd表格的使用

- 日理万妓 2022-07-12 16:46 166阅读 0赞

/** * * 人员列表 */ 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);