empower.js

import React from 'react'
import './empower.less'
import { Input, Form, Select, Row, Col, Button, Icon, Table, message, Modal, Checkbox,Spin} from 'antd'
import { UserManageBar, LayerOrgSelect } from '@components/Common'
import storage from '@src/utils/localStorage'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'

import { API_SYSORORG_MANAGE, API_CLIENT_MANAGE } from '@src/Api'  

const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;

message.config({
  maxCount: 1,
});

class empowerManage extends React.Component { 
  constructor(props) {
    super(props)
    this.state = {
      list: [], //表格数据
      treeData: [], //机构树
      treeLoad: false, //加载树loading
      loading: false,  // 加载表格 loading
      selectedRowKeys: [], //表格选择的key
      selectedRows: [],  // 选中表格的 row对象
      orgData: {          // 树结构的选中的值
        id: null,
        name: ''
      },
      searchForm:{      //树结构的查询条件
        orgId: null,
        orgName: ''       
      },
      searchListForm: {}, // 点击查询才给这个赋值，下次做启用刷新的时候就直接用这个参数
      orgVisible: false, //机构里面的弹框
      clientVisible: false,  //启用客户端弹框
      clientArr: [],    // 设置客户端要赋值选中的结果集
      clientList: [],   // 选择的结果集
      isExpand: true,    // 是否展开
      pagination:[],
      orgPagination:[],
      userId: '',
      params: {
        pageNum: 1,
        pageSize: 10
      },
      orgParams: {
        pageNum: 1,
        pageSize: 10
      },
      roleOptionsArr: [],     
      expandStatus: false,
      btnAuth: null,
      isShowOpt: true,
      spinStatus: false, // 是否显示加载中
    }    
  }
 
  componentWillMount() {   
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
    if(btnAuth.indexOf('setClient') === -1){
        this.setState({isShowOpt: false})
      }
  }

  componentDidMount () {
    this.getClientList()
  }
  

  // 获取客户端列表
  getClientList () {    
    this.setState({loading: true})
    const { searchListForm }= this.state
    let _this = this

    axios.ajax({
      url: API_CLIENT_MANAGE.clientAuthorization,
      data:{
        ...searchListForm,
        pageNum: this.state.params.pageNum,
        pageSize: this.state.params.pageSize
      }
    }).then(res => {    
      if(res && res.records.length > 0) {
        this.setState( { 
          list: res.records, 
          loading: false,
          selectedRowKeys: [],
          selectedRows: [],
          pagination: Utils.pagination(res, (current) => {
            _this.state.params.pageNum = current;
            _this.getClientList();
          })
        })
      }else {
        this.setState( { 
          list: [], 
          loading: false,
          selectedRowKeys: [],
          selectedRows: [],
          pagination: Utils.pagination(res, (current) => {
            _this.state.params.pageNum = current;
            _this.getClientList();
          })
        })
      }
    })    
  }

  //table改变事件
  onTableChange = (pagination, filters, sorter) => {
  }


  // 客户端查询操作
  searchClientOpt = ()=> {
    this.setState({params:{pageNum:1 ,pageSize: 10}}, ()=>{
      this.searchClienList()
    })    
  }

  // 查询的公共方法
  searchClienList() {
    const formData = this.props.form.getFieldsValue();    
    delete formData.layerOrgName;
    let searchListForm = Utils.trim(Object.assign({}, formData, {orgId: this.state.searchForm.orgId}))

    this.setState({searchListForm}, ()=>{
      this.getClientList(searchListForm)  
    })    
  }

  // 客户端重置操作
  resetClientOpt = ()=> {
    this.props.form.resetFields();
    this.setState({searchForm:{ orgName: '', orgId: null},  params:{pageNum: 1, pageSize: 10}}, ()=>{
      this.searchClienList()
    })
  }
  
