personal.js

import React from 'react'
import './personal.less'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import { OrgOptionsForm, UserManageBar } from '@components/Common'
import { API_USER_MANAGE ,API_SYSORORG_MANAGE} from '@src/Api'
import { Row, Col, Table, Form, Button, Input,Select, Icon, message, Modal,Tree,Layout } from 'antd'
import storage from '@src/utils/localStorage'

const FormItem = Form.Item;
const Option = Select.Option;
const {Sider,Content } = Layout;
const TreeNode = Tree.TreeNode;
const DirectoryTree =Tree.DirectoryTree

class Personal extends React.Component {
  expandedKeys=[]
  state = {
    getOrgOptionsName: {},//组织机构
    checkedObj: {},//选中组织对象
    tloading: false,
    searchInfo:{},
    orgVisible: false,//机构弹窗显示
    orgOptionsArr: [],//组织机构数组
    page: 1,
    pageSize: 10,
    checkedKeys: {},
    expandStatus: false,
    isShowOpt:true,
    widthX:1000
    
  }
  async componentWillMount() {
    let btnAuth = localStorage.btnAuth
    this.setState({btnAuth,})
    if(btnAuth.indexOf('people-lookMore') === -1){
      this.setState({isShowOpt: false,widthX:1000})
    }
    //获取机构树状图
    await this.getOrgTreeList()
    //获取用户信息列表
    this.getParamQuery()
  }
  async componentDidMount() {
     //根据机构名称查询
    this.getOrgByName()

  }

  //重置表单
  reset = () => {
    this.props.form.resetFields();
    this.getParamQuery()
  }
 

  //根据条件查询table数据
  queryList = () => {
     let searchInfo = Utils.trim(this.props.form.getFieldsValue());
      this.setState({page:1})  
      this.getParamQuery(searchInfo)
  }

  //获取用户信息多条件查询table数据
  getParamQuery = (item) => {
    let _this = this
    this.setState({
          tloading: true,
        })
    axios.ajax({
      url: API_USER_MANAGE.getParamQuery,
      data: {
        ...item,
        pageNum: this.state.page,
        pageSize: this.state.pageSize
      }
    }).then(res => {
      if (res.records && res.records.length > 0) {

        let list = res.records.map((item, index) => {
          item.key = index
          return item
        })
        this.setState({
          list,
          tloading: false,
          selectedRowKeys: [],
          selectedRows: null,
          pagination: Utils.pagination(res, (current) => {
            _this.state.page = current;
            _this.queryList();
          }),
          minHeight:res.total % 10 ===0?  '500px':'567px'
        })
      } else {
        this.setState({
          list: [],
          tloading: false,
          pagination: Utils.pagination(res, (current) => {
            _this.state.page = current;
            _this.queryList();
          }),
          minHeight:'567px'
        })
      }

    })
  }

