Odoo 18進階開發：打造專業級list,kanban視圖Dashboard

🎯 項目概述

在現代企業級應用中，數據可視化已成為提升用戶體驗的關鍵要素。Odoo 18 作為領先的企業資源規劃系統，為開發者提供了強大的視圖定制能力。本教程將帶您深入了解如何在list（列表）視圖和Kanban（看板）視圖的頂部構建一個功能豐富、交互友好的Dashboard組件。

🎨 功能特性

📊 多維度數據統計 - 支持狀態分布、類型統計等多角度數據展示
🎛? 交互式過濾 - 點擊統計卡片即可觸發相應的數據篩選
📱 響應式設計 - 完美適配桌面和移動設備
🔄 實時數據更新 - 與Odoo后端數據保持同步
🎪 現代化UI - 采用Bootstrap 5設計語言，界面美觀大方

🖼? 效果預覽

Dashboard集成效果圖：展示了在Tree視圖上方的完整統計面板

🏗? 系統架構

本解決方案采用分層式模塊化架構，確保代碼的可維護性和擴展性：

核心組件說明

組件類型	組件名稱	主要職責	技術棧
🎨 展示組件	Dashboard組件	數據渲染、用戶交互	OWL Framework + QWeb
🔧 擴展組件	自定義渲染器	視圖集成、組件注入	JavaScript ES6+
💾 數據層	后端數據接口	數據統計、業務邏輯	Python + Odoo ORM
?? 配置層	視圖配置	資源管理、視圖綁定	XML + Manifest

🚀 完整實現指南

🏗? 第一步：構建Dashboard核心組件

💡 專業提示：Odoo 18 使用 OWL (Odoo Web Library) 框架構建組件，它基于現代JavaScript標準，提供了響應式數據綁定和生命周期管理。

首先在模塊根目錄下創建標準的靜態資源結構：

your_module/
├── static/
│   └── src/
│       └── views/
│           ├── requirements_pool_dashboard.js
│           ├── requirements_pool_dashboard.xml
│           ├── requirements_pool_kanbanview.js
│           ├── requirements_pool_kanbanview.xml
│           ├── requirements_pool_listview.js
│           └── requirements_pool_listview.xml

📄 1.1 JavaScript組件開發

文件路徑： static/src/views/requirements_pool_dashboard.js

🎯 設計理念：該組件采用"數據驅動視圖"的設計模式，通過ORM服務獲取后端數據，利用OWL的響應式特性自動更新界面。

/** @odoo-module */
import { useService } from "@web/core/utils/hooks";
import { Component, onWillStart } from "@odoo/owl";export class RequirementsPoolDashBoard extends Component {setup() {this.orm = useService("orm");this.action = useService("action");onWillStart(async () => {this.PoolData = await this.orm.call("project.requirements.line", "retrieve_dashboard");});}/*** This method clears the current search query and activates* the filters found in `filter_name` attibute from button pressed*/setSearchContext(ev) {const filter_name = ev.currentTarget.getAttribute("filter_name");const filters = filter_name.split(",");const searchItems = this.env.searchModel.getSearchItems((item) =>filters.includes(item.name));this.env.searchModel.query = [];for (const item of searchItems) {this.env.searchModel.toggleSearchItem(item.id);}}
}RequirementsPoolDashBoard.template = "mission_card.RequirementsPoolDashBoard";

🎨 1.2 QWeb模板設計

文件路徑： static/src/views/requirements_pool_dashboard.xml

🎨 設計原則：采用移動優先的響應式設計，使用語義化的HTML結構和現代CSS技術，確保在各種設備上都有出色的視覺體驗。

