yyuap-refproject

v1.0.0

Published

2 years ago

cloud os fe ref project which is based on tinper

Downloads

0High
0Medium
0Low

qianxy

yonyou ref

参照组件

参照使用（参照test文件）

参数配置

const option = {
    title: '弹窗标题',//适配 reftype =1234
    refType:3,//1:树形 2.单表 3.树卡型 4.多选 
    isRadio:false,//1.true 单选 2.false多选
    hasPage:true,//是否显示分页
    backdrop:true,
    showLine:false,//树参照是否显示连线
    multiple:false,
    treeloadData:false,//树参照异步加载
    defaultExpandAll:false,//树默认全部展开
    checkAllChildren:false,//树参照选择所有子选项按钮
    emptyBtn:true,//清空按钮是否显示
    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 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 totalDataUrl|checkedArray为['refcode'],请求数据|String multiple|树参照下提供复选 (单树)|Boolean defaultExpandAll|树参照节点是否全部展开 |Boolean

使用流程

加载:
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
使用:
1. 根据上述参数说明进行配置,作为一个option参数;
2. 利用createModal(option)即可创建参照;
注销:
1. createModal方法的返回值为destory方法,调用可注销参照.
2. 已集成到按钮组件中,无需单独调用destory方法,在点击保存、取消时自动注销.

后台处理参数要求(请求时额外所带参数)

参数|说明|类型 ---|-----|---- refClientPageInfo.currPageIndex|滚动加载数据时需要参数表示当前页数|string refShowClassCode|tab标签切换时所带tab标签的key值|string content|搜索时的内容|string condition(原id)|树节点切换时的key值|string treeNode|树形参照异步加载，传入treeNode参数返回子节点数组|string

接口数据要求(请求返回数据)

树

{
	"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

单选多选

{
	"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

单表参照

单边参照--表头

{
	"strFieldCode": ["refcode", "refname", "refremark"],
	"strFieldName": ["编码", "名称", "备注"],
}

表头接口数据说明

参数|说明|类型 ---|-----|---- strFieldName|表头的各个名字|Array strFieldCode|表头的各个名字所对应的唯一标示|Array other|非必要参数|null

单边参照--表体

{
	"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

三一参照使用（参照src/test31|testInfo|testVar文件）

使用说明

import RefWithInput from 'yyuap-ref/dist2/refWithInput'
import 'yyuap-ref/dist2/yyuap-ref.css'//参照样式

带input参照

<RefWithInput option={option} disabled={false} form={this.props.form}/>

option如下 disbale:是否禁用 form:option.verification打开时传入表单校验属性

配置说明

const option = {
    refType:6,//5 穿梭框; 6 多过滤项
    title:'参照默认标题',
    multiple:false,//6类型 设置单选true 多选false
    param:{//url请求参数
        refCode:'common_ref',
        tenantId:'',
        sysId:'',
        transmitParam:'EXAMPLE_CONTACTS,EXAMPLE_ORGANIZATION',
    },
    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',//表单初始值
    className:'',//弹框外层class添加
    colunms:[{width:100,xxx:''},{width:100,xxx:''},{width:200}],
    ifInputChange: true,//是否开启 Input 输入检索功能
    searchChange:(value) => { console.log(value) },//搜索选取回调
    size: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 multiple|单选true 多选false (默认多选false)|Boolean className|弹窗外层类添加|String colunms|列的配置表|Array ifInputChange|是否开启 Input 输入检索功能（开启需要设置SearchListUrl参数）|Boolean

穿梭框图

textOption对象

参数|说明 ---|----- leftTitle|左树标题 rightTitle|右标题 leftTransferText|左穿梭框名字 rightTransferText|右穿梭框名字 leftInfo|Array<Object> text,key,分别为显示文字以及对应key值 rightInfo|Array<Object> text,key,分别为显示文字以及对应key值

多过滤项

filterKey为对象数组,对象包含 title,key 分别为显示文字以及对应key值;不使用默认为使用表头参数进行过滤

接口数据要求(请求返回数据)

穿梭框

{
  "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

多过滤项

//表头
{
  "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

Change log

yyuap-refproject
1.0.0 Input框下拉搜索功能/6类型单选优化

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

参照组件

参照使用（参照test文件）

参数配置

参数说明

使用流程

后台处理参数要求(请求时额外所带参数)

接口数据要求(请求返回数据)

树

树接口数据说明

单选多选

单选多选接口数据说明

单表参照

单边参照--表头

表头接口数据说明

单边参照--表体

表体接口数据说明

三一参照使用（参照src/test31|testInfo|testVar文件）

使用说明

配置说明

参数说明

textOption对象

filterKey为对象数组,对象包含 title,key 分别为显示文字以及对应key值;不使用默认为使用表头参数进行过滤

接口数据要求(请求返回数据)

穿梭框

穿梭框接口数据说明

多过滤项

多过滤项接口数据说明

Change log

License