op-invoice-plate
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

发票板式

github

http://gitlab.kingxunlian.com/front-end/component/kts-invoice-plate.git

InvoicePlate

发票板式组件

import { InvoicePlate} from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
invoiceData 发票信息数据 InvoiceDataProps
invoiceDataColumns 发票主信息描述,具体项见下表 InvoiceDataColumnProps[]
goodsOption 商品行头部功能标签 Node[]
buyerData 购方信息,具体项见下表 BuyerDataType
buyerTitle 购方信息title 自定义,具体项见下表 BuyerTitleType
sellerData 销方信息,具体项见下表 SellerDataType
sellerTitle 销方信息title 自定义,具体项见下表 SellerTitleType
goodsColumns 商品表格列的配置描述,具体项见下表 ColumnProps[]
goodsData 商品行数据 any[]
totalNum 合计数据 小写 TotalProps[]
totalNumText 合计数据 大写 TotalProps[]
personData 操作人信息 PersonDataProps
otherElement 组件扩展 Node
isVirtualized 是否启用virtualized模式 boolean false

InvoiceDataProps

参数 必填 说明 类型 默认值 版本
typeText 发票类型
其他数据

InvoiceDataColumnProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应InvoiceDataProps的key string
alignText 显示位置 flex-start或flex-end或center flex-start
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}
示例
    const invoiceData = {
      typeText: '增值税电子专用发票',
      invoiceCode: '1111111',
      invoiceNum: '111111',
      invoiceDate: '22222',
      checkCode: '3333',
      deviceNum: '11111'
    };
    const invoiceDataColumns = [
        {
            title: '发票代码:',
            dataIndex: 'invoiceCode',
            render: (text) => {
                return text;
            }
        },
        {
            title: '发票号码:',
            dataIndex: 'invoiceNum',
            render: (text) => {
                return text;
            }
        },
        {
            title: '开票日期:',
            dataIndex: 'invoiceDate',
            render: (text) => {
                return text;
            }
        },
        {
            title: '校验码:',
            dataIndex: 'checkCode',
            render: (text) => {
                return text;
            }
        },
        {
            title: '机器编号:',
            dataIndex: 'deviceNum',
            render: (text) => {
                return text;
            }
        },
    ];

BuyerDataType

参数 必填 说明 类型 默认值 版本
name 购方名称 Node
taxNumber 购方税号 Node
addressAndPhone 购方地址及电话 Node
bankAddressAndNumber 开户行地址及账号 Node
password 密码区 Node

BuyerTitleType

参数 必填 说明 类型 默认值 版本
nameTitle 购方名称 Node
taxNumberTitle 购方税号 Node
addressAndPhoneTitle 购方地址及电话 Node
bankAddressAndNumberTitle 开户行地址及账号 Node
passwordTitle 密码区 Node

SellerDataType

参数 必填 说明 类型 默认值 版本
name 销方名称 Node
taxNumber 销方税号 Node
addressAndPhone 销方地址及电话 Node
bankAddressAndNumber 开户行地址及账号 Node
remarks 备注 Node

SellerTitleType

参数 必填 说明 类型 默认值 版本
nameTitle 销方名称 Node
taxNumberTitle 销方税号 Node
addressAndPhoneTitle 销方地址及电话 Node
bankAddressAndNumberTitle 开户行地址及账号 Node
remarksTitle 备注 Node

ColumnProps

参数 必填 说明 类型 默认值 版本
title 列头文字 Node
dataIndex 对应goodsData的key string
width 列宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 Function(text, record, index) {}

TotalProps

参数 必填 说明 类型 默认值 版本
title 当前显示元素的值 Node
width 宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数 Function() {}
示例
    const totalNum = [
        {
            title: '',
            width: 45
        },
        {
            title: '合计',
            width: 386,
            alignText: 'left' as ('center' | 'left' | 'right'),
        },
        {
            title: '',
            width: 426
        },
        {
            title: '2990.00',
            alignText: 'right' as ('center' | 'left' | 'right'),
            width: 119
        },
        {
            title: '',
            width: 69
        },
        {
            title: '100.00',
            alignText: 'right' as ('center' | 'left' | 'right'),
        }
    ];

PersonDataProps

参数 必填 说明 类型 默认值 版本
payee 收款人 Node
reviewer 复核人 Node
drawer 开票人 Node

PaymentPlate

海关缴款书板式组件