<?xml version="1.0" encoding="UTF-8"?>
<templates><t t-name="mission_card.RequirementsPoolDashBoard"><div class="o_requirements_pool_data_dashboard container-fluid py-4"><!-- 狀態統計 + 需求類型統計 合并為一行展示 --><div class="row mb-2"><div class="col-6"><h6 class="text-muted fw-bold mb-0">Status Statistics</h6></div><div class="col-6"><h6 class="text-muted fw-bold mb-0">Type Statistics</h6></div></div><div class="d-flex flex-wrap gap-2 mb-4"><!-- 狀態統計卡片 --><t t-foreach="PoolData['status_cards']" t-as="card" t-key="card.key"><div style="flex: 0 0 calc(12% - 4px);"><div class="card shadow-sm text-center border-0 cursor-pointer text-white"t-attf-class="bg-#{card.color}"><div class="card-body py-2"><div class="fs-5 fw-bold" t-out="card.count"/><div class="small text-uppercase" t-out="card.label" style="font-size: 0.7rem;"/></div></div></div></t><!-- 垂直分割線 --><div class="d-flex align-items-center justify-content-center" style="flex: 0 0 8px;"><div class="border-start border-2 border-secondary opacity-50" style="height: 50px;"></div></div><!-- 需求類型卡片：New --><div style="flex: 0 0 calc(12% - 4px);"><div class="card border-start border-1 border-primary shadow-sm rounded-4 bg-light text-center cursor-pointer"><div class="card-body py-2"><div class="fs-5 fw-bold text-primary" t-out="PoolData['new_total'] or 0"/><div class="small text-uppercase text-muted" style="font-size: 0.7rem;">New</div></div></div></div><!-- Improve --><div style="flex: 0 0 calc(12% - 4px);"><div class="card border-start border-1 border-warning shadow-sm rounded-4 bg-light text-center cursor-pointer"><div class="card-body py-2"><div class="fs-5 fw-bold text-warning" t-out="PoolData['improve_total'] or 0"/><div class="small text-uppercase text-muted" style="font-size: 0.7rem;">Improve</div></div></div></div><!-- Bug --><div style="flex: 0 0 calc(12% - 4px);"><div class="card border-start border-1 border-danger shadow-sm rounded-4 bg-light text-center cursor-pointer"><div class="card-body py-2"><div class="fs-5 fw-bold text-danger" t-out="PoolData['bug_total'] or 0"/><div class="small text-uppercase text-muted" style="font-size: 0.7rem;">Bug</div></div></div></div><!-- Total --><div style="flex: 0 0 calc(12% - 4px);"><div class="card border-start border-1 border-success shadow-sm rounded-4 bg-light text-center cursor-pointer"><div class="card-body py-2"><div class="fs-5 fw-bold text-success" t-out="PoolData['grand_total'] or 0"/><div class="small text-uppercase text-muted" style="font-size: 0.7rem;">Total</div></div></div></div></div><!-- 按部門與優先級的需求數量統計 --><div class="row g-4 mb-4"><div class="col-12"><h6 class="text-muted fw-bold mb-3">Priority and Department Count</h6><div class="table-responsive rounded-4 shadow-sm overflow-hidden"style="height: auto; min-height: 150px;"><table class="table table-bordered table-hover align-middle text-center mb-0"style="--bs-table-bg: #fff; --bs-table-border-color: #dee2e6; font-size: 0.85rem;"><thead style="background: linear-gradient(to right, #bac1ca, #83898f); color: white;"><tr style="height: 50px;"><th class="px-2 py-1 position-relative" style="font-size: 0.8rem;width: 120px;"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.3);"><!--                                            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top right, transparent 47%, rgba(255,255,255,0.8) 49%, rgba(255,255,255,0.8) 51%, transparent 53%);"></div>--><div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top right, transparent 48%, rgba(255,255,255,0.8) 49.5%, rgba(255,255,255,0.8) 50.5%, transparent 52%);"></div><span style="position: absolute; bottom: 2px; left: 4px; font-size: 0.7rem; color: white;">Priority</span><span style="position: absolute; top: 2px; right: 4px; font-size: 0.7rem; color: white;">Department</span></div></th><t t-foreach="PoolData['department_priority_matrix']['columns']" t-as="col"t-key="col"><th class="text-capitalize py-1" style="font-size: 0.8rem;" t-out="col"/></t></tr></thead><tbody><t t-set="rows" t-value="PoolData['department_priority_matrix']['rows']"/><!-- 顯示非Total行 --><t t-foreach="rows" t-as="row" t-key="row.priority" t-index="row_index"><tr t-if="row.priority != 'Total'" t-att-class="{'bg-light': row_index % 2 == 0}"style="height: 28px;"><td class="text-start px-2 py-1 fw-semibold text-dark"style="font-size: 0.85rem;" t-out="row.priority"/><t t-set="cols" t-value="PoolData['department_priority_matrix']['columns']"/><t t-foreach="cols" t-as="col" t-key="col"><td class="text-dark py-1" style="font-size: 0.85rem;"t-out="row[col] or 0"/></t></tr></t><!-- 顯示Total行 --><t t-foreach="rows" t-as="row" t-key="row.priority"><tr t-if="row.priority == 'Total'" class="border-top border-2"style="background-color: #f8f9fa;font-weight: 700;color:#38a3f1; height: 32px;"><td class="text-start px-2 py-1 fw-bold" style="font-size: 0.9rem;"t-out="row.priority"/><t t-set="cols" t-value="PoolData['department_priority_matrix']['columns']"/><t t-foreach="cols" t-as="col" t-key="col"><td class="py-1 fw-bold" style="font-size: 0.9rem;" t-out="row[col] or 0"/></t></tr></t></tbody></table></div></div></div></div></t>
</templates>

