javascript | Odoo Connects Everything

odoo notify and warning client action

odoo后台接口如果出现错误可以简单抛出一个UserError异常给前端进行处理
但是有些时候可能只是一个通知或者警告给用户，不需要错误这么重的模态强交互，也不用影响主流程

从odoo8的addons/web/static/src/js/chrome.js源码中可以发现这个功能曾经拥有

instance.web.action_notify = function(element, action) {
    element.do_notify(action.params.title, action.params.text, action.params.sticky);
};
instance.web.client_actions.add("action_notify", "instance.web.action_notify");

instance.web.action_warn = function(element, action) {
    element.do_warn(action.params.title, action.params.text, action.params.sticky);
};
instance.web.client_actions.add("action_warn", "instance.web.action_warn");

instance.web.action_notify = function(element, action) {

element.do_notify(action.params.title, action.params.text, action.params.sticky);

};

instance.web.client_actions.add("action_notify", "instance.web.action_notify");

instance.web.action_warn = function(element, action) {

element.do_warn(action.params.title, action.params.text, action.params.sticky);

};

instance.web.client_actions.add("action_warn", "instance.web.action_warn");

本次以notify通知为例，其对应到odoo9之后的移植代码为：

/**
 * author: i@renjie.me
 */
var core = require('web.core');
core.action_registry.add('action_notify', function(element, action){
    var params = action.params;
    if(params){
        element.do_notify(params.title, params.text, params.sticky);
    }
    return {'type':'ir.actions.act_window_close'};
});

/**

* author: i@renjie.me

var core = require('web.core');

core.action_registry.add('action_notify', function(element, action){

var params = action.params;

if(params){

element.do_notify(params.title, params.text, params.sticky);

}

return {'type':'ir.actions.act_window_close'};

});

相对应后台调用统一封装方法：

'''
  author: i@renjie.me
'''
def action_notify(self, title=u'默认通知标题', text=u"默认通知内容", sticky=False):
    return {
        "type": "ir.actions.client",
        "tag": "action_notify",
        "params": {
            "title": title,
            "text": text,
            "sticky": sticky
        }
    }

'''

author: i@renjie.me

'''

def action_notify(self, title=u'默认通知标题', text=u"默认通知内容", sticky=False):

return {

"type": "ir.actions.client",

"tag": "action_notify",

"params": {

"title": title,

"text": text,

"sticky": sticky

}

odoo form view document multi upload

odoo表单相关的附件文档如果过多，逐个本地选择上传也是一种负担，比较好的方式是适配现代H5浏览器文件选择对话框原生的多选功能，这可以大大提高多文件操作效率

基础结构：file元素添加multiple属性

<input type="file" multiple="true" class="o_form_file_upload_input"/>

1	<input type="file" multiple="true" class="o_form_file_upload_input"/>

事件支持：

/**
 * author: i@renjie.me
 */
FormView.include({
    render_buttons: function() {
        var self = this;
        var add_button = false;
        if(!self.$buttons){
            add_button = true;
        }
        self._super.apply(self, arguments);
        if(add_button && self.$buttons){
            // 文件选择事件
            self.$buttons.find('.o_form_file_upload_input').change(function(evt){
                var target = evt.target;
                var $form = $(target.form);
                var $file = $(target);
                var value = $file.val();
                // 选择一个或多个文件
                if($file.val() !== ''){
                    var $badge = $form.find(".badge");
                    var serialize = $form.serializeArray();
                    var files = $file.get(0).files;
                    var count = files.length;
                    var error = [];
                    // 界面阻塞
                    framework.blockUI();
                    // 个数提示
                    $badge.text(count);
                    // 并行异步上传
                    _.each(files, function(file, index){
                        var data = new FormData();
                        data.append('ufile',file);
                        _.each(serialize, function(param){
                            data.append(param.name, param.value);
                        });
                        $.ajax({
                            url: $form.attr("action"),
                            type: 'POST',
                            data: data,
                            cache: false,
                            processData: false,  
                            contentType: false,
                            success: function(ret){
                                if(ret.error){
                                    error.push(ret.error);
                                }
                                count--;
                                // 上传完成
                                if(count == 0){
                                    framework.unblockUI();
                                    if(self.sidebar){
                                        self.sidebar.do_attachement_update(self.dataset, self.datarecord.id, [{
                                            "error": error.join("<br/>")
                                        }]);
                                    }
                                }
                                $badge.text(count ? count : "");
                            }
                        });
                    });
                    $file.val("");
                }
            });
        }
        return self.$buttons;
    }
});

