javascript | Odoo Connects Everything

odoo modal dialog window draggable

ODOO模态对话框窗口拖动
年年一个大版本推进，但其前端基础库还是很古老的Bootstrap + jQuery + Underscore组合，11版本虽然对View层进行了激进的重构，也还是基于这个基架之上。同理jQuery UI交互界面库也一脉相承的延续至今，这就可以直接调用其Draggable Widget部件以最小的代价扩展原生模态对话框的拖拽功能：

/**
 * author: i@renjie.me
 */
var Dialog = require('web.Dialog');
Dialog.include({
    open: function() {
        var self = this;
        var ret = self._super.apply(self, arguments);
        self.$modal.draggable({handle: ".modal-header"});
        return ret;
    },
    close: function() {
        var self = this;
        if(self.$modal.draggable("instance")) {
            self.$modal.draggable("destroy");
        }
        self._super.apply(self, arguments);
    }
});

/**

* author: i@renjie.me

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

Dialog.include({

open: function() {

var self = this;

var ret = self._super.apply(self, arguments);

self.$modal.draggable({handle: ".modal-header"});

return ret;

close: function() {

var self = this;

if(self.$modal.draggable("instance")) {

self.$modal.draggable("destroy");

}

self._super.apply(self, arguments);

}

});

odoo community version toggle left nav menu

ODOO社区版切换左侧导航菜单
社区版的菜单体系是一二三级同时分别展示于顶部和左侧，非常的直观，习惯这点后用企业版的菜单系统是非常难受的。个人认为最好的体验因该是大屏幕设备用社区版菜单，小屏幕终端用企业版菜单，关于这个课题以后在深入探讨，先回归本次主题：

<template id="webclient_bootstrap" inherit_id="web.webclient_bootstrap" name="renjie webclient_bootstrap">
    <xpath expr="//nav" position="inside">
        <div class="menu-toggle">
            <a href="/" title="切换子菜单" class="fa fa-exchange"></a>
        </div>
    </xpath>
</template>

</div>

</xpath>

</template>

以上通过继承菜单对应的模版在导航区植入一个切换开关按扭的入口

/*
    author: i@renjie.me
*/
.navbar{
    .menu-toggle{
        position: absolute;
        top: 6px;
        left: 1px;
        a{
            color: @navbar-inverse-link-color;
            &:hover, &:focus {
                background-color: @navbar-inverse-link-hover-bg;
                color: @nav-pills-active-link-hover-color;
            }
        }
    }
}

author: i@renjie.me

