效果图如下:
模板代码:
1 <template id="purchase_order_report"> 2 <t t-call="web.html_container"> 3 <t t-foreach="docs" t-as="doc"> 4 <t t-call="web.external_layout"> 5 <div class="page"> 6 <style> 7 * { 8 /*margin: 0 0 0 0;*/ 9 } 10 11 table { 12 border-spacing: 0; 13 /*边框合并*/ 14 border-collapse: collapse; 15 } 16 17 .table-bordered td, th { 18 border: black 1px solid; 19 20 text-align: center; 21 22 } 23 24 .title { 25 26 text-align: right; 27 padding-right: 3px; 28 } 29 </style> 30 31 <table> 32 <tr> 33 <td colspan="7" style="text-align: center;"> 34 <h2>XXXXXXX有限公司订货单</h2> 35 </td> 36 <td colspan="3" style="text-align: right">* 三证合一,开票资料有变</td> 37 </tr> 38 <tr> 39 <td class="title">部门:</td> 40 <td colspan="2"><span t-field="doc.department_id"/></td> 41 42 <td class="title">订单日期:</td> 43 <td colspan="2"><span t-field="doc.date_order"/></td> 44 45 46 <td class="title">订单编号:</td> 47 <td><span t-field="doc.name"/></td> 48 <td></td> 49 <td></td> 50 </tr> 51 <tr> 52 <td class="title">供货单位:</td> 53 <td colspan="9"><span t-field="doc.partner_id"/></td> 54 </tr> 55 <tr class="table-bordered"> 56 <th>产品名称</th> 57 <th>规格</th> 58 <th>型号</th> 59 <th>技术/质量要求</th> 60 <th>单位</th> 61 <th>数量</th> 62 <th>含税单价</th> 63 <th>金额</th> 64 <th>交货时间</th> 65 <th>备注</th> 66 </tr> 67 <t t-foreach="doc.order_line" t-as="line"> 68 <tr class="table-bordered"> 69 <td> 70 <span t-field="line.product_id"/> 71 </td> 72 <td></td> 73 <td> 74 <span t-field="line.name"/> 75 </td> 76 <td></td> 77 <td> 78 <span t-field="line.product_uom"/> 79 </td> 80 <td> 81 <span t-field="line.product_qty"/> 82 </td> 83 <td> 84 <span t-field="line.price_unit_taxed"/> 85 </td> 86 <td> 87 <span t-field="line.price_total"/> 88 </td> 89 <td> 90 <span t-field="line.date_planned"/> 91 </td> 92 <td></td> 93 </tr> 94 </t> 95 96 <tr class="table-bordered"> 97 <td>合计</td> 98 <td></td> 99 <td></td> 100 <td></td> 101 <td></td> 102 <td> 103 <span t-field="doc.total_amount"/> 104 </td> 105 <td></td> 106 <td> 107 <span t-field="doc.total_price_taxed"/> 108 </td> 109 <td></td> 110 <td></td> 111 </tr> 112 113 114 </table> 115 116 <table> 117 118 <tr style="height: 10px"></tr> 119 <tr> 120 <td colspan="1" class="title">买方(盖章):</td> 121 <td colspan="4"><span t-field="doc.company_self"/></td> 122 <td class="title">供方(盖章):</td> 123 <td colspan="4"></td> 124 125 </tr> 126 <tr> 127 <td colspan="1" class="title">买方地址:</td> 128 <td colspan="4"><span t-field="doc.company_self.address_full"/></td> 129 <td class="title">供方代表:</td> 130 <td colspan="4"><span t-field="doc.partner_id.contacter_purchase"/></td> 131 132 </tr> 133 <tr> 134 <td class="title">买方联系电话:</td> 135 <td><span t-field="doc.company_self.legalbody"/></td> 136 <td class="title">传真:</td> 137 <td><span t-field="doc.company_self.fax"/></td> 138 <td></td> 139 <td class="title">供方电话:</td> 140 <td><span t-field="doc.partner_id.phone_purchase"/></td> 141 <td class="title">供方传真:</td> 142 <td></td> 143 <td></td> 144 </tr> 145 <tr> 146 <td class="title">日期:</td> 147 <td><span t-field="doc.date_current"/></td> 148 <td class="title">联系人:</td> 149 <td><span t-field="doc.company_self.isconnflag"/></td> 150 <td></td> 151 <td class="title">日期:</td> 152 <td></td> 153 <td></td> 154 <td></td> 155 <td></td> 156 </tr> 157 <tr> 158 <td class="title">采购中心:</td> 159 <td colspan="4"></td> 160 <td class="title">使用部门:</td> 161 <td colspan="4"></td> 162 163 </tr> 164 <tr style="height: 10px"></tr> 165 <tr> 166 <td colspan="10">配合财务系统电脑系统管理, 要求如下:</td> 167 168 </tr> 169 <tr> 170 <td colspan="10">1,收到订单后,请及时盖章回传;2,供方随货附有质检报告,送货单商注明本订单编号;3,开具发票时,需附发票内容所所对应的送货单.</td> 171 172 </tr> 173 <tr> 174 <td colspan="10" style="height: 10px"></td> 175 </tr> 176 <tr> 177 <td rowspan="3" colspan="2" style="text-align: center;font-size: 20px">开票资料:</td> 178 <td class="title">发票单位:</td> 179 <td colspan="3">XXXXXXX有限公司</td> 180 <td class="title">税号:</td> 181 <td colspan="3"><span t-field="doc.company_self.vat"/></td> 182 </tr> 183 <tr> 184 <td class="title">开户行:</td> 185 <td colspan="3"><span t-field="doc.company_self.bank_name"/></td> 186 <td class="title">账号:</td> 187 <td colspan="3"><span t-field="doc.company_self.account_number"/></td> 188 </tr> 189 <tr> 190 <td class="title">地址/电话:</td> 191 <td colspan="9"><span t-field="doc.company_self.pk_areacl"/></td> 192 193 </tr> 194 </table> 195 196 </div> 197 </t> 198 </t> 199 </t> 200 </template>
其中就使用了两个table 元素来固定格式,以及少量样式来调整线框显示,使用表格的方式固定文字的位置还是比较方便的,
当然也可以使用div 的形式来调整格式,但是这对前端样式调整要求较高
colspan="10" 用于单元格的合并