不多说先上源码。
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文件中
