在Odoo 18中創建進度條指南
一、創建進度條模板
首先在名為 progress_bar_widget.xml 的文件中定義一個名為 ProgressBarWidget 的新模板。該模板使用兩個CSS類：progress-bar-inner 用于樣式化進度條，progress_number 用于顯示進度百分比。您可以根據需要自定義外觀和樣式。
<?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-inner類控制進度條的寬度和背景顏色.progress_number定位百分比文本
.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;
}
三、更新進度條的JavaScript邏輯
使用JavaScript創建進度條的邏輯。組件將通過 setup 方法初始化，并通過 onUpdateProgressBar 函數更新進度條。該函數根據提供的值（浮點數或整數）計算進度條的寬度。
/** @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.record.data[this.props.name] <= 100) {this.widthComplete = parseInt(this.props.record.data[this.props.name] / 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,
});
通過將組件添加到 “fields” 類別中，將其注冊到Odoo注冊表。該部件支持浮點數（float）和整數字段（integer）類型。
四、在表單視圖中使用部件
進度條組件創建完成后，通過在XML表單視圖中指定字段的 widget 屬性來應用該組件。
<field name="progress" widget="progress_bar_widget"/>
以項目模型的 milestone_progress 字段為例，繼承表單視圖并替換原有字段：
<odoo><record id="view_project_form_inherit" model="ir.ui.view"><field name="name">project.project.form.inherit</field><field name="model">project.project</field><field name="inherit_id" ref="project.view_project" /><field name="arch" type="xml"><xpath expr="//field[@name='milestone_progress']" position="replace"><field name="milestone_progress" widget="progress_bar_widget"/></xpath></field></record>
</odoo>
最終將顯示動態進度條，直觀展示項目里程碑的完成情況。
注意：項目的 “Milestones Reached” 字段的顯示需要先打開項目配置中的里程碑功能。
結語
通過Odoo 18的進度條組件，您可以在多個模塊中以可視化方式展示任務完成度。該方案提供了一種直觀的圖形化方式，用戶可通過工時記錄或其他相關指標自動跟蹤任務進度。這不僅提升了用戶體驗，還使項目績效監控變得簡單且直觀。
