其他分享
首页 > 其他分享> > 基于wol学习自定义odoo的widget

基于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