  // 表格复选框事件
  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }
  
  // 启用账户操作
  enabledOPt = ()=> {
    if(this.state.selectedRows.length > 0 ) {
      let data  = this.state.selectedRows;
      let postData = [];
      if (data.length > 0) {
        data.map(function(value, index, array) {
          postData.push(value.uid)
        });
      }      
      Modal.confirm({
        title: '启用账户',
        content: '您确定要启用选中的账号吗？',
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_CLIENT_MANAGE.enaDisAccount,
            data:{
              userIds: postData,
              status: 2
            }
          }).then(res => {    
            if(res ){
              message.success('启用成功！')
              this.setState({selectedRowKeys: [], selectedRows: []})
              this.getClientList(Utils.trim(this.state.searchListForm))  
            } else {
              message.success('操作失败！')
            }
          })    
        }
      })      
    } else {
      message.warn('请选择用户')
    }
  }

  // 禁用操作
  disenableOpt = ()=> {
    if(this.state.selectedRows.length > 0 ) {
      let data  = this.state.selectedRows;
      let postData = [];
      if (data.length > 0) {
        data.map(function(value, index, array) {
          postData.push(value.uid)
        });
      }      
      Modal.confirm({
        title: '禁用账户',
        content: '您确定要禁用选中的账号吗？',
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_CLIENT_MANAGE.enaDisAccount,
            data:{
              userIds: postData,
              status: 3
            }
          }).then(res => {    
            if(res ){
              message.success('操作成功！')
              this.setState({selectedRowKeys: [], selectedRows: []})
              this.getClientList(Utils.trim(this.state.searchListForm))  
            } else {
              message.success('操作失败！')
            }
          })    
        }
      })      
    } else {
      message.warn('请选择用户')
    }
  }


   // 启用客户端操作
   enabledClientOPt = (item)=> {
     var selectList =[];
     if(item.terminalUsrFlag) {
      selectList = this.getval(this.termFlagsOpts, item.terminalUsrFlag);
     }     
     this.setState({clientVisible: true, clientArr: selectList, userId: item.uid}) 
  }

   //终端机使用标识数据初始化处理
   getval = (data, val) => {
    if (val === 0) return []
    let termFlagsOpts = data.map(k => {
      if ((k.value & val) === k.value) {
        return k.value
      }
    }).filter(k=>k!==undefined)
    return termFlagsOpts
  }
  
   // 客户端项目选择事件
   clientChange = (v)=> {
     this.setState({clientArr: v})
   }

   // 客户端确定事件
   handleClient =()=> {
    const termList = this.state.clientArr
    var termSum = 0;

    if (termList.length > 0) {
      termSum = termList.reduce(function(prev, curr, idx, arr){
        return prev + curr;
       });
    }

    this.setState({clientVisible: false, spinStatus: true})   
    axios.ajax({
      url: API_CLIENT_MANAGE.enaDisableClient,
      data:{
        userId: this.state.userId,
        terminalUsrFlag: termSum
      }
    }).then(res => {    
      if(res ){
        message.success('操作成功！')            
        this.getClientList(Utils.trim(this.state.searchListForm))  
      } else {
        message.success('操作失败！')
      }
      this.setState({ spinStatus: false})   
    })  
   }

   //选择一行数据
  onRowClick = (record, index) => {
    const { selectedRowKeys, selectedRows } = this.state 
    
    if(selectedRowKeys.includes(record.uid)) {
      selectedRowKeys.map((key, i) => {
        if (key == record.uid) {
          selectedRowKeys.splice(i, 1)
        }
      })
    } else {
      selectedRowKeys.push(record.uid)
    }

    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: selectedRows
    })

  }

  
  // 树选择事件
  selectTree = (event, obj)=> {   
    this.setState({
      orgData:{id: obj.id, name: obj.name
    }})
  }

  onRef = (event)=> {
    this.child = event
  }
  
 

  // 机构选择
  orgOptions = ()=> {
    this.props.form.resetFields('layerOrgName');
    this.setState({
      orgVisible: true,
      treeData: [],
      orgData:{id: this.state.searchForm.orgId, name: this.state.searchForm.orgName},      
    }, ()=> {
      if(this.child) {
        this.child.getOrgTreeList()
      }
    })
  }

   //获取机构树状图
   getOrgTreeList = () => {   
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgTreeList,
      data:{
        pageNum: 1,
        pageSize: 999999
      }
    }).then(res => {
      if (res && res.length > 0) {
        this.setState({
          treeData: Utils.formatTreeData(res),
          orgData: {id: this.state.searchForm.orgId},
          isExpand: true,
          treeLoad: false
        })        
      }
    })    
  }  

  
  // 机构确定
  handleOrgSelect = ()=> {
    this.setState({
      orgVisible: false, 
      searchForm:{orgId: this.state.orgData.id, orgName: this.state.orgData.name}});
  }

  termFlagsOpts = [
    { label: '安卓', value: 1 },
    { label: 'IOS', value: 2 },
    { label: '微信', value: 4 },
    { label: 'ipad(苹果)', value: 8 },
    { label: 'pad(安卓)', value: 16 },
    { label: 'PC', value: 32 },
  ];

  // 展开条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const _this = this;
    const state = this.state   
    const termFlags = {
      '1' : '安卓',
      '2': 'IOS',
      '4': '微信',
      '8': 'ipad(苹果)',
      '16': 'pad(安卓)',
      '32': 'PC'
    }
    const columns =[
      {title: '账号',key: 'loginName',dataIndex: 'loginName',width: '100px',align: 'left',className: 'tdWidth',
        render(loginName) {
          return Utils.formatTableColumn(loginName)
        }
      },
      {title: '姓名',key: 'name',dataIndex: 'name',width: '140px',align: 'center',className: 'tdWidth',
        render(name) {
          return Utils.formatTableColumn(name)
        }
      },
      {title: '机构名称',key: 'orgName',dataIndex: 'orgName',width: '120px',align: 'center', className: 'tdWidth',
        render(orgName) {
          return Utils.formatTableColumn(orgName)
        }
      },
      {title: '勤务状态',key: 'type',dataIndex: 'type',width: '80px',align: 'center',render(type) {
        return {
          1: <span className= "textDanger">内勤</span>,
          2: <span className= "textDefault">外勤</span>
        }[type]
      }},
      {title: '在职状态',key: 'jobStatus',dataIndex: 'jobStatus',width: '80px',align: 'center',render(jobStatus) {
        return {
          1: <span className= "textDefault">在职</span>,
          2: <span className= "textDanger">离职</span>,
          3: <span className= "textWarn">暂离</span>,
          0: '其它'
        }[jobStatus]
      }},
      {title: '账户状态',key: 'status',dataIndex: 'status',width: '80px',align: 'center',render(status) {
        return {
          1: <span>未激活</span>,
          2: <span className= "textDefault">正常</span>,
          3: <span className= "textDanger">禁用</span>,
          4: <span className= "textWarn">锁定</span>,
          0: '其它'
        }[status]
      }},
      {title: '客户端权限',key: 'terminalUsrFlag',dataIndex: 'terminalUsrFlag',width: '160px',align: 'center', render (t, r, i){
       
        const list =  _this.getval(_this.termFlagsOpts, t);
        var str ='';
        list.map(k => {
          str += termFlags[k]? termFlags[k] + '.' : '';
        })
        if (str.length > 0) {
          return <div>已开通终端<br/>( {str.substr(0, str.length -1)} ) </div>
        } else {
          return <span style={{color: '#f00'}}>未开通</span>
        }
      }}    
    ];   

    if(this.state.isShowOpt) {
      columns.push(
      {
        title: '操作',
        key: 'opereate',
        width: '100px',
        align: 'right', 
        className:'pRight',
        render: (text, item, index) => {
          return (           
            <div>
              {
                this.state.btnAuth.indexOf('setClient') !== -1 ? 
                <Button size="small" onClick = {()=> this.enabledClientOPt(item)}>设置客户端</Button>
                : ''
              }
              
            </div>
          )
        }
      },  
      )
    }
   
    const rowSelection = {
      type: 'checkbox',  
      selectedRowKeys: this.state.selectedRowKeys, 
      selectedRows: this.state.selectedRows,     
      onChange: this.onSelectChange,
      onSelect: (record, selected, selectedRows) => {        
        this.setState({ selectedRows });
      },
      onSelectAll: (elected, selectedRows, changeRows) => {
        this.setState({ selectedRows });
      }
    }  

    return (
      <div className= "contentBg" >
       <Spin tip="加载中..." spinning = {this.state.spinStatus}>
          <div className="searchWrap">
            <UserManageBar title="客户端授权" />
            <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
          { 
            this.state.expandStatus ? 
            <div className="searchForm whiteBg">
              <Form  >
                <Row gutter={10}>
                  <Col span="4">
                    <FormItem  >
                      <label htmlFor="姓名">姓名</label>
                      {
                        getFieldDecorator('userName', {                      
                        })(
                          <Input placeholder="姓名" />
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem >
                      <label htmlFor="">账号</label>
                      {
                        getFieldDecorator('loginName', {
                        })(
                          <Input placeholder="账号" />
                        )
                      }

                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem   >
                      <label htmlFor="">所属机构&nbsp;&nbsp;</label>
                      {
                        getFieldDecorator('orgName', {
                          initialValue: state.searchForm.orgName,
                        })(
                          <Input disabled placeholder="所属机构" />
                        )
                      }

                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem    >
                      <Icon className="orghover" onClick={this.orgOptions} type="appstore" />
                    </FormItem>
                  </Col>


                </Row>
                <Row gutter={10}>
                  <Col span="4">
                    <FormItem      >
                      <label htmlFor="">勤务状态&nbsp;&nbsp;</label>
                      {
                        getFieldDecorator('type', {
                        })(
                          <Select placeholder="内外勤"  allowClear ={true}>
                            <Option value={1}>内勤</Option>
                            <Option value={2}>外勤</Option>
                          </Select>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem    >
                      <label htmlFor="">在职状态&nbsp;&nbsp;</label>
                      {
                        getFieldDecorator('jobStatus', {
                        })(
                          <Select placeholder="在职状态"  allowClear ={true}>
                            <Option value={1}>在职</Option>
                            <Option value={2}>离职</Option>
                            <Option value={3}>暂离</Option>
                            <Option value={0}>其它</Option>
                          </Select>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem>
                      <label htmlFor="">账户状态</label>
                      {
                        getFieldDecorator('status', {
                        })(
                          <Select placeholder="账户状态"  allowClear ={true} >
                            <Option value={1}>未激活</Option>
                            <Option value={2}>正常</Option>
                            <Option value={3}>禁用</Option>
                            <Option value={4}>锁定</Option>
                            <Option value={0}>其它</Option>
                          </Select>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem>
                      <label htmlFor="">客户端权限&nbsp;&nbsp;</label>
                      {
                        getFieldDecorator('terminalUsrFlag', {
                        })(
                          <Select placeholder="客户端权限"   allowClear ={true}>
                          { Utils.getOptionList(this.termFlagsOpts, "value", "label")}
                          </Select>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem style={{ marginTop: 38, }} >
                      <Button onClick={(item) => { this.searchClientOpt(item) }} style={{ background: '#00BB29', color: "#fff", marginRight: 4 }} >查询</Button>
                      <Button onClick={this.resetClientOpt} style={{ background: '#ED1719', color: "#fff" }} type="danger">重置</Button>
                    </FormItem>
                  </Col>

                </Row>
              </Form>
            </div>
            : ''
          }    
          </div> 

        
          <div className="operate">
            {
              this.state.btnAuth.indexOf('startAccount') !== -1 ? 
              <Button onClick = {this.enabledOPt}>启用账户</Button>
              : ''
            }
            {
              this.state.btnAuth.indexOf('stopAccount') !== -1 ? 
              <Button onClick={this.disenableOpt} >禁用账户</Button>
              : ''
            }

            
            
            {/* <Button onClick={this.enabledClientOPt} >启用客户端</Button> */}
            {/* <Button onClick={this.disenableClientOpt} >禁用客户端</Button> */}
            {/* <Button onClick={this.showRolesModal} >批量导入</Button> */}
          </div>       
          <div className="contentTable whiteBg pd">
          <Table
            rowKey='uid'
            key={`table-${this.state.list && this.state.list.length}`}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            rowSelection={ rowSelection }
            bordered={false}
            columns={columns}
            loading={this.state.loading}
            dataSource={this.state.list}
            pagination={this.state.pagination}            
          />        
        </div>
        </Spin>
        {/* 所属机构弹窗 */}
          <Modal
          title="所属机构"
          visible={this.state.orgVisible}
          width={800}
          className="modal"
          cancelText = "取消"
          okText =  "确定"
          onOk={this.handleOrgSelect}
          onCancel={() => {
            this.setState({
              orgVisible: false
            })
          }}
          >
            <LayerOrgSelect 
              onRef = {this.onRef}
              selectTree={this.selectTree} 
              orgData= {this.state.orgData}
            />
          </Modal>
        
        
         {/* 启用客户端 */}
         
         <Modal
          title="启用客户端"
          visible={this.state.clientVisible}
          width={500}
          className="modal"
          cancelText = "取消"
          okText =  "确定"
          onOk={this.handleClient}
          onCancel={() => {
            this.setState({
              clientVisible: false,
            })
          }}
        >
          <div className="clientForm">
            <Row>  
            <CheckboxGroup options={this.termFlagsOpts}  defaultValue = {this.state.clientList} value={this.state.clientArr} onChange={this.clientChange} />
            </Row>
          </div>
        </Modal>

      </div>
    ) 
  }

}
export default Form.create()(empowerManage);