odoo14 使用ir.actions.client 自定义弹窗内容

ir.actions.client 介绍

ir.actions.client 是odoo actions事件的一种,触发一个在客户端实现(即js文件中定义的函数,通过core.action_registry.add(tag,函数名) 注册到odoo中)动作

  • tag -- action在客户端的标识符,一般是一个专用的字符串,在js文件中注册该动作时指定。
  • params (可选) -- 用来传给客户端动作的,字典格式
  • target (可选) -- current:当前内容区打开action;fullscreen:以全屏模式打开;new:以新窗口打开。
  • context-- 作为额外数据,传递给客户端函数。

实现方式主要有一下几步:

1. 通过继承扩展的方式建立一个m_custome_list.js,里面主要是关联qweb视图,对qweb页面传递数据,渲染视图

在 项目目录/static/src/js 建立 m_custome_list.js 文件

  • m_custome_list.js
odoo.define('custom_page.demo', function (require) {
    "use strict";

    var AbstractAction = require('web.AbstractAction');
    var core = require('web.core');

    var CustomPageDemo = AbstractAction.extend({
        // 对某个类关联click事件
        events: {'click .demo-submit': '_onSubmitClick',
        'click .db_add_data': '_onAddData'},

        // 初始化,可以在action 里传入参数
        init: function (parent, action, option) {
            // 保存传递的参数
            this.params = action.params;
            this._super.apply(this, arguments);
        },

        // 渲染视图
        renderElement: function () {
            this._super.apply(this, arguments);
            // 渲染qwb 视图,并传值
            this.$('.o_content').html(
                core.qweb.render('DemoPage', {'params': this.params}));
        },

        _onSubmitClick: function (e) {
            e.stopPropagation();
            alert('Submit clicked!');
        },

        // 添加一条数据
        _onAddData: (e)=> {
            e.stopPropagation();
            window.alert('添加成功');
        },
    });

    // add方法对动作进行注册,第一个参数表示注册的动作名,第二个参数是要注册的动作对象;
    core.action_registry.add('custom_page.demo', CustomPageDemo);

    return CustomPageDemo;

});
2. 编写一个qweb视图,用来承载需要显示的数据样式

在 项目目录/static/src/xml 建立 m_custome_list.xml 文件




    
        
标题 内容 创建日期
3. 在需要显示client的model,调用显示client方法

model 调用client方法, 在model关联的xml视图页面,增加一个按钮,绑定show_list方法,也可以在任何方法中返回client和返回actions.window 一样

    def show_list(self):
        content_list = [
            {'title': '内容一', 'content': '我是内容一一,在想看看1', 'date': '2021-08-08'},
            {'title': '内容二', 'content': '我是内容二二,在想看看2', 'date': '2021-08-09'},
            {'title': '内容三', 'content': '我是内容三三,在想看看3', 'date': '2021-08-10'},
            {'title': '内容四', 'content': '我是内容四四,在想看看4', 'date': '2021-08-11'},
        ]
        info = {
            'title': '测试列表循环',
            'contentList': content_list
        }
        return {
            'type': 'ir.actions.client',
            'name': '列表信息',
            'tag': 'custom_page.demo',
            'params': info,
            'target': 'new',
        }
4. 加载自己写的m_custome_list.js文件

在 项目目录/views/ 建立 js_and_css.xml 文件, 用来加载自己写的js,别忘了在mainfast.py 中加载这个js_and_css.xml