$ npm install @yonyou/ref-tree --save
或
$ ynpm install @yonyou/ref-tree --save
引入
import {RefTree, RefTreeWithInput, createRefTree} from 'ref-tree';
或
import {RefTree, RefTreeWithInput, createRefTree} from '@yonyou/ref-tree';
参照弹出窗,没有输入框,使用时可根据自己需要定义具体的文本框。
带文本框的参照弹出窗。在 RefTree 基础上封装实现。
非 ReactJS 调用方式,与 RefTree 相同没有输入框,使用时可根据自己需要定义具体的文本框。
参数 | 类型 | 默认值 | 说明 | 必选 |
---|---|---|---|---|
title | string |
空 | 打开上传的模态框显示的标题文字 | 否 |
className | string |
空 | 参照class样式,作用于弹出层和 RefTreeWithInput 输入框的样式,默认为空。 | 否 |
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 显示注意该属性为临时兼容配置后期可能随时会弃用 |
否 |
defaultExpandAll | bool |
false | 展开所有节点 true 展开,false 不展开 | 否 |
checkStrictly | bool |
false | heckable状态下节点选择完全受控(父子节点选中状态不再关联), false 关联选择,true 不关联 | 否 |
param | objecet |
{} | 接口请求参数 | 是 |
refModelUrl | object |
{treeUrl:''} | 弹出层数据接口地址,为了兼容其他参照保留了多连接配置。(详解如下) | 是 |
onSave | function( record:object ) |
-- | 保存回调函数,返回已选择的记录详细数据。 | 否 |
onCancel ` | function( )` | -- | 关闭弹出层 | 否 |
注意:以下参数为
<RefTreeWithInput/>
独有。对其他两个类型的引用无效。
参数 | 类型 | 默认值 | 说明 | 必选 |
---|---|---|---|---|
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": "马帅" }
]
refModelUrl:{
// treeUrl 为 ref-tree 的数据来源。
treeUrl: http://workbench.yyuap.com/ref/rest/iref_ctr/commonRefsearch'
}
$ cd
ac-refer/packages/ref-tree
$ npm install
$ npm run dev