【odoo17】odoo前端视图的结构分析及新增视图类型的实现

最新推荐文章于 2025-05-25 18:17:25 发布

原创

最新推荐文章于 2025-05-25 18:17:25 发布 · 1.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #odoo #owl

odoo前端视图加载的架构分析

1.视图入口

用F12定位到比如tree视图的地方，可以看到odoo的最顶层定义了一个view组件，然后根据视图类型到了各自的视图结构中。
在这里插入图片描述
可以看到，在view视图中，odoo已经通过load方法加载了不少参数，主要是action中的参数。

2.视图结构

对比各种视图的代码目录，结构都是相同的。以tree视图为例，进入list代码目录中，看到代码目录。
在这里插入图片描述
这里介绍主要的组成部分，每个视图主要由ArchParser、Controller、Renderer、Model组成。

2.1.ArchParser

ArchParser是用于解析view的xml代码，在list视图中，需要解析的是tree视图，解析结果：
在这里插入图片描述

2.2.Controller

Controller中的分为两部分，上半部分主要由操作按钮、搜索框等组成，下半部分通过props.Renderer在Renderer中实现。
在这里插入图片描述

2.3.Renderer

Renderer在list视图中实现controller中的下半部分，在controller中通过props.Renderer在Renderer调用。
在这里插入图片描述

2.4.Model

Model用于从数据库读取数据，并且会根据视图需要进行相应的处理，odoo对常用数据通过@web/model/relational_model/relational_model中进行处理，如有特殊需求，可以自行构建Model。
model的创建是在Controller的setup中完成，在controller的template中调用。
在这里插入图片描述

3.视图实现

最终view中通过调用t-component="Controller"来完成对controller中的调用。
在这里插入图片描述

4.新增视图report

4.1.需求描述

在上一章《在报表上方增加搜索视图》中，实现了报表上方增加搜索视图，这种方式由于没有controller，导致searchModel等一系列的组件无法获取，实现麻烦、可扩展性差。因此通过新增视图类型report来实现。

4.2.新增视图类型report

class ActWindowView(models.Model):
    _inherit = 'ir.actions.act_window.view'

    view_mode = fields.Selection(selection_add=[('report', "Report")], ondelete={
   
   'report': 'cascade'})


class View(models.Model):
    _inherit = 'ir.ui.view'

    type = fields.Selection(selection_add=[('report', "Report")])

在report中指定props.Renderer

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

最低0.47元/天解锁文章