org-Tree

组织机构树组件

Tree

弹框

import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  // 控制弹窗
  const [visiable, setVisiable] = React.useState<boolean>(false) 
  // 返回数据
  const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
  React.useEffect(() => {
    console.log(selectedData);
  }, [selectedData])
  return (
    <>
      <button onClick={() => {setVisiable(!visiable)}}>
        {visiable ? "隐藏" : "展示"}
      </button>
      <Tree
        type='test'
        value={selectedData}
        onChange={setSelectedData}
        modal={true}
        visiable={visiable}
        title={"门店选择"}
        multiple={true}
        width={442}
        orgId={'5ffeaee575348f0001cd11cc'}
        defaultExpandedKeys={['1']}
        onOk={(keys: React.Key[]) => { 
          setSelectedData(keys);
          message.info(`选中了${keys.length}个组织`);
        }}
        onCancel={() => {
          setVisiable(false);
        }}
      />
    </>
  )
}

多选门店

import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  // 返回数据
  const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
  return (
    <>
      <Tree
        type='test'
        width={442}
        value={selectedData}
        onChange={setSelectedData}
        multiple={true} // 设置为true为多选
        orgId={'62b91e09fa09500001b7a6f4'}
        defaultExpandedKeys={['10027581']}
        isSearch={false}
      />
    </>
  )
}

单选门店

import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  // 返回数据
  const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
  return (
    <>
      <Tree
        type='test'
        value={selectedData}
        onChange={setSelectedData}
        isSearch={false}
        multiple={false} // 设置为false为单选
        width={442}
        orgId={'62b91e09fa09500001b7a6f4'}
        defaultExpandedKeys={['10027581']}
      />
    </>
  )
}

搜索

import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  // 返回数据
  const [selectedData, setSelectedData] = React.useState<React.Key[]>([]);
  return (
    <>
      <Tree
        type='test'
        value={selectedData}
        onChange={setSelectedData}
        isSearch={true}
        multiple={false} // 设置为false为单选
        width={442}
        orgId={'62b91e09fa09500001b7a6f4'}
        defaultExpandedKeys={['10027581']}
      />
    </>
  )
}

禁用

import * as React from 'react';
import Tree from 'yf-react-orgtree'
import { Button, message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  return (
    <>
      <Tree
        type='test'
        isSearch={false}
        multiple={false}
        disabled={true} // 设置为true 禁止选择
        width={442}
        orgId={'62b91e09fa09500001b7a6f4'}
        defaultExpandedKeys={['10027581']}
      />
    </>
  )
}

API

|参数|说明|类型|默认值|是否必传| |---|---|---|---|---| |orgId|机构ID(暂时只支持单个机构ID)，|string| |true| |type|环境值配置（'test' 、'prod'）|string| |true| |value|设置选中的值，设置后变成受控组件|React.Key[]|| |defaultSelected|默认选中的节点|React.Key[]|| |defaultExpandedKeys|默认展开的节点|React.Key[]|| |isSearch|是否开启搜索框|boolean|true| |checkStrictly|checkable 状态下节点选择完全受控（父子节点选中状态不再关联）|boolean|false| |height|组件高度|number、string|| |width|组件宽度|number、string|| |modal|是否弹窗模式|boolean|false| |visiable|控制弹窗展示|boolean|true| |title|弹窗标题|string|选择门店| |mask|控制遮罩展示|boolean|fasle| |multiple|控制多选或者单选|boolean|true| |disabled|禁用树|boolean|fasle| |okText|ok字幕|string|确定| |cancelText|取消字幕|string|取消| |onOk|Ok的回调|(keys: React.Key[], selectNodata: ITreeNode[]) => void|| |onChange|值修改的回调|(orgIds: React.Key[], selectNodata: ITreeNode[]) => void|| |onCancel|取消的回调|() => void||