import { PaymentPlate } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
paymentData 缴款书信息数据 PaymentDataProps
invoiceDataColumns 缴款书主信息描述,具体项见下表 PaymentDataColumnsProps[]
paymentCompanyData 交款、收款单位信息 paymentCompanyData
goodsColumns 商品表格列的配置描述,具体项见下表 ColumnProps[]
goodsData 商品行数据 any[]
detailsData 操作人信息 detailsData
otherElement 组件扩展 Node
isVirtualized 是否启用virtualized模式 boolean false

PaymentDataProps

参数 必填 说明 类型 默认值 版本
typeText 缴款书类型
其他数据

PaymentDataColumnsProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应PaymentDataProps的key string
isShowTitle 是否显示title string boolean
alignText 显示位置 flex-start或flex-end或center flex-start
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}
示例
    const paymentData = {
        typeText: '海关进口增值税  专用缴款书',
        code: '1111111',
        num: '111111',
        date: '22222',
        name: '东渡'
    };
    const paymentDataColumns = [
        {
            title: '进口口岸代码:',
            dataIndex: 'code',
            render: (text) => {
                return text;
            }
        },
        {
            title: '填发日期:',
            dataIndex: 'date',
            render: (text) => {
                return text;
            }
        },
        {
            title: '填发日期:',
            dataIndex: 'num',
            render: (text) => {
                return text;
            }
        },
        {
            title: '海关名称',
            isShowTitle: false,
            dataIndex: 'name',
            render: (text) => {
                return (
                    <div 
                        style={{
                            fontSize: '20px',
                            fontWeight: 500,
                            color: '#000000'
                        }}
                    >
                        {text}
                    </div>
                );
            }
        },
    ];

paymentCompanyData

参数 必填 说明 类型 默认值 版本
incomeCompany 收入机关 Node
subject 科目 Node
subbudget 预算次级 Node
collectionBank 收款国库 Node
paymentName 交款单位名称 Node
paymentNumber 交款账号 Node
paymentBanck 交款开户银行 Node

ColumnProps

参数 必填 说明 类型 默认值 版本
title 列头文字 Node
dataIndex 对应goodsData的key string
width 列宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 Function(text, record, index) {}

detailsData

参数 必填 说明 类型 默认值 版本
totalAmountText 金额人民币(大写) Node
totalAmount 合计(¥) Node
applyNumber 申请单位编号 Node
customsNumber 报关单编号 Node
fillCompany 填制单位 Node
collectionBank 收款国库(银行) Node
contractNumber 合同(批文)号 Node
transportNumber 运输工具(号) Node
paymentPeriod 缴款期限 Node
goodsNumber 提/装货单号 Node
remark 备注 Node

InvoiceDetailedTable

清单列表组件

import { InvoiceDetailedTable, InvoiceDetailedTableVirtualized } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
isStripe 1 显示斑马纹 奇数为重颜色 0:显示斑马纹 奇数为轻颜色 number
columns 商品表格列的配置描述,具体项见下表 columns[]
dataSource 商品行数据 any[]
footerDataSource 商品行底部数据 any[]
height 使用Virtualized组件时,列表外层盒子的高度 number 300

columns

参数 必填 说明 类型 默认值 版本
title 列头文字 Node
dataIndex 对应dataSource的key Node
width 列宽度 Node
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 Function(text, record, index) {}

VehicleInvoicePlate

机动车板式组件

import { VehicleInvoicePlate } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
vehiclInvoiceData 发票信息数据 VehicInvoiceDataProps
vehiclInvoiceDataColumns 发票信息描述,具体项见下表 VehicInvoiceDataColumnProps[]
contentData 主信息 VehicContentDataProps
contentDataTitle 主信息标题 VehicContentDataTitleProps[]
otherElement 组件扩展 Node

VehicInvoiceDataProps

参数 必填 说明 类型 默认值 版本
typeText 类型名称 Node
invoiceCode 发票代码 Node
invoiceNum 发票号码 Node
invoiceDate 开票日期 Node

VehicInvoiceDataColumnProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应PaymentDataProps的key string
alignText 显示位置 flex-start或flex-end或center flex-start
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}

VehicContentDataProps

