forgeplus-react/src/exchange/Manage/AddModeratorModal.js

import React, { Component } from 'react';
import { Modal , Input , Table ,Pagination } from 'antd'
import './manage.css'
import '../exchange.css';
import axios from 'axios';

const Search = Input.Search;
class AddModeratorModal extends Component {
  constructor(props){
    super(props);
    this.state={
      data:undefined,
      page:1,
      user_name:undefined,
      limit:10,
      total:undefined,
      selectedRowKeys:undefined
    }
  }


  componentDidUpdate=(prevState)=>{
    if(prevState.operationPlateId !== this.props.operationPlateId && this.props.visible){
      this.setState({
        user_name:undefined,
        page:1
      })
      this.getTabData(undefined , 1);
    }
  }

  getTabData=(user_name,page)=>{
    const { operationPlateId } = this.props;
    
    const url =`/forum_sections/${operationPlateId}/search_users.json`;
    axios.get(url,{
      params:{
        user_name,
        page
      }
    }).then(result=>{
      if(result){
        const user_lists = result.data.user_lists;
        let array = [];
        for(var i = 0;i<user_lists.length;i++){
          array.push({
            key:user_lists[i].id,
            username:user_lists[i].username,
            nickname:user_lists[i].nickname,
          })
        }
        this.setState({
          data:array,
          limit:result.data.limit,
          total:result.data.users_count
        })
      }
    }).catch(error=>{
      
    })
  }
  getSelectKeys=(selectedRowKeys,selectedRows)=>{
    this.setState({
      selectedRowKeys
    })
  }

  // 搜索
  searchEvent=(value)=>{
    this.setState({
      user_name:value,
      page:1
    })
    this.getTabData(value,1);
  }

  // 翻页
  changePageEvent=(page)=>{
    const { user_name } = this.state;
    this.setState({
      page
    })
    this.getTabData(user_name,page);
  }

  // 取消
  cancel=()=>{
    const { hideAddBox }=this.props;
    this.setState({
      user_name:undefined,
      page:1
    })
    hideAddBox();
  }
  // 确定
  modalSave=()=>{
    const { selectedRowKeys } = this.state;
    console.log(selectedRowKeys);

    const { plateId } = this.props.match.params;
    const { operationPlateId , hideAddBox , getSubModerator } = this.props;
    const url = `/forum_sections/${plateId}/add_users.json`;
    axios.post(url,{
      user_ids:selectedRowKeys,
      children_section_id:operationPlateId
    }).then(result=>{
      if(result){
        this.props.showNotification(result.data.message);
        hideAddBox();
        getSubModerator();
      }
    }).catch(error=>{

    })
  }

  render(){
    const { visible } = this.props;
    let { data , total , page , limit } = this.state;
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => this.getSelectKeys(selectedRowKeys,selectedRows)
    };
    const columns = [{
      title:"姓名",
      dataIndex:"username"
    },{
      title:"昵称",
      dataIndex:"nickname"
    }];

    return(
      <Modal
        keyboard={false}
        title={"添加版主"}
        visible={ visible }
        closable={false}
        footer={null}
        destroyOnClose={true}
        centered={true}
        width="700px"
        className="addPlateModal"
        >
        <div>
          <div className="edu-txt-right clearfix mb20 pr30">
            <div style={{width:"400px"}} className="fr">
              <Search
                placeholder="请输入用户名进行搜索"
                enterButton="搜索"
                onSearch={(value) => this.searchEvent(value)}
              />
            </div>
          </div>
          <Table rowSelection={rowSelection} columns={columns} dataSource={data} size={"small"} pagination={false}/>
          
          {
            total && total > limit ?
            <div className="edu-txt-center mt10">
              <Pagination current={page} size={"small"} total={total} pageSize={limit} onChange={this.changePageEvent}></Pagination>
            </div>:""
          }
          
          <div className="clearfix mt30 edu-txt-center">
            <a  className="task-btn mr30" onClick={this.cancel}>取消</a>
            <a className="task-btn task-btn-orange" onClick={this.modalSave}>确定</a>
          </div>
        </div>
      </Modal>
    )
  }
}
export default AddModeratorModal;