/**

* author: i@renjie.me

FormView.include({

render_buttons: function() {

var self = this;

var add_button = false;

if(!self.$buttons){

add_button = true;

}

self._super.apply(self, arguments);

if(add_button && self.$buttons){

// 文件选择事件

self.$buttons.find('.o_form_file_upload_input').change(function(evt){

var target = evt.target;

var $form = $(target.form);

var $file = $(target);

var value = $file.val();

// 选择一个或多个文件

if($file.val() !== ''){

var $badge = $form.find(".badge");

var serialize = $form.serializeArray();

var files = $file.get(0).files;

var count = files.length;

var error = [];

// 界面阻塞

framework.blockUI();

// 个数提示

$badge.text(count);

// 并行异步上传

_.each(files, function(file, index){

var data = new FormData();

data.append('ufile',file);

_.each(serialize, function(param){

data.append(param.name, param.value);

});

$.ajax({

url: $form.attr("action"),

type: 'POST',

data: data,

cache: false,

processData: false,

contentType: false,

success: function(ret){

if(ret.error){

error.push(ret.error);

}

count--;

// 上传完成

if(count == 0){

framework.unblockUI();

if(self.sidebar){

self.sidebar.do_attachement_update(self.dataset, self.datarecord.id, [{

"error": error.join("<br/>")

}]);

}

$badge.text(count ? count : "");

}

});

$file.val("");

}

});

}

return self.$buttons;

}

});

odoo custom web window title

odoo窗口标题的修改方法有很多，但最灵活的还是后台开发者模式动态修改视图里的title，这就需要先搭一座便桥先：

<template id="layout" inherit_id="web.layout" name="odoo custom web window title">
    <xpath expr="//title" position="replace">
        <title>renjie.me</title>
    </xpath>
</template>

<title>renjie.me</title>

</xpath>

</template>

上述是桥接视图方便随时修改，接着还需要将原生前端硬编码优雅的架构到一起

/**
 * author: i@renjie.me
 */
var WebClient = require('web.WebClient');
WebClient.include({
    init: function() {
        this._super.apply(this, arguments);
        this.set('title_part', {"zopenerp": document.title});
    }
});

/**

* author: i@renjie.me

var WebClient = require('web.WebClient');

WebClient.include({

init: function() {

this._super.apply(this, arguments);

this.set('title_part', {"zopenerp": document.title});

}

});

如果还想追求到极致的话，下一步就是再将其整合到res_config通用设置里，特别适合SAAS运营的场景：）

odoo form view pic url widget

原生表单视图的image组件只能使用binary类型字段存储本地图片，而互联网应用一般都使用cdn，如第三方的七牛云存储，其在odoo中的表现形式其实是一个char类型的url，并不会占用自身服务器的存储，这就需要量身为其定制一种外链图片的widget：

<t t-name="FieldPic">
    <span class="oe_form_field oe_form_field_pic" t-att-style="widget.node.attrs.style">
        <img t-if="widget.get('effective_readonly')" class="oe_form_pic img-thumbnail" style="display:none"/>
        <t t-if="!widget.get('effective_readonly')">
            <div>
                <input type="text"
                    t-att-id="widget.id_for_label"
                    t-att-tabindex="widget.node.attrs.tabindex"
                    t-att-autofocus="widget.node.attrs.autofocus"
                    t-att-placeholder="widget.node.attrs.placeholder"
                t-att-maxlength="widget.field.size"
                />
            </div>
        </t>
    </span>
</t>

<div>

<input type="text"

t-att-id="widget.id_for_label"

t-att-tabindex="widget.node.attrs.tabindex"

t-att-autofocus="widget.node.attrs.autofocus"

t-att-placeholder="widget.node.attrs.placeholder"

t-att-maxlength="widget.field.size"

</div>

</t>

</span>

</t>

var core = require('web.core');
var form_widget_registry = core.form_widget_registry;
var FieldUrl = form_widget_registry.get('url');
/**
 * author: i@renjie.me
 */
