javascript | Odoo Connects Everything

odoo tree view link text url widget

原生列表视图的url组件会将链接也显式的填充到字段列，如果遇到该字段的链接特别长且参数众多，表格就会撑的很难看，这就需要量身为其定制一种纯显示链接文字的widget：

var core = require('web.core');
var list_widget_registry = core.list_widget_registry;
var _t = core._t;
/**
 * author: i@renjie.me
 */
var Column = list_widget_registry.get('field');
var ColumnLink = Column.extend({
    PROTOCOL_REGEX: /^(?!\w+:?\/\/)/,
    _format: function(row_data, options) {
        var value = row_data[this.id].value;
        if (value) {
            return _.template("<a href='<%-href%>' target='_blank'><%-text%></a>")({
                href: value.trim().replace(this.PROTOCOL_REGEX, '//'),
                text: _t("Link")
            });
        }
        return this._super(row_data, options);
    }
});
list_widget_registry.add('field.link', ColumnLink);

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

var list_widget_registry = core.list_widget_registry;

var _t = core._t;

/**

* author: i@renjie.me

var Column = list_widget_registry.get('field');

var ColumnLink = Column.extend({

PROTOCOL_REGEX: /^(?!\w+:?\/\/)/,

_format: function(row_data, options) {

var value = row_data[this.id].value;

if (value) {

return _.template("<a href='<%-href%>' target='_blank'><%-text%></a>")({

href: value.trim().replace(this.PROTOCOL_REGEX, '//'),

text: _t("Link")

});

}

return this._super(row_data, options);

}

});

list_widget_registry.add('field.link', ColumnLink);

之后就可以在列表视图中直接使用诸如<field name=”content_url” widget=”link”/>形式的链接文字字段组件

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相关调用就不用一一更新了