❤
npm
Sign UpSign In

yyuap-refproject

1.0.0 • Public • Published

参照组件

参照使用（参照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. 加载:
    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

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

树

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

Readme

Keywords

Package Sidebar

Install

npm i yyuap-refproject

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

986 kB

Total Files

110

Last publish

Collaborators

  • qianxy
Try on RunKit
Report malware