参数 必填 说明 类型 默认值 版本
machineCode 机打代码 Node
machineNum 机打号码 Node
machineNumber 机器编号 Node
taxControlCode 税控码 Node
buyerName 购买方名称及身份证号码/组织机构代码 Node
buyerNs 购方纳税人识别号 Node
vehicleType 车辆类型 Node
certificateNum 合格证号 Node
brandModel 厂牌型号 Node
importCertificateNo 进口证明书号 Node
placeOfOrigin 产地 Node
inspectionNumber 商检单号 Node
engineNumber 发动机号码 Node
frameNumber 车辆识别号/车架号码 Node
totalPriceTax 价税合计 Node
totalPriceTaxM 小写: Node
sellerName 销货单位名称 Node
sellerNs 销方纳税人识别号 Node
sellerPhone 电话 Node
sellerNumber 账号 Node
sellerAddress 地址 Node
sellerBank 开户银行 Node
tax 增值税税率或征收率 Node
taxNumber 增值税税额 Node
competentTaxCode 主管税务机关及代码 Node
excludingtaxNumber 不含税价(小写) Node
raxPaymentNumber 完税凭证号码 Node
tonnage 吨位 Node
limitedPerson 限乘人数 Node
drawer 开票人: Node
remark 备注: Node

VehicContentDataTitleProps

参数 必填 说明 类型 默认值 版本
machineCode 机打代码 Node 机打代码
machineNum 机打号码 Node 机打号码
machineNumber 机器编号 Node 机器编号
taxControlCode 税控码 Node
buyerName 购买方名称及身份证号码/组织机构代码 Node 购买方名称及身份证号码/组织机构代码
buyerNs 购方纳税人识别号 Node 购方纳税人识别号
vehicleType 车辆类型 Node 车辆类型
certificateNum 合格证号 Node 合格证号
brandModel 厂牌型号 Node 厂牌型号
importCertificateNo 进口证明书号 Node 进口证明书号
placeOfOrigin 产地 Node 产地
inspectionNumber 商检单号 Node 商检单号
engineNumber 发动机号码 Node 发动机号码
frameNumber 车辆识别号/车架号码 Node 车辆识别号/车架号码
totalPriceTax 价税合计 Node 价税合计
totalPriceTaxM 小写: Node 小写:
sellerName 销货单位名称 Node 销货单位名称
sellerNs 销方纳税人识别号 Node 销方纳税人识别号
sellerPhone 电话 Node 电话
sellerNumber 账号 Node 账号
sellerAddress 地址 Node 地址
sellerBank 开户银行 Node 开户银行
tax 增值税税率或征收率 Node 增值税税率或征收率
taxNumber 增值税税额 Node 增值税税额
competentTaxCode 主管税务机关及代码 Node 主管税务机关及代码
excludingtaxNumber 不含税价(小写) Node 不含税价(小写)
raxPaymentNumber 完税凭证号码 Node 完税凭证号码
tonnage 吨位 Node 吨位
limitedPerson 限乘人数 Node 限乘人数
drawer 开票人: Node 开票人:
remark 备注: Node 备注:

RollTypeInvoicePlate

卷式发票板式组件

import { RollTypeInvoicePlate } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
invoiceData 发票信息数据 RollInvoiceDataProps
invoiceDataColumns 发票主信息描述,具体项见下表 RollInvoiceDataColumnsProps[]
contentData 主信息 RollContentDataProps
contentDataTitle 主信息标题 RollContentDataTitleProps[]
goodsColumns 商品表格列的配置描述,具体项见下表 RollInvoiceColumnProps[]
goodsData 商品行数据 any[]
rollTotalData 合计价格信息 RollTotalDataProps
rollTotalTitle 合计价格信息标题 RollTotalTitleProps[]
otherElement 组件扩展 Node
isVirtualized 是否启用virtualized模式 boolean false

RollInvoiceDataProps

参数 必填 说明 类型 默认值 版本
typeText 类型名称 Node
invoiceCode 发票代码 Node
invoiceNum 发票号码 Node

RollInvoiceDataColumnsProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应PaymentDataProps的key string
alignText 显示位置 flex-start或flex-end或center flex-start
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}

RollContentDataProps

参数 必填 说明 类型 默认值 版本
machineNum 机打号码 Node
machineNumber 机器编号 Node
buyerName 购买方名称 Node
buyerNs 购方纳税人识别号 Node
drawer 开票员 Node
invoiceDate 开票日期 Node
sellerName 销货单位名称 Node
sellerNs 销方纳税人识别号 Node

RollContentDataTitleProps

参数 必填 说明 类型 默认值 版本
machineNum 机打号码 Node 机打号码
machineNumber 机器编号 Node 机器编号
buyerName 购买方名称 Node 购买方名称
buyerNs 购方纳税人识别号 Node 购方纳税人识别号
drawer 开票员 Node 开票员
invoiceDate 开票日期 Node 开票日期
sellerName 销货单位名称 Node 销货单位名称
sellerNs 销方纳税人识别号 Node 销方纳税人识别号

