一、需求分析:
环境:react,antd,antd-pro
将选中的数据进行打印,可以自定义分页的大小。
由于打印的列等多个因素,导致如果写成组件在使用的时候依旧会改变源码,所以采用了写成页面的方式,
二、实现需求:
1、数据传值
进行传值的时候,刚开始使用的是在通过this.props.location进行传值,但是这样数据被写死了,导致再次进入页面的时候无法更新打印的值。
最后采用了一个全局的model进行实现的传值。
2、表格生成
分为四部分进行生成,分别是标题、表头、表格、表尾。其中表头,表尾因为需求的原因写死。
以下为代码:
createTitle = (title)=>(
{title}
)
createHeader = (headerData)=>{
headerData = [
{
orderID:'订单编号',
value:'P201901020002',
},{
people:'采购人员',
value:'xxx',
},{
time:'采购时间',
value:'2019年01月01日',
}
];
return (
订单编号: | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
采购员: | 采购时间: |
)
}
createForm = (printCol,printData)=>(
{
(
{printCol.map(item=>
)
}
{
printData.map(item=> (
{Object.keys(item).map(i =>
{item[i]})})
)
}
)
createFooter = (footerData)=>{
return (
供应商(签字) | 库管员(签字) | {`第${footerData.current}页`} | {`共${footerData.total}页`} |
---|
)
}
createPrintArea = (printCol)=>{
const {printGroupData} = this.state;
return (
printGroupData.map((item,index)=>{
if(item.length){
return (
{this.createTitle('xxxxxxx公司xxx单')}
{this.createHeader('asd')}
{this.createForm(printCol,item)}
{this.createFooter({current:index+1,total:printGroupData.length})}
)
}
})
)
}
最主要的是CSS的调整,因为之后的打印需求将所有的CSS内联:
以下为css:
export const styleObj = {
printArea:{
width: '500px',
fontSize: '12px',
align:'center'
},
printInput:{
fontWeight:'bold',
border: 'none',
},
title:{
textAlign: 'center',
fontSize: '15px',
fontWeight: '700',
},
header:{
fontW