原生表单视图的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”/>形式的网络图片字段组件