.navbar{

.menu-toggle{

position: absolute;

top: 6px;

left: 1px;

color: @navbar-inverse-link-color;

&:hover, &:focus {

background-color: @navbar-inverse-link-hover-bg;

color: @nav-pills-active-link-hover-color;

}

以上LESS代码定义其样式外观与一级菜单和谐保持一致并定位到合适的位置，没错，导航最左也就是第一个菜单前面的空位也就是它了

/**
 * author: i@renjie.me
 */
var WebClient = require('web.WebClient');
WebClient.include({
    show_application: function() {
        var self = this;
        var ret = self._super.apply(self, arguments);
        self.$('nav .menu-toggle').click(self.proxy(self.toggle_menu));
        return ret;
    },
    toggle_menu: function(e) {
        var self = this;
        e.preventDefault();
        self.$('.o_main .o_sub_menu').toggle("fast");
        return false;
    }
});

/**

* author: i@renjie.me

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

WebClient.include({

show_application: function() {

var self = this;

var ret = self._super.apply(self, arguments);

self.$('nav .menu-toggle').click(self.proxy(self.toggle_menu));

return ret;

toggle_menu: function(e) {

var self = this;

e.preventDefault();

self.$('.o_main .o_sub_menu').toggle("fast");

return false;

}

});

最后绑定上前端行为代码就可以开关自如的控制左侧导航区，同时还有一个小小的切换动画效果。至此，社区版也可以像企业版那样间接实现整个内容区都可以用来展示视图数据，特别适合那些数据多到需要用水平滚动条来左右拖动配合使用的场景

odoo tree view x2many field display (0 records) issue

ODOO列表视图X对多字段显示(n 条记录)问题
考虑到性能和显示的原因，原生One2many多年来一直以条数内容简单显示于固定表格中，其中最为瑕疵的就是无相关数据时的0条记录，这个Many2many也一脉相承，不知道会不会成为洁癖爱好者们心中的痛：）

今天终于等到一个机会忍无可忍精炼代码一并解决名称显示和零记录问题：

/**
 * author: i@renjie.me
 */
var core = require('web.core');
var Model = require('web.DataModel');
var ListView = require('web.ListView');
var ColumnMany2Many = core.list_widget_registry.get('field.many2many');

ColumnMany2Many.include({
    _format: function (row_data, options) {
        var self = this;
        if (_.isEmpty(row_data[this.id].value)) {
            return '';
        }else{
            row_data[this.id] = row_data[this.id + '__display'];
        }
        return self._super.apply(self, arguments);
    }
});
core.list_widget_registry.add('field.one2many', ColumnMany2Many);

ListView.List.include({
    render_cell: function (record, column) {
        var self = this;
        if (column.type === 'one2many') {
            var value = record.get(column.id);
            if (value instanceof Array && !_.isEmpty(value) && !record.get(column.id + '__display')) {
                new Model(column.relation).call('name_get', [
                    value, self.dataset.get_context()
                ]).done(function (names) {
                    record.set(column.id + '__display', _(names).pluck(1).join(', '));
                    record.set(column.id, value);
                });
                record.set(column.id + '__display', false);
            }
            return column.format(record.toForm().data, {
                model: self.dataset.model,
                id: record.get('id')
            });
        }else{
            return self._super.apply(self, arguments);
        }
    }
});

/**

* author: i@renjie.me

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

var Model = require('web.DataModel');

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

var ColumnMany2Many = core.list_widget_registry.get('field.many2many');

ColumnMany2Many.include({

_format: function (row_data, options) {

var self = this;

if (_.isEmpty(row_data[this.id].value)) {

return '';

}else{

row_data[this.id] = row_data[this.id + '__display'];

}

return self._super.apply(self, arguments);

}

});

core.list_widget_registry.add('field.one2many', ColumnMany2Many);

ListView.List.include({

render_cell: function (record, column) {

var self = this;

if (column.type === 'one2many') {

var value = record.get(column.id);

if (value instanceof Array && !_.isEmpty(value) && !record.get(column.id + '__display')) {

new Model(column.relation).call('name_get', [

value, self.dataset.get_context()

]).done(function (names) {

record.set(column.id + '__display', _(names).pluck(1).join(', '));

record.set(column.id, value);

});

record.set(column.id + '__display', false);

}

return column.format(record.toForm().data, {

model: self.dataset.model,

id: record.get('id')

});

}else{

return self._super.apply(self, arguments);

}

});

odoo integrated d3.js visualization position size state view

ODOO集成D3.js可视化位置尺寸状态视图
10版本开始视图根据multi_record布尔属性分为多记录和单记录两种，前者以列表为代表的大部分视图，后者则是表单为经典的单一视图以及神秘的Diagram视图

虽然原生的视图可以满足大部分需求，但是一些特殊的场景用专业的视图展现可以达到事半功倍的效果，如销控图、拓扑图、树状图等

D3.js是一个非常优秀的前端可视化库，其数据驱动的理念与ODOO完美互补：前者负责美丽娇艳，后者提供关系数据：）

销控图

odoo tree view disable open form content

ODOO列表视图禁止打开表单内容
正常的列表视图做为菜单动作直接打开的话，直接点击是跳转当前动作下的表单视图；还有一种是做为表单视图One2many、Many2many类型的嵌入式列表视图，直接点击打开Dialog窗口展示表单视图，一些特殊的需求场景下往往希望只将信息展示到列表即止，不用更多的详细互动：

/**
 * author: i@renjie.me
 */
var ListView = require('web.ListView');
ListView.List.include({
    row_clicked: function () {
        var self = this;
        var context = self.dataset.get_context().eval();
        if(!context["disable_open"]){
            self._super.apply(self, arguments);
        }
    }
});

/**

* author: i@renjie.me

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

ListView.List.include({

row_clicked: function () {

var self = this;

var context = self.dataset.get_context().eval();

if(!context["disable_open"]){

self._super.apply(self, arguments);

}

});

原理就是找到相关的行点击入口，通过万能的context扩展一个独立的禁止打开参数，默认不禁止，视图里通过显式声明使用该功能：

<field name="renjie_ids" context="{'disable_open': True}"/>

1	<field name="renjie_ids" context="{'disable_open': True}"/>

odoo form view action edit mode open

ODOO表单视图动作编辑模式打开
表单有两种模式，分别是view浏览和edit编辑，一般通过动作跳转的默认都是浏览模式，需要额外点击编辑按扭切换成编辑模式，对一些要求快速编辑的场景来说显得有些多余

ODOO10截止目前的版本已经可以直接通过action flags对象来透传initial_mode参数，具体用法如下：

'''
  author: i@renjie.me
'''
@api.multi
def action_edit_partner(self):
    self.ensure_one()
    return {
        'type': 'ir.actions.act_window',
        'view_type': 'form',
        'view_mode': 'form',
        'res_model': 'res.partner',
        'res_id': 1,
        'context': self.env.context,
        'flags': {'initial_mode': 'edit'},
    }

'''

author: i@renjie.me

'''

@api.multi

def action_edit_partner(self):

self.ensure_one()

return {

'type': 'ir.actions.act_window',

'view_type': 'form',

'view_mode': 'form',

'res_model': 'res.partner',

'res_id': 1,

'context': self.env.context,

'flags': {'initial_mode': 'edit'},

}

早期的版本虽然不支持，但是对于dict类型来说，也是可以通过return透传给前端拿到，只需额外添加一个通用的桥接口中转下即可：

/**
 * author: i@renjie.me
 */
var FormView = require('web.FormView');
FormView.include({
    init : function(parent, dataset, views, flags, options){
        var self = this;
        options = options || {};
        if(flags && flags.initial_mode){
            options.initial_mode = flags.initial_mode;
        }
        self._super.apply(self, arguments);
    }
});

/**

* author: i@renjie.me

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

FormView.include({

init : function(parent, dataset, views, flags, options){

var self = this;

options = options || {};

if(flags && flags.initial_mode){

options.initial_mode = flags.initial_mode;

}

self._super.apply(self, arguments);

}

});

odoo tree view dynamic column

ODOO列表视图动态列
由于框架模型限定了字段是需要事先定义的，也就是个数是确定的，对应成列表视图仅仅是显示或者不显示这些字段而已

时间横排

一些特殊的场景，比如工时单记录，根据项目在列表视图上一行行的填写工时就变得非常重复和多余，可惜官方没有改造列表视图使其获得通用能力，而是专门为之新开发了一个项目日期横排组件级视图，使得应用范围比较窄，多些固定列或者非时间动态列的情况下就无法直接使用了

尺码横排

一些行业的应用，比如服装行业的尺码横排，动态列一般是浮点型价格或者整型数量，而固定列除了颜色之外，一般还有批次、仓位、款式、订单等组合。前期也参考了工时单和Grid视图的优秀设计，甚至尝试基于其进行二次开发改良，但最终还是选择最普遍的原生列表视图为基础进行扩展，希望最终用户可以获得习惯一致的体验，同时也对经典视图深入发展多元化应用进行了一次实打实的尝试

odoo web window title config app

ODOO浏览器窗口标题配置模块
前文odoo custom web window title已经讲解了基础原理，虽然代码很简洁易懂，但对非开发出身的odoo玩家使用还是有一些难度，而且不同版本可能还会有一些实施细节上的差异

整体开箱即用、细节精益求精是我毕生追求的odoo一体化目标，周末趁这个小机会将其一步到位适配成8、9、10三大主流版本全覆盖的模块，并已发布到odoo官方应用市场，支持在线自动安装，也可以下载相应的版本到本地进行传统手动安装

https://apps.odoo.com/apps/modules/8.0/web_window_title/
https://apps.odoo.com/apps/modules/9.0/web_window_title/
https://apps.odoo.com/apps/modules/10.0/web_window_title/

odoo-web-window-title-app

odoo form view document directory upload

ODOO表单视图文档目录上传
关于附件上传的可行性体验优化，目前国际上最多最成熟的方案都是扩展支持多选和拖拽两种方式，也能极大的改善ODOO原生的单附件上传模式
但是如果追求极致的话还可以扩展支持文档目录直接上传，一次选择操作就可以将目录里的所有文件全部上传，无论目录有多少层级多少子目录全部一网打尽

基础结构：file元素添加html5新特性

<input type="file" webkitdirectory="true" mozdirectory="true" msdirectory="true" odirectory="true" directory="true" class="o_form_file_upload_input"/>

1	<input type="file" webkitdirectory="true" mozdirectory="true" msdirectory="true" odirectory="true" directory="true" class="o_form_file_upload_input"/>

PS：一堆浏览器私有前缀属性仿佛又回到了IE多版本称霸年代：）

事件支持：odoo form view document multi upload
居然上次多选上传的代码直接支持，可见写的一手兼容未来代码的重要性

有图有真相：Linux都兼容，Win、Mac理论不在话下。。。

目录上传

目录上传选择

目录上传结果

参考资料：
https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/html5/folder-upload
https://developer.mozilla.org/en-US/Firefox/Releases/50

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”/>形式的链接文字字段组件