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表单视图文档目录上传
关于附件上传的可行性体验优化，目前国际上最多最成熟的方案都是扩展支持多选和拖拽两种方式，也能极大的改善ODOO原生的单附件上传模式
但是如果追求极致的话还可以扩展支持文档目录直接上传，一次选择操作就可以将目录里的所有文件全部上传，无论目录有多少层级多少子目录全部一网打尽
基础结构：file元素添加html5新特性
|
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模块导入数据忽略错误
经常遇到大量的数据导入，不仅耗时很长，如果其中有一条数据有异常产生错误，就会导致整个过程回滚，这是非常悲剧的，其中相关源码如下：
|
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 30 31 |
for id, xid, record, info in converted: try: cr.execute('SAVEPOINT model_load_save') except psycopg2.InternalError as e: # broken transaction, exit and hope the source error was # already logged if not any(message['type'] == 'error' for message in messages): messages.append(dict(info, type='error',message=u"Unknown database error: '%s'" % e)) break try: ids.append(ModelData._update(self._name, current_module, record, mode=mode, xml_id=xid, noupdate=noupdate, res_id=id)) cr.execute('RELEASE SAVEPOINT model_load_save') except psycopg2.Warning as e: messages.append(dict(info, type='warning', message=str(e))) cr.execute('ROLLBACK TO SAVEPOINT model_load_save') except psycopg2.Error as e: messages.append(dict(info, type='error', **PGERROR_TO_OE[e.pgcode](self, fg, info, e))) # Failed to write, log to messages, rollback savepoint (to # avoid broken transaction) and keep going cr.execute('ROLLBACK TO SAVEPOINT model_load_save') except Exception as e: message = (_('Unknown error during import:') + ' %s: %s' % (type(e), unicode(e))) moreinfo = _('Resolve other errors first') messages.append(dict(info, type='error', message=message, moreinfo=moreinfo)) # Failed for some reason, perhaps due to invalid data supplied, # rollback savepoint and keep going cr.execute('ROLLBACK TO SAVEPOINT model_load_save') if any(message['type'] == 'error' for message in messages): cr.execute('ROLLBACK TO SAVEPOINT model_load') ids = False |
明白核心代码处理逻辑后，就可以在外层拦截并过滤错误数据继续提交干净数据以实现自动纠错导入，实现源码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
''' author: i@renjie.me ''' original_load = models.Model.load @api.model def load(self, fields, data): load_result = original_load(self, fields, data) context = self.env.context or {} if context.get("import_ignore_error"): record = set() for message in load_result.get("messages", []): if message['type'] == 'error': record.add(message['record']) if record: data_ignore = [] for index, item in enumerate(data): if index not in record: data_ignore.append(item) load_result = original_load(self, fields, data_ignore) return load_result models.Model.load = load |
原生列表视图的url组件会将链接也显式的填充到字段列，如果遇到该字段的链接特别长且参数众多，表格就会撑的很难看，这就需要量身为其定制一种纯显示链接文字的widget：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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后台接口如果出现错误可以简单抛出一个UserError异常给前端进行处理
但是有些时候可能只是一个通知或者警告给用户，不需要错误这么重的模态强交互，也不用影响主流程
从odoo8的addons/web/static/src/js/chrome.js源码中可以发现这个功能曾经拥有
|
1 2 3 4 5 6 7 8 9 |
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之后的移植代码为：
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * 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'}; }); |
相对应后台调用统一封装方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
''' 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表单相关的附件文档如果过多，逐个本地选择上传也是一种负担，比较好的方式是适配现代H5浏览器文件选择对话框原生的多选功能，这可以大大提高多文件操作效率
基础结构：file元素添加multiple属性
|
1 |
<input type="file" multiple="true" class="o_form_file_upload_input"/> |
事件支持：
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/** * 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窗口标题的修改方法有很多，但最灵活的还是后台开发者模式动态修改视图里的title，这就需要先搭一座便桥先：
|
1 2 3 4 5 |
<template id="layout" inherit_id="web.layout" name="odoo custom web window title"> <xpath expr="//title" position="replace"> <title>renjie.me</title> </xpath> </template> |
上述是桥接视图方便随时修改，接着还需要将原生前端硬编码优雅的架构到一起
|
1 2 3 4 5 6 7 8 9 10 |
/** * 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运营的场景：）
原生表单视图的image组件只能使用binary类型字段存储本地图片，而互联网应用一般都使用cdn，如第三方的七牛云存储，其在odoo中的表现形式其实是一个char类型的url，并不会占用自身服务器的存储，这就需要量身为其定制一种外链图片的widget：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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表单相关的附件文档如果过多，逐个下载到本地也是一种负担，比较好的方式是提供一种打包下载的可选功能，既可以提高操作效率也可以减少网络下载流量
|
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 30 31 32 33 34 35 |
''' author: i@renjie.me ''' class Binary(http.Controller): @http.route('/web/binary/download_attachment', type='http', auth='user') def download_attachment(self, model, id): attachment_model = request.env['ir.attachment'] attachment_ids = attachment_model.search([('res_model', '=', model), ('res_id', '=', id)]) file_dict = {} for attachment_id in attachment_ids: file_store = attachment_id.store_fname #文件附件 if file_store: file_name = attachment_id.name file_path = attachment_id._full_path(file_store) file_dict["%s:%s" % (file_store, file_name)] = dict(path=file_path, name=file_name) _logger.info("download attachment ready : %s" % file_dict) #压缩包名 record_value = request.env[model].search_read(domain=[('id', '=', id)], fields=['name']) zip_filename = "attachment" if len(record_value) == 1: record_name = record_value[0].get("name", "") if record_name: zip_filename = record_name zip_filename = "%s.zip" % zip_filename #内存压缩 strIO = StringIO.StringIO() zip_file = zipfile.ZipFile(strIO, "w", zipfile.ZIP_DEFLATED) for file_info in file_dict.itervalues(): zip_file.write(file_info["path"], file_info["name"]) zip_file.close() _logger.info("download attachment pack : %s(%s)" % (zip_filename, strIO.len)) #二进制 return request.make_response(strIO.getvalue(), headers=[('Content-Type', 'application/x-zip-compressed'), ('Content-Disposition', content_disposition(zip_filename))]) |
打包下载路径举例：
http://renjie.me/web/binary/download_attachment?model=project.task&id=1983
odoo原生常用的reload动作，是整个框架的刷新，源码如下：
|
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 |
// * 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上下文是否正常，源码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * 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); |
现在需要对一些轻量级的通用场景进行视图层级的数据重载刷新支持，以提高用户体验的舒适度，核心代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
/** * 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动作