@pluve/yf-react-orgtree NPM

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