  //获取expandedKeys 数组
  getExpandedKeys =(data)=>{
    if(!data || data.length ===0) return []
    if(data && data.length >0 ){

      return  data.map(k=>{
        if(k.childOrgs && k.childOrgs.length >0){
           this.getExpandedKeys(k.childOrgs)
        }
        this.expandedKeys.push(k.id.toString())
        
      })
    }
  }
  //根据机构名称查询
  getOrgByName = (item) => {
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgByName,
      data: {
        name: item
      }

    }).then(res => {
      if (res && res.length > 0) {
        let orgList = res.map((item, index) => {
          item.key = index
          return item
        })
        this.getExpandedKeys(res)
        this.setState({
          orgList,
          selectedRowKeys: [],
          selectedRows: null,
        })
      } else {
        this.setState({
          orgList: [],
        })
      }

    })
  }
  // 机构清空
  onRef = (ref) => {
    this.child = ref;
  }
  //选择一行数据
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }
  //获取机构树状图
  getOrgTreeList = () => {
   this.setState({
      tloading: true,
    })
    return new Promise((resolve, reject) => {
      axios.ajax({
        url: API_SYSORORG_MANAGE.getOrgTreeList,
      }).then(res => {
        if (res && res.length > 0) {
          let orgOptionsArr = res.map((item, index) => {
            item.key = index
            item.name = item.name.substring(0, 10)
            return item
          })
          this.setState({
            tloading: false,
            orgList:orgOptionsArr,
            orgOptionsArr,
            expandedKeys:this.expandedKeys
          })
          resolve(this.getOrgOptionsName(res))
        } else {
           this.setState({
            tloading: false,
            orgList:[],
            orgOptionsArr: []
          })
        }
      })
    })
  }
  //对机构进行扁平处理
  getOrgOptionsName = (data) => {
    const { getOrgOptionsName } = this.state
    let that = this
    if (data && data.length > 0) {
      data.map(item => {
        let id = item.id, name = item.name
        if (item.childOrgs && item.childOrgs.length > 0) {
          that.getOrgOptionsName(item.childOrgs)
        }
        Object.assign(getOrgOptionsName, { [id]: name })
      })
    }
    return getOrgOptionsName
  }
  //菜单渲染
  renderTree = (data) => {
    return data.map((item) => {
      if (item.childOrgs && item.childOrgs.length > 0) {
        return (
          <TreeNode 
            title={<span>{ Utils.formatTableColumn(item.name) }</span>}
            name={item.name}
            key={item.id}
          >

            {this.renderTree(item.childOrgs)}
          </TreeNode>
        )
      }
      return <TreeNode title={<span>{ Utils.formatTableColumn(item.name) }</span>} key={item.id} name={item.name}>
       
      </TreeNode>

    })
  }
  //选中机构
  onSelect = (checkedKeys, e) => {
    //let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    console.log('checkedKeys',checkedKeys)
    //this.props.form.setFieldsValue({ 'orgId': checkedKeys[0] })
    let searchInfo={}
    searchInfo.orgId=checkedKeys && checkedKeys.length>0 ?checkedKeys[0]:''
    this.getParamQuery(searchInfo)
    this.setState({
      checkedObj:  {
          key: checkedKeys[0],
          val: e.node.props.name
        }
    })

  }
  //显示所属机构弹窗
  orgOptions = () => {
    this.setState({
      orgVisible: true
    })

  }
    //机构弹窗
  handleOrgOptions = () => {
    const checkedObj = this.state.checkedObj
    if (Object.keys(checkedObj).length == 0 || !checkedObj) {
      message.warn('请选择对应的机构')
      return
    } else {
      this.setState({
        checkedObj
      })
      this.props.form.setFieldsValue({ 'orgId': checkedObj.key })
      this.setState({
        orgVisible: false
      })
    }
  }
  //获取所属机构
  getCheckedObj = (obj) => {
    this.setState({
      checkedObj: obj
    })
  }
  //查看详情
  lookDetail=(item,uid)=>{
    if (uid) {
      this.props.history.push({
        pathname: '/home/orgManage/personaDetail/' + uid,
      });
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }
  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }

   // 展开条件
   expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  render() {
    const {btnAuth} = this.state
    const columns = [
      {
        title: '用户昵称',
        key: 'userName',
        dataIndex: 'userName',
        className:' tdWidth',
        width: 100,
        align: 'center',
        //fixed: 'left',
        render(userName) {
          return Utils.formatTableColumn(userName)
        }
      },
      {
        title: '登录账号',
        key: 'loginName',
        dataIndex: 'loginName',
        className:' tdWidth',
        width: 100,
        align: 'center',
        //fixed: 'left',
        render(loginName) {
          return Utils.formatTableColumn(loginName)
        }
      },
      {
        title: '证件号码',
        key: 'certNo',
        dataIndex: 'certNo',
        width: 200,
        align: 'center',
      },
       {
        title: '手机号码',
        key: 'mobile',
        dataIndex: 'mobile',
        width: 150,
        align: 'center',
      },
       {
        title: '邮箱',
        key: 'email',
        dataIndex: 'email',
        width: 150,
        align: 'center',
      },
      {
        title: '入职时间',
        key: 'joinTime',
        dataIndex: 'joinTime',
        width: 100,
        align: 'center',
        render(joinTime) {
          return Utils.formateDateToYMDSFM(joinTime)
        }
      },
       {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        width: 100,
        align: 'center',
        render(status) {
          return {
          0: <span>其他</span>,
          1: <span>未激活</span>,
          2: <span className= "textDefault">正常</span>,
          3: <span className= "textDanger">禁用</span>,
          4: <span className= "textWarn">锁定</span>,
        }[status]
        }
      }
    ]
    const opt ={
        title: '操作',
        key: 'opereate',
        width: 100,
        align: 'center',
        render: (text, item) => {
          let uid=item.uid
          return (
            <div  >
              {
              btnAuth.indexOf('people-lookMore') !== -1 ?<Button size="small" onClick={(item) => { this.lookDetail(item,uid) }} >查看详情</Button>:''
              }
            </div>
          )
        }
      }
      if (this.state.isShowOpt) {
        columns.push(opt)
      }
    const { getFieldDecorator } = this.props.form;
  
    return (
      <div className='personbg'>
        <div className="searchWrap">
          <UserManageBar title="组织人员" />
          <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
         
        { 
          this.state.expandStatus ? 
          <div className="personForm">
            <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="所属机构">所属机构</label>
                    {
                      getFieldDecorator('orgId', {

                      })(
                        <Select disabled showArrow={false} placeholder="所属机构">
                          <Option value={this.state.checkedObj.key} >{this.state.checkedObj.val}</Option>
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="1">
                  <FormItem    >
                    <Icon className="orghover" onClick={this.orgOptions} type="appstore" />
                  </FormItem>
                </Col>

                <Col span="8">
                  <FormItem style={{ marginTop: 38, }} >
                  <Button onClick={(item) => { this.queryList(item) }} style={{ background: '#00BB29', color: "#fff", marginRight: 4 }} >查询</Button>
                  <Button onClick={this.reset} style={{ background: '#ED1719', color: "#fff" }} type="danger">重置</Button>
                </FormItem>
                </Col>
              </Row>
              
            </Form>
        </div>       
          : ''
        }    
        </div>      

       
        <Layout className="personalMain" style={{ marginBottom: '10px', }}>
          <Sider className="personalMenu" >
            <DirectoryTree
              className="orgPersonalTree"
              showIcon={false}
              expandAction="doubleClick"
              onExpand={this.onExpand}
              expandedKeys={this.state.expandedKeys}
              onSelect={(checkedKeys, e) => { this.onSelect(checkedKeys, e) }}
            >
              {this.renderTree(this.state.orgOptionsArr)}
            </DirectoryTree>
          </Sider>
          <Content>
          <div className="detData reTable personalTable">
            <div style={{ backgroundColor: '#fff',  marginTop: '10px',marginRight: '26px',minHeight:this.state.minHeight }}>
              <Table
                bordered={false}
                columns={columns}
                align='left'
                dataSource={this.state.list}
                loading={this.state.tloading}
                selections={false}
                pagination={this.state.pagination}
                 onRow={(record, index) => {
                  return {
                    onClick: () => {
                      this.onRowClick(record, index);
                    }
                  };
                }}
              />
            </div>
          </div>
          </Content>
        </Layout>
        {/* 所属机构弹窗 */}
        <Modal
          title="所属机构"
          visible={this.state.orgVisible}
          width={800}
          className="modal"
          cancelText="取消"
          okText="确定"
          onOk={this.handleOrgOptions}
          onCancel={() => {
            this.child.reset();
            this.setState({
              orgVisible: false,
              checkedObj:""
            })

          }}
        >
          <OrgOptionsForm
            getOrgByName={(orgName) => this.getOrgByName(orgName)}
            getOrgTreeList={this.getOrgTreeList}
            orgOptionsArr={this.state.orgList}
            getCheckedObj={this.getCheckedObj}
            onRef={this.onRef}
          ></OrgOptionsForm>
        </Modal>
      </div>
    )
  }
}

export default Form.create()(Personal);