Odoo14 自定義widget小部件

不多說先上源碼。

odoo.define('my_company_users_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;
    
    var FieldCompanyUser = AbstractField.extend({
        className: 'o_kanban_view',//當前控件使用的是哪個scss類。這個類里邊包含了你所有使用到的樣式。這樣的好處是，你編寫的小部件可移植變強
        tagName: 'div',//設置你的根元素
        supportedFieldTypes: ['many2many'],//設置你的小部件可以用在什么字段上。
        events: {//這是事件。當點擊了這個class元素的時候觸發clickCard
            'click .oe_kanban_global_click': 'clickCard',
        },
        init: function () {//初始化
            this._super.apply(this, arguments);
        },
        _getImageURL: function (model, field, id, placeholder) {//這個方法是用生成訪問圖片的url
            id = (_.isArray(id) ? id[0] : id) || null;
            var isCurrentRecord = this.modelName === model && this.recordData.id === id;
            var url;
            if (isCurrentRecord && this.record[field] && this.record[field].raw_value && !utils.is_bin_size(this.record[field].raw_value)) {
                // Use magic-word technique for detecting image type
                url = 'data:image/' + this.file_type_magic_word[this.record[field].raw_value[0]] + ';base64,' + this.record[field].raw_value;
            } else if (placeholder && (!model || !field || !id || (isCurrentRecord && this.record[field] && !this.record[field].raw_value))) {
                url = placeholder;
            } else {
                var session = this.getSession();
                var params = {
                    model: model,
                    field: field,
                    id: id
                };
                if (isCurrentRecord) {
                    params.unique = this.record.__last_update && this.record.__last_update.value.replace(/[^0-9]/g, '');
                }
                url = session.url('/web/image', params);
            }
            return url;
        },
        willStart: function () {//這里准備好你的數據
            var self = this;
            this.data_users = [];
            
            var DataPromise = this._rpc({//調用model方法
                model: 'res.groups', 
                method: 'get_company_users',
                args: [[self.record.res_id],self.record.res_id]
            }).then(function (result){
                var i = 0;
                for (i=0;i<result.length;i++){
                    result[i].image_url = self._getImageURL('res.users', 'image_128', result[i].id, '');
                    console.log(result[i].image_url);
                };
                self.data_users = result
                console.log('result');
                console.log(result);
            });

            return Promise.all([this._super.apply(this, arguments), DataPromise]);
        },
    
        _renderEdit: function () {
            this.$el.empty();//這是編輯的時候顯示內容。這里我將它置空了。所以在編輯的時候該控件直接不見了
        },
    
        _renderReadonly: function () {
            this.$el.empty();//先置空控件內容。
            var CompanyUsers = qweb.render('OWLFieldCompanyUsers', {widget: this});
            this.$el.append(CompanyUsers);//重新添加控件內容

        },
        clickCard: function (ev) {//事件
            var $target = $(ev.currentTarget);
            var data = $target.data();
            self = this;
            this._rpc({
                model: 'res.users', 
                method: 'get_userform_action',
                args: [[data.val]]
            }).then(function (result){
                self.do_action(result); 
            });
        }
    
    });
    
    fieldRegistry.add('company_users', FieldCompanyUser);//別忘記了注冊你的widget
    
    return {//最后公開你的小部件讓其他視圖可以使用
        FieldCompanyUser: FieldCompanyUser,
    };
});

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="OWLFieldCompanyUsers" >
        
        <div class="o_kanban_view o_kanban_mobile o_kanban_ungrouped">
            <t t-foreach="widget.data_users" t-as="record">
                <div t-attf-class="oe_kanban_global_click o_kanban_record" t-att-data-val="record.id">
                    <div class="o_kanban_image">
                        <img alt="Avatar" t-att-src="record.image_url"/>
                    </div>
                    <div class="oe_kanban_details">
                        <ul>
                            <li class="text-success float-right mb4" t-if="record.active"><i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"/></li>
                            <li class="text-danger float-right mb4" t-if="!record.active"><i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"/></li>
                            <li class="mb4">
                                <strong><t t-esc="record.name"/></strong>
                            </li>
                            <li class="badge badge-pill float-right mb4" t-if="record.lang"><t t-esc="record.lang"/></li>
                            <li class="mb4" t-if="record.login" title="Login"><i class="fa fa-envelope" role="img" aria-label="Login"/> <t t-esc="record.login"/></li>
                        </ul>
                    </div>
                </div>
            </t>
        </div>
    </t>

</templates>

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

o_kanban_view樣式類在kanban_view.xml文件中