🔧 第二步：構建視圖集成擴展

? 技術亮點：通過繼承Odoo原生渲染器類，我們可以在不破壞原有功能的基礎上，無縫集成自定義Dashboard組件。

🎴 2.1 Kanban視圖增強擴展

文件路徑： static/src/views/requirements_pool_kanbanview.js

🏗? 架構說明：Kanban擴展采用裝飾器模式，在原有Kanban渲染器的基礎上注入Dashboard組件，實現功能的無侵入式增強。

/** @odoo-module **/import { registry } from "@web/core/registry";
import { kanbanView } from '@web/views/kanban/kanban_view';
import { KanbanRenderer } from '@web/views/kanban/kanban_renderer';
import { RequirementsPoolDashBoard } from '@mission_card/views/requirements_pool_dashboard';export class RequirementsPoolDashBoardKanbanRenderer extends KanbanRenderer {};RequirementsPoolDashBoardKanbanRenderer.template = 'mission_card.RequirementsPoolKanbanView';
RequirementsPoolDashBoardKanbanRenderer.components= Object.assign({}, KanbanRenderer.components, {RequirementsPoolDashBoard})export const RequirementsPoolDashBoardKanbanView = {...kanbanView,Renderer: RequirementsPoolDashBoardKanbanRenderer,
};registry.category("views").add("requirements_pool_dashboard_kanban", RequirementsPoolDashBoardKanbanView);

Kanban模板文件： static/src/views/requirements_pool_kanbanview.xml

<templates><t t-name="mission_card.RequirementsPoolKanbanView" t-inherit="web.KanbanRenderer" t-inherit-mode="primary"><xpath expr="//div[hasclass('o_kanban_renderer')]" position="before"><RequirementsPoolDashBoard /></xpath></t>
</templates>

2.2 List視圖擴展

文件路徑： static/src/views/requirements_pool_listview.js

/** @odoo-module **/import { registry } from "@web/core/registry";
import { listView } from "@web/views/list/list_view";
import { ListRenderer } from "@web/views/list/list_renderer";
import { RequirementsPoolDashBoard } from '@mission_card/views/requirements_pool_dashboard';export class RequirementsPoolDashBoardRenderer extends ListRenderer {};RequirementsPoolDashBoardRenderer.template = 'mission_card.RequirementsPoolListView';
RequirementsPoolDashBoardRenderer.components= Object.assign({}, ListRenderer.components, {RequirementsPoolDashBoard})export const RequirementsPoolDashBoardListView = {...listView,Renderer: RequirementsPoolDashBoardRenderer,
};registry.category("views").add("requirements_pool_dashboard_list", RequirementsPoolDashBoardListView);

List模板文件： static/src/views/requirements_pool_listview.xml

<templates><t t-name="mission_card.RequirementsPoolListView" t-inherit="web.ListRenderer" t-inherit-mode="primary"><!-- 在List渲染器前插入Dashboard --><xpath expr="//div[hasclass('o_list_renderer')]" position="before"><RequirementsPoolDashBoard /></xpath></t>
</templates>

💾 第三步：構建高性能后端數據接口

🚀 性能優化：采用高效的數據庫查詢策略和緩存機制，確保在大數據量場景下仍能提供快速響應。

