yyuap-ref
Version:
cloud os fe ref project which is based on tinper
601 lines (583 loc) • 21.6 kB
Markdown
```js
const option = {
title: '弹窗标题',//适配 reftype =1234
refType:3,//1:树形 2.单表 3.树卡型 4.多选
isRadio:false,//1.true 单选 2.false多选
hasPage:true,//是否显示分页
backdrop:true,
showLine:false,//树参照是否显示连线
openIconClassName:"uf-reduce-s-o",//树参照展开图标设置
closeIconClassName:"uf-add-s-o",//树参照关闭图标设置
multiple:false,
treeloadData:false,//树参照异步加载
defaultExpandAll:false,//树默认全部展开
isDefaultSelect:true,//树表默认是否选择第一个节点
checkAllChildren:false,//树参照选择所有子选项按钮
paginationOption: {gap: false},//分页组件参数传递
emptyBtn:true,//清空按钮是否显示
searchPlaceholder:'placehoder',//搜索框传值
tabData:[//tab标签 不需要可传空[]
{"title":"分类1","key":"Classification1"},
{"title":"分类2","key":"Classification2"},
{"title":"分类3","key":"Classification3"}
],// option中可增加defaultActiveKey作为默认tab标签
buttonText:{ok:"确定",cancel:"取消"},//按钮文字配置
param:{//url请求参数
refCode:'test_treeTable',//test_common||test_grid||test_tree||test_treeTable
locale:'zh_CN'//en_US||zh_TW||fr_FR||de_DE||ja_JP/ 多语参数
},
refModelUrl:{
TreeUrl:'http://workbench.yyuap.com/ref/rest/iref_ctr/blobRefTree', //树请求
TreeGridUrl:'http://workbench.yyuap.com/ref/rest/iref_ctr/blobRefTree', //树表树请求
GridUrl:'http://workbench.yyuap.com/ref/rest/iref_ctr/commonRefsearch',//单选多选请求
TableBodyUrl:'http://workbench.yyuap.com/ref/rest/iref_ctr/blobRefTreeGrid',//表体请求
TableBarUrl:'http://workbench.yyuap.com/ref/rest/iref_ctr/refInfo',//表头请求
totalDataUrl:'http://workbench.yyuap.com/ref/diwork/iref_ctr/matchPKRefJSON',//根据refcode请求完整数据
},
checkedArray:[],//已选中数据回填
onCancel: function (p) {
console.log(p)
},
onSave: function (sels) {
console.log(sels);
},
onBeforeAjax: function (p) {
console.log(p)
},
onAfterAjax: function (p) {
console.log(p);
},
className:'',
}
```
参数|说明|类型
---|-----|----
title|弹窗标题|`string`
refType|1:树形 2.单表 3.树卡型 4.多选 5.其他（默认树卡）|`number`
isRadio|1.true 单选 2.false多选 default:false|`boolean`
hasPage|分页标志 true:带分页 false:不带分页 default:false|`boolean`
backdrop|是否显示遮罩层 可不传 default:true|`boolean`
showLine|树参照是否带有连线 default:false|`boolean`
openIconClassName|树参照展开图标设置 （只支持tinper-bee图标）|`String`
closeIconClassName|树参照关闭图标设置 （只支持tinper-bee图标）|`String`
paginationOption|分页组件参数传递 （只支持tinper-pagination 1.0.2版本参数）|`object`
treeloadData|树参照是否异步加载 default:false|`boolean`
tabData|标签数据 每个tab标签含有title与key|`Array<Object>`
param|url的请求参数 |`object`
refModelUrl|url的请求地址 |`object`
checkedArray|已选择数据项|`Array<Object>`
onCancel|取消时回调|`function`
onSave|确认时回调|`function`
onBeforeAjax|打开参照时回调|`function`
onAfterAjax|数据请求成功后回调|`function`
className|参照样式控制|`String`
searchPlaceholder|搜索框传值|`String`
totalDataUrl|checkedArray为['refcode'],请求数据|`String`
multiple|树参照下提供复选 (单树)|`Boolean`
defaultExpandAll|树参照节点是否全部展开 |`Boolean`
isDefaultSelect|树表默认是否选择第一个节点(默认true) |`Boolean`
refShowClassCode|树表/表 类型 分类传参健值 |`String`
1. 加载:
1. 利用es模块加载的方式引入参照组件,引入 createModal 方法;
2. 利用script引入参照打包的js文件(CDN:https://cdn.yonyoucloud.com/yyuap/ref/1.1.1/yyuap-ref.js),window上绑定createModal方法;
3. 利用amd或者require加载,会暴露出createModal方法;
4. 支持npm加载方式(npm install yyuap-ref)(推荐);引入方式: import createModal from yyuap-ref
2. 使用:
1. 根据上述参数说明进行配置,作为一个option参数;
2. 利用createModal(option)即可创建参照;
3. 注销:
1. createModal方法的返回值为destory方法,调用可注销参照.
2. 已集成到按钮组件中,无需单独调用destory方法,在点击保存、取消时自动注销.
参数|说明|类型
---|-----|----
refClientPageInfo.currPageIndex|滚动加载数据时需要参数 表示当前页数|`string`
refShowClassCode|tab标签切换时所带tab标签的key值|`string`
content|搜索时的内容|`string`
condition(原id)|树节点切换时的key值|`string`
treeNode|树形参照异步加载，传入treeNode参数返回子节点数组|`string`
```json
{
"data": [{
"children": [{
"children": [],
"pid": "lkp",
"refpk": "857c41b7-e1a3-11e5-aa70-0242ac11001d",
"refcode": "wujd",
"id": "wujd",
"refname": "名字1"
}, {
"children": [],
"pid": "lkp",
"refpk": "780aca16-e1a3-11e5-aa70-0242ac11001d",
"refcode": "fzl",
"id": "fzl",
"refname": "名字2"
}],
"pid": "",
"refpk": "708918f5-e1a3-11e5-aa70-0242ac11001d",
"refcode": "lkp",
"id": "lkp",
"refname": "名字3"
}],
"page": {
"pageSize": 100,
"currPageIndex": 0,
"pageCount": 0
},
"allpks": null
}
```
参数|说明|类型
---|-----|----
data|包含所有的树数据 包含参数children,id,refname,refpk |`Array<object>`
children|包含子树数据 包含参数同data |`Array<object>`
id|....|`string`
refname|树节点名字|`string`
refpk|当前树节点的唯一标识|`string`
other|非必要参数|`null`
isLeaf|异步加载必要 是否是叶子节点|`boolean`
```json
{
"data": [{
"refpk": "xxcc2",
"refcode": "wujd",
"refname": "名字1"
}, {
"refpk": "xxcc4",
"refcode": "test4",
"refname": "测试4"
}],
"page": {
"pageSize": 50,
"currPageIndex": 0,
"pageCount": 2
},
"allpks": null
}
```
参数|说明|类型
---|-----|----
data|包含所有的列表数据 数组内一个对象为一个节点|`Array<object>`
refname|树节点名字|`string`
refpk|当前节点的唯一标识|`string`
other|非必要参数|`null`
```json
{
"strFieldCode": ["refcode", "refname", "refremark"],
"strFieldName": ["编码", "名称", "备注"],
}
```
参数|说明|类型
---|-----|----
strFieldName|表头的各个名字|`Array`
strFieldCode|表头的各个名字所对应的唯一标示|`Array`
other|非必要参数|`null`
```json
{
"data": [{
"refremark": "备注",
"refpk": "xxcc41",
"refcode": "test41",
"refname": "测试41"
}, {
"refremark": "备注",
"refpk": "xxcc42",
"refcode": "test42",
"refname": "测试42"
},],
"page": {
"pageSize": 50,
"currPageIndex": 0,
"pageCount": 2
},
"allpks": null
}
```
参数|说明|类型
---|-----|----
data|包含所有的表格数据|`Array<object>`
param-in-object|根据表头的strFieldCode数组来进行设置|`string`
refpk|当前节点的唯一标识|`string`
page|用来进行数据滚动加载的翻页数据|`object`
pageCount|总数据页数(页数计算时从0开始)|`number`
other|非必要参数|`null`
```js
import RefWithInput from 'yyuap-ref/dist2/refWithInput'
import 'yyuap-ref/dist2/yyuap-ref.css'//参照样式
```
```js
<RefWithInput option={option} disabled={false} form={this.props.form}/>
option如下 disbale:是否禁用 form:option.verification打开时传入表单校验属性
```
```js
const option = {
refType:6,//5 穿梭框; 6 多过滤项
title:'参照默认标题',
multiple:false,//6类型 设置单选true 多选false
param:{//url请求参数
refCode:'common_ref',
tenantId:'',
sysId:'',
transmitParam:'EXAMPLE_CONTACTS,EXAMPLE_ORGANIZATION',
locale:'zh_CN'//en_US||zh_TW||fr_FR||de_DE||ja_JP/ 多语参数
},
refModelUrl:{
TreeUrl:'/rest', //树请求
TableBodyUrl:'/tablebody',//表体请求
// TableBodyUrlSearch:'/tablebodySearch',//全局表体请求 后台没配接口需注释掉
TableBarUrl:'/tablebar',//表头请求
SearchListUrl: '/searchlisturl' // Input下拉搜索请求
},
checkedArray: [],//checkedArray与(filterRefUrl,keyList)二选一
filterRefUrl:'/iuap_pap_quickstart/common/filterRef',//get
keyList:self.state.saveKeys,//选中的key
onSave: function (sels,showVal) {
//showVal下一次传给showVal,作为参照input初始值
console.log(sels);
},
filterKey:[{title:'人员名称',key:'peoname'},{title:'日期',key:'timedate',type:'date'}],
//自定义搜索框 设置type为'date'时搜索框为 日期类型
textOption:{
leftTitle:'品类结构:',
rightTitle:'品类列表:',
leftTransferText:'待选品类',
rightTransferText:'已选品类',
leftInfo:[{text:'流水号',key:'refname'},{text:'品类编码',key:'refname'},{text:'品类描述',key:'refname'}],
rightInfo:[{text:'流水号',key:'refname'},{text:'品类编码',key:'refname'},{text:'品类描述',key:'refname'}],
},
buttonText:{ok:"确定",cancel:"取消"},//按钮文字配置
showVal:'初始值',//参照input
showKey:'refname',//展示字段
verification:false,//是否进行校验
verKey:'aaaa',//校验字段
verVal:'111',//表单初始值
verShowMessage:'错误提示',//表单验证错误提示
className:'',//弹框外层class添加
colunms:[{width:100,xxx:''},{width:100,xxx:''},{width:200}],
ifInputChange: true,//是否开启 Input 输入检索功能
searchshowKey:['purchase_org_code','org_name'],//下拉展示字段
searchChange:(value) => { console.log(value) },//搜索选取回调
searchPageSize:10,//搜索请求传参
//Table 列的配置表
}
```
参数|说明|类型
---|-----|----
refType|5:穿梭框;6多过滤表|`Number`
param|请求参数|`Object`
refModelUrl|请求地址(get)|`Object`
说明|checkedArray与(filterRefUrl,keyList)二选一|初始渲染
checkedArray|选中项(打开时传递数据)|`Array<Object>`
filterRefUrl|根据key请求数据|`String`
keyList|选中的key|`Array<String>`
onSave|保存回调|`Function`
filterKey|穿梭框过滤项|`Array<Object>`
textOption|文字自定义|`Object`
showVal|参照input初始值|`String`
showKey|展示对应字段|`String`
verification|是否表单校验(默认关闭:verkey,verval)|`Boolean`
verKey|校验key|`String`
verVal|默认值|`String`
verShowMessage|表单验证错误提示|`String`
multiple|单选true 多选false (默认多选false)|`Boolean`
className|弹窗外层类添加|`String`
colunms|列的配置表|`Array`
ifInputChange|是否开启 Input 输入检索功能（开启需要设置SearchListUrl参数）|`Boolean`
参数|说明
---|-----
leftTitle|左树标题
rightTitle|右标题
leftTransferText|左穿梭框名字
rightTransferText|右穿梭框名字
leftInfo|`Array<Object>` text,key,分别为显示文字以及对应key值
rightInfo|`Array<Object>` text,key,分别为显示文字以及对应key值
```json
{
"data": [{
"refpk": "001",
"children": [{
"refpk": "001001",
"children": [{
"refname": "测试组222织",
"refpk": "001011"
}],
"refname": "测试a组织"
}],
"refname": "云平台事业部"
}, {
"refpk": "002",
"children": [{
"refpk": "002002",
"children": [{
"refname": "测试组222织",
"refpk": "001021"
}],
"refname": "NC开发部-下级"
}],
"refname": "NC开发部"
}, {
"refpk": "006",
"children": [],
"refname": "一级组织6"
}]
}
```
参数|说明|类型
---|-----|----
data|包含所有的树数据 |`Array<object>`
children|包含子树数据(有children非叶子(不可选);无children叶子(可选)) |`Array<object>`
refname|树节点名字|`string`
refpk|当前树节点的唯一标识|`string`
other|可增加leftInfo与rightInfo对应的key|`String`
```json
//表头
{
"strFieldCode": ["peoname", "peocode","keke","peoname1", "peocode1","keke1"],
"strFieldName": ["人员名称", "人员编码","keke","人员名称1", "人员编码1","keke1"],
}
//表体
{
"data": [{
"peocode": "dddddd",
"rownum_": "1222",
"pid": "a25e19df-e2e2-4fc6-86d2-c717daf65b36",
"refpk": "1",
"id": "14e0220f-1a86-4861-8f74-f7134cbe3333",
"peoname": "2"
}, {
"peocode": "dddddd",
"rownum_": "2",
"pid": "a25e19df-e2e2-4fc6-86d2-c717daf65b36",
"refpk": "2",
"id": "14e0220f-1a86-4861-8f74-f7134cbe2wqw235b",
"peoname": "dddddd"
}]
}
```
参数|说明|类型
---|-----|----
表格数据| 非懒加载 首次请求全部数据 | 分页等由前端过滤
strFieldName|表头的各个名字|`Array`
strFieldCode|表头的各个名字所对应的唯一标示|`Array`
data|包含所有的表格数据|`Array<object>`
refpk|当前节点的唯一标识|`string`
param-in-object|根据表头的strFieldCode数组来进行设置|`string`
other|对应filterKey传入需要key|`null`
tip:filterKey为[{title:'测试a',key:'a'},{title:'测试b',key:'b'}],那么会生成两个过滤条件,分别过滤参数为表格数据的a,b
- yyuap-ref
- 1.0.0 测试版本
- 1.0.1 正式版本
- 1.0.2 修复部分问题
- 1.0.3 支持修改url请求地址与参数
- 1.0.4 增加支持单选 完善文档
- 1.0.5 集成注销事件
- 1.0.6 增加对分页的支持
- 1.0.7 更新readme
- 1.0.8 修复分页bug
- 1.0.9 gulp 改打包方式 测试
- 1.0.10 gulp alise错误修复
- 1.0.11 修复icon引入错误
- 1.0.12 增加参照样式控制
- 1.0.13 参照无数据时样式
- 1.0.14 参照样式控制提升
- 1.0.15 参照样式调整
- 1.0.16 参照样式checkbox调整
- 1.0.17 参照选中逻辑调整 css调整
- 1.0.18 本地启动服务适配ie9 添加全选逻辑
- 1.0.19 树卡无数据bug修复
- 1.0.20 增加全部数据请求可配地址
- 1.0.21 增加双击事件
- 1.0.22 bug调整
- 1.0.23 调整遮罩层与dependence
- 1.0.24 适配需求 (表头 code->refcode name->refname)
- 1.0.25 checkbox依赖调整
- 1.0.26 分页带请求参数
- 1.0.27 适配需求摘出
- 1.0.28 写死版本号
- 1.0.29~35 调整具体版本 适配工作台
- 1.0.36 广适配(checkbox调整)
- 1.0.37 适配(checkbox调整 diwork)
- 1.0.38 适配(checkbox调整 非diwork)
- 1.0.39 样式调整
- 1.0.40|41 适配diwork checkbox
- 1.0.42|43 react版本适配
- 1.0.44 完成peer
- 1.0.45 工作台 搜索css调整
- 1.0.46 非工作台 搜索css调整
- 1.0.47 工作台 搜索 双击事件
- 1.0.48 非工作台 搜索 双击事件
- 1.0.49 非工作台 树 style
- 1.0.50 reradme更改
- 1.0.51-53 树参照调整(52工作台 53非工作台)
- 1.0.54-56 树参照在树卡型下的调整(54工作台 55|6非工作台)
- 1.0.57 树参照 点击加载
- 1.0.58 单选多选的样式问题
- 1.0.59 树表参照 异步加载
- 1.0.60 三一参照支持 穿梭框参照 多过滤表格
- 1.0.61 树表参照 异步加载BUG
- 1.0.62 css冲突
- 1.0.63|4|5 暂时删除31参照
- 1.0.66|7 css module
- 1.0.68 版本
- 1.0.69 增加input参照
- 1.0.70 css
- 1.0.71 三一参照调整
- 1.0.72 三一参照调整2
- 1.0.73|4|5|6 三一参照调整3
- 1.0.77 三一参照校验
- 1.0.78 三一参照 支持checkedArray
- 1.0.79 readme更新
- 1.0.80 增加showVal,点击请求接口
- 1.0.81 返回数据为null处理,readme更新
- 1.0.82 控制用户自定义显示值
- 1.0.83 控制用户自定义显示值
- 1.0.84 checkedArray key
- 1.0.85 滚动条撑开err
- 1.0.86 标题 title
- 1.0.87 树参照选中所有子选项功能 / 按钮可配置文字
- 1.0.88 树参照 包含下级
- 1.0.89 diwok css
- 1.0.90 diwok css
- 1.0.91 树参照 包含下级 BUG
- 1.0.92 清空操作/穿梭框排序
- 1.0.93 样式问题
- 1.0.94 表分页 已选显示BUG
- 1.0.95 多语传参配置
- 1.0.96/97 样式冲突
- 1.0.98 三一样式
- 1.0.99 添加onBeforeAjax onAfterAjax方法
- 1.1.00 搜索框点击优化
- 1.1.01 多语
- 1.1.2 穿梭框 标题
- 1.1.3 穿梭框 showVal 显示
- 1.1.4 三一Table 搜索日期类型添加
- 1.1.5 三一Table 样式问题
- 1.1.6 分页传参问题
- 1.1.7 分页传参从0开始
- 1.1.8 多语修改传参key
- 1.1.9 三一 6类型 过滤框样式
- 1.1.10 三一 6类型 tooltips
- 1.1.11 三一 6类型 colunms参数添加
- 1.1.12 三一 6类型 点击多次打开BUG
- 1.1.13 打包BUG
- 1.1.14 穿梭框 树父节点点击发送请求/添加fetch polyfill
- 1.1.15 bee-datepicker
- 1.1.16 fetch polyfill
- 1.1.17 5类型点击打开BUG/穿梭框全局搜索
- 1.1.18 2，4类型点击打开BUG
- 1.1.19 1-4类型高度调整/Tabs多语BUG/5类型 全局搜索兼容
- 1.1.20 保存按钮改为确认/6类型中文搜索encode/树默认展开配置defaultExpandAll
- 1.1.21 Table显示条数BUG
- 1.1.22 6类型搜索框BUG
- 1.1.23 Input框下拉搜索功能/6类型 单选优化
- 1.1.24 升级select
- 1.1.25 Input框下拉搜索功能优化/6类型 单选优化
- 1.1.26 请求延时60S/添加isDefaultSelect
- 1.1.27 三一（input回显、下拉显示多个字段）
- 1.1.28 三一（input回显BUG）
- 1.1.28-1 diwork 专属版本
- 1.1.29 树表单选BUG
- 1.1.30 datepicker BUG
- 1.1.30-1 datepicker BUG2
- 1.1.31 树表分类参数名改为 refShowClassCode
- 1.1.32 树表添加双击事件
- 1.1.33 matchPKRefJSON 方法ID传参改为 字符串
- 1.1.34 穿梭框升级版本 checkbox可点击
- 1.1.35 包含下级多语
- 1.1.36 火狐样式兼容
- 1.1.37 树表搜索清空 点击树节点传参BUG
- 1.1.38 6类型 单选返回BUG
- 1.1.39 树类型 返回参数改为全部数据
- 1.1.40 树类型 样式问题
- 1.1.41 7类型添加/树表样式问题修复
- 1.1.42 7类型样式问题/ESC键关闭窗口
- 1.1.43 包含下级回显BUG
- 1.1.44 树滚动条
- 1.1.45 树滚动条组件更换
- 1.1.46 分类默认key发送/树表样式调整
- 1.1.47 包含下级回显
- 1.1.48 refwithinput 表单验证错误提示
- 1.1.49 去掉无用的scrollbar
- 1.1.50 7类型删除BUG/树类型添加图标设置
- 1.1.51 分页参数/包含下级圆点/样式问题/表格回显
- 1.1.52 繁体多语
- 1.1.53 人力兼容
- 1.1.54 升级bee-table组件
- 1.1.55 人力兼容树表
- 1.1.56 table选中行样式/7类型多语
- 1.1.57 table已选择搜索显示BUG修复
- 1.1.58 树类型异步加载搜索传参
- 1.1.59 refwithinput 回显BUG
- 1.1.60 type7 反选BUG
- 1.1.61 1类型 包含下级再次选中BUG
- 1.1.62 1类型 返回重复BUG
- 1.1.63 树类型 包含下级反选 异步加载选中BUG
- 1.1.64 refwithinput 回显多次调用值为空BUG
- 1.1.65 穿梭框5类型 多语适配
- 1.1.66 穿梭框5类型 样式问题
- 1.1.67 穿梭框5类型 样式问题
- 1.1.68 单表类型 已选列表checkboxall 反选问题
- 1.1.69 升级bee-modal到2.0.15
- 1.1.70 树形单选数据返回BUG修复
- 1.1.71 7树形 已选数据回显问题修复
- 1.1.72 树类型 懒加载 带搜索值问题修复
- 1.1.73 树类型 懒加载 搜索后展开状态异常问题修复
- 1.1.74 树类型 包含下级 回显BUG修复
- 1.1.75 树类型 包含下级选择后 树节点开展开
- 1.1.76 树类型 折叠复原问题修复
- 1.1.77 树7类型 包含下级点击BUG
- 1.1.78 搜索删除按钮颜色修改
- 1.1.79 树类型 折叠复原问题修复
- 1.1.80 树类型 数据回显勾选问题
- 1.1.81 添加lading动画
- 1.1.82 添加tree lading动画
- 1.1.83 树类型 父节点点击包含下级 子节点不可选包含下级
- 1.1.84 树类型 多选不可点击节点文字
- 1.1.85 树类型 包含下级选中问题
- 1.1.86 树类型 包含下级 异步加载回显问题
- 1.1.87 树类型 节点文字过长显示问题
- 1.1.88 树类型 节点文字过长显示问题 hover显示全部
- 1.1.89 树类型 包含下级 回显问题
- 1.1.90 搜索框 placeholder 修改
- 1.1.91 7类型去掉双击
- 1.1.92 多语英文描述
- 1.1.93 searchPlaceholder 参数添加，用于搜索 placeholder 传参
- 1.1.94 包含下级反选不取消父节点，树表树节点可反选，表翻页显示问题
- 1.1.95/96 分页从1开始
- 1.1.97 bee-loading 升级
- 1.1.98/99 树类型 hover 描述
- 1.2.0 fetch->get
- 1.2.1 bug
MIT