上一次使用qweb报表的方式引入echrtas 要借助向导打开页面不太方便,在学习研究后发现一种更方便的方式引入外部页面,那就是使用客户端动作.

• 引入模块结构

  
  
  image.png
• 第一步: 创建客户端动作并直接绑定在根目录上

views/home_view.xml

<?xml version="1.0"?>
<odoo>
    <data>
        <!--定义客户端动作-->
        <record id="action_echarts_china" model="ir.actions.client">
            <field name="name">Echarts</field>
            <field name="tag">load_echarts.load_echarts_china</field>
        </record>

        <!--根菜单绑定动作-->
        <menuitem id="menu_echarts_china" name="Echarts" action="action_echarts_china" sequence="1"/>

    </data>
</odoo>

• 第二步:准备好模板

static/src/xml/load_echarts.xml

<?xml version='1.0' encoding='UTF-8'?>
<templates id='template' xml:space='preserve'>
    <t t-name="echarts_china_template">

        // t标签内写入echarts的代码
        <div id="main" style="width:1100px;height: 800px;"></div>
        <script....>

    </t>
</templates>

• 第三步: 注册客户端动作打开准备好的模板

static/src/js/load_echarts.js

odoo.define('load_echarts', function (require) {
    "use strict";
    var core = require('web.core');
    var Widget = require('web.Widget');

    // 定义打开模板
    var Echarts = Widget.extend({
        // 模板名称 对应上面xml中t-name
        template: 'echarts_china_template',

        init: function(parent, data){
            return this._super.apply(this, arguments);
        },

        start: function(){
            return true;
        },


    });
    // 将上面定义的打开模板注册成客户端动作 动作名对应client_action中的tag
    core.action_registry.add('load_echarts.load_echarts_china', Echarts);
})

• 第四步:将注册动作的js和需要用到的js库加入到odoo中

views/include_js.xml

<?xml version="1.0"?>
<odoo>
    <data>
         <template id="load_echarts" name="load_echarts" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                // echarts
                <script type="text/javascript" src="/load_echarts/static/src/js/echarts.min.js"></script>
                // echarts使用中国地图所需的js
                <script type="text/javascript" src="/load_echarts/static/src/js/china.js"></script>
                // 上面注册动作的js
                <script type="text/javascript" src="/load_echarts/static/src/js/load_echarts.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

• 最后记得将所有xml文件写入manifest中
  注意xml模板是放在qweb项中

{
    'name': '引入echarts',
    'version': '10.1.0',
    'description': '',
    'author': 'grey27',
    'data': [
        'views/include_js.xml',
        'views/home_view.xml',
    ],
    'qweb': ['static/src/xml/load_echarts.xml'],
}

最终效果

在根菜单栏上直接可以打开echarts

image.png