在模型文件中實現智能化數據統計接口：

from odoo import models, fields, api
from collections import defaultdictclass ProjectRequirementsLine(models.Model):_name = 'project.requirements.line'_inherit = ["mail.thread", "mail.activity.mixin"]_description = 'Project Requirements Line'sequence = fields.Integer('Sequence', default=1)processing_status = fields.Selection([('1', 'Not Started'),('2', 'Ongoing'), ('3', 'Done'),('4', 'Cancelled')], string='Processing Status', default='1')requirement_type = fields.Selection([('new', 'New'),('improve', 'Improve'),('bug', 'Bug')], string='Requirement Type', default='new')priority = fields.Selection([('low', 'Low'),('middle', 'Middle'),('high', 'High')], string='Priority', default='middle')department_id = fields.Many2one('hr.department', string='Department')@api.modeldef retrieve_dashboard(self):"""獲取Dashboard所需的統計數據返回包含狀態統計、類型統計和部門優先級矩陣的數據"""# 構建最終結果result = {"status_cards": [{"key": "not_started","label": "Not Started","color": "primary","count": 20},{"key": "ongoing","label": "Ongoing","color": "warning","count": 4},{"key": "done","label": "Done","color": "success","count": 4},{"key": "cancelled","label": "Cancelled","color": "danger","count": 0}],"new_total": 18,"improve_total": 8,"bug_total": 2,"grand_total": 28,"department_priority_matrix": {"columns": ["Administration","IT Manager","Long Term Projects","Management","R&D USA","Research & Development","Sales"],"rows": [{"priority": "High","Administration": 0,"IT Manager": 1,"Long Term Projects": 0,"Management": 0,"R&D USA": 0,"Research & Development": 0,"Sales": 0},{"priority": "Middle","Administration": 1,"IT Manager": 15,"Long Term Projects": 1,"Management": 0,"R&D USA": 2,"Research & Development": 1,"Sales": 0},{"priority": "Low","Administration": 0,"IT Manager": 2,"Long Term Projects": 1,"Management": 1,"R&D USA": 0,"Research & Development": 1,"Sales": 1},{"priority": "Total","Administration": 1,"IT Manager": 18,"Long Term Projects": 2,"Management": 1,"R&D USA": 2,"Research & Development": 2,"Sales": 1}]}}return result

?? 第四步：模塊資源配置與優化

📦 模塊化管理：合理的資源配置不僅能提升加載性能，還能確保模塊的可維護性和可擴展性。

在模塊的__manifest__.py文件中進行專業化配置：

