介绍

跟企业微信的人员管理差不多， 使用 react + antd 开发

安装

yarn add pull-person || npm i pull-person

在线体验

点击进入项目 codesandbox

调用

<PullPersion
    help  是否显示帮助文档
    onChange={(val)=>{}}  切换函数 [fn]
    transform={(val)=>{}} 在这个函数中需return出修改过得数据 [fn]
    title = '请选择'  弹出层左上角的标题 默认是  "请选择"  [string]
    loading = {false}  是否正在加载   默认false  [Boole]
    myFetch={}  请求方法 必传  [fn]  --未完成 暂未使用
    fetchConfig = {{apiName:'string', params:{}}}  必传  [object] --未完成 暂未使用
    ref={(el)=>this.aaa = el}
    label=""         可传可不传 [string || rDom]
    edit={true}      是否是编辑模式 默认true  [ Boole]
    selectType="0"   0部门和人员都能选 1只能选部门 2只能选人员   默认0   [string]
    treeData={}      树结构数据  {} || [] 根节点可以是多个可以是一个  [array || object]
    maxNumber={}     最多选择数量  [number]  默认 999
    minNumber={}     至少选择数量  [number]  默认 0
    visible     是否显示弹出层 [boolen] 默认false
    //设置节点点击不可选择
    nodeClick={(nodeInfo)=>{return {canSelect:false}}}

    默认数据 (这里面数据结构不需要children)  [{label,value,type}, {label,value,type}]   [array]
    defaultData = []

    useCollect  //使用收藏功能
    collectApi="appGetSysFrequentContactsList"  //查询收藏人员     接受后台参数[{xx:xxx,...}]
    collectApiByAdd = "appAddSysFrequentContacts" //新增收藏人员   传给后台的参数[{xx:xxx,...}]
    collectApiByDel = "appRemoveSysFrequentContacts" //删除收藏人员  传给后台的参数[{xx:xxx,...}]

    //搜索配置
    searchApi = ''  搜索时调用的api  [string]
    searchParamsKey = 'searchText';//搜索文字的K 默认是'searchText'   [string]
    searchOtherParams = {{pageSize:999}};//搜索时的其他参数  [object]

    k = { 默认就是用以下这些键值  （针对树结构的）
        {
            label: 'label',
            value: 'value',
            type: 'type',
            children: 'children',
            department:"departmentName"
        }
    }
插件里的一些文字
textObj = {{
    loading: 'loading...',  加载中的文字
    noData:'暂无数据',
    rightTitle: '已选择的部门或成员',   右边列表的文字
    maxNumber:'选择达到了上限',
    minNumber:'选择个数不足',
    }}
  />

#####方法

• 获取数据： let sData = this.aaa.getSelectData();

• 设置数据： let sData = this.aaa.setData(); || 直接改变 defaultData 属性也可以

• 树结构数据格式：

  { value:'', label:'', type:'0', //0 根节点 1 部门 2 成员 children:[] }

界面截图