14、高级视图

点我下载完整odoo的demo

列表视图与日历视图

Tree views列表视图

可以通过一些额外的属性控制其行为

colors属性

语法 颜色:条件 如果条件为真,则列表行显示为前面的颜色,多个颜色条件之前用分号分割

<tree string="Idea Categories" colors="blue:state=='draft';red:state=='trashed'">
    <field name="name"/>
    <field name="state"/>
</tree>

odoo10中 由于使用了bootstrap主题 所以此属性发生了改变

decoration-{$name} = 值 对每条记录添加行的样式

<tree string="Idea Categories" decoration-info="state=='draft'"decoration-danger="state=='trashed'">
<field name="name"/>
<field name="state"/>
</tree>

{$name} 可以是 bf (font-weight: bold), it (font-style: italic),或 bootstrap contextual color (danger,info, muted, primary, success or warning)值是一个python表达式。表达式可以引用到tree关联记录的字段以及uid(当前用户 int)current_date(当前时间 格式yyyy-MM-dd字符串)

  • editable = top或bottom 设置行内编辑功能(top从上方添加新行 bottom下方)

对课时行颜色进行设置 小于5天显示为蓝色 大于15天为红色

myproject/my_first_app/views/session_views.xml

<record model="ir.ui.view" id="session_tree_view">
            <field name="name">session.tree</field>
            <field name="model">myproject.session</field>
            <field name="arch" type="xml">
                <tree string="session Tree" decoration-info="duration&lt;5" decoration-danger="duration&gt;15">
                    <field name="name"/>
                    <field name="course_id"/>
                    <field name="duration"/>
                    <field name="start_date"/>
                    <field name="seats"/>
                    <field name="taken_seats" widget="progressbar"/>
                </tree>
            </field>
        </record>

注意 这里需要html转义 更多转义代码请参考这里

decoration-info="duration&lt;5" decoration-danger="duration&gt;15"
&lt; 表示小于号
&gt; 表示大于号

效果图如下:

9、odoo高级视图_odoo

Calendars日历视图

常用的3个属性

color 关联字段值 根据此值 相同的值会分配相同的颜色 可以用color字段手动设置颜色

date_start与date_end 日历中的事件开始结束时间

<calendar string="Ideas" date_start="invent_date" color="inventor_id">
    <field name="name"/>
</calendar>

其中的field标签定义了每个事件显示的标签

给课时添加日历视图

添加 end_date 自动 通过start_date 和 duration自动计算而来

同时添加inverse方法 当设置end_date的值时 反向改变关联的字段的值

设置完成后,事件就可以在日历拖动了

myproject/my_first_app/models/session.py

from datetime import timedelta

taken_seats = fields.Float(string="参与人数百分比", compute='_taken_seats')
end_date = fields.Date(string="结束时间", store=True,
                           compute='_get_end_date', inverse='_set_end_date')
@api.depends('start_date', 'duration')
    def _get_end_date(self):
        for r in self:
            if not (r.start_date and r.duration):
                r.end_date = r.start_date
                continue
            # Add duration to start_date, but: Monday + 5 days = Saturday, so
            # subtract one second to get on Friday instead
            start = fields.Datetime.from_string(r.start_date)
            duration = timedelta(days=r.duration, seconds=-1)
            r.end_date = start + duration
    def _set_end_date(self):
        for r in self:
            if not (r.start_date and r.end_date):
                continue
            # Compute the difference between dates, but: Friday - Monday = 4 days,
            # so add one day to get 5 days instead
            start_date = fields.Datetime.from_string(r.start_date)
            end_date = fields.Datetime.from_string(r.end_date)
            r.duration = (end_date - start_date).days + 1

myproject/my_first_app/views/session_views.xml

<record model="ir.ui.view" id="session_calendar_view">
    <field name="name">session.calendar</field>
    <field name="model">myproject.session</field>
    <field name="arch" type="xml">
        <calendar mode="month" string="Session Calendar"
                  date_start="start_date"
                  date_stop="end_date"
                  color="instructor_id">
            <field name="name"/>
        </calendar>
    </field>
</record>

9、odoo高级视图_odoo_02

在动作视图中添加显示日历:

9、odoo高级视图_odoo_03

更新应用后,效果如图:

9、odoo高级视图_odoo_04

搜索视图与甘特图

搜索视图Search views

