效果图如下:
模板代码:
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>
View Code
其中就使用了两个table 元素来固定格式,以及少量样式来调整线框显示,使用表格的方式固定文字的位置还是比较方便的,
当然也可以使用div 的形式来调整格式,但是这对前端样式调整要求较高
colspan="10" 用于单元格的合并
懂得,原来世界如此简单!
