5 odoo 自定义界面

本文以项目模块自定义工作台为例 模块名称：my_project

odoo的自定义界面实现主要的两个工具：Qweb、js

正式开始之前在需要自定义内容的模块中定义几个文件:

• static/js/project_workspace.js 用于js代码
• static/scss/project_workspace.scss 模板样式渲染
• static/scss/workspace_table_style.scss 模板中展示表格样式渲染
• static/xml/project_workspace.xml 使用Qweb自定义html界面
• views/project_workspace_views.xml 定义自定义界面的菜单项目入口
• views/template.xml 加载js以及css模板

views/project_workspace_views.xml文件：

1. <?xml version="1.0" encoding="UTF-8" ?>
2. <odoo>
3. <!-- 项目工作台-->
4. <record id="bw_project_workspace_action" model="ir.actions.client">
5. <field name="name">工作台</field>
6. <field name="tag">project_workspace.main</field>
7. </record>
9. <menuitem name="工作台"
10. parent="bw_project.menu_root"
11. id="bw_project_workspace_menu"
12. action="bw_project_workspace_action"
13. sequence="100" groups="base.group_system"/>
15. </odoo>

首先定义一个工作台的客户端动作
其次定义一个工作台的菜单项目，通过action属性指定触发的客户端动作

views/template.xml 文件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <odoo>
3. <!-- 自定义项目工作台 -->
4. <template id="bw_project_assets_backend" inherit_id="web.assets_backend" name="bw_project_assets_backend">
5. <xpath expr="." position="inside">
6. <link rel="stylesheet" type="text/scss" href="/bw_project/static/src/scss/project_workspace.scss"/>
7. <link rel="stylesheet" type="text/scss" href="/bw_project/static/src/scss/workspace_table_style.scss"/>
8. <script type="text/javascript" src="/bw_project/static/src/js/project_workspace.js"/>
9. </xpath>
10. </template>
11. </odoo>

加载scss或js文件 自动渲染html

static/xml/project_workspace.xml文件：

1. <?xml version="1.0" encoding="UTF-8" ?>
2. <template xml:space="preserve">
3. <t t-name="Projectworkspace">
4. <div class="container-fluid py-2 o_bw_project_workspace">
5. <div class="form-row">
6. <div class="col-12 col-lg-6 o_bw_project_workspace_col">
7. <div class="o_bw_project_workspace_show">
8. <p>项目工作台 显示1</p>
9. </div>
10. </div>
11. <div class="col-12 col-lg-6 o_bw_project_workspace_col">
12. <div class="o_web_settings_dashboard_invitations">
13. <p>项目工作台 显示3</p>
14. </div>
15. <div class="o_web_settings_dashboard_company">
16. <p>项目工作台 显示4</p>
17. </div>
18. </div>
19. </div>
20. </div>
21. </t>
23. <t t-name="BwProjectProject">
24. <div class="text-center o_bw_project_workspace_show">
25. <h1 class="my_project">我的项目</h1>
26. <hr/>
27. <t t-set="project_objs" t-value="widget.data.project_objs"/>
28. <table class="mt">
29. <tr>
30. <th>项目编码</th>
31. <th>项目名称</th>
32. <th>项目状态</th>
33. </tr>
34. <t t-foreach="project_objs" t-as="project">
35. <tr>
36. <td>
37. <a href="#" class="badge badge-pill o_bw_project_to_form"
38. t-att-data-project-id="project.id"> <t t-esc="project.code"/> </a>
39. </td>
40. <td>
41. <a href="#" class="badge badge-pill o_bw_project_to_form"
42. t-att-data-project-id="project.id"><t t-esc="project.name"/> </a>
43. </td>
44. <td>
45. <a href="#" class="badge badge-pill o_bw_project_to_form"
46. t-att-data-project-id="project.id"><t t-esc="project.state"/> </a>
47. </td>
48. </tr>
49. </t>
50. </table>
51. <t t-if="project_objs.length &lt; widget.data.project_count">
52. <br/>
53. <a href="#" class="o_web_settings_dashboard_more o_bw_project_more"><t t-esc="widget.data.project_count - project_objs.length"/> 查看更多 </a>
54. </t>
55. </div>
56. </t>
57. </template>

模板id为Projectworkspace中定义了整个模板的样式
模板id为BwProjectProject中渲染模板内容

static/scss/project_workspace.scss 文件：