search的可以设置一个filter_domain属性用来覆盖原field的domain条件,其中的self代表用户的输入值。

  • field字段用来定义默认给出的过滤选项。

  • 另外可以用预定义一些搜索条件的快捷方式。

  • domain添加过滤条件 context添加分组条件

    <search string="Ideas">
      	<field name="name"/>
    	<field name="description" string="Name and description"
             filter_domain="['|', ('name', 'ilike', self), ('description', 'ilike', self)]"/>
      	<field name="inventor_id"/>
    	<field name="country_id" widget="selection"/>
      	<filter name="my_ideas" string="My Ideas"
            domain="[('inventor_id', '=', uid)]"/>
     	<group string="Group By">
          	<filter name="group_by_inventor" string="Inventor"
                  context="{'group_by': 'inventor_id'}"/>
      	</group>
    </search>
    
    

    在action里通过search_view_id指定搜索视图
    在action中还能通过在context里指定默认开启的搜索条件,使用{‘search_default_field_name’:1} field_name为搜索视图中filter对应的名称,1表示真值。

添加 my_courses filter 过滤出我所负责的课程 ,添加负责人分组

myproject/my_first_app/views/course_views.xml

<record model="ir.ui.view" id="course_view_search">
            <field name="name">course.search</field>
            <field name="model">myproject.course</field>
            <field name="arch" type="xml">
                <search>
                    <field string="名称" name="name"/>
                    <field name="name"/>
                    <field name="description"/>
                    <filter name="my_courses" string="我的课程" domain="[('responsible_id','=',uid)]"/>
                    <filter string="男" name="sex_male" domain="[('sex', '=', True)]"/>
                    <filter string="女" name="sex_female" domain="[('sex', '=', False)]"/>
<!--                    分组-->
                    <filter string="性别" context="{'group_by':'sex'}" name="sex"/>
                    <group string="分组">
                        <filter name="by_responsible" string="Responsible"
                                context="{'group':'responsible_id'}"/>
                    </group>
                </search>
            </field>
        </record>
<record id="course_list_action" model="ir.actions.act_window">
            <field name="name">课程</field>
            <field name="res_model">myproject.course</field>
            <field name="view_mode">tree,form</field>
            <field name="view_id" ref="course_tree_view"/>
            <field name="help" type="html">
                <p class="o_view_nocontent_smiling_face">
                    Setup a new automated automation
                </p>
            </field>
            <!--            默认筛选我的课程-->
            <field name="context" eval="{'search_default_my_courses': 1}"/>
            <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
        </record>

效果图如下:

9、odoo高级视图_odoo_05

甘特图Gantt

用来直观的显示进度

<gantt string="Ideas"
       date_start="invent_date"
       date_stop="date_finished"
       progress="progress"
       default_group_by="inventor_id" />

创建hours计算字段 表示课时的持续时长小时数
myproject/my_first_app/models/session.py

end_date = fields.Date(string="结束时间", store=True,
                           compute='_get_end_date', inverse='_set_end_date')
hours = fields.Float(string="Duration in hours",
                     compute='_get_hours', inverse='_set_hours')

@api.depends('duration')
def _get_hours(self):
    for r in self:
        r.hours = r.duration * 24

        def _set_hours(self):
            for r in self:
                r.duration = r.hours / 24

创建session的甘特视图

myproject/my_first_app/views/session_views.xml

<record model="ir.ui.view" id="session_gantt_view">
    <field name="name">session.gantt</field>
    <field name="model">myproject.session</field>
    <field name="arch" type="xml">
        <gantt string="Session Gantt"
               date_start="start_date" 
               date_delay="hours"
               default_group_by='instructor_id'>
        </gantt>
    </field>
</record>
<!--        Session act_window-->
<record id="session_list_action" model="ir.actions.act_window">
    <field name="name">讲座</field>
    <field name="res_model">myproject.session</field>
    <field name="view_mode">tree,form,calendar,gantt</field>
    <field name="view_id" ref="session_tree_view"/>
    <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
</record>

date_delay 对应时长为小时

图表视图、数据透视图与看板视图

图表视图Graph views

用于显示一个model的多种统计图表,支持以下三种,通过type属性指定。

视图类型:

1、Bar 柱状图(不写type默认为bar)

2、Line 条形图

3、Pie 饼图

Graph图表视图只支持3种type,pivot算是单独的view。

点我下载完整odoo的demo

Pivot 数据透视表

<graph string="Opportunities Assignment Analysis" type="pivot" stacked="True">

视图属性

stacked=”True” 设置堆叠条形图

<graph string="Opportunities Assignment Analysis" type="pivot" stacked="True"><graph string="Services Costs Per Month" stacked="1">

orientation=”vertical” 显示方式 horizontal 或 vertical

<graph string="Cases By Stage and Estimates" type="bar" orientation="vertical" stacked="True"><graph string="Tracks" type="bar" orientation="horizontal">

interval=”day” 时间间隔 只在bar图里生效

<graph string="Mail Statistics" type="bar" stacked="True" interval="day">

视图字段属性

row默认 measure禁用分组

视图中field字段有一个type属性用来指定聚合方式,有两个值可选

