Odoo 16中自定义进度条组件无法加载的问题（用于动态修改瞬态模型One2many行内进度条颜色）

首先，咱们先解决你遇到的widget加载失败的问题，这个报错「Missing widget: CustomProgressBar」其实是个常见的小坑：

你在JS代码里注册的widget名称是custom_progressbar（小写加下划线），但如果在视图里写的是widget="CustomProgressBar"（大写驼峰），Odoo的字段注册表是区分大小写的，自然找不到对应的组件。所以第一步要把视图里的widget名称改成和注册名完全一致：

<!-- 在One2many的tree视图中 -->
<field name="你的进度数字字段" widget="custom_progressbar"/>

接下来再检查一下manifest.py里的资源配置，确保你的JS文件已经正确加入到后端资产中，路径别写错了：

# manifest.py
'assets': {
    'web.assets_backend': [
        'your_module_name/static/src/js/custom_progressbar.js',
    ],
},

搞定加载问题后，咱们再来实现动态修改颜色的功能。你提到有个计算出来的隐藏字段存颜色值，那咱们可以重写自定义进度条的_render方法，在渲染时获取颜色值并修改样式：

更新你的JS代码：

odoo.define('your_module_name.custom_progressbar', function (require) {
"use strict";

var field_registry = require('web.field_registry');
var FieldProgressBar = require('web.basic_fields').FieldProgressBar;

var CustomProgressBar = FieldProgressBar.extend({
    template: FieldProgressBar.prototype.template,

    _render: function () {
        // 先调用父类的渲染方法，生成基础进度条
        this._super.apply(this, arguments);
        // 获取当前行记录的颜色字段值，这里假设你的颜色字段叫progress_color
        const colorValue = this.record.data.progress_color;
        if (colorValue) {
            // 找到进度条的填充元素，修改背景色
            const $progressFill = this.$('.o_progressbar_progress');
            $progressFill.css('background-color', colorValue);
            // 如果需要修改进度条的边框或其他样式，也可以在这里加
            // this.$('.o_progressbar').css('border-color', colorValue);
        }
    }
});

field_registry.add('custom_progressbar', CustomProgressBar);
return CustomProgressBar;
});

最后别忘了在One2many的视图里，把那个隐藏的颜色字段加进去（即使invisible也要包含，否则前端拿不到数据）：

<tree>
    <field name="进度数字字段" widget="custom_progressbar"/>
    <field name="progress_color" invisible="1"/>
</tree>

这样一来，进度条不仅能正常加载，还会根据你计算字段里的颜色值动态改变样式啦。

备注：内容来源于stack exchange，提问作者chrineuh