odoo17 前端在头像下拉 dropdown 自定义菜单

news2024/11/14 23:04:57

odoo17 前端在头像下拉 dropdown 自定义菜单

其实很简单, 我们先找到原来已经创建好的, 找到代码位置

使用 我的资料 为例 odoo-17.0\addons\hr\static\src\user_menu\my_profile.js

/** @odoo-module **/

import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { preferencesItem } from "@web/webclient/user_menu/user_menu_items";

export function hrPreferencesItem(env)  {
    return Object.assign(
        {}, 
        preferencesItem(env),
        {
            description: _t('My Profile'),
        }
    );
}

registry.category("user_menuitems").add('profile', hrPreferencesItem, { force: true })

可以看到这个注册类型在 user_menuitems 中

需要添加的也在这个类别中添加

如此操作

自定义一个模块, 继承 base, web 模块, 目录结构

└─demo
    │  __init__.py
    │  __manifest__.py
    ├─static
    │  └─src
    │      ├─js
    │      │   demo_item_service.js
    │      │   menu_item_demo.js

一样的, 先创建 menu_item_demo.js 文件

/** @odoo-module **/
import {registry} from "@web/core/registry";
import {_t} from "@web/core/l10n/translation";


export function menuItemDemo(env) {
    return {
        type: "item",  
        id: "menu_item_demo",  // 自定义id
        description: _t("这是新加的"),  // 页面显示的标题
        callback: async function () {
            // 点击执行回调, 需要执行的东西放这里, 我这里是打开一个dialog弹框
            env.services.demo_dialog.demoOpenDialog();
        },
        sequence: 51,
    };
}

// 对应的 user_menuitems 分类, 添加自己的方法
// 返回值固定写法, 可以多参考源码中写法
// type: 目前我发现有两个可选项
// 	- item: 占完整行
// 	- Switch: 滑动开关
registry.category("user_menuitems").add("pfp", menuItemDemo);

重启刷新就展示这个菜单了

callback 方法是点击后执行, 我这使用弹窗作为展示, 调用另外文件, 也可以直接写在这

还没结束

env.services 是内部注册的服务

demo_item_service.js 服务编写

服务可以自定义的, 但是为了规范,还是跟着项目写

/** @odoo-module **/

import {registry} from "@web/core/registry";
// 导入内置的dialog弹框
import {ConfirmationDialog} from "@web/core/confirmation_dialog/confirmation_dialog";

export const demoItemService = {
    // 添加依赖
    dependencies: ["dialog", "ui"],
    // 固定写法, 初始化执行方法
    start(env, {dialog, ui}) {
        let isPaletteOpened = false;
		// 页面点击后执行这个方法, 根据自己需求执行内容
        // 可以自己创建 组件 component 然后使用
        function demoOpenDialog() {
            isPaletteOpened = true;
            dialog.add(ConfirmationDialog, {
                body: "This is a demo dialog",  // 弹出框内容
                title: "Demo dialog",
                cancel: () => {  // 取消按钮回调
                    console.log('cancel')
                },
                confirm: () => {  // 确定按钮回调
                    console.log('confirm')
                },
            });
        }
		// 一定要返回出去, 不然外面用不到
        return {
            demoOpenDialog,
        };
    }
}
// 注册服务类, 给定id, 后面使用
registry.category("services").add("demo_dialog", demoItemService);

到这里js已经全部写好了, 执行导出 __manifest__.py

{
    'name': 'Demo',
    'version': '1.3',
    'category': 'Hidden',
    'description': """""",
    'depends': ['base', 'web'],
    'data': [
    ],
    'assets': {
        'web.assets_backend': [  // js/xml导出在这
            'demo/static/src/**/*',  // 重点是这里导出, 别用错了
        ],
    },
    'installable': True,
    'auto_install': True,
    'license': 'LGPL-3',
}