<graph string="Total idea score by Inventor">    
    <field name="inventor_id"/>    
    <field name="score" type="measure"/>
</graph>

注意

graph的field如果是计算字段 必须store=True

添加课程人数图表

myproject/my_first_app/models/session.py中session类增加方法:

attendees_count = fields.Integer(
        string="Attendees count", compute='_get_attendees_count', store=True)
# attendees_count 图表视图
@api.depends('attendee_ids')
def _get_attendees_count(self):
    for r in self:
        r.attendees_count = len(r.attendee_ids)

myproject/my_first_app/views/session_views.xml增加一个记录:

<!--        Session graph.view-->
<record model="ir.ui.view" id="session_graph_view">
    <field name="name">session.graph</field>
    <field name="model">myproject.session</field>
    <field name="arch" type="xml">
        <graph string="Session Graph">
            <field name="course_id"/>
            <field name="attendees_count" type="measure"/>
        </graph>
    </field>
</record>
<!--        Session act_window-->
<record id="session_list_action" model="ir.actions.act_window">
    <field name="name">讲座</field>
    <field name="res_model">myproject.session</field>
    <field name="view_mode">tree,form,calendar,gantt,graph</field>
    <field name="view_id" ref="session_tree_view"/>
    <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
</record>

更新应有后,效果如下:

9、odoo高级视图_odoo_06

Pivot数据透视表

因为pivot算是单独的view,pivot要展示出来,需要在model=”ir.actions.act_window”,view_mode补上pivot.

myproject/my_first_app/views/myproject_view.xml在id="session_list_action"的记录中name="view_mode"的firld中添加一个pivot,意思就是显示pivot:

<!--        Session act_window-->
<record id="session_list_action" model="ir.actions.act_window">
    <field name="name">讲座</field>
    <field name="res_model">myproject.session</field>
    <field name="view_mode">tree,form,calendar,gantt,graph,pivot</field>
    <field name="view_id" ref="session_tree_view"/>
    <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
</record>

更新应用后,效果如图:

9、odoo高级视图_odoo_07

看板视图Kanban

常用来展示任务或产品开发的进度。kanban视图包含很多卡片,卡片在一个个的列表组中,一个卡片代表一条记录,一个列表代表聚合字段。例如产品任务卡片可以分在不同的产品阶段中或不同的负责人中。
kanban xml中每个card是用qweb格式定义。

通过kanban显示课时 以课程作为组。

myproject/my_first_app/models/session.py,在session类中增加一个color字段:

attendees_count = fields.Integer(
        string="Attendees count", compute='_get_attendees_count', store=True)
color = fields.Integer()

myproject/my_first_app/views/session_views.xml增加一个看板记录,并在act_window中显示出来:

<!--        Session kanban.view-->
        <record model="ir.ui.view" id="session_kanban_view">
            <field name="name">session.kanban</field>
            <field name="model">myproject.session</field>
            <field name="arch" type="xml">
                <kanban default_group_by="course_id">
                    <field name="color"/>
                    <templates>
                        <t t-name="kanban-box">
                            <div t-attf-class="oe_kanban_color_{{kanban_getcolor(record.color.raw_value)}}
                            oe_kanban_global_click_edit oe_semantic_html_override oe_kanban_card
                            {{record.group_fancy==1 ? 'oe_kanban_card_fancy': ''}}">
                                <div class="oe_dropdown_kanban">
                                    <div class="oe_dropdown_toggle">
                                        <i class="fa fa-bars fa-lg"/>
                                        <ul class="oe_dropdown_menu">
                                            <li>
                                                <a type="delete">Delete</a>
                                            </li>
                                            <li>
                                                <ul class="oe_kanban_colorpicker"/>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="oe_clear">

                                    </div>
                                </div>
                                <div t-attf-class="oe_kanban_content">
                                    Session name:
                                    <field name="name"/>
                                    <br/>
                                    Start date:
                                    <field name="start_date"/>
                                    duration:
                                    <field name="duration"/>
                                </div>
                            </div>
                        </t>
                    </templates>
                </kanban>
            </field>
        </record>
        <!--        Session act_window-->
        <record id="session_list_action" model="ir.actions.act_window">
            <field name="name">讲座</field>
            <field name="res_model">myproject.session</field>
            <field name="view_mode">tree,form,calendar,gantt,graph,pivot,kanban</field>
            <field name="view_id" ref="session_tree_view"/>
            <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
        </record>

说明:default_group_by=”course_id” 分组字段,表示按course_id进行分组。

更新应用后,效果如图:

9、odoo高级视图_odoo_08
点我下载完整odoo的demo

 

公众号

9、odoo高级视图_odoo_09

 

关注我,我们一起成长~~