invoice-message
Version:
vue发票展示、vue发票模板、vue发票样式、税控发票、纸质发票
98 lines (78 loc) • 4.43 kB
Markdown
## 发票组件
[](https://www.npmjs.com/package/invoice-message) [](https://www.npmjs.com/package/invoice-message) [](https://www.npmjs.com/package/invoice-message)
## 问题反馈：
- 问题反馈：wx: zkhh6666
## Install-下载
```javascript
npm install invoice-message --save
```
```javascript
注意： 正式版本 1.0.0 后我们 支持两种引入模式
* 1、全局引入
import InvoiceMessage from 'invoice-message'
Vue.use(InvoiceMessage)
* 2、局部引入
import {InvoiceMessage,ListInvoiceMark} from 'invoice-message'
```
```javascript
warrning：我们推荐您设置key的，因为不存在它会带来数据的复用性问题
```
## usage-使用说明
```javascript
import InvoiceMessage from 'invoice-message'
import 'invoice-message/invoiceMessage.css'
Vue.use(InvoiceMessage)
<InvoiceMessage /> //发票组件
<ListInvoiceMark /> //清单发票组件
```
## 配置项
### 参数配置
|参数名称 |说明 |取值 |默认值 |
|:---: |:---: |:---: |:---: |
|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|
### 事件配置
|事件名称 |说明 |传参 |是否必须 |
|:---: |:---: |:---: |:---: |
|ModalInvoiceList| 点击“详见清单”后的事件，为了兼容性和自定义样式，没有设置统一弹窗，请您引入ListInvoiceMark组件 |-|-|
<!-- 注意 -->
<!-- 为了 解决合计和金额、税额对齐的问题，使用了特殊的字段，table是不知道会渲染多少项的，所以思考了使用定量的方式 -->
```javascript
1、 请您将 columns 的 金额(amount)、税率(taxScheme)、税额(taxAmount)打上固定的key，我们清单发票依赖这个key来渲染 🏀🏀🏀
-
2、二维码暂且只支持url（'http://baidu.com'）、base64（"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAAC..." ）
```
#### [税控发票参数、文档地址](https://blog.csdn.net/qq_45351419/article/details/128447722?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171515661316777224489029%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171515661316777224489029&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-128447722-null-null.142^v100^pc_search_result_base9&utm_term=invoice-message&spm=1018.2226.3001.4187)
#### [demo数据](https://gitee.com/zhukunhh666/resource-warehouse/tree/invoice-message/)
```javascript
import { preinstallLocation } from './useConfig/PropsJson.js'
import { InvoiceInformation} from './useConfig/defaultData.js'
import { columns , InitData} from './useConfig/columns.js'
```
## 版本记录
#### v1.0.0 2024-05-09
- 正式版本发布
#### v0.0.14 2023-12-08
- columns增加靠右align: 'center'
- 取消掉 ￥ 交友众位来拼接控制
#### v0.0.13 2023-06-20
- 修复已知展示问题
#### v0.0.12 2022-12-09
- 增加自动压缩字体功能
- 修复数字换行问题
- 修复已知的其他问题
#### v0.0.11 2022-11-16
- 优化使用文档
#### v0.0.7 2022-11-16
- 优化table数组可以自定义
#### v0.0.5 2022-10-09
- 插件发布