Odoo14 自定义widget小部件

不多说先上源码。

 1 odoo.define('my_company_users_widget', function (require) {
 2     "use strict";
 3
 4     var AbstractField = require('web.AbstractField');
 5     var fieldRegistry = require('web.field_registry');
 6
 7     var core = require('web.core');
 8     var qweb = core.qweb;
 9
10     var FieldCompanyUser = AbstractField.extend({
11         className: 'o_kanban_view',//当前控件使用的是哪个scss类。这个类里边包含了你所有使用到的样式。这样的好处是，你编写的小部件可移植变强
12         tagName: 'div',//设置你的根元素
13         supportedFieldTypes: ['many2many'],//设置你的小部件可以用在什么字段上。
14         events: {//这是事件。当点击了这个class元素的时候触发clickCard
15             'click .oe_kanban_global_click': 'clickCard',
16         },
17         init: function () {//初始化
18             this._super.apply(this, arguments);
19         },
20         _getImageURL: function (model, field, id, placeholder) {//这个方法是用生成访问图片的url
21             id = (_.isArray(id) ? id[0] : id) || null;
22             var isCurrentRecord = this.modelName === model && this.recordData.id === id;
23             var url;
24             if (isCurrentRecord && this.record[field] && this.record[field].raw_value && !utils.is_bin_size(this.record[field].raw_value)) {
25                 // Use magic-word technique for detecting image type
26                 url = 'data:image/' + this.file_type_magic_word[this.record[field].raw_value[0]] + ';base64,' + this.record[field].raw_value;
27             } else if (placeholder && (!model || !field || !id || (isCurrentRecord && this.record[field] && !this.record[field].raw_value))) {
28                 url = placeholder;
29             } else {
30                 var session = this.getSession();
31                 var params = {
32                     model: model,
33                     field: field,
34                     id: id
35                 };
36                 if (isCurrentRecord) {
37                     params.unique = this.record.__last_update && this.record.__last_update.value.replace(/[^0-9]/g, '');
38                 }
39                 url = session.url('/web/image', params);
40             }
41             return url;
42         },
43         willStart: function () {//这里准备好你的数据
44             var self = this;
45             this.data_users = [];
46
47             var DataPromise = this._rpc({//调用model方法
48                 model: 'res.groups',
49                 method: 'get_company_users',
50                 args: [[self.record.res_id],self.record.res_id]
51             }).then(function (result){
52                 var i = 0;
53                 for (i=0;i<result.length;i++){
54                     result[i].image_url = self._getImageURL('res.users', 'image_128', result[i].id, '');
55                     console.log(result[i].image_url);
56                 };
57                 self.data_users = result
58                 console.log('result');
59                 console.log(result);
60             });
61
62             return Promise.all([this._super.apply(this, arguments), DataPromise]);
63         },
64
65         _renderEdit: function () {
66             this.$el.empty();//这是编辑的时候显示内容。这里我将它置空了。所以在编辑的时候该控件直接不见了
67         },
68
69         _renderReadonly: function () {
70             this.$el.empty();//先置空控件内容。
71             var CompanyUsers = qweb.render('OWLFieldCompanyUsers', {widget: this});
72             this.$el.append(CompanyUsers);//重新添加控件内容
73
74         },
75         clickCard: function (ev) {//事件
76             var $target = $(ev.currentTarget);
77             var data = $target.data();
78             self = this;
79             this._rpc({
80                 model: 'res.users',
81                 method: 'get_userform_action',
82                 args: [[data.val]]
83             }).then(function (result){
84                 self.do_action(result);
85             });
86         }
87
88     });
89
90     fieldRegistry.add('company_users', FieldCompanyUser);//别忘记了注册你的widget
91
92     return {//最后公开你的小部件让其他视图可以使用
93         FieldCompanyUser: FieldCompanyUser,
94     };
95 });

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <templates>
 3     <t t-name="OWLFieldCompanyUsers" >
 4
 5         <div class="o_kanban_view o_kanban_mobile o_kanban_ungrouped">
 6             <t t-foreach="widget.data_users" t-as="record">
 7                 <div t-attf-class="oe_kanban_global_click o_kanban_record" t-att-data-val="record.id">
 8                     <div class="o_kanban_image">
 9                         <img alt="Avatar" t-att-src="record.image_url"/>
10                     </div>
11                     <div class="oe_kanban_details">
12                         <ul>
13                             <li class="text-success float-right mb4" t-if="record.active"><i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"/></li>
14                             <li class="text-danger float-right mb4" t-if="!record.active"><i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"/></li>
15                             <li class="mb4">
16                                 <strong><t t-esc="record.name"/></strong>
17                             </li>
18                             <li class="badge badge-pill float-right mb4" t-if="record.lang"><t t-esc="record.lang"/></li>
19                             <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>
20                         </ul>
21                     </div>
22                 </div>
23             </t>
24         </div>
25     </t>
26
27 </templates>

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

o_kanban_view样式类在kanban_view.xml文件中