invoice-message/README.md

vue发票展示、vue发票模板、vue发票样式

# 发票组件 (Invoice Message)

[![npm version](https://img.shields.io/npm/v/invoice-message.svg)](https://www.npmjs.com/package/invoice-message) 
[![npm downloads](https://img.shields.io/npm/dt/invoice-message.svg)](https://www.npmjs.com/package/invoice-message)

一个用于展示和管理发票的 Vue 组件库。

---


## 📦 安装

```bash
npm install invoice-message --save
```

---


## 🚀 快速开始

### 方式一：全局引入（推荐）

```javascript
import InvoiceMessage from 'invoice-message'
import 'invoice-message/invoiceMessage.css'

Vue.use(InvoiceMessage)
```

### 方式二：按需引入

```javascript
// InvoiceMessage - 发票组件
// ListInvoiceMark - 清单组件
import { InvoiceMessage, ListInvoiceMark } from 'invoice-message'
import 'invoice-message/invoiceMessage.css'

export default {
  components: {
    InvoiceMessage,
    ListInvoiceMark
  }
}
```

### 基础使用

```vue
<template>
  <div>
    <InvoiceMessage />      <!-- 发票组件 -->
    <ListInvoiceMark />     <!-- 清单发票组件 -->
  </div>
</template>
```

⚠️ **重要提示**：推荐设置 `key` 属性以避免数据复用问题。

---


## 📖 配置说明

### 参数配置

| 参数名称 | 说明 | 类型 | 默认值 |
|:---|:---|:---|:---|
| `preinstallLocation` | 主表字段的位置预设 | Array | `[{index: 0, key: 'erweimaCode', disable: false}, ...]` |
| `preinstallLocationData` | 主表对应位置的内容 | Object | `{erweimaCode: './invoice.png', virtualDevSerialnum: '123456789', ...}` |
| `columns` | 表格表头配置 | Array | 见下方 columns 详解 |
| `InitData` | 表格数据 | Array | `[{id: 381, invoiceUuid: '4d3c35e...', ...}, ...]` |
| `listInvoiceMark` | 是否为清单发票 | Boolean | `false` |
| `hellpChinessNum` | 自动将数字转换为汉字 | Boolean | `false` |
| `IsQrCode` | 是否显示二维码 | Boolean | `true` |
| `key` | 组件唯一标识（解决数据复用） | String/Number | - |
| `autoCount` | 自动计算合计金额和税额 | Boolean | `false` |
| `taxpayerNumFontSize` | 纳税人识别号字体大小 | String | `'20px'` |
| `AddressTelephoneZoom` | 地址、电话字体大小 | String | `'10px'` |
| `invoiceBorderColor` | 边框颜色 | String | `'#964300'` |
| `invoiceFontColor` | 字体颜色 | String | `'orange'` |

### Columns 配置详解

`columns` 用于定义表格的列结构，每一列是一个对象：

```javascript
columns = [
  {
    title: '货物或应税劳务、服务名称',  // 列标题
    width: '24%',                        // 列宽度
    dataIndex: 'itemName',               // 数据字段名
    key: 'itemName'                      // 列的唯一标识
  },
  {
    title: '金额',
    width: '12%',
    dataIndex: 'amount',    // ⚠️  可以自由修改，但需要和传入数据对应
    key: 'amount'       // ⚠️  可以自由修改，但需要和传入数据对应
    align: 'right',   // ⚠️  可以控制左右
  },
  {
    title: '税率',
    width: '8%',
    dataIndex: 'taxScheme',
    key: 'taxScheme',
    align: 'right',   // ⚠️  可以控制左右
  },
  {
    title: '税额',
    width: '12%',
    dataIndex: 'taxAmount',
    key: 'taxAmount',   
    align: 'right',   // ⚠️  可以控制左右
  }
]
```

**重要约定**：
- `amount`（金额）、`taxScheme`（税率）、`taxAmount`（税额）这三列的 `key` 必须使用固定值
- 清单发票依赖这些 key 来正确渲染合计行

### 事件配置

| 事件名称 | 说明 | 回调参数 |
|:---|:---|:---|
| `ModalInvoiceList` | 点击"详见清单"触发 | - |

> 💡 为保持灵活性，组件未内置弹窗样式，请自行引入 `ListInvoiceMark` 组件实现

---


## 💡 使用示例

```javascript
import { preinstallLocation } from './useConfig/PropsJson.js'
import { InvoiceInformation } from './useConfig/defaultData.js'
import { columns, InitData } from './useConfig/columns.js'

export default {
  data() {
    return {
      preinstallLocation,
      InvoiceInformation,
      columns,
      InitData
    }
  }
}
```

📂 **三个文件位置**：[Gitee 仓库](https://gitee.com/zhukunhh666/resource-warehouse/tree/invoice-message/)

---


## 📝 注意事项

1. **二维码格式支持**：
   - URL 格式：`'http://baidu.com'`
   - Base64 格式：`'data:image/png;base64,iVBORw0KGgo...'`

2. **固定 Key 约定**：金额、税率、税额列的 `key` 必须使用 `amount`、`taxScheme`、`taxAmount`

3. **推荐设置 Key**：为组件设置唯一 `key` 以避免 Vue 的数据复用问题

---


## 📚 相关文档

- [税控发票参数详细说明](https://blog.csdn.net/qq_45351419/article/details/128447722)
- [PropsJson.js等三个文件位置](https://gitee.com/zhukunhh666/resource-warehouse/tree/invoice-message/)

---


## 📜 更新日志

### v1.1.1
- ✨ 新增纳税人识别号字体大小控制
- ✨ 新增地址电话字体大小控制
- 🐛 修复已知问题

### v1.0.0 (2024-05-09)
- 🎉 正式版本发布

---


## 💬 问题反馈

微信：`zkhh6666`

---


## 📄 License

[查看 NPM 包详情](https://www.npmjs.com/package/invoice-message)