dynamic-page

    2.0.9 • Public • Published

    dynamic-page

    动态页面,使用react组件进行动态拼装页面,生成对应的模板json数据。


    创建组件的方式

    npm安装

    npm install dynamic-page --save

    基本使用方式

    <Dynamic enableRedux={true} reducers={reducers} components={all} childTpl={childTpl} className="tradeBox" tpl={this.state.tpl} data={this.state.data}></Dynamic>

    效果图

    dynamic-page

    模板配置说明

    详细模板说明

    模板形式如下

     [{
        "type": "Form",
        "children": [
          {
            "type": "Form.Item",
            "children": [{
              "type": "Container",
              "props": {
                "className": "tradeItem"
              },
              "children": [{
                "type": "Div",
                "props": {
                  "value": "交易行"
                }
              }, {
                "type": "Input",
                "props": {
                  "name": "name"
                }
              }]
            }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "客户号"
                  }
                }, {
                  "type": "InterInput",
                  "props": {
                    "name": "corp"
                  }
                }]
              }]
          }, 
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "标的"
                  }
                }, {
                  "type": "Div",
                  "props": {
                    "name": "underly",
                    "className":"labelValue"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "RadioList",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "RadioList.Radio",
                  "props": {
                    "text": "买",
                    "name":"bid"
                  }
                }, {
                  "type": "RadioList.Radio",
                  "props": {
                    "text": "卖",
                    "name":"ask"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "交易日"
                  }
                }, {
                  "type": "Div",
                  "props": {
                    "name": "tradeDate",
                    "className":"labelValue"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "定价日"
                  }
                }, {
                  "type": "Input",
                  "props": {
                    "name": "tradeDate"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "手数(15吨/手)"
                  }
                }, {
                  "type": "NumericInput",
                  "props": {
                    "name": "num",
                    "decimals":"2"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "价格"
                  }
                }, {
                  "type": "ThousandInput",
                  "props": {
                    "name": "price",
                    "decimals":"2"
                  }
                }]
              }]
          },
          {
            "type": "Form.Item",
            "children": [
              {
                "type": "Container",
                "props": {
                  "className": "tradeItem"
                },
                "children": [{
                  "type": "Div",
                  "props": {
                    "value": "金额"
                  }
                }, {
                  "type": "ThousandInput",
                  "props": {
                    "name": "amount",
                    "decimals":"2",
                    "disabled":true
                  }
                }]
              }]
          }, {
            "type": "Form.Item",
            "children": [
              {
                "type": "NumericItem",
                "props": {
                  "label":"手数",
                  "className": "tradeItem",
                  "name": "num",
                  "decimals": "2"
                },
              }]
          },{
            "type": "Form.Item",
            "children": [
              {
                "type": "HandNumItem",
                "isRedux":true,
                "props": {
                  "label":"手数",
                  "className": "tradeItem",
                  "name": "num",
                  "decimals": "2"
                },
              }]
          },
        ]
      }];
    

    跨组件的交互,需要打开外层的enableRedux开关,内部使用redux实现,同时需要传入reducers,在要使用的组件上配置enableRedux开关,即可在当前组件的props上新增update方法。

    this.props.update( data,'UPDATEHAND')
    

    这里省略掉了actiondata对应reduceraction,第二是action.type

    Api

    enableRedux

    打开redux,bool值,如果要跨组件的访问全局数据,需要设为true
    

    childTpl

    针对模板的继承操作,在tpl的基础上新增了四种操作类型
    [{
        action: "preinsert",
        id: 1,
        item: {
            "type": "TextItem",
            "props": {
                "className": "tradeItem",
                "label": "债券代码",
                "name":"num",
                "textcls":"labelValue"
            },
            "formatter":"thousand"
        },
    }]
    

    locale

    国际化语言
    

    checkPermission(powerBit)

    判断权限的方法,该方法接受一个权限位作为参数的钩子.权限位配置在组件的props.powerBit上.
    

    新增全局配置options

    Dynamic.options={
      formatter:Formatter ,
      locale:zh_CN,
      checkPermission:()=>{}
    }
    

    组件

    这里推荐使用react-xui里的组件,但理论上支持所有组件的,但如果你使用了form表单,建议你的表单组件中是使用的约束组件,并且提供onChange事件,data会自动绑定对应的name值的value属性

    特殊组件

    BatchUpdate

    主要是做批量更新使用,props上暴露subscripe方法,参数为callback更新

    {
      "type": "BatchUpdate",
      "isRedux": true,
      props:{
        updateFields:{"num":"ask"},//更新data字段映射关系
        subscribe:function(callback){
            setInterval(()=>{
              callback({ask:Math.random()})
            },2000)
        }
      }
    }
    

    update

     this.dynamic.update([
          {
            name:'aaa.1.bbb',
            value:999,
            readOnly:true
          }
        ])
    

    提供数据与模板的动态绑定。可用于初始化模板选择.

    compareOriginal

    是否需要对原始数据进行比较,设为true之后,会在每个组件的props上挂载一个original属性绑定初始数据

    original

    外部传递的原始数据,不设置时,直接取data的值

    showDifference

    是否展示修改字段,需要设置compareOrinialtrue. 展示的内容以国际化"global.comparevalue|@|" + item.original +'|@|'+value.value 的形式,并在组件上添加className为different-value

    ignoreCompare

    showDifference为true时生效,忽略要比较的字段,name数组.

    [onChange,onClick,onFocus,onBlur]事件处理钩子

    可以在事件中处理name对应控件的属性 this.control.setProps('propsname',{v:1}) //修改name为propsname的组件的属性 this.control.setReadOnly('aaa.1.qqq', true); //修改name值为'aaa.1.qqq'的组件的只读方式 this.control.setVisible('propsname', false); //修改name为propsname的组件的显示隐藏 this.control.setValue('aaa.1.qqq', '1233'); //设置组件name为'aaa.1.qqq'的value值.

    模板组件可调用的方法

    在组件模板中配置isRedux:true即可使用内置的方法对数据源进行变更

    sync:bool

    当配置sync为true时,组件与数据源之间就会形成双向绑定,前置条件需要配置isRedux:true

    sync:function(value,name)

    组件内部可以通过props.sync方法更新指定name值的value,可以使用data.a.b.1='xxx'这种写法更新深层的json对象

    batchUpdate :function(data)

    也是props.batchUpdate,作批量数据更新,它会把不存在的组件结构生成

    fastUpdate({})

    主要是对数据进行批量更新,比batchUpdate更高效,但数据的结构要是完整的,凡是组件配置了isRedux就可以使用

    关于作者

    https://github.com/tianxiangbing

    xui

    react xui组件一直在持续更新中,欢迎大家关注https://github.com/react-xui

    Install

    npm i dynamic-page

    DownloadsWeekly Downloads

    234

    Version

    2.0.9

    License

    MIT

    Unpacked Size

    3.79 MB

    Total Files

    130

    Last publish

    Collaborators

    • tianxiangbing