在odoo中点击菜单，弹出自定义页面。

采用odoo的qweb机制开发自定义界面。

一、创建自定义模板页面

模板文件/static/src/xml/base.xml

<?xml version="1.0" encoding="UTF-8"?>
    <templates id="template" xml:space="preserve">
        <div t-name="quality_assess" t-attf-class="oe_web_assess">
  	    </div>
        <t t-name="DemoPage">
            <div t-attf-class="page_title">
                <label>日计算申请</label>
            </div>
            <div t-attf-class="question_title">
                <div class="oe_inline">
                    <label style="padding-right:30px">考勤日期</label>
                    <input type="date" name="start_date"  class="oe_left"/>
                    <span class="oe_left">至</span>
                    <input type="date" name="end_date" class="oe_left" />
                </div>
                <br/>
                <label style="color:red">如果有刷卡记录，但某段时间的考勤记录异常，请申请日计算。</label>
            </div>
            <div class="footer">
                <button class="oe_assess_commit" style="float:right">提交</button>
            </div>
        </t>

    </templates>

二、定义好模板要用的css样式 static/src/css/calaulate.css

@CHARSET "UTF-8";

.openerp .oe_web_assess {
	margin: 0px;
}

.openerp .oe_web_assess .page_title {
	font-weight: bold;
	font-size: 20px;
	margin: 5px 0px 10px 0px;
	color: #000000;
	text-align: left;
}
.openerp .oe_web_assess .question_title {
	font-weight: bold;
	font-size: 18px;
	margin: 15px 0px 10px 0px;
	color: #7c7bad;
	text-align: left;
}
.openerp .oe_web_assess .footer {
	margin-top: 30px;
}

.openerp .oe_web_assess .base_label{

letter-spacing: 50px;

}

.openerp .oe_web_assess .base_right{

float:right;

}

三、定义动作

自定义页面实际上是一个 client action，也就是客户端动作，通过对 AbstractAction 这个抽象类进行扩展，从而指定自定义页面的模板和页面的事件等，下面的代码定义了一个最简单的客户端动作，它包含了一个点击事件：

JS文件static/src/js/base.js

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

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

    var CustomPageDemo = AbstractAction.extend({
        template: 'DemoPage',
        events: { 'click .oe_assess_commit': 'onSubmitClick' },

        onSubmitClick: function () {
            var self = this;
            console.log('cal data！！！！！！');

            var start_date=document.getElementsByName('start_date')[0].value
            var end_date=document.getElementsByName('end_date')[0].value
            if (start_date != '' && end_date != ''){
                this._rpc({
                    model: 'attendance.day',
                    method: 'cal_day_attendance',
                    args: [start_date,end_date]
                }).then(function () {
                     location.reload();
                });
            }else{
                alert('请填写开始和结束日期');
            }
        }
    });

    core.action_registry.add('custom_page.demo', CustomPageDemo);

    return CustomPageDemo;

    });

我们需要通过 core.action_registry.add() 这个方法对动作进行注册，第一个参数表示注册的动作名（tag），第二个参数是要注册的动作对象。

四、创建菜单项

页面文件views/attendance_setting.xml

<record id="action_day_compute" model="ir.actions.client">
                <field name="name">日计算申请</field>
                <field name="tag">custom_page.demo</field>
                <field name="target">new</field>
        </record>
        <menuitem parent="attendance_my_menu" id="attendance_day_compute_menu" name="日计算申请" sequence="3" action="action_day_compute"/>

五、加载JS资源

把JS加载进来views/load_js.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="assets_backend_bicon_wms_base_1" inherit_id="web.assets_backend" name="bicon_wms_base_assets_1">
        <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/XXXX/static/src/js/base.js"/>
        </xpath>
    </template>

</odoo>

除了 JS 资源需要引入外，我们编写的页面模板也许要引入，在 __manifest__.py 添加我们的自定义页面文件：

'css': ['static/src/css/calculate.css'],
'qweb': ['static/src/xml/base.xml'],

以上就可以实现自定义页面的开发。