2.0.4 • Published 3 years ago

yyuap-ref-test v2.0.4

Weekly downloads
3
License
MIT
Repository
-
Last release
3 years ago

参照组件

参照使用(参照test文件夹)

参数配置

const option = {
    title: '弹窗标题',
    refType:3,
    tabData:[
        {"title":"常用","key":"commonUse"},
        {"title":"全部","key":"total"},
        {"title":"推荐","key":"recommed"}
    ],
    param:{
        refCode:'test_treeTable',//test_common(单表)||test_grid(多选)||test_tree(树)||test_treeTable(树卡)
        tenantId:'xxx',
        sysId:'xxx'
    },
    checkedArray:[{refremark: "用友骨干", refpk: "857c41b7-e1a3-11e5-aa70-0242ac11001d", refcode: "wujd", refname: "吴惊道", key: "857c41b7-e1a3-11e5-aa70-0242ac11001d"}],
    onCancel: function (p) {
      console.log(p)
    },
    onSave: function (sels) {
      console.log(sels);
    },
}

参数说明

参数说明类型
title弹窗标题string
refType1:树形 2.单表 3.树卡型 4.多选 5.其他(默认树卡)number
tabData标签数据 每个tab标签含有title与keyArray<Object>
paramurl的请求参数 refCode(见注释) tenantId(租户id) sysId(系统id)object
checkedArray已选择数据项Array<Object>
onCancel取消时回调function
onSave确认时回调function

使用流程

  • 从 createApi.es.js 引入 createModal 方法
  • 利用createModal(option)创建参照
  • createModal方法的返回值为destory方法 调用可注销参照

树形参照

功能:

  • 可以配置数据搜索
  • 支持数据分类

Usage examples

    import React, {Component} from 'react';
    import ReactDOM from 'react-dom';
    import RefTree from './RefTree/index';
    
    const op = {
        title: '弹窗标题',
        RefSearch: true,
        isTab: false,
        isTree: true,
        RefButton: true,
        tabData: {},
        multiple: false,
        checkedArray: [],
        param: {
          refCode: 'glxzzz',
          refModelUrl: 'http://d835dxtp.c87e2267-1001-4c70-bb2a-ab41f3b81aa3.app.yyuap.com/basedoc-mc/ref/adminableorg/',
          pk_user: 'f07e2142-482b-448a-a1fd-5cb9a48c5d39',
          tenantId: 'gtzceot7',
          sysId: 'diwork',
        },
      onCancel: function () {
        console.log('cancel');
      },
      onSave: function (sels) {
        console.log(sels);
      },
    };
    ReactDOM.render(
      (
        <RefTree option={op}/>
      ),
      document.getElementById('root'),
    );

API

Props

const option = {
  title: '弹窗标题',
  RefSearch: true,
  isTab: false,
  isTree: true,
  RefButton: true,
  multiple: false,
  tabData: {},
  param: {}, 
  checkedArray: [],
  onCancel: function () {
    console.log('cancel');
  },
  onSave: function (sels) {
    console.log(sels);
  },
};
<RefTree option={option}/>

##option详解

title

参照标题 required(必须)

RefSearch

是否应用参照搜索 isTab(必须)

RefSearch

是否应用参照页签 required(必须)

RefButton

是否应用按钮组件 required(必须)

multiple

是否启用多选树 required(必须)

tabData

提供 tab 数据,数据格式 //qxy 待补充 当 isTab:true 时,可切换展现 tab 功能

param

调用参照服务所传参数 type :JSON Object

checkedArray

调用参照默认已选择数据 传 ids type :Array id,id

onCancel

onCancel() 点击取消按钮触发事件

onSave

onSave(sels) 点击保存按钮触发事件 sels:Array 选中项的 id

#子组件-树 树组件作为参照基本组件可自由组合,单独使用

组件调用

import Tree from './components/ref/Tree';

const TreeNode = Tree.TreeNode;

const defaultProps = {
	keys: ['0-0-0', '0-0-1']
}
class Demo1 extends Component {
	constructor(props) {
		super(props);
	    const keys = this.props.keys;
	    this.state = {
	      defaultExpandedKeys: keys,
	      defaultSelectedKeys: keys,
	      defaultCheckedKeys: keys,
	    };
	}
	onSelect(info) {
	    console.log('selected', info);
	}
	onCheck(info) {
	    console.log('onCheck', info);
	}
	render() {
	    return (
	      <Tree className="myCls" showLine checkable
	        defaultExpandedKeys={this.state.defaultExpandedKeys}
	        defaultSelectedKeys={this.state.defaultSelectedKeys}
	        defaultCheckedKeys={this.state.defaultCheckedKeys}
	        onSelect={this.onSelect} onCheck={this.onCheck}
	      >
	        <TreeNode title="parent 1" key="0-0">
	          <TreeNode title="parent 1-0" key="0-0-0" disabled>
	            <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
	            <TreeNode title="leaf" key="0-0-0-1" />
	          </TreeNode>
	          <TreeNode title="parent 1-1" key="0-0-1">
	            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
	          </TreeNode>
	        </TreeNode>
	      </Tree>
	    );
	}
}

React.render(<Demo1 />, document.getElementById('target'));

API

Tree props

参数说明类型默认值
multiple是否允许选择多个树节点boolfalse
checkable是否支持添加在树节点前添加Checkboxboolfalse
defaultExpandAll默认是否展开所有节点boolfalse
defaultExpandedKeys默认展开指定的节点String[][]
expandedKeys指定展开的节点(controlled)String[][]
autoExpandParent是否自定展开父节点booltrue
defaultCheckedKeys指定默认被选中的节点keyString[][]
checkedKeys指定被选中的节点(controlled)(PS:当指定的是父节点,所有的子节点也会被指定;当指定的是子节点,父节点也会被选中。当checkable和checkStrictly都为true,子节点与父节点的选择情况都不会影响到对方String[]/{checked:Array,halfChecked:Array}[]
checkStrictly精细的检查每个节点boolfalse
defaultSelectedKeys指定选中的节点keyString[][]
selectedKeys指定选中的节点keys(controlled)String[]-
onExpand当打开或关闭树节点触发的方法function(expandedKeys, {expanded: bool, node})-
onCheck当选择事件发生触发的方法function(checkedKeys, e:{checked: bool, checkedNodes, node, event})-
onSelect当用户选择树节点触发的回调函数function(selectedKeys, e:{selected: bool, selectedNodes, node, event})-
filterTreeNode过滤树节点的方法(highlight),当返回true,相关联的节点会高亮function(node)-
loadData异步加载数据function(node)-

TreeNode

参数说明类型默认值
disabled节点是否不可用boolfalse
disableCheckbox节点的checkbox是否不可用boolfalse
title名称标题String/element--
key节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用,必须是唯一的String-
isLeaf是否是叶子节点boolfalse
titleClass名称类名String-
titleStyle名称样式Object-
switcherClassswitcher类名String-
switcherStyleswitcher样式Object-

Change log

License

MIT