odoo form view pic url widget | Odoo Connects Everything

原生表单视图的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 form view pic url widget》有6个想法

tedi说道：

2017-06-02 10:47

兄弟有没有odoo集成七牛的示例代码?前后端的

回复
1. zackzhu说道：
  
  2017-07-01 16:01
  
  兄弟，我看了你个博客，觉得你odoo水平非常不错，我们目前所在的公司也涉及到odoo的开发，不知道你是否有兴趣给我们做一个培训呢+技术指导呢，一节课，二节课都可以，费用我们可以谈，远程的也可以，我们公司在成都。
  我电话:18613203166
  邮件:36757049@qq.com
  期望回复，谢谢
  
  回复
  1. zackzhu说道：
    
    2017-07-03 14:08
    
    还在审核？
    
    回复
谷文峰说道：

2018-08-16 11:28

你好，用你的代码实现了网络图片的显示，但是当我编辑的时候，原始值不存在了。我也无法进行更换或者清空。这点好像没有考虑到

回复
1. 仁杰说道：
  
  2018-08-16 23:06
  
  可能是odoo不同版本的兼容性问题，所以关键在于能否理解透彻代码举一反三：widget分为浏览和编辑模式，浏览模式显示img网络图片，编辑模式则是继承url组件以input文本框的形式呈现编辑交互
  
  回复
  1. 谷文峰说道：
    
    2018-08-23 17:10
    
    非常感谢您的指点。明白了
    
    回复

《odoo form view pic url widget》有6个想法

发表评论 取消回复

发表评论取消回复