app-base-web/src/library/tree/index.js

web development common base package.

import React from 'react';
import { TreeSelect } from 'antd';
import axios from '../util-axios';

export default class Tree extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      label: undefined,
      treeData: this.props.treeData || [
        // { id: -1, pId: 0, value: '', title: '', isLeaf: false }
      ],
    };
    this.initData();
  }
  async initData() {
    if (this.props.url) {
      let rs = await axios.post(this.props.url, this.props.params || {});
      this.setState({ treeData: rs.data });
    }
  }
  onChange(value, label, extra) {
    if (value) {
      if (value instanceof Array) {
        value = JSON.stringify(value);
      } else {
        value = JSON.stringify([value]);
      }
    }
    if (label) label = JSON.stringify(label);
    if (this.props.onChange) this.props.onChange(value, label);
    else this.setState({ value, label });
  }
  render() {
    let _value = this.state.value;
    if (this.props.value) _value = JSON.parse(this.props.value)
    const tProps = {
      placeholder: this.props.placeholder,
      treeData: this.state.treeData,
      "value": _value,
      treeCheckable: this.props.treeCheckable,
      treeDefaultExpandAll: this.props.treeDefaultEexpandAll == false ? false : true,
      showCheckedStrategy: this.props.showCheckedStrategy || "SHOW_CHILD",//SHOW_CHILD |  SHOW_ALL | SHOW_PARENT
      searchPlaceholder: this.props.placeholder || '请选择',
      showSearch: this.props.showSearch || true,
      treeNodeFilterProp: this.props.treeNodeFilterProp || "title",
      style: {
        width: '100%'
      },
      dropdownStyle: { maxHeight: 600, overflow: 'auto' },
      onChange: this.onChange.bind(this)
    };
    return (<TreeSelect className="app-tree" treeDataSimpleMode {...tProps} />);
  }
}