本文节选自Odoo亚太金牌服务机构【开源智造】所编写的《ERP真的免费不花钱——Odoo应用指南》如需获取完整的知识内容，请至开源智造官网免费获取。感谢网友一键三连：点赞、转发、收藏，您的支持是我们最大的前进动力！
小组件代表 Odoo 中的显示屏幕、字段和属性。它允许我们使用不同的渲染模板自定义视图，它还允许我们根据自己的需求进行设计，这将有助于我们使开发更快、更简单、可扩展和更高效。
在 Odoo 中，我们有各种字段小组件，例如状态栏、复选框、单选按钮、浮点数、百分比、颜色选择器、URL 等等。
字段小组件允许我们根据其类型定义特定的字段规范。简而言之，字段组件帮助我们在我们的领域执行某些任务，这使得在 Odoo 中工作更便捷。
就“进度条”小组件来说，它以浮动字段的百分比显示值表示。“进度条”小组件的功能也是如此。因此，我们可以使用小组件添加自定义字段函数。
在这篇博客中，让我们看看如何在Odoo中创建一个字段小组件。
创建字段小组件的基本步骤
1. 创建一个小组件
import { FieldChar } from 'web.basic_fields';
var CustomFieldChar = FieldChar.extend({
_renderReadonly: function () {
// implement some custom logic here
},
2. 在字段注册表中注册小组件
import fieldRegistry from 'web.field_registry';
fieldRegistry.add('custom-field-widget', CustomFieldWidget);
3.在视图中添加小组件
让我们以创建一个小组件 new_progress_bar'的示例，它与“进度条”小组件具有相同的功能。该小组件用于浮点型字段，让我们将现有的进度条更改为新样式。
现有进度条（widget=”progressbar”）:-
新进度条（widget=”progress_bar_widget”）:-
要创建一个新的字段小组件，首先，我们需要创建一个名为 progress_bar_widget 的模块。然后为其添加 JS、CSS 和 XML 文件。
您可以将文件添加到模块中，如下所示：
让我们在js文件中添加以下代码：
Progress_bar_widget.js:-
/** @odoo-module **/
import AbstractField from 'web.AbstractField';
import fieldRegistry from 'web.field_registry';
var ProgressBarWidget = AbstractField.extend({
template: "ProgressBarWidget",
start: function(){
this._super.apply(this, arguments);
if (this.recordData[this.nodeOptions.currentValue]){
this.value = this.recordData[this.nodeOptions.currentValue]
},
_render: function() {
var self = this;
var value = this.value;
var max_value = 100;
value = value || 0;
var widthComplete;
if (value <= max_value){
widthComplete = parseInt(value/max_value * 100);
else{
widthComplete = 100;
this.$('.progress_number').text(widthComplete.toString() + '%');
this.$('.progress-bar-inner').css('width', widthComplete + '%');
},
fieldRegistry.add('progress_bar_widget', ProgressBarWidget);
Abstract字段是用于一目了然地呈现字段的基本字段组件。创建的组件将注册到field_registry。
与我们使用的Odoo 14 js相比：
import WidgetName from 'module_name.WidgetName'; instead of web.require('module_name.WidgetName'); and removed theodoo.define('module_name.WidgetName', function(require){
'use strict';
//code
在代码的开头添加 /** @odoo-module **/
现在您需要将以下 XML 代码添加到组件设置的模板中。模板根据标准的 Odoo 模块格式加载到static/src/xml文件夹中。
Progress_bar_widget.xml:-
现在我们需要为这个组件添加 CSS 来设计我们的进度条。
将以下代码添加到文件中：
Progress_bar_widget.css:-
.progress_bar .pro-bar {
background: hsl(0, 0%, 97%);
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
height: 4px;
width: 200px;
margin-bottom: 15px;
margin-top: 10px;
position: relative;
.progress_bar .progress_bar_title{
color: hsl(218, 4%, 50%);
font-size: 15px;
font-weight: 300;
position: relative;
top: -28px;
z-index: 1;
.progress_bar .progress_number {
float: right;
margin-top: -6px;
margin-right: -50px;
.progress_bar .progress-bar-inner {
background-color: green;
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: width 1s linear 0s;
.progress_bar .progress-bar-inner:before {
content: "";
background-color: hsl(0, 0%, 100%);
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
right: 1px;
top: 0;
z-index: 1;
.progress_bar .progress-bar-inner:after {
content: "";
width: 14px;
height: 14px;
background-color: inherit;
border-radius: 50%;
position: absolute;
right: -4px;
top: -5px;
然后将添加的文件加载到Assets和 Odoo 15 Assets文件中，我们可以将文件添加到清单中，如下所示：
'assets': {
'web.assets_backend': {
'/progress_bar_widget/static/src/css/progress_bar_widget.css',
'/progress_bar_widget/static/src/js/progress_bar_widget.js',
},
'web.assets_qweb': {
'/progress_bar_widget/static/src/xml/progress_bar_widget.xml',
},
},
这就是我们在 Odoo 15 中创建字段小组件的方式。
我们可以通过使用widget=''progress_bar_widget''在字符字段中使用创建的小组件。
例如：
要显示小组件，请创建一个模块并添加这些文件，并创建一些字段以获取值。
通过这种方式，您可以轻松地在Odoo中创建字段小组件，如您对此类问题还有任何疑问都可以私信联系我们OSCG开源智造，我们将为您提供专业的Odoo咨询服务及ERP解决方案。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
