第五章:自定義看板視圖?

警告

在開始本章之前,強烈建議您完成 第三章:字段和視圖 。第3章介紹的概念,包括視圖和示例,對于理解本章所涉及的內容至關重要。

我們已經了解了Odoo Web框架提供的眾多功能。接下來,我們將自定義看板視圖。這是一個更復雜的項目,將展示框架的一些非平凡方面。目標是練習組合視圖,協調UI的各個方面,并以可維護的方式完成。

Bafien有史以來最好的想法:看板視圖和列表視圖的混合將完美地滿足您的需求!簡而言之,他想在任務的看板視圖左側提供客戶列表。當您在左側側邊欄上單擊客戶時,右側的看板視圖將被過濾,僅顯示與該客戶相關的訂單。

目標

../../../_images/overview1.png

本章節中每個練習的解決方案都托管在 官方Odoo教程存儲庫 中。

1. 創建一個新的看板視圖?

由于我們正在自定義看板視圖,因此讓我們從擴展它并在T恤訂單的看板視圖中使用我們的擴展開始。

Exercise

  1. 通過擴展看板控制器和創建新的視圖對象來擴展看板視圖。

  2. 在視圖注冊表中注冊為 awesome_tshirt.customer_kanban 。

  3. 更新看板視圖以使用擴展視圖??梢允褂?js_class 屬性完成此操作。

2. 創建一個 CustomerList 組件?

我們需要展示客戶列表,因此我們可以創建該組件。

Exercise

  1. 創建一個 CustomerList 組件,目前只顯示一個帶有一些文本的 div 。

  2. 它應該有一個 selectCustomer 屬性。

  3. 創建一個新的模板,擴展(XPath)看板控制器模板,將 CustomerList 添加到看板渲染器旁邊?,F在先給它一個空函數 selectCustomer 。

  4. 子類化看板控制器,在其子組件中添加 CustomerList 。

  5. 確保您在看板視圖中看到了您的組件。

../../../_images/customer_list.png

3. 加載并顯示數據?

Exercise

  1. onWillStart 中修改 CustomerList 組件以獲取所有客戶的列表。

  2. 在模板中使用 t-foreach 顯示列表。

  3. 每當選擇了一個客戶,調用 selectCustomer 函數屬性。

../../../_images/customer_data.png

4. 更新主看板視圖?

Exercise

  1. 在看板控制器中實現 selectCustomer 以添加正確的域。

  2. 修改模板,將真實的功能賦給 CustomerListselectCustomer 屬性。

由于與搜索視圖進行交互并不容易,因此這里提供了一個快速的代碼片段以幫助您:

selectCustomer(customer_id, customer_name) {
   this.env.searchModel.setDomainParts({
      customer: {
            domain: [["customer_id", "=", customer_id]],
            facetLabel: customer_name,
      },
   });
}
../../../_images/customer_filter.png

5. 僅顯示有有效訂單的客戶?

res.partner 模型上有一個 has_active_order 字段。讓我們允許用戶過濾具有活動訂單的客戶結果。

Exercise

  1. CustomerList 組件中添加一個類型為復選框的輸入框,并在旁邊加上標簽“活躍客戶”。

  2. 更改復選框的值應該過濾出具有有效訂單的客戶列表。

../../../_images/active_customer.png

6. 在客戶列表中添加搜索欄?

Exercise

在客戶列表上方添加一個輸入框,允許用戶輸入字符串并根據客戶姓名過濾顯示的客戶。

小技巧

您可以使用 fuzzyLookup 函數執行過濾。

../../../_images/customer_search.png

7. 重構代碼以使用 t-model?

為了解決前兩個練習,你可能在輸入框上使用了事件監聽器。讓我們看看如何使用更具聲明性的方式來完成,使用 t-model 指令。

Exercise

  1. 確保您有一個反應性對象,表示過濾器處于活動狀態(類似于: this.state = useState({ displayActiveCustomers: false, searchString: ''}) )。

  2. 修改代碼以添加一個名為 displayedCustomers 的 getter,該 getter 返回當前活動的客戶列表。

  3. 修改模板以使用 t-model 。

8. 分頁顯示客戶!?

Exercise

  1. CustomerList 中添加一個 pager ,并且只加載/渲染前20個客戶。

  2. 每當分頁器改變時,客戶列表應相應更新。

這實際上非常困難,特別是與前面練習中的過濾相結合。需要考慮許多邊緣情況。

../../../_images/customer_pager.png