如何在Odoo 18 CRM模块的看板/列表/日历视图切换器旁添加自定义视图按钮

嘿，我来帮你搞定在Odoo 18 CRM模块视图切换器旁加自定义按钮这件事！按照下面的步骤一步步来，你就能实现带指定图标、点击打开自定义界面的功能啦：

第一步：定义自定义视图类型 #

首先，在你的自定义模块里创建一个JS文件，用来定义新的视图类型和对应的界面。比如在模块的static/src/js/custom_view.js里写这些代码：

import { View } from '@web/views/view';
import { registry } from '@web/core/registry';

// 定义自定义视图类
export class CustomPuzzleView extends View {
    setup() {
        super.setup();
        // 这里可以写视图初始化时的逻辑，比如加载数据、绑定事件之类的
    }

    render() {
        // 这里写你要展示的自定义界面内容，想怎么设计就怎么设计
        return `<div class="custom-puzzle-view p-4">
            <h2 class="mb-3">我的专属自定义视图</h2>
            <p>这里可以放任何你需要的内容，比如统计数据、特殊表单或者个性化组件~</p>
        </div>`;
    }
}

// 设置视图的显示名称、图标和类型标识
CustomPuzzleView.display_name = "自定义视图";
CustomPuzzleView.icon = "fa fa-puzzle-piece"; // 你指定的拼图图标
CustomPuzzleView.viewType = "puzzle"; // 这个标识要和后面XML里的类型对应上

// 把自定义视图注册到Odoo的视图注册表
registry.category('views').add('puzzle', CustomPuzzleView);

第二步：在CRM线索模型上注册自定义视图 #

接下来要让Odoo知道，CRM的线索（crm.lead）模型可以使用这个新视图。在模块的views/crm_lead_views.xml里添加下面的XML代码：

<odoo>
    <!-- 定义自定义视图的记录 -->
    <record id="view_crm_lead_puzzle" model="ir.ui.view">
        <field name="name">crm.lead.puzzle.view</field>
        <field name="model">crm.lead</field>
        <field name="arch" type="xml">
            <!-- 这里的arch可以简单写个标签占位，因为我们用JS渲染内容 -->
            <puzzle/>
        </field>
        <field name="type">puzzle</field> <!-- 和JS里的viewType保持一致 -->
        <field name="priority">16</field> <!-- 控制按钮在切换器里的位置，数字越大越靠后 -->
    </record>

    <!-- 更新CRM线索的默认动作，把自定义视图加入到可切换的视图列表里 -->
    <record id="crm.crm_lead_action_pipeline" model="ir.actions.act_window">
        <field name="view_mode" eval="kanban,list,form,calendar,activity,puzzle"/> <!-- 把puzzle加到最后 -->
    </record>
</odoo>

第三步：让Odoo加载你的JS文件 #

现在要确保Odoo在后台加载我们写的JS文件，在模块的views/assets.xml里添加资源引用：

<odoo>
    <template id="assets_backend" name="crm custom puzzle view assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <!-- 替换成你自己的模块名称 -->
            <script type="text/javascript" src="/your_module_name/static/src/js/custom_view.js"/>
        </xpath>
    </template>
</odoo>

记得把your_module_name替换成你实际的自定义模块名称哦~

第四步：测试效果 #

完成上面的步骤后，升级你的自定义模块，然后进入CRM模块的线索/商机页面。你会发现视图切换器里多了一个带拼图图标的「自定义视图」按钮，点击它就能看到你在JS里写的自定义界面啦！

一些额外小提示 #

• 如果你的自定义视图需要和CRM线索数据交互，可以在JS的setup方法里用this.model来获取数据，比如const leadRecords = await this.model.load();就能拿到当前列表的线索数据
• 图标可以换成任何Font Awesome支持的图标，只要把fa fa-puzzle-piece换成对应的类名就行
• 要是你想让这个自定义按钮只在CRM模块显示，别把视图注册到其他模型上就好

内容来源于stack exchange