index.js

import React from 'react'
import './index.less'
import { Input, Form, Button, Table, message, Radio} from 'antd'
import { UserManageBar } from '@components/Common'

import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import {API_SYSORORG_MANAGE } from '@src/Api'           

const FormItem = Form.Item;
class LayerOrgSelect extends React.Component { 
  constructor(props) {
    super(props)
    this.state = {
      orgVisible: this.props.orgVisible,
      treeData: [{id: 1 ,childOrgs: [], name: 'a'},{id: 2 ,childOrgs: [], name: 'b'}],
      treeLoad: false,
      isExpand: false,
      orgData: {          // 树结构的选中的值
        id: null,
        name: ''
      },
      searchForm:{      //树结构的查询条件
        orgId: null,
        orgName: ''       
      },
    }
  }


  componentDidMount() {
    this.getOrgTreeList()
    this.props.onRef(this)
  }

  //获取机构树状图
  getOrgTreeList = (isLocal) => {  
    this.setState({
      treeData:[], 
      treeLoad: true,  
      orgData: {name: isLocal === 'reset' || isLocal === 'search' ? '' : this.props.orgData.name  }}, ()=> {
      // if(isLocal !== 'search') {
      //   this.props.form.setFieldsValue({layerOrgName: this.state.orgData.name})
      // }      
      
      var searchData = this.props.form.getFieldsValue()

      if(isLocal !== 'search') {

        searchData['layerOrgName'] = this.state.orgData.name
        // this.props.form.setFieldsValue({layerOrgName: this.state.orgData.name})
      }        
     

      axios.ajax({
        url: API_SYSORORG_MANAGE.getOrgByName,
        data:{
          name: searchData.layerOrgName || '',
          pageNum: 1,
          pageSize: 999999
        }
      }).then(res => {
        if (res && res.length > 0) {
          this.setState({
            treeData: res,
            orgData: {id: this.state.searchForm.orgId},
            isExpand: false,
            treeLoad: false
          })        
        } else {
          this.setState({
            treeData: [],
            isExpand: false,
            treeLoad: false
          })    
        }
      })    
    });
  

   
  }  

   // 树搜索
   searchOrgOpt  = (e)=> { 
    this.setState({treeLoad:true, orgData:{id: this.state.searchForm.orgId}})   
    this.getOrgTreeList('search')    
  }

   // 机构的重置搜索
   orgReset = ()=> {
    this.props.form.resetFields('layerOrgName');
    this.setState({orgData:{id: this.state.searchForm.orgId}})   
    this.setState({treeData: []}, ()=> {
      this.getOrgTreeList('reset')
    })   
  }

  onExpand = (expanded, record)=> {
    let _this = this
    let arr = [];
    this.setState({treeLoad: true})
    if (expanded) {     
      axios.ajax({
        url: API_SYSORORG_MANAGE.getChildsOrgByCode,
        data: {
          code: record.code
        }
      }).then(res => {
        if (res && res.length > 0) {
         arr = _this.renderTree(this.state.treeData, record, res)        
         this.setState({treeData: arr, treeLoad: false})
        } else {
          this.setState({
            treeLoad : false
          })  
          return
        }
        
      })   
    } else {
      arr = _this.renderTree(this.state.treeData, record, [])        
      this.setState({treeData: arr, treeLoad: false})
    }
  }

  renderTree (data, record, res) {
    let _this = this  
    data.forEach((item,index) => {
      if(item.id === record.id){
        item.childOrgs =res
      }else{
        if(item.childOrgs && item.childOrgs.length){
           _this.renderTree(item.childOrgs, record, res)
        }
      }
    }) 
    return data
  }
  render () {
     const { getFieldDecorator } = this.props.form;
     const _this = this
     const treeCol =[
      {title: '机构名称',key: 'name',dataIndex: 'name',width: '300px',align: 'left',className: 'tdWidth', render(text, records,index) {       
        const obj = records
        return <Radio ref={records.name} data-name={records.name}  checked={_this.props.orgData.id == records.id} value={records.id}  
        onClick= {(e)=> _this.props.selectTree(e, obj)}> 
          { Utils.formatTableColumn(records.name) }
        </Radio>

      }},
      {title: '机构级别',key: 'orgGrade',dataIndex: 'orgGrade', width: '80px',align: 'center',className: 'tdWidth', render(orgGrade) {
        return Utils.formatTableColumn(orgGrade)
      }},
      {title: '更新时间',key: 'updateTime',dataIndex: 'updateTime',width: '100px',align: 'center', render(name) {
        return Utils.formateDateToYMD(name)
      }},
      {title: '备注',key: 'remark',dataIndex: 'remark',width: '180px',align: 'center',className: 'tdWidth', render(name) {
        return Utils.formatTableColumn(name)
      }}
    ];
    return (
      <div>        
        <Form layout="inline" name="orgForm">
          <FormItem  >
            <label >机构名称</label>
            {
              getFieldDecorator('layerOrgName', {
              })(
                <Input placeholder="机构名称" />
              )
            }
          </FormItem>
          <FormItem style={{ marginTop: 38, }} >
            <Button onClick={(item) => { this.searchOrgOpt(item) }} style={{ background: '#00BB29', color: "#fff", marginRight: 4 }} >查询</Button>
            <Button onClick={this.orgReset} style={{ background: '#ED1719', color: "#fff" }} type="danger">重置</Button>
          </FormItem>
        </Form>
        <UserManageBar title="详细数据" />
        <div className="reTable exTable borderTable orgTable">
          <Table
            rowKey= 'id'
            key={`table-${this.state.treeData && this.state.treeData.length}`}
            bordered={false}
            columns={treeCol}
            defaultExpandAllRows = {this.state.isExpand}
            loading={this.state.treeLoad}
            dataSource={this.state.treeData}
            childrenColumnName= 'childOrgs'
            onExpand = {this.onExpand}
            pagination={false}
            scroll={{ y: 340 }}   
          />  
        </div> 
      </div>
    )
  }
}
LayerOrgSelect = Form.create({})(LayerOrgSelect)

export default LayerOrgSelect