RollInvoiceColumnProps

参数 必填 说明 类型 默认值 版本
title 列头文字 Node
dataIndex 对应goodsData的key string
width 列宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 Function(text, record, index) {}

RollTotalDataProps

参数 必填 说明 类型 默认值 版本
totalNum 合计金额(小写) Node
totalC 合计金额(大写) Node
checkCode 校验码 Node

RollTotalTitleProps

参数 必填 说明 类型 默认值 版本
totalNum 合计金额(小写) Node 合计金额(小写)
totalC 合计金额(大写) Node 合计金额(大写)
checkCode 校验码 Node 校验码

UsedCarInvoicePlate

二手车板式组件

import { UsedCarInvoicePlate } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
usedCarInvoiceData 发票信息数据 usedCarInvoiceDataProps
usedCarInvoiceDataColumns 发票信息描述,具体项见下表 usedCarInvoiceDataColumnProps[]
contentData 主信息 usedCarContentDataProps
contentDataTitle 主信息标题 usedCarContentDataTitleProps
otherElement 组件扩展 Node

usedCarInvoiceDataProps

参数 必填 说明 类型 默认值 版本
typeText 类型名称 Node
invoiceCode 发票代码 Node
invoiceNum 发票号码 Node
invoiceDate 开票日期 Node

usedCarInvoiceDataColumnProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应PaymentDataProps的key string
alignText 显示位置 flex-start或flex-end或center flex-start
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}

usedCarContentDataProps

参数 必填 说明 类型 默认值 版本
machineCode 机打代码 Node
machineNum 机打号码 Node
machineNumber 机器编号 Node
taxControlCode 税控码 Node
buyerName 购买方名称及身份证号码/组织机构代码 Node
buyerNumber 买方单位代码/身份证号码 Node
buyerAddress 买方单位/个人住址 Node
buyerPhone 买方电话 Node
sellerName 卖方单位/个人 Node
sellerNumber 卖方单位代码/身份证号码 Node
sellerAddress 卖方单位/个人住址 Node
sellerPhone 卖方电话 Node
licenseTag 车牌照号 Node
registrationNo 登记证号 Node
vehicleType 车辆类型 Node
vinNo 车架号/车辆识别代码 Node
brandAndModel 厂牌型号 Node
managementOfficeName 转入地车辆 管理所名称 Node
totalCap 车价合计(大写) Node
totalLet 车价合计(小写) Node
auctionUnit 经验、拍卖单位 Node
auctionUnitAddress 经验、拍卖单位地址 Node
auctionUnitTaxNumber 经验、拍卖单位税号 Node
auctionUnitPhone 经验、拍卖单位电话 Node
usedCarMarketName 二手车市场 Node
usedCarMarketTaxNumber 二手车市场税号 Node
usedCarMarketAddress 二手车市场地址 Node
usedCarMarketBankNumber 二手车市场开户银行、账号 Node
usedCarMarketPhone 二手车市场电话 Node
mark 备注: Node
invoiceOffice 开票单位 Node
toExamine 工商部门审核 Node
drawer 开票人 Node

usedCarContentDataTitleProps

参数 必填 说明 类型 默认值 版本
machineCode 机打代码 Node
machineNum 机打号码 Node
machineNumber 机器编号 Node
taxControlCode 税控码 Node
buyerName 购买方名称及身份证号码/组织机构代码 Node
buyerNumber 买方单位代码/身份证号码 Node
buyerAddress 买方单位/个人住址 Node
buyerPhone 买方电话 Node
sellerName 卖方单位/个人 Node
sellerNumber 卖方单位代码/身份证号码 Node
sellerAddress 卖方单位/个人住址 Node
sellerPhone 卖方电话 Node
licenseTag 车牌照号 Node
registrationNo 登记证号 Node
vehicleType 车辆类型 Node
vinNo 车架号/车辆识别代码 Node
brandAndModel 厂牌型号 Node
managementOfficeName 转入地车辆 管理所名称 Node
totalCap 车价合计(大写) Node
totalLet 车价合计(小写) Node
auctionUnit 经验、拍卖单位 Node
auctionUnitAddress 经验、拍卖单位地址 Node
auctionUnitTaxNumber 经验、拍卖单位税号 Node
auctionUnitPhone 经验、拍卖单位电话 Node
usedCarMarketName 二手车市场 Node
usedCarMarketTaxNumber 二手车市场税号 Node
usedCarMarketAddress 二手车市场地址 Node
usedCarMarketBankNumber 二手车市场开户银行、账号 Node
usedCarMarketPhone 二手车市场电话 Node
mark 备注: Node
invoiceOffice 开票单位 Node
toExamine 工商部门审核 Node
drawer 开票人 Node

