Kts-invoice-plate NPM

发票板式

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'),
        }
    ];