F4A3
F4A3

Packer.Odoo.10－－－Chapter 9

QWeb是Odoo使用的模板引擎。它是基于xml语言编写的，用来自动生成Html网页页面。下面就让我们来学习如何使用QWeb的语法。使用QWeb来创建我们的看板视图及用户报告。

看板视图

  • 看板是让工作队列可视化的一个工具。这个视图构造了一个个的列，每列代表一个工作状态阶段。工作根据目前的状态像一张张卡片一样放在相对应的每列中。一个新的工作的创建就是从看板视图的最左边一步步的向右边移动，最后到达看板视图的最右侧的列中，代表着一个工作的完成。
  • 看板视图的可视化跟简单性让它们能够完美的支持简单的业务逻辑流程。最简单的例子就是： 看板视图拥有3列。To Do, Doing, Done.分别代表工作的准备阶段，执行阶段，完成阶段。
Packer.Odoo.10－－－Chapter 9_第1张图片
简单的看板视图例子

看板视图

  • 对于许多的业务使用实例，看板视图在管理协作流程时比传统的工作流更加的有效率。
  • 在看板视图中，只有2个标签能够使用跟
  • HTML页面是通过QWeb模板动态生成的。QWeb引擎处理特殊的XML标签跟属性来生成web界面所需要的HTML语言。
    这为如何在前端web界面传递后台数据提供了更好的控制，但也带来了缺点，视图的设计可能会相当复杂。
  • 看板视图的设计相当灵活，所以我们会使用最直接的描述来让我们能够快速的建立看板视图。一个很好的方法是找到已有的与我们的需求比较相近的看板视图。
  • 我们能够看到有两种使用看板视图的方式，第一种是卡片列表格式。通常在联系人，产品，员工名单中。
    例子，联系人看板视图：

Packer.Odoo.10－－－Chapter 9_第2张图片
联系人看板视图

其实这不是真正的看板视图。一个真正意义上的看板视图是通过列来进行卡片的存放的。例子， Sales | My Pipeline.

Packer.Odoo.10－－－Chapter 9_第3张图片
真正的看板视图
  • 这两个例子的最显著的区别在于第二个例子中的看板视图把每个工作小卡片通过列来组织管理起来。这是通过分组功能来实现的，通过每个卡片（代表work实例）的stage字段的值来进行分组，然后让这些卡片被置入代表不同分组的列中。在Sales | My Pipeline我们还能发现这些列中的卡片能够自由的拖动。其实在拖动过程中，每个卡片的stage字段已经发生了改变。
  • 我们使用第二个例子中的看板视图来进行对Todo 看板视图的编写

设计看板视图

  • 新建一个kanban模块，来搭建Todo task的看板视图
  • 新建todo_kanban/__manifest__.py.添加下面的模块参数
{
    'name': 'To-Do Kanban',
    'description': 'Kanban board for todo-task',
    'author': 'xer',
    'depends': ['todo_ui'],
    'data': ['views/todo_view.xml',
             ],
}

别忘记todo_kanban/__init__.py的创建

  • 下面使用xml编写的我们的看板视图并把它设置为默认视图.


    
    
    
    
        todo.task

现在我们已经有了基本的模块骨架。
在开始创建看板视图前，我们需要对to-do 任务添加一些新的字段。

优先级，看板状态，颜色

  • 除了stages，还有一些在看板视图中经常使用的字段
    • priority ：让用户组织起他们自己的工作项目，标明首要处理项。
    • kanban_state : 标明了一个任务是已经可以转入到下一个阶段，还是被阻塞的状态。
    • color ： 用来存储看板视图中卡片的显示颜色。能够通过看板视图中的颜色选择菜单来进行设置。
      为了能添加这些字段，我们添加models/todo_task_model.py来进行task模型的新增字典操作.
from odoo import fields, models
class TodoTask(models.Model):
    _inherit = 'todo.task'
    color = fields.Integer('Color Index')
    priority = fields.Selection(
        [('0', 'Low'),
         ('1', 'Normal'),
         ('2', 'High')],
        'Priority', default='1')
    kanban_state = fields.Selection(
        [('normal', 'In Progress'),
         ('blocked', 'Blocked'),
         ('done', 'Ready for next stage')],
        'Kanban State', default='normal')

看板卡片元素

  • 看板视图结构是以作为顶部标签。在其中添加相应的元素。

注意到在kanban标签中有这么一个属性 default_group_by="stage_id" .这个属性的作用显而易见,就是把看板卡片按照stage的值进行分组.
而在联系人模块中,我们没有设置这个属性,所以它的视图表现中并没有列来作为分隔.
标签支持的属性：

  • default_group_by : 默认列分组所使用的字段
  • default_order : 默认的排序格式
  • quick_create="false" : 关闭快速建立列功能。
  • class ： 为看板视图添加默认的css样式
    在kanban标签中，我们把要在模板中使用的字段全部添加了进来。确保能够在服务端获取到这些字段中保存的数据。
    接下来，我们使用这个标签元素，包含了一个或者多个QWeb模板来生成HTML语言框架。我们必须使用一个名为kanban-box的模板，这个模板是用来渲染我们的看板卡片。此外，那些被重复使用的HTML框架也能通过QWeb模板添加在标签内。
    这些模板使用了标准化的HTML语言跟QWeb模板语言，QWeb提供了特殊的指令，在动态的创建最终HTML语言中起了重要作用。

看板卡片布局

  • 看板的主要内容是由kanban-box这个模板定义的.看板卡片的主要内容区域还能包含一个页脚子容器。
  • 对于单独的页脚，我们可以使用使用
    标签,添加属性为oe_kanban_footer的css样式.这个属性会自动的留出合适的间隔来分割它的内部元素。对多余的空间进行准确的左右分割。
  • 在看板卡片中我们可以使用Bootstrap提供的 pull-left 跟 pull-right 属性来指定添加的元素位于看板卡片的左边还是右边。在oe_kanban_footer 这个div中可以直接使用。
    来看下我们的QWeb模板的代码：

这个布局展示了看板卡片的全部结构。能够注意到color字段在顶部

标签中就被动态的指定了.

  • 接着在看板卡片的主要内容区域添加要放置的元素

      
 

 

      
      
      
  


    
     
    • 
     
      
    •
  • 在页脚的左边部分，我们插入一个优先级小部件(类似一个打星的控件)
  • 在页脚的右边部分，我们放置看板状态控件以及to-do task 的拥有者的头像小图标

  
  
  ![](kanban_image('res.users', 'image_small', record.user_id.raw_value))

看板状态跟普通表单视图一样,使用标签添加.而用户的小头像图片使用了HTML语言中的 标签.我们把图片的地址使用QWeb的t-att-指令来进行动态生成。
有时候，我们需要一个头像来放在看板卡片中显示（例如联系人应用中的类似名片一样的存在).我们可以添加这样的图片链接代码

![](kanban_image('res.partner', 'image_medium',record.id.value))

添加看板卡片的可供选择菜单

  • 看板卡片中能够使用可选菜单，放置在右上角。通常放置在菜单里的动作为编辑或者删除记录。其实，这个菜单中可以放置很多其他的动作，我们就把一个设置卡片颜色的可选动作放置在其中。
    下面，就在oe_kanban_content这个数据的div标签添加我们的可选菜单.

注意到如果我们的代码中不引入 ,那么我们在可选菜单中引入的server-side Model ---->do_toggle_done是无法起作用的。所以我们在定义