var FieldPic = FieldUrl.extend({
    template: 'FieldPic',
    placeholder: "/web/static/src/img/placeholder.png",
    render_value: function() {
        var self = this;
        if (!self.get("effective_readonly")) {
            self._super();
        } else {
            var src = self.get('value') || self.placeholder;
            var $img = self.$el.find('img')
            if(src){
                $img.load(function() {
                    if(self.options.size){
                        var width = self.options.size[0];
                        var height = self.options.size[1];
                        $img.css({
                            "max-width": "" + width + "px",
                            "min-width": "" + width + "px",
                            "max-height": "" + height + "px",
                            "min-height": "" + height + "px"
                        });
                    }
                });
                $img.on('error', function() {
                    $img.attr('src', self.placeholder);
                });
                $img.attr({
                    src: src,
                    alt: self.node.attrs.alt,
                    title: self.node.attrs.title
                }).show();
            }
        }
    }
});
form_widget_registry.add('pic', FieldPic);

var core = require('web.core');

var form_widget_registry = core.form_widget_registry;

var FieldUrl = form_widget_registry.get('url');

/**

* author: i@renjie.me

var FieldPic = FieldUrl.extend({

template: 'FieldPic',

placeholder: "/web/static/src/img/placeholder.png",

render_value: function() {

var self = this;

if (!self.get("effective_readonly")) {

self._super();

} else {

var src = self.get('value') || self.placeholder;

var $img = self.$el.find('img')

if(src){

$img.load(function() {

if(self.options.size){

var width = self.options.size[0];

var height = self.options.size[1];

$img.css({

"max-width": "" + width + "px",

"min-width": "" + width + "px",

"max-height": "" + height + "px",

"min-height": "" + height + "px"

});

}

});

$img.on('error', function() {

$img.attr('src', self.placeholder);

});

$img.attr({

src: src,

alt: self.node.attrs.alt,

title: self.node.attrs.title

}).show();

}

});

form_widget_registry.add('pic', FieldPic);

之后就可以在表单视图中直接使用诸如<field name=”pic_url” widget=”pic”/>形式的网络图片字段组件

odoo views client reload action

odoo原生常用的reload动作，是整个框架的刷新，源码如下：

//  * Client action to reload the whole interface.
//  * If params.menu_id, it opens the given menu entry.
//  * If params.wait, reload will wait the openerp server to be reachable before reloading
 
function Reload(parent, action) {
    var params = action.params || {};
    var menu_id = params.menu_id || false;
    var l = window.location;

    var sobj = $.deparam(l.search.substr(1));
    if (params.url_search) {
        sobj = _.extend(sobj, params.url_search);
    }
    var search = '?' + $.param(sobj);

    var hash = l.hash;
    if (menu_id) {
        hash = "#menu_id=" + menu_id;
    }
    var url = l.protocol + "//" + l.host + l.pathname + search + hash;

    redirect(url, params.wait);
}

core.action_registry.add("reload", Reload);

// * Client action to reload the whole interface.

// * If params.menu_id, it opens the given menu entry.

// * If params.wait, reload will wait the openerp server to be reachable before reloading

function Reload(parent, action) {

var params = action.params || {};

var menu_id = params.menu_id || false;

var l = window.location;

var sobj = $.deparam(l.search.substr(1));

if (params.url_search) {

sobj = _.extend(sobj, params.url_search);

}

var search = '?' + $.param(sobj);

var hash = l.hash;

if (menu_id) {

hash = "#menu_id=" + menu_id;

}

var url = l.protocol + "//" + l.host + l.pathname + search + hash;

redirect(url, params.wait);

}

core.action_registry.add("reload", Reload);

还有一个reload_context动作，整体刷新前会先刷新session上下文是否正常，源码如下：

/**
 * Client action to refresh the session context (making sure
 * HTTP requests will have the right one) then reload the
 * whole interface.
 */