{'name': 'Enterprise Dashboard Suite','version': '18.0.1.0.0','depends': ['base', 'web', 'project', 'hr'],'data': [# 視圖文件'views/project_requirements_views.xml',],'assets': {'web.assets_backend': [# JavaScript文件'mission_card/static/src/views/requirements_pool_dashboard.js','mission_card/static/src/views/requirements_pool_kanbanview.js', 'mission_card/static/src/views/requirements_pool_listview.js',# XML模板文件'mission_card/static/src/views/requirements_pool_dashboard.xml','mission_card/static/src/views/requirements_pool_kanbanview.xml','mission_card/static/src/views/requirements_pool_listview.xml',],},'installable': True,'auto_install': False,
}

第五步：在視圖中啟用Dashboard

5.1 List視圖配置

<record id="view_project_requirements_line_list" model="ir.ui.view"><field name="name">project.requirements.line.list</field><field name="model">project.requirements.line</field><field name="arch" type="xml"><list string="Project Requirements Line" class="custom-tree-width" create="0" edit="0"decoration-warning="processing_status == '1'"decoration-info="processing_status == '2'"decoration-success="processing_status == '3'"decoration-muted="processing_status == '4'"js_class="requirements_pool_dashboard_list"decoration-bf="True"><field name="sequence"/><field name="name"/><field name="requirement_type"/><field name="priority"/><field name="processing_status"/><field name="department_id"/></list></field>
</record>

5.2 Kanban視圖配置

<record id="view_project_requirements_line_kanban" model="ir.ui.view"><field name="name">project.requirements.line.kanban</field><field name="model">project.requirements.line</field><field name="arch" type="xml"><kanban class="o_kanban_dashboard o_project_kanban o_emphasize_colors"create="false" quick_create="false"js_class="requirements_pool_dashboard_kanban"default_group_by="processing_status"><field name="processing_status"/><field name="requirement_type"/><field name="priority"/><field name="department_id"/><templates><t t-name="kanban-box"><div class="oe_kanban_card oe_kanban_global_click"><div class="oe_kanban_content"><div class="oe_kanban_details"><strong><field name="name"/></strong><div>Type: <field name="requirement_type"/></div><div>Priority: <field name="priority"/></div><div>Department: <field name="department_id"/></div></div></div></div></t></templates></kanban></field>
</record>

🎯 核心技術深度解析

🔄 1. 先進的組件生命周期管理

技術棧： OWL Framework + Modern JavaScript

生命周期鉤子	使用場景	最佳實踐
`onWillStart`	數據預加載	異步獲取Dashboard統計數據，確保組件渲染時數據已就緒
`onMounted`	DOM操作	綁定事件監聽器，初始化第三方組件（如圖表庫）
`onWillUnmount`	資源清理	移除事件監聽器，清理定時器，避免內存泄漏
`onWillUpdateProps`	數據同步	智能判斷數據變化，實現精確的增量更新

// 💡 專業實踐：錯誤邊界處理
onWillStart(async () => {try {await this.loadDashboardData();} catch (error) {this.handleDataLoadError(error);}
});

📊 2. 高性能數據響應式架構

核心理念： 數據驅動 + 智能緩存 + 增量更新

🚀 智能緩存策略：實現多層級緩存機制，包括內存緩存、瀏覽器緩存和服務端緩存
? 增量更新算法：僅更新變化的數據部分，避免全量重新渲染
🔄 實時同步機制：通過WebSocket或EventSource實現數據的實時推送

// 🎯 性能優化：防抖動刷新
const debouncedRefresh = debounce(this.refreshData.bind(this), 300);

🎨 3. 現代化交互設計模式

設計哲學： 直覺化操作 + 即時反饋 + 無縫體驗

🎯 智能過濾器：支持多條件組合查詢，提供搜索建議和歷史記錄
🔍 上下文感知：根據用戶行為動態調整界面布局和功能優先級
? 微交互動效：通過CSS3動畫和過渡效果提升用戶體驗

/* 🎨 專業動效設計 */
.dashboard-card {transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform: translateY(0);
}.dashboard-card:hover {transform: translateY(-4px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

📱 4. 自適應響應式布局系統

技術方案： CSS Grid + Flexbox + Container Queries

🔧 智能斷點管理：基于內容驅動的斷點設計，而非設備驅動
📐 流體網格系統：使用CSS Grid實現復雜的多列布局
🎯 容器查詢優化：利用最新的Container Queries技術實現組件級響應式

// 🎯 現代響應式設計
.dashboard-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: clamp(1rem, 2.5vw, 2rem);@container (width < 768px) {grid-template-columns: 1fr;}
}

常見問題解決

1. Dashboard不顯示

檢查js_class屬性是否正確設置
確認靜態資源是否正確加載
查看瀏覽器控制臺是否有JavaScript錯誤

2. 數據不更新

檢查后端方法返回的數據格式
確認ORM調用是否成功
驗證模型權限設置

3. 樣式顯示異常

確認Bootstrap版本兼容性
檢查CSS樣式優先級
驗證模板繼承是否正確

🎉 項目總結與展望

🏆 技術成果概覽

通過本教程的深度實踐，我們構建了一個企業級的Odoo 18 Dashboard解決方案，具備以下核心優勢：

特性維度	實現效果	技術價值
🏗? 架構設計	模塊化、可擴展、低耦合	支持團隊協作開發，便于功能迭代
📱 用戶體驗	響應式、交互式、直覺化	提升工作效率，降低學習成本
? 性能表現	高響應、智能緩存、增量更新	支持大數據量場景，確保系統穩定性
🎨 視覺設計	現代化、專業化、品牌化	提升企業形象，增強用戶粘性
🔧 技術棧	前沿技術、標準化、可維護	降低技術債務，提升開發效率