yyuap-ref-test v2.0.4

参照组件

参照使用（参照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);
    },
}

参数说明

使用流程

• 从 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

TreeNode

Change log

License

MIT