如何将Vite构建的React.js应用集成至付费版Odoo模块？

1. 整理模块静态资源结构 #

把Vite构建生成的dist文件夹里的所有内容，复制到你的Odoo模块的static/src/react-app/目录下（没有就新建这个子目录），避免和模块其他静态资源混在一起，方便后续维护。

2. 创建QWeb视图挂载React应用 #

在模块的views/目录下新建react_app_views.xml文件，通过QWeb模板完成资源引入和React容器的渲染：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- 给Odoo后台注入React应用的静态资源 -->
    <template id="assets_backend" name="React App Assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/your_module_name/static/src/react-app/assets/index.css"/>
            <script type="text/javascript" src="/your_module_name/static/src/react-app/assets/index.js"/>
        </xpath>
    </template>

    <!-- 定义React应用的挂载容器页面 -->
    <record id="react_app_page" model="ir.ui.view">
        <field name="name">React App Page</field>
        <field name="model">ir.ui.view</field>
        <field name="type">qweb</field>
        <field name="arch" type="xml">
            <div id="root" class="o_content"/>
        </field>
    </record>

    <!-- 绑定路由到容器页面 -->
    <record id="action_react_app" model="ir.actions.act_window">
        <field name="name">My React App</field>
        <field name="type">ir.actions.act_window</field>
        <field name="res_model">ir.ui.view</field>
        <field name="view_mode">form</field>
        <field name="view_id" ref="react_app_page"/>
        <field name="target">current</field>
    </record>

    <!-- 添加后台菜单入口 -->
    <menuitem id="menu_react_app" name="My React App" action="action_react_app" parent="base.menu_administration"/>
</odoo>

记得把your_module_name替换成你的实际模块名称。

3. 调整React应用的挂载逻辑 #

修改React入口文件（通常是src/main.jsx），确保在Odoo页面加载完成后再挂载应用，目标容器对应XML里的#root：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

document.addEventListener('DOMContentLoaded', () => {
  const rootNode = document.getElementById('root');
  if (rootNode) {
    ReactDOM.createRoot(rootNode).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  }
});

4. 与Odoo数据库交互的API使用 #

Odoo内置了RPC客户端，直接在React里调用window.odoo.rpc即可完成数据库交互，无需额外引入依赖：

// 示例：读取企业客户数据
const fetchCompanyPartners = async () => {
  try {
    const partners = await window.odoo.rpc.query({
      model: 'res.partner',
      method: 'search_read',
      args: [[['is_company', '=', true]]],
      kwargs: { fields: ['name', 'email'], limit: 10 },
    });
    console.log('企业客户:', partners);
  } catch (err) {
    console.error('读取失败:', err);
  }
};

// 示例：创建新客户记录
const createNewPartner = async (data) => {
  try {
    const partnerId = await window.odoo.rpc.query({
      model: 'res.partner',
      method: 'create',
      args: [data],
    });
    console.log('新建客户ID:', partnerId);
  } catch (err) {
    console.error('创建失败:', err);
  }
};

如果要调用自定义模块的业务方法，只需替换model为你的模块模型名，method为自定义方法名即可。

5. 付费模块权限控制 #

在模块security/目录的ir.model.access.csv中添加权限配置，确保只有指定付费用户组能访问：

id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
access_react_app_page,react_app_page_access,model_ir_ui_view,your_paid_group_id,1,0,0,0

把your_paid_group_id替换成你自定义的付费用户组ID。

6. 测试与部署 #

1. 将模块放到Odoo的addons目录下
2. 在Odoo后台应用列表找到模块，点击「升级」
3. 刷新页面后，点击后台菜单里的「My React App」即可看到你的React应用

内容的提问来源于stack exchange，提问作者Anas Abdullah