发票组件 (Invoice Message)

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

📦 安装

npm install invoice-message --save

🚀 快速开始

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

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

Vue.use(InvoiceMessage)

方式二：按需引入

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

export default {
  components: {
    InvoiceMessage,
    ListInvoiceMark
  }
}

基础使用

<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 用于定义表格的列结构，每一列是一个对象：

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 组件实现

💡 使用示例

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 仓库

📝 注意事项

1. 二维码格式支持：

   • URL 格式：'http://baidu.com'
   • Base64 格式：'data:image/png;base64,iVBORw0KGgo...'

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

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

📚 相关文档

• 税控发票参数详细说明
• PropsJson.js等三个文件位置

📜 更新日志

v1.1.1

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

v1.0.0 (2024-05-09)

• 🎉 正式版本发布

💬 问题反馈

微信：zkhh6666

📄 License

查看 NPM 包详情