function ReloadContext (parent, action) {
    // side-effect of get_session_info is to refresh the session context
    session.rpc("/web/session/get_session_info", {}).then(function() {
        Reload(parent, action);
    });
}
core.action_registry.add("reload_context", ReloadContext);

/**

* Client action to refresh the session context (making sure

* HTTP requests will have the right one) then reload the

* whole interface.

function ReloadContext (parent, action) {

// side-effect of get_session_info is to refresh the session context

session.rpc("/web/session/get_session_info", {}).then(function() {

Reload(parent, action);

});

}

core.action_registry.add("reload_context", ReloadContext);

现在需要对一些轻量级的通用场景进行视图层级的数据重载刷新支持，以提高用户体验的舒适度，核心代码如下：

/**
 * author: i@renjie.me
 */
function ReloadView(parent, action) {
    var inner_widget = parent.inner_widget;
    var active_view = inner_widget.active_view;
    var controller = active_view.controller;
    controller.reload();
}
core.action_registry.add("reload_view", ReloadView);

/**

* author: i@renjie.me

function ReloadView(parent, action) {

var inner_widget = parent.inner_widget;

var active_view = inner_widget.active_view;

var controller = active_view.controller;

controller.reload();

}

core.action_registry.add("reload_view", ReloadView);

之后就可以在odoo任何层级应用代码里跟调用reload和reload_context一样快捷方便的使用reload_view动作

odoo search view default show filters advanced menu

odoo搜索视图默认是隐藏高级搜索菜单栏，虽然可以打开记住状态，但换台电脑或浏览器默认又是关闭，这就需要改变其缺省机制，源码如下：

var SearchView = require('web.SearchView');
SearchView.include({
    init: function () {
        var self = this;
        self._super.apply(self, arguments);
        self.visible_filters = (localStorage.visible_search_menu !== 'false');
    }
});

var SearchView = require('web.SearchView');

SearchView.include({

init: function () {

var self = this;

self._super.apply(self, arguments);

self.visible_filters = (localStorage.visible_search_menu !== 'false');

}

});

odoo tree view pagination disable unlimited

odoo列表视图分页默认80条记录，但可以点击切换选择200、500、2000、无限制，相关源码如下：

/**
 * Render the pager according to the ListView.pager template and add listeners on it.
 * Set this.$pager with the produced jQuery element
 * @param {jQuery} [$node] a jQuery node where the rendered pager should be inserted
 * $node may be undefined, in which case the ListView inserts the pager into this.options.$pager
 * or into a div of its template
 */
render_pager: function($node) {
    if (!this.$pager && this.options.pager) {
        var self =  this;

        this.$pager = $(QWeb.render("ListView.pager", {'widget': self}));
        this.$pager
            .on('click', 'a[data-pager-action]', function () {
                var $this = $(this);
                var max_page_index = Math.ceil(self.dataset.size() / self._limit) - 1;
                switch ($this.data('pager-action')) {
                    case 'first':
                        self.page = 0;
                        break;
                    case 'last':
                        self.page = max_page_index;
                        break;
                    case 'next':
                        self.page += 1;
                        break;
                    case 'previous':
                        self.page -= 1;
                        break;
                }
                if (self.page < 0) {
                    self.page = max_page_index;
                } else if (self.page > max_page_index) {
                    self.page = 0;
                }
                self.reload_content();
            }).find('.oe_list_pager_state')
                .click(function (e) {
                    e.stopPropagation();
                    var $this = $(this);

                    var $select = $('<select>')
                        .appendTo($this.empty())
                        .click(function (e) {e.stopPropagation();})
                        .append('<option value="80">80</option>' +
                                '<option value="200">200</option>' +
                                '<option value="500">500</option>' +
                                '<option value="2000">2000</option>' +
                                '<option value="NaN">' + _t("Unlimited") + '</option>')
                        .change(function () {
                            var val = parseInt($select.val(), 10);
                            self._limit = (isNaN(val) ? null : val);
                            self.page = 0;
                            self.reload_content();
                        }).blur(function() {
                            $(this).trigger('change');
                        })
                        .val(self._limit || 'NaN');
                });
        this.configure_pager(this.dataset);

        $node = $node || this.options.$pager;
        if ($node) {
            this.$pager.appendTo($node);
        } else {
            this.$('.oe_list_pager').replaceWith(this.$pager);
        }
    }
}

