orgIndex.js

import React from 'react'
import './orgIndex.less'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import { NavLink } from 'react-router-dom'
import { API_SYSORORG_MANAGE } from '@src/Api'
import UserManageBar from '@components/Common/WhiteBar/index'
import { Row, Col, Table, Form, Button, Input, Icon, message, Modal } from 'antd'
const FormItem = Form.Item;

class Organization extends React.Component {
  state = {
    tloading: false,
    searchInfo:{},
    expandStatus: false,
    isShowOpt:true,
  }
  componentWillMount() {
    let btnAuth = localStorage.btnAuth
    this.setState({btnAuth,})
    if(
      btnAuth.indexOf('org-edit') === -1 && 
      btnAuth.indexOf('org-delete') === -1 && 
      btnAuth.indexOf('addNextOrg') === -1 ){
        this.setState({isShowOpt: false})
      }

  }
  async componentDidMount() {
    this.getParamQuery()
  }

  //重置表单
  reset = () => {
    this.props.form.resetFields();
    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({searchInfo},() => {
      this.getParamQuery()
    }) 
  }
  //刷新表单
  refresh= () => {
    this.getParamQuery()
  }

  //根据条件查询table数据
  queryList = () => {
     let searchInfo = Utils.trim(this.props.form.getFieldsValue());
      console.log(searchInfo);
      this.setState({searchInfo},() => {
      this.getParamQuery()
    })  
  }
  
