如何在 Odoo 17 中创建进度条

Odoo 提供各种字段小部件，例如单选按钮、浮点数、百分比、颜色选择器、复选框、状态栏和 URL。通过使用不同的渲染模板，我们可以使用小部件修改视图。它还帮助我们根据自己的需求进行设计，从而简化、加速、扩展和提高开发效率。在本博客中，我们将讨论如何在 Odoo 17 中创建进度条。

我们将创建一个名为“progress_bar_widget.xml”的 XML 文件，其中定义了一个名为“ProgressBarWidget”的新模板。进度数字和进度条内部是两个类。类 'progress-bar-inner' 定义进度条的样式，而类 'progress_number' 显示进度百分比。我设置了进度条的背景色和高度。此外，所有控制这些样式参数的权限都归您所有。

XML

<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
  <t t-name="ProgressBarWidget" owl="1">
    <div t-ref="ProgressBarWidget-root">
      <div class="progress_bar">
        <div class="pro-bar">
          <span class="progress-bar-inner"/>
          <span class="progress_number"/>
        </div>
      </div>
    </div>
  </t>
</templates>

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_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;
}

js文件 

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Component, useRef, onMounted , onPatched} from "@odoo/owl";
export class ProgressBarWidget extends Component {
    setup(){
       this.root = useRef('ProgressBarWidget-root')
       onMounted(this.onUpdateProgressBar)
       onPatched(this.onUpdateProgressBar)
    }
    onUpdateProgressBar(){
       if (this.props.value <= 100){
           this.widthComplete = parseInt(this.props.value/100 * 100);
       }else{
           this.widthComplete = 100;
       }
       this.root.el.querySelector('.progress-bar-inner').style.width = this.widthComplete+'%'
       this.root.el.querySelector('.progress_number').textContent = this.widthComplete+'%'
    }
}
ProgressBarWidget.template = 'ProgressBarWidget';
ProgressBarWidget.props = standardFieldProps;
ProgressBarWidget.supportedTypes = ["float", "integer"];
registry.category("fields").add("progress_bar_widget", {
   component: ProgressBarWidget,
});

Odoo 组件中的一个生命周期方法是 setup 方法。它使用 useRef 来建立对根元素的引用，并通过使用“onMounted”和“onPatched”附加事件处理程序来初始化组件。

“onUpdateProgressBar” 方法使用 props 中提供的值更新进度条。它更新 DOM 中的相应元素并确定进度条的宽度。最后，将支持的类型、模板和属性添加到进度条。ProgressBarWidget 支持以下字段类型：“float”和“integer”。在 Odoo 注册表的“fields”类别中输入“progress_bar_widget”以注册 ProgressBarWidget。分配在清单文件中。

在字段中应用我们的“progress_bar_widget”小部件。

XML

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

输出如下所示。

Odoo 的自动进度条更新使任务完成的平滑图形描述成为可能，这依赖于工时表条目。通过将估计工时和完成工时都纳入项目任务模型，用户可以轻松跟踪进度，而无需手动帮助。