feat: Add tree select form item

add tree select form item

Change-Id: I203e63f6e11608ff7cffcb5f5e09518e880303f6

src/components/FormItem/TreeSelect/index.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { TreeSelect } from 'antd';
+import PropTypes from 'prop-types';
+
+export default class Index extends Component {
+  onChange = (value) => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  getValue = () => {
+    const { value, isWrappedValue } = this.props;
+    if (value === undefined) return value;
+    return isWrappedValue ? value.value : value;
+  };
+
+  render() {
+    const {
+      treeData,
+      placeholder = t('Please select'),
+      disabled = false,
+    } = this.props;
+    return (
+      <TreeSelect
+        className={this.props.className}
+        showSearch
+        allowClear
+        placeholder={placeholder}
+        treeData={treeData}
+        disabled={disabled}
+        value={this.getValue()}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+Index.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  isWrappedValue: PropTypes.bool,
+  treeData: PropTypes.array,
+  onChange: PropTypes.func,
+};

src/components/FormItem/index.jsx

@@ -57,6 +57,7 @@ import MetadataTransfer from './MetadataTransfer';
 import NetworkSelectTable from './NetworkSelectTable';
 import VolumeSelectTable from './VolumeSelectTable';
 import TabSelectTable from './TabSelectTable';
+import TreeSelect from './TreeSelect';
 // import styles from './index.less';
 
 const type2component = {
@@ -101,6 +102,7 @@ const type2component = {
   'metadata-transfer': MetadataTransfer,
   aceEditor: AceEditor,
   'input-json': JsonInput,
+  'tree-select': TreeSelect,
 };
 
 export default class FormItem extends React.Component {