/** * * 人员列表 */ 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);
ES5中引入antd表格的使用
最新推荐文章于 2024-08-07 09:26:20 发布