打印主从
场景描述
打印一个主表及其多个从表的数据
打印效果如下图所示
实现思路
- 方式一：使用主从打印，需要根据主表刺激从表加载后才能打印从表数据
- 方式二：不设置主从，通过模板中使用ifCond进行数据循环判断
实现步骤
定义一张主表和两个从表
下面分别说明使用主从打印的方法和不使用主从打印的方法
1 使用主从打印
在页面上添加主表、从表1和从表2数据集组件，设置从表1和从表2的主从选项中的主数据和关联列
添加打印组件，设置打印组件的"打印数据"属性为主表数据集
打印模板文件内容如下
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">主页</h1>
</div>
<div class="table">
[[#each data ]]
<div class='print-item String'>
<div class='print-item-label'>编码</div><div class='print-item-value'>[[[fno]]]</div>
</div>
<div class='print-item Datetime'>
<div class='print-item-label'>日期</div><div class='print-item-value'>[[[fdate]]]</div>
</div>
<div class='print-item child-table'>
<div class='print-item-label'>从表1</div>
<div class='print-item-value'>
<!--从表打印 循环使用从表数据xid-->
[[#each restData1]]
<div class='print-item String'>
<div class='print-item-label'>名称</div><div class='print-item-value'>[[[fname]]]</div>
</div>
<div class='print-item Integer'>
<div class='print-item-label'>单价</div><div class='print-item-value'>[[[fprice]]]</div>
</div>
[[/each]]
</div>
</div>
<div class='print-item child-table'>
<div class='print-item-label'>从表1</div>
<div class='print-item-value'>
[[#each restData2]]
<div class='print-item Integer'>
<div class='print-item-label'>数量</div><div class='print-item-value'>[[[fnum]]]</div>
</div>
<div class='print-item Integer'>
<div class='print-item-label'>金额</div><div class='print-item-value'>[[[fmoney]]]</div>
</div>
[[/each]]
</div>
</div>
[[/each]]
</div>
<div class="footer">
<h4 class="printer">打印人：[[context.printer]]</h4>
<h4 class="print-date">打印时间：[[context.printDate]]</h4>
</div>
</body>
</html>
打印模板说明
**因文档生成异常，代码中{} 使用[]代替，实际使用以{}为准**
[[#each data]] data是规定写法，指的是打印数据属性对应的数据集，如果是主表，则包括加载到页面上的从表数据，未加载的数据则不能打印
[[#each restData1]] restData1是数据集的xid或id
使用此模板，需要将主表数据对应的从表数据都加载到页面中，才能完整打印
2 不使用主从打印
在页面上添加主表、从表1和从表2数据集组件，清空从表1和从表2的主从选项属性
添加打印组件，设置打印组件的"打印数据"属性为主表数据集，“附加数据”属性选择从表1和从表2
打印模板文件内容如下
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">主页</h1>
</div>
<div class="table">
[[#each data]]
<div class='print-item String'>
<div class='print-item-label'>编码</div><div class='print-item-value'>[[[fno]]]</div>
</div>
<div class='print-item Datetime'>
<div class='print-item-label'>日期</div><div class='print-item-value'>[[[fdate]]]</div>
</div>
<div class='print-item child-table'>
<div class='print-item-label'>从表1</div>
<div class='print-item-value'>
<!--从表打印 循环使用从表数据xid-->
[[#each ../context.datas.restData1]]
[[#ifCond zhubiao '==' ../fid]]
<div class='print-item String'>
<div class='print-item-label'>名称</div><div class='print-item-value'>[[[fname]]]</div>
</div>
<div class='print-item Integer'>
<div class='print-item-label'>单价</div><div class='print-item-value'>[[[fprice]]]</div>
</div>
[[/ifCond]]
[[/each]]
</div>
</div>
<div class='print-item child-table'>
<div class='print-item-label'>从表2</div>
<div class='print-item-value'>
[[#each ../context.datas.restData2]]
[[#ifCond zhubiao '==' ../fid]]
<div class='print-item Integer'>
<div class='print-item-label'>数量</div><div class='print-item-value'>[[[fnum]]]</div>
</div>
<div class='print-item Integer'>
<div class='print-item-label'>金额</div><div class='print-item-value'>[[[fmoney]]]</div>
</div>
[[/ifCond]]
[[/each]]
</div>
</div>
[[/each]]
</div>
<div class="footer">
<h4 class="printer">打印人：[[context.printer]]</h4>
<h4 class="print-date">打印时间：[[context.printDate]]</h4>
</div>
</body>
</html>
打印模板说明
**因文档生成异常，代码中{} 使用[]代替，实际使用以{}为准**
[[#each ../context.datas.restData1]] context.datas.restData1是访问附加数据的写法，restData1是附加数据的xid或id
[[#ifCond zhubiao '==' ../fid]] 比较主键和外键是否相等。zhubiao是从表的外键列，见上面的数据结构定义。../fid表示主表的主键
ifCond比较符支持'==','===' ,'!=','!==','>','<','>=','<=','&&','||'
使用此模板，分别加载主表和从表的数据，为保证加载完整，注意将从表的分页大小设置为-1