odoo13学习---16 Web客户端开发

...
‘depends‘: [‘base‘, ‘web‘],
...

odoo.define(‘my_field_widget‘, function (require) {
　　"use strict";
　　var AbstractField = require(‘web.AbstractField‘);
　　var fieldRegistry = require(‘web.field_registry‘);
......

var colorField = AbstractField.extend({
......

var colorField = AbstractField.extend({
    className: ‘o_int_colorpicker‘,
    tagName: ‘span‘,
    supportedFieldTypes: [‘integer‘],
......

var colorField = AbstractField.extend({
    className: ‘o_int_colorpicker‘,
    tagName: ‘span‘,
    supportedFieldTypes: [‘integer‘],
    events: {
        ‘click .o_color_pill‘: ‘clickPill‘,
    },
......

var colorField = AbstractField.extend({
    className: ‘o_int_colorpicker‘,
    tagName: ‘span‘,
    supportedFieldTypes: [‘integer‘],
    events: {
        ‘click .o_color_pill‘: ‘clickPill‘,
    },
    init: function () {
        this.totalColors = 10;
        this._super.apply(this, arguments);
    },

var colorField = AbstractField.extend({
    className: ‘o_int_colorpicker‘,
    tagName: ‘span‘,
    supportedFieldTypes: [‘integer‘],
    events: {
        ‘click .o_color_pill‘: ‘clickPill‘,
    },
    init: function () {
        this.totalColors = 10;
        this._super.apply(this, arguments);
    },
    _renderEdit: function () {
        this.$el.empty();
        for (var i = 0; i ‘, {
                ‘class‘: className,
                ‘data-val‘: i,
            }));
        }
    },
    _renderReadonly: function () {
        var className = "o_color_pill active readonly o_color_" + this.value;
        this.$el.append($(‘‘, {
            ‘class‘: className,
        }));
    },

var colorField = AbstractField.extend({
    className: ‘o_int_colorpicker‘,
    tagName: ‘span‘,
    supportedFieldTypes: [‘integer‘],
    events: {
        ‘click .o_color_pill‘: ‘clickPill‘,
    },
    init: function () {
        this.totalColors = 10;
        this._super.apply(this, arguments);
    },
    _renderEdit: function () {
        this.$el.empty();
        for (var i = 0; i this.totalColors; i++ ) {
            var className = "o_color_pill o_color_" + i;
            if (this.value === i ) {
                className += ‘ active‘;
            }
            this.$el.append($(‘‘, {
                ‘class‘: className,
                ‘data-val‘: i,
            }));
        }
    },
    _renderReadonly: function () {
        var className = "o_color_pill active readonly o_color_" + this.value;
        this.$el.append($(‘‘, {
            ‘class‘: className,
        }));
    },
    clickPill: function (ev) {
        var $target = $(ev.currentTarget);
        var data = $target.data();
        this._setValue(data.val.toString());
    }

});

fieldRegistry.add(‘int_color‘, colorField);

　　return {
    　　colorField: colorField,
　　};

});// closing ‘my_field_widget‘ namespace

.o_int_colorpicker {
    .o_color_pill {
        display: inline-block;
        height: 25px;
        width: 25px;
        margin: 4px;
        border-radius: 25px;
        position: relative;
        @for $size from 1 through length($o-colors) {
            &.o_color_#{$size - 1} {
                background-color: nth($o-colors, $size);
                &:not(.readonly):hover {
                    transform: scale(1.2);
                    transition: 0.3s;
                    cursor: pointer;
                }
                &.active:after{
                    content: "\f00c";
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;
                    color: #fff;
                    position: absolute;
                    padding: 4px;
                    font-size: 16px;
                }
            }
        }
    }
}

xml version="1.0" encoding="UTF-8"?>
odoo>

    template id="assets_end" inherit_id="web.assets_backend">
        xpath expr="." position="inside">
            script src="/my_library/static/src/js/field_widget.js" type="text/javascript" />
            link href="/my_library/static/src/scss/field_widget.scss" rel="stylesheet" type="text/scss" />
        /xpath>
    /template>

/odoo>

color = fields.Integer()

...
group>
　　field name="date_release"/>
　　field name="color" widget="int_color"/>
group>
...

odoo.define(‘my_field_widget‘, function (require) {
"use strict";
var AbstractField = require(‘web.AbstractField‘);
var fieldRegistry = require(‘web.field_registry‘);
var core = require(‘web.core‘);
var qweb = core.qweb;
...

_renderEdit: function () {
　　this.$el.empty();
　　var pills = qweb.render(‘FieldColorPills‘, {widget:this});
　　this.$el.append(pills);
},

xml version="1.0" encoding="UTF-8"?>
templates>
　　t t-name="FieldColorPills">
　　　　t t-foreach="widget.totalColors" t-as=‘pill_no‘>
　　　　　　span t-attf-class="o_color_pill o_color_#{pill_no} #{widget.value === pill_no and ‘active‘ or ‘‘}" 
                t-att-data-val="pill_no"/>
　　　　t>
　　t>
templates>

    ‘qweb‘: [
        ‘static/src/xml/qweb_template.xml‘
    ]

t t-extend="FieldColorPills">
　　t t-jquery="span" t-operation="prepend">
　　　　i class="fa fa-user" />
　　t>
t>

 willStart: function () {
        var self = this;
        this.colorGroupData = {};
        var colorDataDef = this._rpc({
            model: this.model,
            method: ‘read_group‘,
            domain: [],
            fields: [‘color‘],
            groupBy: [‘color‘],
        }).then(function (result) {
            _.each(result, function (r) {
                self.colorGroupData[r.color] = r.color_count;
            });
        });
        return $.when(this._super.apply(this, arguments), colorDataDef);
    },

 _renderEdit: function () {
        this.$el.empty();
        var pills = qweb.render(‘FieldColorPills‘, {widget: this});
        this.$el.append(pills);
        this.$el.find(‘[data-toggle="tooltip"]‘).tooltip();
    },

xml version="1.0" encoding="UTF-8"?>
templates>
    t t-name="FieldColorPills">
        t t-foreach="widget.tot