/**

* Render the pager according to the ListView.pager template and add listeners on it.

* Set this.$pager with the produced jQuery element

* @param {jQuery} [$node] a jQuery node where the rendered pager should be inserted

* $node may be undefined, in which case the ListView inserts the pager into this.options.$pager

* or into a div of its template

render_pager: function($node) {

if (!this.$pager && this.options.pager) {

var self = this;

this.$pager = $(QWeb.render("ListView.pager", {'widget': self}));

this.$pager

.on('click', 'a[data-pager-action]', function () {

var $this = $(this);

var max_page_index = Math.ceil(self.dataset.size() / self._limit) - 1;

switch ($this.data('pager-action')) {

case 'first':

self.page = 0;

break;

case 'last':

self.page = max_page_index;

break;

case 'next':

self.page += 1;

break;

case 'previous':

self.page -= 1;

break;

}

if (self.page < 0) {

self.page = max_page_index;

} else if (self.page > max_page_index) {

self.page = 0;

}

self.reload_content();

}).find('.oe_list_pager_state')

.click(function (e) {

e.stopPropagation();

var $this = $(this);

var $select = $('<select>')

.appendTo($this.empty())

.click(function (e) {e.stopPropagation();})

.append('<option value="80">80</option>' +

'<option value="200">200</option>' +

'<option value="500">500</option>' +

'<option value="2000">2000</option>' +

'<option value="NaN">' + _t("Unlimited") + '</option>')

.change(function () {

var val = parseInt($select.val(), 10);

self._limit = (isNaN(val) ? null : val);

self.page = 0;

self.reload_content();

}).blur(function() {

$(this).trigger('change');

})

.val(self._limit || 'NaN');

});

this.configure_pager(this.dataset);

$node = $node || this.options.$pager;

if ($node) {

this.$pager.appendTo($node);

} else {

this.$('.oe_list_pager').replaceWith(this.$pager);

}

如果系统运行许久积累了大量数据，特别是互联网海量应用，这个无限制就造成了一个性能上的隐患

var ListView = require('web.ListView');
ListView.include({
    render_pager: function ($node) {
        var self = this;
        self._super.apply(self, arguments);
        if (self.$pager && self.options.pager) {
            self.$pager.find('.oe_list_pager_state').click(function(e){
                e.stopPropagation();
                $(this).find("select").children("option:last").remove();
            });
        }
    }
});

var ListView = require('web.ListView');

ListView.include({

render_pager: function ($node) {

var self = this;

self._super.apply(self, arguments);

if (self.$pager && self.options.pager) {

self.$pager.find('.oe_list_pager_state').click(function(e){

e.stopPropagation();

$(this).find("select").children("option:last").remove();

});

}

});

这里通过继承渲染分页方法，在点击分页信息动态生成记录条数选择的事件上优雅的移除掉最后一个无限制选项

odoo china baidu maps api

odoo原生内置google maps，导致中国大部分区域不仅无法正常使用，用户浏览器一直加载到超时还拖慢了网站整体

ECShop动静分离transport.js get jsonp跨域对接

ECShop transport.js定义了Ajax Transport

/* 定义两个别名 */
var Ajax = Transport;
Ajax.call = Transport.run;

/* 定义两个别名 */

var Ajax = Transport;

Ajax.call = Transport.run;

其中run方法实现了类似jQuery $.ajax的功能但缺少了对jsonp方式的支持

  /* *
  * 调用此方法发送HTTP请求。
  *
  * @public
  * @param   {string}    url             请求的URL地址
  * @param   {mix}       params          发送参数
  * @param   {Function}  callback        回调函数
  * @param   {string}    ransferMode     请求的方式，有"GET"和"POST"两种
  * @param   {string}    responseType    响应类型，有"JSON"、"XML"和"TEXT"三种
  * @param   {boolean}   asyn            是否异步请求的方式
  * @param   {boolean}   quiet           是否安静模式请求
  */
  run : function (url, params, callback, transferMode, responseType, asyn, quiet)

