invoice-message【发票样式模板】使用

使用方法:

1、下载

npm install invoice-message --save

//warrning:我们推荐您设置key的,因为不存在它会带来数据的复用性问题

2、usage-使用说明

import InvoiceMessage from 'invoice-message'
import 'invoice-message/built.3797945a26.css'

Vue.use(InvoiceMessage)

<InvoiceMessage />      //发票组件
<ListInvoiceMark />     //清单发票组件

3、preinstallLocationData参数

invoice-message【发票样式模板】使用_第1张图片

3、如果你想调整对应位置的参数preinstallLocation请传递好位置Stipulate参数

invoice-message【发票样式模板】使用_第2张图片

4、参数配置

参数名称 说明 取值 默认值
preinstallLocation 主表字段的位置先占位 preinstallLocation = [ {index: 0,key: ‘erweimaCode’,disable: false },…] -
preinstallLocationData 主表对应位置的内容 InvoiceInformation = {erweimaCode: ‘./invoice.png’,// 机器编号virtualDevSerialnum:“123456789”, …} -
columns table表头 columns = [{title: ‘货物或应税劳务、服务名称’,width: ‘24%’,dataIndex: ‘itemName’,key: ‘itemName’,},…] -
InitData table对应的数据 InitData = [{“id”: 381,“invoiceUuid”: “4d3c35e990b34542872171a7c563183e”, },…] -
listInvoiceMark 清单标志 Boolean 默认false
hellpChinessNum 帮助数字自动汉化 Boolean 默认false
IsQrCode 二维码是否展示 Boolean 默认true
key 解决数据复用问题 - -
autoCount 计算table的amount 和taxAmount 两个值,它的权限大于主表的信息 Boolean 默认false
IsScale 是否使用启用自动缩放字体 Boolean 默认false

5、事件配置

事件名称 说明 传参 是否必须
ModalInvoiceList 点击“详见清单”后的事件,为了兼容性和自定义样式,没有设置统一弹窗,请您引入ListInvoiceMark组件 - -
1、 请您将 columns 的 金额(amount)、税率(taxScheme)、税额(taxAmount)打上固定的key,我们清单发票依赖这个key来渲染  
-
2、二维码暂且只支持url('http://baidu.com')、base64("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAAC..."

你可能感兴趣的:(插件使用,前端,javascript,html)