This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

dynamic-page

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

Dependencies (25)

Dev Dependencies (27)

Package Sidebar

Install

npm i dynamic-page

Weekly Downloads

3

Version

2.1.3

License

MIT

Unpacked Size

2.02 MB

Total Files

146

Last publish

Collaborators

  • tianxiangbing