Odoo 13：如何通过控制器在视图div渲染maintenance.stage模型数据

以下是完整的实现方案，分为Python控制器、XML视图配置、JavaScript渲染与自动更新三部分：

1. 编写Python控制器获取数据 #

在自定义模块的controllers/main.py中添加控制器，提供获取maintenance.stage数据的接口：

from odoo import http
from odoo.http import request

class MaintenanceStageController(http.Controller):

    @http.route('/maintenance/stages/get', type='json', auth='user')
    def get_maintenance_stages(self):
        # 查询所有维护阶段记录，可根据需求添加筛选条件
        stages = request.env['maintenance.stage'].search([])
        # 返回需要的字段，可根据实际需求扩展
        return [{
            'id': stage.id,
            'name': stage.name,
            'sequence': stage.sequence,
            'fold': stage.fold
        } for stage in stages]

2. 配置XML视图添加Div容器 #

在自定义模块的views/views.xml中，为目标视图添加数据渲染容器并引入JS文件：

<odoo>
    <record id="target_view_inherit" model="ir.ui.view">
        <field name="name">Target View with Maintenance Stages</field>
        <field name="model">your.target.model</field> <!-- 替换为你要添加Div的视图对应模型 -->
        <field name="inherit_id" ref="base.target_base_view"/> <!-- 替换为继承的基础视图ID -->
        <field name="arch" type="xml">
            <!-- 在目标位置插入Div容器 -->
            <xpath expr="//div[@class='o_form_sheet']" position="inside">
                <div id="maintenance-stages-container" class="mt-4">
                    <!-- 维护阶段数据将渲染到此处 -->
                </div>
            </xpath>
            <!-- 引入自定义JS文件 -->
            <xpath expr="//script[last()]" position="after">
                <script type="text/javascript" src="/your_module_name/static/src/js/maintenance_stages.js"/>
            </xpath>
        </field>
    </record>
</odoo>

3. JavaScript实现渲染与自动更新 #

在自定义模块的static/src/js/maintenance_stages.js中，实现数据渲染和模型变更监听：

odoo.define('your_module_name.maintenance_stages', function (require) {
    "use strict";

    var ajax = require('web.ajax');
    var bus = require('web.bus');

    // 渲染维护阶段到Div容器
    function renderStages(stages) {
        const container = document.getElementById('maintenance-stages-container');
        if (!container) return;

        // 清空容器并按排序字段重新渲染
        container.innerHTML = '';
        stages.sort((a, b) => a.sequence - b.sequence);
        
        stages.forEach(stage => {
            const stageDiv = document.createElement('div');
            stageDiv.className = `maintenance-stage p-2 mb-2 rounded ${stage.fold ? 'bg-secondary text-white' : 'bg-light'}`;
            stageDiv.innerHTML = `<strong>${stage.name}</strong> ${stage.fold ? '(已折叠)' : ''}`;
            container.appendChild(stageDiv);
        });
    }

    // 从控制器拉取最新数据
    function fetchStages() {
        ajax.jsonRpc('/maintenance/stages/get', 'call', {}).then(renderStages);
    }

    // 页面加载时初始化数据
    document.addEventListener('DOMContentLoaded', fetchStages);

    // 监听维护阶段模型的创建/更新/删除事件，自动刷新数据
    bus.on('create', null, (model) => model === 'maintenance.stage' && fetchStages());
    bus.on('write', null, (model) => model === 'maintenance.stage' && fetchStages());
    bus.on('unlink', null, (model) => model === 'maintenance.stage' && fetchStages());

    return { fetchStages, renderStages };
});

实现说明 #

• 权限控制：控制器使用auth='user'确保仅登录用户可访问数据，需确保用户拥有maintenance.stage模型的读取权限
• 自动更新：通过Odoo内置的web.bus监听模型的增删改事件，触发数据重新拉取与渲染
• 样式自定义：可根据需求修改JS中stageDiv的className和HTML结构，匹配系统UI风格

内容的提问来源于stack exchange，提问作者Luis Muskus