当前位置：首页 > news >正文

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

news 来源：原创 2025/5/23 15:20:10

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>
        <record id="view_asset_liabilities_report_report" model="ir.ui.view">
            <field name="name">Asset Liabilities Report</field>
            <field name="model">asset.liabilities.report</field>
            <field name="arch" type="xml">
                <report string="资产负债表" template_id="jcerp_account_ledger.AssetLiabilitiesReport"/>
            </field>
        </record>

        <record id="action_asset_liabilities_report_test" model="ir.actions.act_window">
            <field name="name">资产负债表</field>
            <field name="res_model">asset.liabilities.report</field>
            <field name="view_mode">report</field>
            <field name="view_id" ref="view_asset_liabilities_report_report"/>
        </record>
    </data>
</odoo>

4.3.ArchParser

在ArchParser需要获取report视图传过来的template名称。

export class ReportArchParser {
    parse(arch, fields = {}) {
        const archInfo = { fields, fieldAttrs: {}};
        visitXML(arch, (node) => {
            switch (node.tagName) {
                case "report": {
                    if (node.hasAttribute("template_id")) {
                        archInfo.template_id = node.getAttribute("template_id");
                    }
                    const title = node.getAttribute("string");
                    if (title) {
                        archInfo.title = title;
                    }
                    break;
                }
            }
        });
        return archInfo;
    }
}

4.4.Renderer

由于Renderer是根据template_id生成，因此这里不需要实现Renderer

4.5.Model

根据search传过来的参数获取并解析字段

    /**
     * @param {SearchParams} searchParams
     */
    async load(searchParams) {
        this.searchParams = searchParams;
        if (!this.initialGroupBy) {
            this.initialGroupBy = searchParams.context.graph_groupbys || this.metaData.groupBy; // = arch groupBy --> change that
        }
        this.data = {'value': '测试'}
        // const metaData = this._buildMetaData();
        // await this._fetchDataPoints(metaData);
    }

4.6.Controller

在useEffect中用传过来的template_xmlid，model中的解析数据生成template页面，并且替换o_content。

export class ReportController extends Component {
    setup() {
        this.archInfo = this.props.archInfo;
        this.model = useModelWithSampleData(this.props.Model, this.props.modelParams);
        useSetupView({
            rootRef: useRef("root"),
            getLocalState: () => {
                return { metaData: this.model.metaData };
            }
        });
        this.rootRef = useRef("root");
        this.searchBarToggler = useSearchBarToggler();
        useEffect(() => this.renderReport());
    }
    renderReport() {
        const innerHTML = renderToString(this.archInfo.template_xmlid, {
            model: this.model
        });
        const template = Object.assign(document.createElement("template"), { innerHTML });
        const tooltip = template.content.firstChild;
        // 将o_content替换为tooltip
        this.rootRef.el.querySelector('.o_content').replaceWith(tooltip);
    }
}