/* *

* 调用此方法发送HTTP请求。

* @public

* @param {string} url 请求的URL地址

* @param {mix} params 发送参数

* @param {Function} callback 回调函数

* @param {string} ransferMode 请求的方式，有"GET"和"POST"两种

* @param {string} responseType 响应类型，有"JSON"、"XML"和"TEXT"三种

* @param {boolean} asyn 是否异步请求的方式

* @param {boolean} quiet 是否安静模式请求

run : function (url, params, callback, transferMode, responseType, asyn, quiet)

可以在第一个get方法判断入口前新增下列代码：

if (transferMode === "GET")
{
  if(params.indexOf("?") == -1){
    if(params){
     params+= "&"; 
    }
    params += "callback=?";
  }
  return $.getJSON(url, params, callback);
}

if (transferMode === "GET")

{

if(params.indexOf("?") == -1){

if(params){

params+= "&";

}

params += "callback=?";

}

return $.getJSON(url, params, callback);

}

巧妙的将原来ajax get方法对接上jquery script jsonp实现
排除一些自制的特殊调用：比如callback的第二个参数以及this的深度使用
其它上层Ajax.call相关调用就不用一一更新了

英语开发并安装好应用的单语言版本
普通视图元素的string、help、sum、confirm、placeholder属性文本自动导出
QWeb模版（包括服务端和客户端两个部分），如果没有用t-translation=”off”关闭翻译，
则title、alt、label、placeholder属性文本也会自动导出
关于模型字段(Model Field)，如果模型没有标注_translate = False：则string和help属性默认可导出；selection类型字段文本也可导出；translate属性设置为True，则所有存在值(values)都会导出
_constraints和_sql_constraints约束中的help、error信息会导出
其它代码里显式调用国际化字符串获取接口的参数值一同导出

#Python
title = openerp._("Bank Accounts")

//JavaScript
title = openerp.web._t("Bank Accounts")

#Python

title = openerp._("Bank Accounts")

//JavaScript

title = openerp.web._t("Bank Accounts")

管理员设置
翻译(Translations)=》导入/导出(Import / Export)=》导出翻译(Export Translations)
语言(Language)选择新语言翻译模版(New Language Empty translation template)
文件格式(File Format)选择PO File
导出应用(Apps To Export)里选择您的模块
导出(Export)=>下载《模块名.pot》文件

模块新增i18n目录
将上一步导出的文件移进去作为基准翻译模版
以此模版为基础简单的另存为其它语言文件如：zh_CN.po
或者使用PO editor等编辑软件所译即所得自动生成
还可以当前目录直接运行msginit命令默认生成操作系统对应的语言版本文件

[srj@x1c i18n]$ msginit 
msginit: 输出文件 zh_CN.po 已经存在。
         请通过 --locale 选项指定语系或
         --output-file 选项指定输出的 .po 文件。

[srj@x1c i18n]$ msginit

msginit: 输出文件 zh_CN.po 已经存在。

请通过 --locale 选项指定语系或

--output-file 选项指定输出的 .po 文件。

与直接模版另存为比较多了以下三项区别：

"Last-Translator: renjie <i@renjie.me>\n"
"Language-Team: Chinese (simplified)\n"
"Language: zh_CN\n"

"Last-Translator: renjie <i@renjie.me>\n"

"Language-Team: Chinese (simplified)\n"

"Language: zh_CN\n"

根据语言文件内的各项原文本msgid部分翻译成对应的msgstr值
加载翻译分别选择各种语言并覆盖已存在的术语（odoo9更新模块也可达到部分效果）
选择不同的用户语言即可整体确认翻译质量

应用发布
odoo9和odoo8的翻译文件不太兼容，主要是因为各自对msgid的引用方式不同
需要分别针对不同版本的系统制作翻译文件并发布到对应分支上

标签：javascript

odoo notify and warning client action

odoo form view document multi upload

odoo custom web window title

odoo form view pic url widget

odoo views client reload action

odoo search view default show filters advanced menu

odoo tree view pagination disable unlimited

odoo china baidu maps api

ECShop动静分离transport.js get jsonp跨域对接

odoo开发支持国际化语言的第三方应用