Npm-gys-components-snapshots NPM

layout 布局组件功能列表:

1、支持组件之间通信：配置方式组件之间通信是通过actions 进行建立起来的

包含如下属性：

  actions:[
  {
      eventName: 'loaded',  
      sourceControl: 'date-1', // 源组件的id
      params: ['beginDate', 'endDate', 'orgId'], // 组件可以提供的参数，但目标组件接受的参数由 targetControls里面的 params  决定
      targetControls: [
        {
          id: 'table-1', // 目标组件的id
          params: {
            // 目标组件需要的参数
            startTime: 'beginDate', // startTime 是目标组件接收参数的名称， beginDate 是传递过来的参数名称
            endTime: 'endDate'
          }
        }
      ]
    }
    ...
    ]

组件table-1 侦听了组件date-1的变化，并将传递过来的参数 beginDate、 endDate 分别赋值给 startTime 和 endTime

2、全局参数赋值

表达式如下如 {{orgId}} ，一般在默认defaultParams 使用，解析后会替换为对应的orgId

3、支持组件点击跳转包含url跳转和router 跳转配置方式：

redirect: {
            type: 'url', // 默认：url   备选值：url，router
            params: ['month'], // 传递参数
            path: '' // 跳转路径
          }

4、弹出窗口实现，在布局元数据中配置需要弹窗的组件

如下：

layouts:
  [{
      type: 'dialog', //  这里配置需要弹窗的组件
      components: [
        {
          id: 'dialog-3',
          w: '80%',
          showFooter: true
        },
        {
          id: 'dialog-4',
          w: '80%',
          showFooter: true
        }
      ]
    }]

还需要配置如下操作：通过点击id为 button-1 的按钮修改组件 dialog-3 的显示属性，让组件显示出来 actions:[{ eventName: 'click', sourceControl: 'button-1', params: 'state', targetControls: { id: 'dialog-3', params: { display: 'state' } } }]

还需要配置如下操作：通过点击id为 button-1 的按钮修改组件 dialog-3 的显示属性，让组件显示出来

 actions:[{
      eventName: 'click',
      sourceControl: 'button-1',
      params: ['state'],
      targetControls: [
        {
          id: 'dialog-3',
          params: {
            display: 'state'
          }
        }
      ]
    }]

6、组件元数据获取方式

1、 从布局元数据中获取， 一般情况下布局组件会将子组件的元数据一起取出来，子组件需要从cmpMetadata 属性中获取就可以
    props: {
      cmpMetadata: {
        type: Object,
        default: function () {
          return {}
        }
      }
    }

2、 组件本身自己获取组件元数据，如果组件本身获取元数据，则需要从布局元数据传递元数据请求接口和参数，子组件需要从属性 metadataUrl 获取请求接口