Odoo中的虚拟键盘

时间：2017-12-23 08:50:02

标签： javascript python python-2.7 openerp odoo-10

我需要在Odoo中启用虚拟键盘，我几乎完成了它。但事情就是当我点击一个特定的字母时，它出现在下面的所有字段上。enter image description here

我必须解决这个问题。整个代码就在下面，包括xml，javascript。

hotel.xml 

<?xml version="1.0" encoding="utf-8"?>
<template xml:space="preserve">
<t t-name="HotelRegistrationMenu">
        <div class="o_hr_attendance_kiosk_mode_container">
            <div class="o_hr_attendance_kiosk_mode">
                    <h1>Welcome to Hotel California</h1>
                    <h2>We serve for your happiness</h2>
                    <button class="o_bi_hotel_button_registration btn btn-primary btn-sm">Book Now</button>

            </div>
        </div>
</t>
<t t-name="HotelRegistrationKeys">
<div class="o_hr_attendance_kiosk_mode_container">
    <form>
        <div class="o_form_view">
            <table class="o_border" >
                <tr> 
                    <td class="col-xs-6 col-xs-offset-2"><label>Customer Name</label></td>
                    <td width="100"><input class="o_hr_attendance_PINbox" name="customer_name" minlength="1" autofocus="autofocus"/></td>
                </tr>
                <tr>
                    <td class="col-xs-6 col-xs-offset-2"><label>Phone Number</label></td>
                    <td width="100%"><input class="o_hr_attendance_PINbox" name="contact_number" minlength="1"/></td>
                </tr>
                <tr>
                    <td class="col-xs-6 col-xs-offset-2"><label>Number Of Persons</label></td>
                    <td width="100%"><input class="o_hr_attendance_PINbox" name="total_persons" minlength="1"/></td>
                </tr>
                <tr>
                    <td class="col-xs-6 col-xs-offset-2"><label>Required Date</label></td>
                    <td width="100%"><input class="o_hr_attendance_PINbox" name="required_date" minlength="1"/></td>
                </tr>
                <tr>
                    <td class="col-xs-6 col-xs-offset-2"><label>Required Time</label></td>
                    <td width="100%"><input class="o_hr_attendance_PINbox" name="required_time" minlength="1"/></td>
                </tr>
            </table>
        </div>
</form>
<!-- <div class="o_hr_attendance_kiosk_mode"> -->
<div class="row">
    <div class="align=center col-sm-8 col-sm-offset-2">
        <div class="row" >
            <div class="col-xs-4 col-xs-offset-2"></div>
        </div>
        <div class="row o_hr_attendance_pin_pad">
            <t t-foreach="['A','B','C','D','E','F','G','H','I','J','K','L','M',
                            'N','O','P','Q','R','S','T','U','V','W','X','Y','Z','1','2',
                            '3','4','5','6','7','8','9','0','-','OK','Del']" t-as="btn_name">
                <div class="col-xs-1 o_hr_attendance_pin_pad_border">
                    <a t-attf-class="btn btn-primary btn-block btn-lg o_hr_attendance_btn-round-corners {{ 'o_hr_attendance_pin_pad_button_' + btn_name }}"><t t-esc="btn_name"/>
                    </a>
                </div>
            </t>
        </div>

    </div>
</div>
</div>
<!-- </div> -->
</t>
</template>

Javascript文件

registration.js 

