yrui-temp

yrui-temp 提供了部分 UI 通用组件及工具类。

Index

• Usage
• API
• Compatibility
• License

Usage

安装

yarn add "yrui-temp"

1、TransSelector

穿梭框模式的选择器，支持多种形式。

基本示例

import React, { PureComponent } from "react"
import {Command, TransSelector} from "yrui-common"

exports default class Example extends PureComponent{

  state = {
    dataSource: [
      {title:"默认", children:[{title:"主管理员", value:"00001", nodeType:0}, {title:"子管理员", value:"00002", nodeType:0}, {title:"负责人", value:"00003", nodeType:0}]},
      {title:"职务", children:[{title:"财务", value:"00005", nodeType:0}, {title:"人事", value:"00006", nodeType:0}]}
    ],
    checkedItems: [{title:"财务", value:"00005", nodeType:0}],
    options: {maxChecked:1, mode:"group"}
  }

  render() {
    return <TransSelector dataSource={this.state.dataSource} checkedItems={this.state.checkedItems}
     options={this.state.options} onChange={this.props.onChange}></TransSelector>
  }

}

与流程设计器（钉钉模式）结合的示例

import React, { PureComponent } from "react"
import {Command, TransSelector} from "yrui-common"
import axios from 'axios'

exports default class Example extends PureComponent{

  //注册命令处理器
  componentDidMount = () => {
    Command.register("flow.node.users.choose", this.handleUserChoose);
    Command.register("flow.node.roles.choose", this.handleRoleChoose);
  }

  handleUserChoose=(ctx)=>{
    axios.get("/url1").then(res => {
        this.doChoosing(ctx, res.data)
      })
  }

  handleRoleChoose=(ctx)=>{
    axios.get("/url2").then(res => {
        this.doChoosing(ctx, res.data)
      })
  }

  doChoosing=(ctx, dataSource)=>{
      let selector = {};
      selector.dataSource = dataSource;
      selector.checkedItems = ctx.data.checkedItems||[];
      selector.onChange = (items)=>{
        ctx.cb(items);
      }
      selector.options=ctx.options;
      this.setState({
        selector:selector
      })
  }

  render() {
    return <TransSelector dataSource={this.state.selector.dataSource}
      checkedItems={this.state.selector.checkedItems} options={selector.options}
      onChange={this.state.selector.onChange}></TransSelector>
  }

}

2、PromiseBuilder

Promise 构造器，组件外部通过 PromiseBuilder 定义数据获取方式，组件内部使用 Promise.then 进行数据使用

示例

import {PromiseBuilder, TransSelector} from "yrui-common"

let promiseBuilder = new PromiseBuilder(function(ctx){
    return (resolve, reject)=>{
            setTimeout(function () {
                //success
                if(ctx && ctx.value == "0099"){
                    resolve({data:children});
                }else{
                    resolve({data:dataSource});
                }
                //fail
                //nothing
            }, 10);
        }
})

...

<TransSelector options={{maxChecked:3, mode:"all"}} dataSource={promiseBuilder} checkedItems={checkedItems} onChange={handleChange}/>

API

TransSelector

穿梭框形式的多模式选择器。 支持全展示（all）和分组展示（group）两种模式，group 模式同时支持一次加载和分组加载。

组件参数

参数	说明	类型	默认值
dataSource	数据源	[]	PromiseBuilder
checkedItems	已选择数据项	[]	-
onChange	选择结果回调	[]	-
options	可选项	{}	-
options.maxChecked	最大选择数	number	-
options.mode	选择器模式 - all:全展示，group:分组展示	string	-

dataSource 数据格式

[
  {
    title: "分组1",
    children: [
      { title: "选项1", value: "00001", nodeType: 0 },
      { title: "选项2", value: "00002", nodeType: 0 },
      { title: "选项3", value: "00003", nodeType: 0 }
    ]
  },
  { title: "分组2", value: "10002" }
];

参数	说明	类型	默认值
title	节点标题	string	-
value	节点值	any	-
children	子节点集	[]	-
nodeType	节点类型	0:叶子节点,1:非叶子节点（可不设置）	-

叶子节点（最终选项）必须带上 nodeType 属性且值为 0 中间节点如果需要实时加载数据，将数据源定义为 PromiseBuilder 实例，也请带上 value 属性，否则中间节点可以不带 value 属性。

PromiseBuilder 支持

(PromiseBuilder 的使用参考下方)

PromiseBuilder>ctx 被传入的是当前点击的节点选项数据 只有 group 模式（分组查看模式）支持 PromiseBuilder group 模式+PromiseBuilder 时，只有当前节点选项数据为非叶子节点，且 children 属性未定义或者为空时，才会去通过 Promise 加载数据。如果 children 属性值为[]，将认为该节点下无子数据，而直接渲染，也不会去调用 promise 加载数据。

PromiseBuilder

Promise 构建器，提供了简单的组件与外部异步获取数据的交互模式。

示例

let promiseBuilder = new PromiseBuilder(function(ctx) {
  return (resolve, reject) => {
    // createUrl=(ctx)=>{"\api\users?orgId="+ctx.value}
    let url = createUrl(ctx);
    axios
      .get(url)
      .then(resp => {
        //转换成dataSource要求的数据格式
        let dataSource = prehandle(resp);
        resolve({ data: dataSource });
      })
      .catch(() => {
        messge.error("error");
      });
  };
});

参数	说明	类型	默认值
ctx	组件提供的上下文数据，由组件内部自定义	any	-
resolve	数据获取成功回调，参数由组件内部定义	-	-
reject	数据获取失败回调，参数由组件内部定义	-	-

Compatibility

License

Licensed under the MIT License