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文件中
Odoo14 自定义widget小部件的更多相关文章
- Android简易实战教程--第十四话《模仿金山助手创建桌面Widget小部件》
打开谷歌api,对widget小部件做如下说明: App Widgets are miniature application views that can be embedded in otherap ...
- 从Hello World说起(Dart)到“几乎所有东西都是Widget”小部件。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...
- Android Widget 小部件(一) 简单实现
在屏幕上加入Widget:或长按屏幕空白处,或找到WidgetPreview App选择. 原生系统4.0下面使用长按方式,4.0及以上 打开WIDGETS 创建Widget的一般步骤: 在menif ...
- Android Widget 小部件(四---完结) 使用ListView、GridView、StackView、ViewFlipper展示Widget
官方有话这样说: A RemoteViews object (and, consequently, an App Widget) can support the following layout cl ...
- django中widget小部件
1. 处理 input 的部件 TextInput NumberInput EmailInput URLInput PasswordInput HiddenInput DateInput Dat ...
- iOS - Widget 小部件
1.Widget iOS extension 的出现,方便了用户查看应用的服务,比如用户可以在 Today 的 widgets 中查看应用的简略信息,然后点击进入相关的应用界面. 2.添加 Widge ...
- Android Widget 小部件(三) 在Activity中加入Widget
package com.stone.ui; import static android.util.Log.d; import android.app.Activity; import android. ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
随机推荐
- Net6 Xunit 集成测试
对于单元测试.集成测试大部分开发的朋友都懒得去写,因为这要耗费精力去设计去开发,做完项目模块直接postman 调用测试(当然这是一个选择,开发也中经常用到),但是如果测试需要多样化数据,各种场景模拟 ...
- 选择器补充与CSS属性
目录 伪元素选择器 选择器优先级 CSS属性 宽和高 字体样式 文字属性 背景属性 边框属性 display属性 盒子模型 浮动(float) 清除浮动 伪元素选择器 伪元素选择器可以通过CSS操作文 ...
- 手把手教你使用 Spring Boot 3 开发上线一个前后端分离的生产级系统(一) - 介绍
项目简介 novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离的学习型小说项目,配备详细的项目教程手把手教你从零开始开发上线一个生产级别的 J ...
- SpringCloud Alibaba Sentinel 限流详解
点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你,很高兴能够成为你的朋友. 项目源码地址:公众号回复 sentinel,即可免费获取源码 熔断规则 在上一篇文章中我们讲解了 ...
- 关于『进击的Markdown』:第四弹
关于『进击的Markdown』:第四弹 建议缩放90%食用 美人鱼(Mermaid)悄悄的来,又悄悄的走,挥一挥匕首,不留一个活口 又是漫漫画图路... 女士们先生们,大家好! 我们要接受Markd ...
- JAVA - 线程从创建到死亡的几种状态都有哪些?
JAVA - 线程从创建到死亡的几种状态都有哪些? 新建( new ):新创建了一个线程对象. 可运行( runnable ):线程对象创建后,其他线程(比如 main 线程)调用了该对象 的 sta ...
- 前端5jQuery
内容概要 jQuery简介 查找标签 jQuery操作标签 jQuery事件操作 jQuery动画效果(了解) 前端第三方框架(基础) 内容详情 jQuery简介
- 测试软件稳定性、健壮性之Monkey工具--简洁与深入
搭建环境这章节没做详细说明,因为我是前期做APP自动化是已经将 SDK 以及JDK给安装配置好了,这次是直接上来演示monkey的功能点以及运用 一.什么是稳定性测试? 通过随机点击屏幕一段时间,看看 ...
- c++ 辗转相除(动图)
#include<iostream> #include<cstdio> #include<iomanip> #include<cstring> usin ...
- ForEach遍历集合、 集合容器
ForEach遍历集合 foreach循环是一种更加简洁的for循环,也称增强for循环,能用于遍历数组或集合中的元素. 格式: for(容器元素类型 临时变量:容器变量){ 执行语句} 从上面格式可 ...