本来是开发个报表模块,具体功能为:OE读取excel表格-web显示-导出成excel。
做完了拿给老板看时,老板对web显示这一块大不满意(用的OE自带的form页面),觉得人性化方便做的不到位,让我重新设计web页面,于是开始了为期一个月的前端研究。
起先是打算自己脱离OE搞个前端来显示这个报表,用的是Django做了一个页面,做的差不多时拿给老板看,老板说从OE再弹出个窗口体验性差,叫我整合进OE里,当时我就(此处省略若干字。。)
不得已就去翻官网文档,看到这篇文档:https://doc.odoo.com/trunk/training/web_framework/
后大有启发,决定用qweb来写这个报表。其中多亏了群里的高手指点,才得以实现呀
看了这么久是不是着急看代码
,嘿嘿。。
首先从梦姑处偷了点经验,看了他的帖子:http://shine-it.net/index.php/topic,16514.0.html
他的贴子里的我就不重复了
先是js读取数据库:
start: function() {
var self = this;
new instance.web.Model("lcqc.date.table.smt.data").query().filter([["smt_qctable_id", "=", 139]])
.all().then(function(result) {
console.log("##################the message_of_the_day result is", result);
self.$el.append($(QWeb.render("MessageofTheDay", {item: result})));
});
},
值得注意的是得到的是一个object
然后把参数item: result传递给qweb。
qweb代码:
<t t-name="MessageofTheDay">
<div class="oe_petstore_motd">
<table>
<t t-foreach="item" t-as="qname">
<tr>
<td><t t-esc="qname.date_smtqc_statistical_table"/></td>
<td><t t-esc="qname.inspector_smtqc_st"/></td>
..................
</tr>
</t>
</table>
</t>
注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。
然后就是整合进OE:
首先是__openerp__.py中的定义:
'data': ['qc_table_qweb.xml'],
"js": ["static/src/js/*.js"],
"css": ["static/src/css/*.css"],
"qweb": ["static/src/xml/*.xml"],
其中qc_table_qweb.xml放在模块的根目录里,其代码:
<openerp>
<data>
<record model="ir.actions.client" id="action_client_example">
<field name="name">Example Client Action</field>
<field name="tag">example.action</field>
</record>
<menuitem id="qc_table_qweb_menu" name="QC报表qweb" sequence="20" parent="qc_table_menu"/>
<menuitem action="action_client_example" id="menu_client_example" parent="qc_table_qweb_menu" name="qc_smt日报表qweb"/>
</data>
</openerp>
同样注意下name字段与js的关联,才能保证正确显示。
css:
.oe_petstore_motd td,th{
border:1px solid blue;
}
.oe_petstore_motd td{
color:#F80E0E;
}
其实我还是建议看上面的英文文档,跟着教程一步一步走,才能把握到精髓呀!
下面上一张效果图: