如何在 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"/>

输出如下所示。

How to Create a Progress Bar in Odoo 17-cybrosys

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/478274.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三分钟教会你水果音乐编曲软件 FL Studio v21.2.3 中文免费版安装方法

随着数字音乐制作的发展&#xff0c;音乐编曲软件已经成为音乐制作人和爱好者不可或缺的工具。FL Studio v21.2.3是一款功能强大的水果音乐编曲软件&#xff0c;它具有直观的界面&#xff0c;易于学习和使用。本文将介绍FL Studio v21.2.3的特点和优势&#xff0c;以及它在音乐…

cloudflare 应用例子几则

Cloudflare&#xff08;以下简称 CF&#xff09; 堪称互联网活菩萨&#xff0c;造就一大批高质量的互联网基础技术服务&#xff0c;更难得的是&#xff0c;几乎所有的服务都有对应的免费的套餐&#xff0c;而且出手大方&#xff0c;基本上有足够的容量或请求次数。 CDN CF 最…

Amazon Aurora Limitless Database :数据库管理的全新境界

在当今数亿用户、PB 级数据和数百万交易的业务环境中&#xff0c;数据库管理面临着巨大的挑战。传统数据库扩展的繁琐性和耗时性使得许多组织需要花费数月甚至数年的时间来构建自定义软件以满足其极端的工在当今数亿用户、PB 级数据和数百万交易的业务环境中&#xff0c;数据库…

美易官方:美股维持涨势,三大股指再创新高

在今日的早盘交易中&#xff0c;美股市场继续维持其涨势&#xff0c;三大股指再次刷新历史纪录。市场信心受到一系列积极经济数据的支撑&#xff0c;投资者对未来的经济增长和企业盈利保持乐观态度。 首先&#xff0c;让我们来看一下道琼斯工业平均指数的表现。该指数在早盘交易…

思科无线控制器配置学习

文章目录 简单拓扑WLC配置 简单拓扑 WLC配置 WLC#show running-config Building configuration...Current configuration : 11943 bytes ! ! Last configuration change at 16:22:44 UTC Thu Mar 14 2024 by admin ! version 17.9 service timestamps debug datetime msec se…

微信小程序开发之创建一个自己的项目和项目目录下各个文件的了解

1、小程序开发工具基础 &#xff08;1&#xff09;菜单栏&#xff1a;可以对开发工具进行一些简单的设置&#xff0c;还可以在帮助一行获取学习相关api文档 &#xff08;2&#xff09;模拟器显示栏&#xff1a;每当我们在进行便写好代码之后&#xff0c;通过编译可以在模拟显示…

运维-[frp配置内网服务器访问外网]

背景 同一局域网里面&#xff0c;两台服务器A服务器可以访问外网&#xff0c;代理端口为10809&#xff0c;B服务器不可访问外网 实现工具 通过frp进行内网穿透配置代理服务 配置 A服务器配置 A服务器配置frp客户端 配置文件-frpc.ini server_addr:B服务器IP server_port:B服务…

ATG-3080功率信号源的应用领域有哪些

功率信号源是一种用于提供稳定功率输出的电子设备&#xff0c;它在许多应用领域中发挥着重要作用。下面西安安泰将详细介绍功率信号源的几个常见应用领域。 电子测试和测量&#xff1a;功率信号源广泛应用于各种电子测试和测量场景。它可以提供稳定的功率输出&#xff0c;用于测…

六面体单元热应力问题有限元求解 | Matlab源码 | 理论文本 | 温度应力 | 热应变 |温度应变 |热力耦合

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

非标图纸管理系统,非标图纸管理系统哪家好

非标图纸管理系统 是指专门用于管理非标准化设计图纸的系统。非标设计图纸是指不符合标准规范的设计图纸&#xff0c;可能是由于特殊需求、个性化定制或者其他原因引起的。这些非标设计图纸可能包括产品设计图、建筑设计图、工艺设计图等。非标图纸管理系统哪家好择彩虹图纸管理…

Juniper SRX 防火墙基础上网配置

简介 基于PNET-LAB模拟器&#xff0c;使用 vSRX-NG 23.4R1.9 镜像进行实验。 博客&#xff1a;https://songxwn.com/Juniper-SRX-snat/ 实验需求 配置WAN口 LAN口&#xff0c;实现基础的上网功能。配置NAT、DHCP。 ISP 路由器使用Cisco IOS模拟&#xff0c;与SRX对接口配置…

洛谷入门——P1765 手机

手机 题目描述 一般的手机的键盘是这样的&#xff1a; 要按出英文字母就必须要按数字键多下。例如要按出 x \tt x x 就得按 9 9 9 两下&#xff0c;第一下会出 w \tt w w&#xff0c;而第二下会把 w \tt w w 变成 x \tt x x。 0 0 0 键按一下会出一个空格。 你的任务是…

CasaOS玩客云使用Docker部署21.6K星星memos开源云笔记服务

文章目录 前言1. 使用Docker部署memos2. 注册账号与简单操作演示3. 安装cpolar内网穿透4. 创建公网地址5. 创建固定公网地址 前言 本文主要介绍如何在CasaOS玩客云&#xff0c;使用Docker本地部署21.6K stars的热门开源云笔记服务memos&#xff0c;并结合cpolar内网穿透工具打…

四十八岁男子心慌心悸,失眠,喉咙有异物,刘家峰告诉你怎么办!

植物神经功能紊乱&#xff0c;通常简称为植物神经紊乱&#xff0c;是一种涉及自主神经系统的失调疾病。自主神经系统负责控制人体内许多自动功能&#xff0c;如心率、血压、消化和体温调节。植物神经功能紊乱是指由于自主神经系统失衡导致的一系列症状和体征的综合症。 植物神经…

嵌入式和 Java选哪个?

今日话题&#xff0c;嵌入式和 Java 走哪个?对于嵌入式领域有浓厚兴趣的人&#xff0c;并不会比Java行业薪资低&#xff0c;处于上中游水平。特别是从2020年开始&#xff0c;嵌入式领域受益于芯片产业的兴起&#xff0c;表现出了强劲的增长势头。薪资水平受多方面因素影响。嵌…

鸿蒙:@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

在实际应用开发中&#xff0c;应用会根据开发需要&#xff0c;封装自己的数据模型。对于多层嵌套的情况&#xff0c;比如二维数组&#xff0c;或者数组项class&#xff0c;或者class的属性是class&#xff0c;他们的第二层的属性变化是无法观察到的。这就引出了Observed/Object…

34-Java传输对象模式 ( Transfer Object Pattern )

Java传输对象模式 实现范例 传输对象模式&#xff08;Transfer Object Pattern&#xff09;用于从客户端向服务器一次性传递带有多个属性的数据传输对象也被称为数值对象&#xff0c;没有任何行为传输对象是一个具有 getter/setter 方法的简单的 POJO 类&#xff0c;它是可序列…

JAVA八股--集合面试题

AVA八股--集合面试题--上 java只有值传递&#xff0c;没有引用传递代理模式Java之HashMap和Hashtable选用 ArrayDeque 来实现队列要比 LinkedList 更好为什么HashMap的长度一定是2的次幂&#xff1f;HashMap常见遍历方式 java只有值传递&#xff0c;没有引用传递 文章讲解 文…

一次线上慢SQL调优分享

一个sql查询设置了联合索引&#xff0c;但是在查询的时候没有走联合索引&#xff0c;所以导致查询速度非常慢。因为MySQL查询优化器会自己判断这个查询所需要的代价&#xff0c;如果代价太大则不走联合索引&#xff0c;导致联合索引失效 用户的所有提交&#xff0c;都写入一张提…

面试题小结

一、什么是虚拟dom 描述真实dom的js对象。 二、DOM操作——怎样添加、移除、移动、复制、创建和查找节点 &#xff08;1&#xff09;创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节…