基于wol学习自定义odoo的widget

简介：

在odoo二次开发中,会经常有一些个性化的前端界面需求,而odoo自身的ui样式并不支持,这时候就需要开发人员自定义widget组件满足界面需求,odoo前端界面就是由许多widget渲染组成,包括字段组件,action动作,以及一些自定义界面都是通过继承widget进行拓展而来,可以说widget是odoo的核心组成之一。 OWL是 Odoo 创建的前端开发框架。这是他们在最新版本的 Odoo（版本 14）中引入的一个框架，以使前端代码更好一些。如果您熟悉其他前端框架，如 React、Vue、Angular、Backbone 等，那么您将很快了解 OWL。它遵循许多相同的模式和想法。 现在的情况是我需要一个专用的widget来实现一个特定的图片显示功能：

1. 图片显示静态分离（不再存在odoo数据库中，默认的二进制存储，不再存在odoo的web服务器中）
2. 使用EasyImage2.0存储（有token认证的api上传图床）
3. 用户很简单的使用页面widget，上传图片，自动转存图床，更新存储字段为url，更新预览，双击放大

参考教程：

https://www.oocademy.com/v15.0/tutorial/introduction-to-owl-115#-Expanding-our-widget

一：owl基本结构

与 Odoo 开发一样，我们必须使用一个新模块。让我们设置一个最简单的，以便我们可以尝试一些 OWL 功能。

 

 

__init__.py是空的， 

只定义了__manifest__.py文件的一些基本信息。

# -*- coding: utf-8 -*-
# code:__manifest__.py
{
    'name': "jack_url_image",
    'summary': """图片挂件改存api图床""",
    'description': """图片挂件改存api图床""",
    'author': "jackadam",
    'website': "http://www.baidu.com",
    'category': 'Administration',
    'version': '15.0.0.1',
    'depends': ['base'],
    'installable': True,
    'application': True,
    'auto_install': False,
}

安装一下，应该没什么问题的。

 

 

 

二：创建并注册js类 

我们的新组件文件JackUrlImage.js将被调用，我们将把它添加到static/src/js/components/.

 

 

 

// code:myaddons/jack_url_image/static/src/js/components/JackUrlImage.js 
odoo.define("jack_url_image.JackUrlImage", function (require) {
     const { Component } = owl;

     class JackUrlImage extends Component {
         //
     };

 });

　　

注册到manifest

# code:__manifest__.py
 { 
     ... 
    'assets': {
        'web.assets_backend': [
            'jack_url_image/static/src/js/components/JackUrlImage.js',
        ]
    },
}

　　

三：为组件创建模板 xml

四：更新依赖项

五：覆盖表单渲染器以将组件安装到类

六：将 div 添加到销售订单表单

七：扩展我们的widget

八：设计我们的小部件

九：连接数据

十：

标签：__,widget,自定义,JackUrlImage,url,js,wol,odoo
来源： https://www.cnblogs.com/jackadam/p/16412159.html