fast-report-designer

组件

• 设计组件 fast-report-designer
• 预览组件 fast-report-viewer

使用

npm i fast-report-designer
npm i remixicon

// 项目中main.js
import 'remixicon/fonts/remixicon.css'
import FastReportDesigner from 'fast-report-designer'
vue.use(FastReportDesigner)

<tempalte>
  <fast-report-designer></fast-report-designer>
  <fast-report-viewer></fast-report-viewer>
</tempalte>

🔈 组件 fast-report-designer

prop

1. templatePanels [Array] 模板Panels
2. datasourceData [Array] 数据源数据
3. execSql [Function({cs,sql})] 执行sql语句方法，参数为查询参数数组[cs]和sql语句表达式[sql]，函数返回对象为填充参数字段列表
4. previewSqlData [Function({cs,sql})] 执行配置SQL获取数据进行预览,参数为查询参数数组[cs]和sql语句表达式[sql]，函数返回预览数据列表

Events

1. saveTemplate 参数：({templatePanels,datasource}) 工具栏点击保存模板事件

Methods

1. setPrintDatas 参数：(printData[Object]) 设置打印数据，对象须包含设计内容相对应的字段名，设置成功后，打印时将会替换对应的值
2. setDatasource 参数: (datasource[Array]) 设置数据源树形数据
3. setTableFields 参数: (tableFields[Array],columnFields[Array]) 设置table表格可选下拉字段名和列下拉字段名
4. setSelectFields 参数: (fields[Object|Array]) 设置页面下拉选择字段名，不包含table表格字段名

🔈 组件 fast-report-viewer

prop

1. templatePanels [Array] 预览模板Panels
2. printData [Object] 预览打印填充数据，对象须包含页面设计内容相对应的字段名

Methods

1. print 参数: 无 浏览器打印
2. toPdf 参数: 无 转PDF并下载
3. putOnSeal 参数：(sealSrc[String],size[Object],position[Object]) 添加印章，sealSrc：base64图片或url，size：pt宽高，position：pt位置{top,left}