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文件：

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>

<record id="bw_project_workspace_action" model="ir.actions.client">
<field name="name">工作台</field>
<field name="tag">project_workspace.main</field>
</record>
<menuitem name="工作台"
parent="bw_project.menu_root"
id="bw_project_workspace_menu"
action="bw_project_workspace_action"
sequence="100" groups="base.group_system"/>
</odoo>

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

views/template.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="bw_project_assets_backend" inherit_id="web.assets_backend" name="bw_project_assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" type="text/scss" href="/bw_project/static/src/scss/project_workspace.scss"/>
<link rel="stylesheet" type="text/scss" href="/bw_project/static/src/scss/workspace_table_style.scss"/>
<script type="text/javascript" src="/bw_project/static/src/js/project_workspace.js"/>
</xpath>
</template>
</odoo>

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

static/xml/project_workspace.xml文件：

<?xml version="1.0" encoding="UTF-8" ?>
<template xml:space="preserve">
<t t-name="Projectworkspace">
<div class="container-fluid py-2 o_bw_project_workspace">
<div class="form-row">
<div class="col-12 col-lg-6 o_bw_project_workspace_col">
<div class="o_bw_project_workspace_show">
<p>项目工作台显示1</p>
</div>
</div>
<div class="col-12 col-lg-6 o_bw_project_workspace_col">
<div class="o_web_settings_dashboard_invitations">
<p>项目工作台显示3</p>
</div>
<div class="o_web_settings_dashboard_company">
<p>项目工作台显示4</p>
</div>
</div>
</div>
</div>
</t>
<t t-name="BwProjectProject">
<div class="text-center o_bw_project_workspace_show">
<h1 class="my_project">我的项目</h1>
<hr/>
<t t-set="project_objs" t-value="widget.data.project_objs"/>
<table class="mt">
<tr>
<th>项目编码</th>
<th>项目名称</th>
<th>项目状态</th>
</tr>
<t t-foreach="project_objs" t-as="project">
<tr>
<td>
<a href="#" class="badge badge-pill o_bw_project_to_form"
t-att-data-project-id="project.id"> <t t-esc="project.code"/> </a>
</td>
<td>
<a href="#" class="badge badge-pill o_bw_project_to_form"
t-att-data-project-id="project.id"><t t-esc="project.name"/> </a>
</td>
<td>
<a href="#" class="badge badge-pill o_bw_project_to_form"
t-att-data-project-id="project.id"><t t-esc="project.state"/> </a>
</td>
</tr>
</t>
</table>
<t t-if="project_objs.length < widget.data.project_count">
<br/>
<a href="#" class="o_web_settings_dashboard_more o_bw_project_more"><t t-esc="widget.data.project_count - project_objs.length"/> 查看更多 </a>
</t>
</div>
</t>
</template>

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

static/scss/project_workspace.scss 文件：

.o_bw_project_workspace {
$bg-dashboard-col: #FFF;
@mixin o-web-settings-dashboard-card {
box-shadow: 0 1px 2px 0 rgba(0,0,0,.14);
background: $bg-dashboard-col;
border-radius: 2px;
}
background: #F7F7F7;
height: 100%;
.o_bw_project_workspace_col {
> div > hr {
margin: 12px -18px 15px -18px;
border-color: #CBCBCB;
}
> div {
@include o-web-settings-dashboard-card;
padding: 25px 18px 18px 18px;
.o_web_settings_dashboard_header {
font-size: 22px;
margin-bottom: 8px;
}
}
.o_bw_project_to_form {
font-size: 14px;
}
.btn.o_browse_apps, .btn.o_web_settings_dashboard_invitations {
margin-top: 12px;
}
.o_web_settings_dashboard_compact_subtitle {
line-height: 12px;
display: block;
}
.o_web_settings_dashboard_invitations {
.o_web_settings_dashboard_invitation_form {
text-align: left;
> textarea {
resize: vertical;
width: 100%;
}
}
}
.o_web_settings_dashboard_planner {
.progress {
height: 10px;
background-color: darken($bg-dashboard-col, 15%);
cursor: pointer;
margin-bottom: 30px;
}
.o_web_settings_dashboard_planner_progress_text {
font-size: 18px;
padding-right: 0px;
padding-top: 3px;
}
.o_web_settings_dashboard_planner_progress_bar {
padding-left: 10px;
}
.o_web_settings_dashboard_progress_title {
font-weight: bold;
cursor: pointer;
color: $o-brand-primary;
}
}
}
}

static/js/project_workspace.js 文件：

odoo.define('bw_project', function(require){
"use strict";
//自定义项目工作台
var AbstractAction = require('web.AbstractAction');
var config = require('web.config');
var core = require('web.core');
var framework = require('web.framework');
var session = require('web.session');
var Widget = require('web.Widget');
var QWeb = core.qweb;
var _t = core._t;
var Projectworkspace = AbstractAction.extend({
template: 'Projectworkspace',
init: function(){
this.load_workspace = ['bw_project']
return this._super.apply(this, arguments);
},
start: function(){
return this.load(this.load_workspace);
},
load: function(workspaces){
var self = this;
var loading_done = new $.Deferred();
this._rpc({route: '/bw_project_workspace/data'})
.then(function (data) {
// Load each workspace
var all_workspaces_defs = [];
_.each(workspaces, function(workspace) {
console.log(workspace)
var workspace_def = self['load_' + workspace](data);
if (workspace_def) {
all_workspaces_defs.push(workspace_def);
}
});
$.when.apply($, all_workspaces_defs).then(function() {
loading_done.resolve();
});
});
return loading_done;
},
load_bw_project: function(data){
return new ShowProject(this, data.projects_info).replace(this.$('.o_bw_project_workspace_show'));
},
});
var ShowProject = Widget.extend({
template: 'BwProjectProject',
events: {
'click .o_bw_project_to_form': 'to_form_clicked',
'click .o_bw_project_more': 'on_more',
},
init: function(parent, data) {
this.data = data;
this.parent = parent;
this.emails = [];
return this._super.apply(this, arguments);
},
to_form_clicked: function (e) {
var self = this;
e.preventDefault();
var project_id = $(e.currentTarget).data('project-id');
var action = {
type: 'ir.actions.act_window',
view_type: 'form',
view_mode: 'form',
res_model: 'project.project',
views: [[this.data.project_form_view_id, 'form']],
res_id: project_id,
};
this.do_action(action,{
on_reverse_breadcrumb: function(){ return self.reload();}
});
},
on_more: function(e) {
var self = this;
e.preventDefault();
var action = {
name: _t('项目'),
type: 'ir.actions.act_window',
view_type: 'form',
view_mode: 'tree,form',
res_model: 'project.project',
domain: [['is_user_read', '=', true]],
views: [[false, 'list'], [false, 'form']],
};
this.do_action(action,{
on_reverse_breadcrumb: function(){ return self.reload();}
});
},
reload:function(){
return this.parent.load(['bw_project']);
},
});
core.action_registry.add('project_workspace.main', Projectworkspace);
return {
Projectworkspace: Projectworkspace,
};
});