index.js

import './index.less'
import React from "react";
import axios from '@src/axios'
import Utils from '@utils/utils'
import { API_ROLE_MANAGE } from '@src/Api'
import { UserManageBar } from '@components/Common'
import { Button, Table, message, Modal } from 'antd'
import { NavLink, withRouter } from 'react-router-dom'
import storage from '@src/utils/localStorage'

class RoleManage extends React.Component {

  state = {
    selectedRowKeys: [],
    selectedRows: [],
    loading: false,
    btnAuth: null,
    isShowOpt: true,
    isParent: false,
  }

 
  componentWillMount() {
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
    if(
      btnAuth.indexOf('role-edit') === -1 && 
      btnAuth.indexOf('assignedRole') === -1 &&
      btnAuth.indexOf('role-delete') === -1){
        this.setState({isShowOpt: false})
      }
  }

  componentDidMount() {


    this.getRoleAll()
  }

  /*数据获取区域*/

  //获取所有角色
  getRoleAll = () => {
    this.setState({
      loading: true
    })
    axios.ajax({
      url: API_ROLE_MANAGE.getRoleAll,
      data: {
        isParent:this.state.isParent ,
      }
      
    }).then(res => {
        let data = res.map((item, index) => {
           item.key = index
           return  item
        })
        const list = Utils.formatTreeData(data, 'roles')

        this.setState({
          list,
          loading: false
        })
    })
  }



  /*数据获取完成*/

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  }

  //复选框切换
  checkedChange = (record, selected, selectedRows, selectedRowKeys) => {

    this.setState({
      selectedRows
    })
  }

  //选择一行数据
  onRowClick = (record, index) => {
    const { selectedRowKeys, selectedRows } = this.state

    if (selectedRowKeys.includes(index)) {
      selectedRowKeys.map((key, i) => {
        if (key == index) {
          selectedRowKeys.splice(i, 1)
        }
      })
    } else {
      selectedRowKeys.push(index)
    }

    //如果selectedRows里面存在这个对象则删除，不存在则添加
    if (selectedRows && selectedRows.length >= 0) {
      let index = selectedRows.indexOf(record)
      if (index === -1) {
        selectedRows.push(record)
      } else {
        selectedRows.splice(index, 1)
      }
    }

    this.setState({
      selectedRowKeys: selectedRowKeys,
      selectedRows
    })
  }


  //已分配用户
  gotoMatched = (item, id, name) => {
    this.props.history.push({
      pathname: `/home/permission/role/matched/${id}/${name}`,
    });
  }

  //
  update = (item, id) => {
    item.stopPropagation();
    this.props.history.push({
      pathname: `/home/permission/role/add/updRole/${id}`,
    });
  }

  //deleteRole
  deleteRole = (record) => {
    // this.setState({
    //   delModal: true
    // })
    Modal.confirm({
      title: '删除',
      content: `您要删除的角色为 : ${record ? record.name : ''} ？`,
      okText:"确认",
      cancelText:"取消",
      onOk: () => {
         this.confirmDele(record)
      }
    })


  }

  //确认删除
  confirmDele = (record) => {  
    if (record) {
      axios.ajax({
        url: API_ROLE_MANAGE.deleteRole,
        data: {
          id: record.id
        }
      }).then(res => {
        if (res) {
          this.setState({
            selectedRowKeys: [],
            selectedRows: [],
            delModal: false
          })
          message.success('删除成功')
          this.getRoleAll()
        } else {
          message.error('请刷新重新操作')
        }
      })
    }
  }

  render() {
    const { selectedRowKeys, selectedRows, loading } = this.state;
    const rowSelection = {
      type: 'checkbox',
      selectedRowKeys,
      selectedRows,
      onChange: (selectedRowKeys, selectedRows) => {
        this.onSelectChange(selectedRowKeys, selectedRows)
      },
      onSelect: (record, selected, selectedRows, selectedRowKeys) => {
        this.checkedChange(record, selected, selectedRows, selectedRowKeys)
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        // this.onSelectAll(selectedRows, changeRows)

      },
    }
    const columns = [
      {
        title: '角色名',
        dataIndex: 'name',
        className: 'tdWidth',
        render(name) {
          return Utils.formatTableColumn(name) 
        }

      }, {
        title: '角色描述',
        dataIndex: 'remark',
        align: 'center',
        className: 'tdWidth',
        render(remark) {
          return Utils.formatTableColumn(remark) 
        }
      }, {
        title: '创建人',
        dataIndex: 'creatorName',
        align: 'center',
        className: 'tdWidth',
        render(creatorName) {
          return Utils.formatTableColumn(creatorName) 
        }
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
        render: Utils.formateDateToYMD
      }, ];

      if (this.state.isShowOpt) {
        columns.push(
          {
            title: '操作',
            key: 'opereate',
            className:'pRight',
            align: 'right',
            render: (record) => {
              let id = record.id, name = record.name, items= record
              return (<div>
                {
                  this.state.btnAuth.indexOf('role-edit') !== -1 ? 
                  <Button size="small" style={{ marginRight: 15 }} onClick={(item) => { this.update(item, id) }}  >修改</Button>
                  : ''
                }  
                {
                  this.state.btnAuth.indexOf('assignedRole') !== -1 ? 
                  <Button size="small"  style={{ marginRight: 15 }}  onClick={(item) => { this.gotoMatched(item, id, name) }}>
                    已分配用户
                  </Button>
                  : ''
                }
                {
                  this.state.btnAuth.indexOf('role-delete') !== -1 ? 
                  <Button size="small" onClick={()=> this.deleteRole(items)} >删除</Button>
                  : ''
                }   
                </div>
                
              )
            }
          }
        )
      }

    return (
      <div className="roleManage" >
        <UserManageBar title="角色管理" />
        <div className="operate">
        {
          this.state.btnAuth.indexOf('role-add') !== -1 ? 
          <NavLink replace to={'/home/permission/role/add/addRole'} ><Button>新增</Button></NavLink>
          : ''
        }             
          
        </div>

        <UserManageBar title="详细数据" />

        <div className="content-wrap detData">
          <div style={{ backgroundColor: '#fff',minHeight:'500px'}}>
              <Table
                className="reTable"
                rowKey="id"
                key={`table-${this.state.list && this.state.list.length}`}
                bordered={false}
                columns={columns}
                dataSource={this.state.list}
                loading={loading}
                selections={false}
                childrenColumnName='roles'
                onRow={(record, index) => {
                  return {
                    onClick: () => {
                      this.onRowClick(record, index);
                    }
                  };
                }}
                pagination={false}
              />
          </div>
        </div>
        <Modal
          title="角色删除"
          visible={this.state.delModal}
          onOk={this.confirmDele}
          okText="确认"
          cancelText="取消"
          onCancel={
            () => {
              this.setState({
                delModal: false
              })
            }
          }
        >
          您要删除的角色为：{selectedRows[0] ? selectedRows[0].name : ''}
        </Modal>
      </div>
    )
  }
}
export default withRouter(RoleManage)