odoo.define('auto_widget',function(require){
    "use strict"

//通过扩展AbstractField来扩展 field
var AbstractField = require('web.AbstractField');
var fieldRegistry = require('web.field_registry');
var core = require('web.core');
var qweb =core.qweb;

var colorField=AbstractField.extend({

    //为widget 设置css样式
    className:'o_int_colorpicker',
    tagName:'span',
    supportedFieldTypes: ['integer'],
    //获取一些javascript 事件
    events:{
        'click .o_color_pill':'clickPill',
    },

    //继承init  以及进行一些初始化
    init:function(){
        this.totalColors=10;
        this._super.apply(this,arguments);

    },
    //执行以下步骤对服务器进行Rpc调用，并在工具中提示中显示结果
    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   \_renderReadonly来设置DOM
    _renderEdit:function () {
        this.$el.empty();
        var pills=qweb.render('FieldColorPills',{widget:this});
        this.$el.append(pills);
        //在圆球上设置bootscript 工具提示
        this.$el.find('[data-toggle="tooltip"]').tooltip();
        // 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($('<span>',{
            //     'class':className,
            //     'data-val':i,
            // }));
        // }

    },

    _renderReadonly:function(){
        var className="o_color_pill active readonly o_color_"+this.value;
        this.$el.append($('<sapn>',{
            'class':className,
        }));
    },

    //定义之前说的处理程序
    clickPill:function(ev){
        var $target = $(ev.currentTarget);
        var data = $target.data();
        this._setValue(data.val.toString());

    }
});

//最后注册widget
fieldRegistry.add('int_color',colorField);

//closing 'auto_widget' namespace 关闭 'auto_widget' 命名空间
return {
    colorField:colorField,
};

});

.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="/auto_widget/static/src/js/auto_widget.js" type="text/javascript"/>

           <link href="/auto_widget/static/src/scss/field_widget.scss" rel="stylesheet" type="text/scss" />

       </xpath>

   </template>

</odoo>

<?xml version="1.0" encoding="utf-8" ?>

<templates >

    <t t-name="FieldColorPills">

        <t t-foreach="widget.totalColors" t-as="pill_no">

            <span t-attr-class="o_color_pill o_color_#{pill_no} #{widget.value===pill_no and 'active' or ''}"

                  t-att-data-val="pill_no"

                  data-toggle="tooltip"

                  data-placement="top"

                  t-attf-title="This color is used in #{widget.colorGroupData[pill_no] or 0} books."

            />

        </t>

    </t>

</templates>

    color=fields.Integer(u'color')

    <field name="color" widget="int_color"/>