1. .o_bw_project_workspace {
3. $bg-dashboard-col: #FFF;
5. @mixin o-web-settings-dashboard-card {
6. box-shadow: 0 1px 2px 0 rgba(0,0,0,.14);
7. background: $bg-dashboard-col;
8. border-radius: 2px;
9. }
11. background: #F7F7F7;
12. height: 100%;
14. .o_bw_project_workspace_col {
15. > div > hr {
16. margin: 12px -18px 15px -18px;
17. border-color: #CBCBCB;
18. }
20. > div {
21. @include o-web-settings-dashboard-card;
22. padding: 25px 18px 18px 18px;
24. .o_web_settings_dashboard_header {
25. font-size: 22px;
26. margin-bottom: 8px;
27. }
28. }
29. .o_bw_project_to_form {
30. font-size: 14px;
31. }
33. .btn.o_browse_apps, .btn.o_web_settings_dashboard_invitations {
34. margin-top: 12px;
35. }
36. .o_web_settings_dashboard_compact_subtitle {
37. line-height: 12px;
38. display: block;
39. }
40. .o_web_settings_dashboard_invitations {
41. .o_web_settings_dashboard_invitation_form {
42. text-align: left;
43. > textarea {
44. resize: vertical;
45. width: 100%;
46. }
47. }
48. }
49. .o_web_settings_dashboard_planner {
50. .progress {
51. height: 10px;
52. background-color: darken($bg-dashboard-col, 15%);
53. cursor: pointer;
54. margin-bottom: 30px;
55. }
56. .o_web_settings_dashboard_planner_progress_text {
57. font-size: 18px;
58. padding-right: 0px;
59. padding-top: 3px;
60. }
61. .o_web_settings_dashboard_planner_progress_bar {
62. padding-left: 10px;
63. }
64. .o_web_settings_dashboard_progress_title {
65. font-weight: bold;
66. cursor: pointer;
67. color: $o-brand-primary;
68. }
69. }
70. }
71. }

static/js/project_workspace.js 文件：

1. odoo.define('bw_project', function(require){
2. "use strict";
4. //自定义项目工作台
6. var AbstractAction = require('web.AbstractAction');
7. var config = require('web.config');
8. var core = require('web.core');
9. var framework = require('web.framework');
10. var session = require('web.session');
11. var Widget = require('web.Widget');
13. var QWeb = core.qweb;
14. var _t = core._t;
16. var Projectworkspace = AbstractAction.extend({
17. template: 'Projectworkspace',
18. init: function(){
19. this.load_workspace = ['bw_project']
20. return this._super.apply(this, arguments);
21. },
23. start: function(){
24. return this.load(this.load_workspace);
25. },
27. load: function(workspaces){
28. var self = this;
29. var loading_done = new $.Deferred();
30. this._rpc({route: '/bw_project_workspace/data'})
31. .then(function (data) {
32. // Load each workspace
33. var all_workspaces_defs = [];
34. _.each(workspaces, function(workspace) {
35. console.log(workspace)
36. var workspace_def = self['load_' + workspace](data);
37. if (workspace_def) {
38. all_workspaces_defs.push(workspace_def);
39. }
40. });
42. $.when.apply($, all_workspaces_defs).then(function() {
43. loading_done.resolve();
44. });
45. });
46. return loading_done;
47. },
49. load_bw_project: function(data){
50. return new ShowProject(this, data.projects_info).replace(this.$('.o_bw_project_workspace_show'));
51. },
52. });
54. var ShowProject = Widget.extend({
55. template: 'BwProjectProject',
56. events: {
57. 'click .o_bw_project_to_form': 'to_form_clicked',
58. 'click .o_bw_project_more': 'on_more',
59. },
60. init: function(parent, data) {
61. this.data = data;
62. this.parent = parent;
63. this.emails = [];
64. return this._super.apply(this, arguments);
65. },
67. to_form_clicked: function (e) {
68. var self = this;
69. e.preventDefault();
70. var project_id = $(e.currentTarget).data('project-id');
71. var action = {
72. type: 'ir.actions.act_window',
73. view_type: 'form',
74. view_mode: 'form',
75. res_model: 'project.project',
76. views: [[this.data.project_form_view_id, 'form']],
77. res_id: project_id,
78. };
79. this.do_action(action,{
80. on_reverse_breadcrumb: function(){ return self.reload();}
81. });
82. },
83. on_more: function(e) {
84. var self = this;
85. e.preventDefault();
86. var action = {
87. name: _t('项目'),
88. type: 'ir.actions.act_window',
89. view_type: 'form',
90. view_mode: 'tree,form',
91. res_model: 'project.project',
92. domain: [['is_user_read', '=', true]],
93. views: [[false, 'list'], [false, 'form']],
94. };
95. this.do_action(action,{
96. on_reverse_breadcrumb: function(){ return self.reload();}
97. });
98. },
99. reload:function(){
100. return this.parent.load(['bw_project']);
101. },
102. });
104. core.action_registry.add('project_workspace.main', Projectworkspace);
106. return {
107. Projectworkspace: Projectworkspace,
108. };
110. });

异步访问路由 /bw_project_workspace/data，获取后台项目信息。并实现 记录的点击跳转

core.action_registry.add(‘project_workspace.main’, Projectworkspace);中为客户端动作定义的tag内容。

template: ‘Projectworkspace’, template关键字指定模板id则自动渲染html界面，未知的这需手动渲染html界面

其中static/xml/project_workspace.xml文件引入manifest.py的qweb关键字下

结果展示（程序员审美请见谅。工作台区域美化可自定义）