odoo.define('bi_hotel.registration', function (require) {
"use strict";

// var BarcodeHandlerMixin = require('barcodes.BarcodeHandlerMixin');

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

var QWeb = core.qweb;
var _t = core._t;

var registration = Widget.extend({
    template:'HotelRegistrationKeys',
    events: {
        "click .o_bi_hotel_button_registration": function(){
        var self = this;
        self.$el.html(QWeb.render('HotelRegistrationKeys', {widget: self}));},
        'click .o_hr_attendance_pin_pad_button_A': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'A'); },
        'click .o_hr_attendance_pin_pad_button_B': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'B'); },
        'click .o_hr_attendance_pin_pad_button_C': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'C'); },
        'click .o_hr_attendance_pin_pad_button_D': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'D'); },
        'click .o_hr_attendance_pin_pad_button_E': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'E'); },
        'click .o_hr_attendance_pin_pad_button_F': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'F'); },
        'click .o_hr_attendance_pin_pad_button_G': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'G'); },
        'click .o_hr_attendance_pin_pad_button_H': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'H'); },
        'click .o_hr_attendance_pin_pad_button_I': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'I'); },
        'click .o_hr_attendance_pin_pad_button_J': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'J'); },
        'click .o_hr_attendance_pin_pad_button_K': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'K'); },
        'click .o_hr_attendance_pin_pad_button_L': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'L'); },
        'click .o_hr_attendance_pin_pad_button_M': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'M'); },
        'click .o_hr_attendance_pin_pad_button_N': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'N'); },
        'click .o_hr_attendance_pin_pad_button_O': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'O'); },
        'click .o_hr_attendance_pin_pad_button_P': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'P'); },
        'click .o_hr_attendance_pin_pad_button_Q': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Q'); },
        'click .o_hr_attendance_pin_pad_button_R': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'R'); },
        'click .o_hr_attendance_pin_pad_button_S': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'S'); },
        'click .o_hr_attendance_pin_pad_button_T': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'T'); },
        'click .o_hr_attendance_pin_pad_button_U': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'U'); },
        'click .o_hr_attendance_pin_pad_button_V': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'V'); },
        'click .o_hr_attendance_pin_pad_button_W': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'W'); },
        'click .o_hr_attendance_pin_pad_button_X': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'X'); },
        'click .o_hr_attendance_pin_pad_button_Y': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Y'); },
        'click .o_hr_attendance_pin_pad_button_Z': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Z'); },
        'click .o_hr_attendance_pin_pad_button_-': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + ' '); },
        'click .o_hr_attendance_pin_pad_button_Del': function() { this.$('.o_hr_attendance_PINbox').val(''); },

        'click .o_hr_attendance_pin_pad_button_0': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 0); },
        'click .o_hr_attendance_pin_pad_button_1': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 1); },
        'click .o_hr_attendance_pin_pad_button_2': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 2); },
        'click .o_hr_attendance_pin_pad_button_3': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 3); },
        'click .o_hr_attendance_pin_pad_button_4': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 4); },
        'click .o_hr_attendance_pin_pad_button_5': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 5); },
        'click .o_hr_attendance_pin_pad_button_6': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 6); },
        'click .o_hr_attendance_pin_pad_button_7': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 7); },
        'click .o_hr_attendance_pin_pad_button_8': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 8); },
        'click .o_hr_attendance_pin_pad_button_9': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 9); },
    },
    start: function (){
            var self = this;
                self.$el.html(QWeb.render('HotelRegistrationMenu', {widget: self}));
        },
    });

core.action_registry.add('bi_hotel_registration', registration);
return registration;

});

.less file

hotel.less 

.o_hr_attendance_btn-round-corners {
    border-radius: 10%;
}

.o_hr_attendance_pin_pad_border {
    margin: 10px 0px 10px 0px;
}
.o_hr_attendance_PINbox {
    background: #AEFF00;
    border: 1px solid #d5d5d5;
    text-align: left;
    margin: 5px 0px 5px 0px;   
}

.o_hr_attendance_kiosk_mode_container {
    background: black;
    .o-flex-display();
    .o-flex-flow(column, nowrap);
    .o-justify-content(center);
    .o-align-items(center);

    @media (min-width: @screen-xs-max) {
        background: url("../../../../web_enterprise/static/src/img/application-switcher-bg.jpg") no-repeat center center fixed;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.o_hr_attendance_kiosk_mode {
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #fff;
    padding: 2em;

    h1 {
        margin: 0 0 2rem 0;
    }

    .message_demo_barcodes {
        font-size: 0.9em;
        margin: 0;
    }

    img {
        overflow:hidden; // prevent margins colapsing with h1
        margin-top: 3rem;
        width: 200px;
    }

    p {
        text-align: left;
        margin: 3rem 0;
    }

    > button {
        font-size: 1.2em;
        margin-bottom: 2rem;
        width: 100%;
    }

    > button:last-child {
        margin-bottom: 0;
    }

    @media (min-width: @screen-xs-max) {
        flex: 0 0 auto;
        width: 550px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.8);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
        font-size: 1.2em;
        padding: 3em;
    }
}

.o_border{
    width: 500px;
    height: 450;
    text-align: left;
    margin: 0 auto;
    background : #ECECEC;
    font-size: 1.5em;
    margin-bottom: 50px;
}

.o_hr_attendance_PINbox_1 {
    background: #AEFF00;
    border: 1px solid #d5d5d5;
    text-align: left;
    margin: 5px 0px 5px 0px;   
}

这些都是启用虚拟键盘的代码，但问题在上面提出。任何人都可以解决它吗？

0 个答案:

没有答案
相关问题
最新问题