温馨提示:疫情期间,我司正常运营中,敬请所有客户放心!    400-900-4680  sales@oscg.cn 
Language/语言  简体中文       English       日本語    
如何在 Odoo 15 中有效地创建字段小组件

小组件代表 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.在视图中添加小组件

<field name="field_name" widget="custom-field-widget"/>

让我们以创建一个小组件 new_progress_bar'的示例,它与“进度条”小组件具有相同的功能。该小组件用于浮点型字段,让我们将现有的进度条更改为新样式。

现有进度条(widget=”progressbar”):-

如何在 odoo-15 中有效地创建字段小部件

新进度条(widget=”progress_bar_widget”):-

如何在 odoo-15 中有效地创建字段小部件

要创建一个新的字段小组件,首先,我们需要创建一个名为 progress_bar_widget 的模块。然后为其添加 JS、CSS 和 XML 文件。

您可以将文件添加到模块中,如下所示:

如何在 odoo-15 中有效地创建字段小部件

让我们在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:-

<templates id="template" xml:space="preserve">    <t t-name="ProgressBarWidget">        <div>            <div class="progress_bar">                <div class="pro-bar">                    <small class="progress_bar_title">                        <span class="progress_number"/>                    </small>                    <span class="progress-bar-inner"/>                </div>            </div>        </div>    </t></templates>

现在我们需要为这个组件添加 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''在字符字段中使用创建的小组件

例如:

<field name="progress_value" widget="progress_bar_widget"/>

要显示小组件,请创建一个模块并添加这些文件,并创建一些字段以获取值。 

 如何在 odoo-15 中有效地创建字段小部件


为什么将实施Odoo作为MES战略的基础?