  //获取用户信息多条件查询table数据
  getParamQuery = (item) => {
    this.setState({
          tloading: true,
        })
    let searchInfo=this.state.searchInfo
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgByName,
      data: {
        ...searchInfo,
      }
    }).then(res => {
      if (res && res.length > 0) {
        //let list = Utils.formatTreeData(res)
        let list = res.map((item, index) => {
          item.key = index
          Utils.formatTreeData(item.childOrgs)
          return item
        })
        this.setState({
          list,
          tloading: false,
          selectedRowKeys: [],
          selectedRows: null,
        })
      } else {
        this.setState({
          list: [],
          tloading: false,
        })
      }

    })
  }
  //根据机构code查询下级机构
  getChildsOrgByCode = (code) => {
    this.setState({
          tloading: true,
        })
    axios.ajax({
      url: API_SYSORORG_MANAGE.getChildsOrgByCode,
      data: {
        ...code,
      }
    }).then(res => {
      console.log(res)
      if (res && res.length > 0) {
        let data = res.map((item, index) => {
           item.key = index
           return  item
        })
        const childList = Utils.formatTreeData(data, 'childOrgs')
        this.setState({
          childList,
          tloading: false,
          selectedRowKeys: [],
          selectedRows: null,
        })
      } else {
        this.setState({
          childList: [],
          tloading: false,
        })
      }

    })
  }

  //删除一行
  handleDelete = (oid,mName) => {
    if (oid) {
      Modal.confirm({
        title: '删除',
        content: `您要删除的机构为 : ${mName} ？`,
        okText: "确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_SYSORORG_MANAGE.deleteOrg,
            data: { id: oid }
          }).then(res => {
            console.log(res);
            message.success('删除成功')
            this.getParamQuery();
          })
        }
      })

    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }

  }

  //选择一行数据
  onRowClick = (record, index) => {
    let selectKey = [index];
    console.log(record);

    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }
  //点击展开图标时触发,根据机构code查询下级机构
  onExpand = (expanded, record) => {
    console.log('expanded',expanded);
    console.log('record',record);
    //_this = this
    if(expanded){
      this.setState({
          tloading: true,
        })
   
      axios.ajax({
        url: API_SYSORORG_MANAGE.getChildsOrgByCode,
        data: {
          code:record.code,
        }
      }).then(res => {
        console.log(res)
        if (res && res.length > 0) {
          this.renderList(this.state.list,record,res)
          //let list = Utils.formatTreeData(res)
          let childList = res.map((item, index) => {
            item.key = index
            Utils.formatTreeData(item.childOrgs)
            return item
          })
          this.setState({
            childList,
            tloading: false,
            selectedRowKeys: [],
            selectedRows: null,
          })
        } else {
          this.setState({
            childList: [],
            tloading: false,
          })
        }

      })
    }
    
  }
  renderList = (data,record,res) => {
    data.map((item) => {
      if(item.code==record.code){
        item.childOrgs=res
      }else if(item.childOrgs && item.childOrgs.length>0 ){
         this.renderList(item.childOrgs,record,res)

      }
    })
          
  }
  //修改一行数据
  update = (oid) => {
     console.log(oid);
    if (oid) {
      this.props.history.push({
        pathname: '/home/orgManage/OrgAdd/updateItem/' + oid,
      });
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }
  newAddOrg = (oid) => {
     console.log(oid);
    if (oid) {
      this.props.history.push({
        pathname: '/home/orgManage/OrgAdd/addNextItem/' + oid,
      });
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }
   onSelectChange =(selectedRowKeys)=>{
    console.log('onSelectChange',selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  //展开授权功能菜单
  expandOrg = () => {
     this.setState({ 
      list: [], 
      defaultExpandAllRows: !this.state.ExpandStatus, 
      ExpandStatus: !this.state.ExpandStatus}, () => {
      this.getParamQuery()
    })  
  }

  // 展开条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  render() {
    const {btnAuth} = this.state
    const columns = [
      {
        title: '机构名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        className:'pLeft tdWidth',
        width: '150px',
        render(name) {
          return Utils.formatTableColumn(name)
        }
      },
       {
        title: '机构级别',
        key: 'orgGrade',
        dataIndex: 'orgGrade',
        width: '60px',
      },
      {
        title: '更新时间',
        key: 'updateTime',
        dataIndex: 'updateTime',
        width: '60px',
        render(updateTime) {
          return Utils.formateDateToYMD(updateTime)
        }
      },
       {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: '100px',
        className:'tdWidth',
        render(remark) {
          return Utils.formatTableColumn(remark)
        }
      }
    ]
    const opt={
        title: '操作',
        key: 'opereate',
        className:'pRight',
        width: '150px',
        align: 'right',
        render: (text, item) => {
          let oid=item.id
          let mName=item.name
          
          return (
            <div>
            {
              btnAuth.indexOf('org-edit') !== -1 ? <Button size="small" style={{ marginRight: 10 }} onClick={(item) => { this.update(oid) }} >修改</Button>:''
            }
            {
              btnAuth.indexOf('org-delete') !== -1 ?<Button size="small" style={{ marginRight: 10 }} onClick={(item) => { this.handleDelete(oid,mName) }} >删除</Button>:''
            }
              
            {
              btnAuth.indexOf('addNextOrg') !== -1 ?<Button size="small" onClick={(item) => { this.newAddOrg(oid) }}>新增下级机构</Button>:''
            }
            </div>
          )
        }
      }
      if (this.state.isShowOpt) {
        columns.push(opt)
      }
    const { getFieldDecorator } = this.props.form;
  
    return (
      <div className='orgbg'>
       <div className="searchWrap">
        <UserManageBar title="机构管理" />
          <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>      
        { 
          this.state.expandStatus ? 
          <div className="userForm">
            <Form layout="inline">
              <Row gutter={10}>
                <Col span="4">
                  <FormItem  >
                    <label htmlFor="机构名称">机构名称</label>
                    {
                      getFieldDecorator('name', {

                      })(
                        <Input placeholder="机构名称" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="20">
                  <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>     

       
        
        <div className="operate">
          {
             btnAuth.indexOf('org-add') !== -1 ? <NavLink replace to={'/home/orgManage/orgAdd/addItem'} ><Button>新增</Button></NavLink>:''
          }
          
          <Button onClick={this.refresh} style={{ display: 'none' }}>刷新</Button>
        </div>

        <UserManageBar title="详细数据" />
        <div className="detData reTable">
          <div style={{ backgroundColor: '#fff', minHeight:'500px' }}>
            <Table
              rowKey="id"
              key={`table-${this.state.list && this.state.list.length}`}
              bordered={false}
              columns={columns}
              align='left'
              dataSource={this.state.list}
              defaultExpandAllRows = {this.state.ExpandStatus }
              loading={this.state.tloading}
              childrenColumnName='childOrgs'
              selections={false}
              pagination={false}
               onRow={(record, index) => {
                return {
                  onClick: () => {
                    this.onRowClick(record, index);
                  }
                };
              }}
              onExpand={this.onExpand}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default Form.create()(Organization);