这里提供了打开各种弹窗的API，方便后续开发使用，风格与YB主体风格统一。

打开弹窗组件

弹窗组件：是自己在前端脚手架自己扩展的弹窗组件，扩展弹窗组件地址参考（https://doc.yonisv.com/mybook/professional-yonbuilder/mdf/compomentext/modelextend.html）

示例


viewModel.communication({
  type: 'modal',
  payload: {
    key: 'ModifyQuantity',
    data: {
      ...
    }
  }
});

参数说明:

API	含义	类型	取值
type	弹窗类型	string	'modal'
payload	参数配置	object	{}
--key	在modal中注册的组件名	string
--data	传递的数据	object
--mode	弹出类型	string	html-HTML片段；inner-内部元数据，与groupCode对应
--groupCode	容器组编码	string	与mode配合使用

打开弹窗页面

1、打开弹出单据模板
方法和通过API打开页面一样，唯一不同的是打开的目标单据中的templateType=modal，参考页面打开方式地址https://doc.yonisv.com/mybook/professional-yonbuilder/mdf/general-js-api/page.html#%E6%89%93%E5%BC%80%E5%8D%95%E6%8D%AE%E9%A1%B5%E9%9D%A2

示例

cb.loader.runCommandLine('bill', {
  billtype: 'voucher',
  params: {
    id: '2214931147379968',
    mode: 'edit',
    domainKey: ''
  },
  billno: 'bankdot',
}, viewModel);

参数说明：

参数	含义	是否必输	类型	默认值	可取值
'bill'	单据页面	是	String	'bill'	固定写死'bill'
billtype	单据类型	是	String	无	单卡页面：'voucher'；列表页面：'voucherList':
billno	单据编码	是	String	无	单据页面元数据中cBillNo的值
params	参数	否	Object	无
--id	详情页，数据ID	否	String	无，browse、edit时需要	单据页面元数据中billid的值
--mode	卡片页面状态	否	String	无	编辑态：'edit'；新增态：'add'；浏览态：'browse'
--readOnly	是否只读	否	布尔类型	false	true 或 false
--domainKey	领域Key	是	String	无	使用统一Node时必输
viewModel	当前页面模型	是	Object	viewModel	固定写死viewModel

2、弹出自定义路由页面
自定义路由页面是在脚手架protal/index.jsx注册的一个页面组件
platform为公共路由，使用方法：在protal/index.jsx注册一个组件即可
示例

viewModel.communication({
  type: 'modal',
  payload: {
    type: 'platform',
    url: 'billmaker',
    data: { ... }
  }
})

参数说明：

参数	含义	是否必输	类型	默认值	可取值
payload	参数	是	Object	无
--type	打开类型	是	String	无	打开自定义页面时，固定写死'platform'
--url	自定义页面路由	是	String	无	在protal/index.jsx里面的页面路由
--data	传入页面的数据	否	Object	无

3、弹出页面区域
在页面中配置一个cControlType=modal的容器，容器中配置想要显示的组件
调用方法弹出容器区域
支持指定弹窗宽度，在cGrupCode对应容器的cStyle中配置width属性；当width值大于1时为px单位，如：800（是指800px）；当width值小于1时为百分比，如：0.8（是指定宽度占比80%）

示例

viewModel.communication({
  type: 'modal',
  payload: {
    mode: 'inner',
    groupCode: '容器区域cGroupCode',
    viewModel: viewModel,
    data: { ... }
  }
})

4、弹出iframe页面

示例

viewModel.communication({
  type: 'modal',
  payload: {
    key: 'http://www.xxxxx.com',
    data: {
      type: 'iframe',
      width: '90%',
      height: '90%'
    }
  }
})

关闭弹窗

viewModel.communication({type:'modal',payload:{data:false}});  //关闭模态框

弹窗 Modal

打开弹窗组件

示例

打开弹窗页面

示例

示例

示例

示例

关闭弹窗

results matching ""

No results matching ""