ODOO列表视图动态行选择字段
由于框架模型限定了选择字段是需要事先定义的，也就是选择下拉内容是确定且固定的，对应成列表视图则是每一行都是相同有限的选择
比如以上这种每一个物料都有自己的颜色和规格明细组合，这与odoo原生的产品变体刚好相反，后者是由产品属性及值自动生成所有排列组合的变体，前者则根据实际有限的明细反推出其属性集合
最后体现在一些行业应用中，比如鞋服箱包产品款式的BOM配色配码，其颜色尺码的表头是由产品基础属性组成动态列，而颜色规格的配置行则是根据所选物料的不同集合来动态限定范围选择列，间接实现每一行的Many2one和Selection字段都是独立定义
ODOO列表视图表格行悬停背景色
原生列表的鼠标悬停和点击选择一样，都是没有特别的视觉效果，有些列和数据都非常多的场景，满屏都是数据逐行浏览下来很疲劳
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* author: i@renjie.me */ .o_list_view { tbody { tr { &:hover { background-color: #f0eeee; } } } } |
一段简洁的less代码轻松搞定，odoo就像纯净的简装房，其框架结构非常优秀，但不同的应用需要对其各种细节进行个性化精装修才能获得最佳体验：）
ODOO搜索视图触屏设备禁用自动聚焦
标准搜索视图都是配合其他数据视图组合呈现的，其有个特性就是会自动获取焦点到搜索输入框方便用户快速进行数据筛选
如今大部分的移动设备如手机、平板等都是使用软键盘进行触控输入，当系统检测到焦点被可输入元素获取到时会自动弹出占用将近一半屏幕大小的虚拟键盘。如此搜索视图那原本人性化的设计在移动设备下日常使用动不动就被弹出键盘的行为反而变的更不友好
经过源码分析若不覆盖原设计方法冗余重构的情况下还有自动失焦的对冲方案，同时这个效果也是Web浏览器经典的UI线程和JS线程互斥表现演示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * author: i@renjie.me */ var config = require('web.config'); var SearchView = require('web.SearchView'); SearchView.include({ renderFacets: function() { var self = this; self._super.apply(self, arguments); if (config.device.touch) { var input_view = _.last(self.input_subviews); if(input_view){ input_view.$el.blur(); } } } }); |
ODOO富文本字段Summernote编辑器自定义
Summernote是一个非常简单灵活所见即所得的HTML在线编辑器，基于jQuery和Bootstrap构建，支持快捷键操作，提供大量可定制的选项
不同版本的ODOO在不同阶段都尝试过各种自定义，比如字体选择、全屏功能以及开发者模式下的源码视图，以下将根据代码odoo/addons/web_editor/static/src/js/backend.js里的默认配置为基础进行自定义调整：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/** * author: i@renjie.me */ var FieldTextHtmlSimple = core.form_widget_registry.get("html"); FieldTextHtmlSimple.include({ _config: function() { var self = this; var config = self._super.apply(self, arguments); // 初始高度 config["height"] = 200; // 删除线功能 config.toolbar[1][1].splice(3, 0, 'strikethrough'); // 普通模式源码视图 if(!session.debug){ config.toolbar.splice(7, 0, ['view', ['codeview']]); } // 全屏功能 config.toolbar[7][1].unshift('fullscreen'); return config; }, initialize_content: function() { var self = this; self._super.apply(self, arguments); // 关闭拼写检查 if(!self.get("effective_readonly")){ self.$content.attr("spellcheck", false); } } }); |
ODOO集成Raphaël可视化销控视图
Raphaël 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作
虽然 D3.js 已经非常优秀，但多一个选择也不是坏事，何况理论上各种优秀的前端图形库都可以按照 ODOO 视图规范兼容共处一起飞：）
ODOO阿里钉钉桌面和移动客户端免登认证通用模板
钉钉的免登接口是先要通过基于前端H5的JSAPI获取到code后才能进行后台服务端校验，但其PC端和手机端开发很可能是两个不同风格的小团队耦合而成，所以调用接口需要整合一下才能对外透明，也难怪后台应用针对两端的首页都可以分别进行配置：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template id="entry" name="renjie_dingtalk entry"> <t t-call="web.layout"> <t t-set="head"> <script t-if="type == 'mobile'" type="text/javascript" src="//g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js"></script> <script t-if="type == 'pc'" type="text/javascript" src="//g.alicdn.com/dingding/dingtalk-pc-api/2.7.0/index.js"></script> </t> <script type="text/javascript"> /** * author: i@renjie.me */ var auth = { corpId: "<t t-raw="corp_id"/>", onSuccess: function(ret){ location.href = "/auth_dingtalk/sso" + location.search + "\u0026code=" + ret.code + "\u0026state=<t t-raw="state"/>"; }, onFail: function(err){} }; <t t-if="type == 'mobile'"> dd.ready(function(){ dd.runtime.permission.requestAuthCode(auth); }); </t> <t t-if="type == 'pc'"> DingTalkPC.runtime.permission.requestAuthCode(auth); </t> </script> </t> </template> |
ODOO微信用户信息同步问题
Python使用http高级requests库来对接微信开放平台和公众平台非常干净利落，主要两个小问题需要注意一下：
1、用户昵称乱码
正常拉取用户信息所返回的内容编码不太友好，读取时乱码，需要显式设定lang和encoding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
''' author: i@renjie.me ''' def get_sns_user_info(self, sns_token, openid): url = self.get_api_url("api") + "/sns/userinfo" params = dict( access_token = sns_token, openid = openid, lang = "en", ) res = requests.get(url, params=params) res.encoding = 'utf-8' ret = res.json() log = "get_sns_user_info: sns_token(%s) openid(%s) ret(%s)" % (sns_token, openid, ret) if "nickname" in ret: _logger.info(log) return ret else: _logger.error(log) |
2、用户头像时效
如只保存头像链接，若用户更换头像，原有链接将失效，需要用Binary字段存储一份图片二进制base64编码的副本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
''' author: i@renjie.me headimgurl = fields.Char(u'头像地址', readonly=True) head = fields.Binary(u"头像", attachment=True, readonly=True) ''' @api.multi def write(self, vals): if "headimgurl" in vals: if vals.get("headimgurl"): res = requests.get(vals["headimgurl"]) vals["head"] = res.content.encode('base64') else: vals["head"] = "" return super(UsersWechat, self).write(vals) |
ODOO表单视图编辑模式禁用自动聚焦
表单创建的时候默认会自动聚焦到第一个输入框，这是人性化易用性的设计，用户不用手动点鼠标主动聚焦，直接输入内容即可，比如名称
表单编辑的时候往往第一个输入框都是已经有内容的，特别是第一个最近的字段是必填项居多，这个时候自动聚焦的意义就没有新建时候大
虽然意义不大但也不影响什么，直到最近集成一个二代身份证读卡器的硬件产品，为了兼容多平台多浏览器无控件无插件，只好使用最干净绿色的USB HID输入方案。这个时候新建的自动聚焦刚好可以和二代证的自动填充完美配合，但是编辑的时候由于仅聚焦不全选会导致二次读卡的情况下内容是追加而不是覆盖。这种场景下自动聚焦就显得多余，迫切需要在编辑模式下关闭且使用原生的窗口监听来实现最新读卡信息覆盖同步：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * author: i@renjie.me */ var FormView = require('web.FormView'); FormView.include({ autofocus: function() { var self = this; if(self.get("actual_mode") !== "edit"){ self._super.apply(self, arguments); } } }); |
ODOO模态对话框窗口拖动
年年一个大版本推进，但其前端基础库还是很古老的Bootstrap + jQuery + Underscore组合，11版本虽然对View层进行了激进的重构，也还是基于这个基架之上。同理jQuery UI交互界面库也一脉相承的延续至今，这就可以直接调用其Draggable Widget部件以最小的代价扩展原生模态对话框的拖拽功能：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * 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社区版切换左侧导航菜单
社区版的菜单体系是一二三级同时分别展示于顶部和左侧，非常的直观，习惯这点后用企业版的菜单系统是非常难受的。个人认为最好的体验因该是大屏幕设备用社区版菜单，小屏幕终端用企业版菜单，关于这个课题以后在深入探讨，先回归本次主题：
|
1 2 3 4 5 6 7 |
<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> |
以上通过继承菜单对应的模版在导航区植入一个切换开关按扭的入口
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 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; } } } } |
以上LESS代码定义其样式外观与一级菜单和谐保持一致并定位到合适的位置，没错，导航最左也就是第一个菜单前面的空位也就是它了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * 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; } }); |
最后绑定上前端行为代码就可以开关自如的控制左侧导航区，同时还有一个小小的切换动画效果。至此，社区版也可以像企业版那样间接实现整个内容区都可以用来展示视图数据，特别适合那些数据多到需要用水平滚动条来左右拖动配合使用的场景