SOURCE

import { Component } from 'react';
import {
  Tree,
  Modal,
} from 'antd';
import api from '@/utils/api';


export default class LimitOrgDialog extends Component {
  state = {
    orgs: [],
    checkedOrgIds: [],
    visible: false
  };

  componentDidMount() {
    var self = this;
    api.get('admin/listOrg')
      .then(orgs => {
        const toTreeNode = org => {
          return {
            key: org.id,
            value: org.id,
            title: org.name,
            children: org.children.length ? org.children.map(toTreeNode) : [],
            isLeaf: org.children.length == 0
          };
        };
        self.setState({orgs: orgs.map(toTreeNode)});
      });
  }

  show(options) {
    this.options = options;
    const {onSave, checkedOrgIds} = this.options;
    this.setState({
      visible: true,
      checkedOrgIds: typeof checkedOrgIds == 'string' ? checkedOrgIds.split(',') : checkedOrgIds
    });
    this.onSave = onSave || (() => { });
  }

  render() {
    const { visible } = this.state;
    return (
      <Modal
        title={visible && this.options.mode == 'select' ? "选择服务社区" : '服务社区'}
        visible={visible}
        width={500}
        centered={true}
        cancelButtonProps={{ disabled: true, ghost: true }}
        okText="关闭"
        okType="normal"
        onOk={() => {
          this.setState({visible: false});
          this.onSave(this.state.checkedOrgIds);
        }}
        onCancel={() => {
          this.setState({visible: false});
          this.onSave(this.state.checkedOrgIds);
        }} >
        <Tree
          treeData={this.state.orgs}
          checkedKeys={this.state.checkedOrgIds}
          onCheck={(checkedKeys) => {
            if (this.options.mode == 'select') {
              this.setState({checkedOrgIds: checkedKeys});
            }
          }}
          checkable={true}
          style={{width: 400}} />
      </Modal>
    );
  }
}