$ ynpm install ref-tree-transfer --save
或
$ ynpm install @yonyou/ref-tree-transfer --save

引入

import {RefTreeTransfer, RefTreeTransferWithInput, createRefTreeTransfer} from 'ref-tree-transfer';
或
import {RefTreeTransfer, RefTreeTransferWithInput, createRefTreeTransfer} from '@yonyou/ref-tree-transfer';

树形参照分类为下列三种

RefTreeTransfer

参照弹出窗，没有输入框，使用时可根据自己需要定义具体的文本框。

RefTreeTransferWithInput

带文本框的参照弹出窗。在 RefTreeTransfer 基础上封装实现。

createRefTreeTransfer

非 ReactJS 调用方式，与 RefTreeTransfer 相同没有输入框，使用时可根据自己需要定义具体的文本框。

API

参数 类型 默认值 说明 必选
title string 空 打开上传的模态框显示的标题文字 否
className string 空 参照class样式，作用于弹出层和 RefTreeTransferWithInput 输入框的样式，默认为空。 否
searchable bool true 是否显示搜索框，弹出层是否带有搜索框，true 显示，false 不显示。 否
emptyBtn bool true 是否显示清空按钮，true 显示，false 不显示 否
multiple bool false 是否单选， true 单选，false 多选 否
backdrop bool true 弹出层是否有模态层，true 显示，false 不显示 否
buttons object okText: "确认", //确认按钮
cancelText: "取消", //取消按钮
clearText: "清空已选" //清空已选按钮		 弹出层工具栏三个按钮的文字，若 bottomButton 为 false 则该配置无效。 否
bottomButton bool true 是否显示弹出层下边框工具栏， false true 显示注意该属性为临时兼容配置后期可能随时会弃用 否
textOption object -- 左边树和右边处穿梭框的标题
如：
{
leftTitle:'树',
rightTitle:'穿梭框'
}		 否
hasPage bool true 是否有分页条，true 有，false 没有 否
tabData array true 当参照有多个类型的数据时可启用tab标签页来区分，当个点击页签的时候，会根据配置的key再去查询。如：
[
{"title":"常用","key":"commonUse"},
{"title":"全部","key":"total"},
{"title":"推荐","key":"recommed"}
]		 否
defaultExpandAll bool false 展开所有节点 true 展开，false 不展开 否
checkStrictly bool false heckable状态下节点选择完全受控（父子节点选中状态不再关联）, false 关联选择，true 不关联 否
param objecet {} 接口请求参数 是
refModelUrl object {tableBodyUrl:'',tableBarUrl:''} 弹出层数据接口地址，为了兼容其他参照保留了多连接配置。
如：
{
treeUrl: '/api/user/blobRefTreeTransfer.json',
tableBodyUrl:'blobRefTreeTransferGrid',//表体请求
tableBarUrl:'refInfo',//表头请求
}		 是
onSave function( record:object ) -- 保存回调函数，返回已选择的记录详细数据。 否
onCancel ` function( )` -- 关闭弹出层 否

RefTreeTransferWithInput 增量 API

注意:以下参数为 <RefTreeTransferWithInput/>独有。对其他两个类型的引用无效。

参数 类型 默认值 说明 必选
displayField string 或 function '{refname}' 记录中显示的键。
当为字符串时则会根据{}包裹的增则匹配替换。
如：'人员姓名：{refname}，编号：{refcode}'
当为函数时则需自定义返回内容，参数为迭代已选择的记录。
如：
displayField: (record)=> ${record.refname}-${record.refname}		 否
valueField string 'refcode' 待提交的 value 的键。 否
checkedArray array [] 已选的数据详细记录，此配置为本地配置不做缓存不做服务器校验。` 否
matchUrl string 空 查询并校验 checkedArray 中的 valueField 对应参照的详细记录。 否
rules array [] 表单校验规则，参考 rc-from，或使用的 from 组件具体的校验规则写法。`如： rules：[{required: true, message: '请选择该引用',}] 否
form form：object {} 当前表单的 form 对象。 否.

参数详解

eg:

checkedArray:
//需要组装出详细记录，但只要保证 displayField 和 valueField 所标记的字段存在即可， 如：
[
    { "refpk": "857c41b","refcode": "wujd", "refname": "吴惊道" },
    { "refpk": "65c2c42", "refcode": "ms", "refname": "马帅" }
]

开发调试


$ cd 

ac-refer/packages/ref-treetransfer

$ npm install

$ npm run dev