在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'],

以上就可以實現自定義頁面的開發。