ElectricPlate

全电发票板式组件

import { ElectricPlate } from 'kts-invoice-plate';

Prop Types

参数 必填 说明 类型 默认值 版本
invoiceData 发票信息数据 ElectricInvoiceDataProps
invoiceDataColumns 发票主信息描述,具体项见下表 ElectricInvoiceDataColumnProps[]
goodsOption 商品行头部功能标签 Node[]
buyerData 购方信息,具体项见下表 ElectricBuyerDataType
buyerTitle 购方信息title 自定义,具体项见下表 ElectricBuyerTitleType
sellerData 销方信息,具体项见下表 ElectricSellerDataType
sellerTitle 销方信息title 自定义,具体项见下表 ElectricSellerTitleType
goodsColumns 商品表格列的配置描述,具体项见下表 ElectricColumnProps[]
goodsData 商品行数据 any[]
totalNum 合计数据 小写 ElectricTotalProps[]
totalNumText 合计数据 大写 ElectricTotalProps[]
personData 操作人信息 ElectricPersonDataProps
otherElement 组件扩展 Node
isVirtualized 是否启用virtualized模式 boolean false

ElectricInvoiceDataProps

参数 必填 说明 类型 默认值 版本
typeText 发票类型
其他数据

ElectricInvoiceDataColumnProps

参数 必填 说明 类型 默认值 版本
title 标题 Node
dataIndex 对应ElectricInvoiceDataProps的key string
alignText 显示位置 flex-start或flex-end或center flex-end
render 生成复杂数据的渲染函数,参数为当前行的值 Function(text) {}
示例
    const invoiceData = {
      typeText: '电子发票(增值税专用发票)',
      invoiceNum: '11111222223333344444',
      invoiceDate: '20220309'
    };
    const invoiceDataColumns = [
        {
            title: '发票号码:',
            dataIndex: 'invoiceNum',
            render: (text) => {
                return text;
            }
        },
        {
            title: '开票日期:',
            dataIndex: 'invoiceDate',
            render: (text) => {
                return text;
            }
        },
    ];

ElectricBuyerDataType

参数 必填 说明 类型 默认值 版本
name 购方名称 Node
taxNumber 购方税号 Node

ElectricBuyerTitleType

参数 必填 说明 类型 默认值 版本
nameTitle 购方名称 Node
taxNumberTitle 购方税号 Node

ElectricSellerDataType

参数 必填 说明 类型 默认值 版本
name 销方名称 Node
taxNumber 销方税号 Node
remarks 备注 Node

ElectricSellerTitleType

参数 必填 说明 类型 默认值 版本
nameTitle 销方名称 Node
taxNumberTitle 销方税号 Node
remarksTitle 备注 Node

ElectricColumnProps

参数 必填 说明 类型 默认值 版本
title 列头文字 Node
dataIndex 对应goodsData的key string
width 列宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 Function(text, record, index) {}

ElectricTotalProps

参数 必填 说明 类型 默认值 版本
title 当前显示元素的值 Node
width 宽度 string
alignText 对齐方式 'left'或'right'或'center' left
render 生成复杂数据的渲染函数 Function() {}
示例
    const totalNum = [
        {
            title: '',
            width: 45
        },
        {
            title: '合计',
            width: 386,
            alignText: 'left' as ('center' | 'left' | 'right'),
        },
        {
            title: '',
            width: 426
        },
        {
            title: '2990.00',
            alignText: 'right' as ('center' | 'left' | 'right'),
            width: 119
        },
        {
            title: '',
            width: 69
        },
        {
            title: '100.00',
            alignText: 'right' as ('center' | 'left' | 'right'),
        }
    ];

ElectricPersonDataProps

参数 必填 说明 类型 默认值 版本
drawer 开票人 Node

Readme

Keywords

none

Package Sidebar

Install

npm i op-invoice-plate

Weekly Downloads

0

Version

1.0.3

License

none

Unpacked Size

194 kB

Total Files

93

Last publish

Collaborators

  • teamwang