跳到主要内容

Form View的一些玩法

Note

介绍一些关于FormView的玩法。

如无特殊说明，默认使用16的版本。

修改FormControlPanel，增加可用Slot​

这里示例的版本为16。

源码
addons/web/static/src/views/form/form_view.js
/** @odoo-module **/

import { registry } from "@web/core/registry";
import { FormRenderer } from "./form_renderer";
import { RelationalModel } from "../basic_relational_model";
import { FormArchParser } from "./form_arch_parser";
import { FormController } from "./form_controller";
import { FormCompiler } from "./form_compiler";
import { FormControlPanel } from "./control_panel/form_control_panel";

export const formView = {
    type: "form",
    display_name: "Form",
    multiRecord: false,
    searchMenuTypes: [],
    ControlPanel: FormControlPanel,
    Controller: FormController,
    Renderer: FormRenderer,
    ArchParser: FormArchParser,
    Model: RelationalModel,
    Compiler: FormCompiler,
    buttonTemplate: "web.FormView.Buttons",

    props: (genericProps, view) => {
        const { ArchParser } = view;
        const { arch, relatedModels, resModel } = genericProps;
        const archInfo = new ArchParser().parse(arch, relatedModels, resModel);

        return {
            ...genericProps,
            Model: view.Model,
            Renderer: view.Renderer,
            buttonTemplate: genericProps.buttonTemplate || view.buttonTemplate,
            Compiler: view.Compiler,
            archInfo,
        };
    },
};

registry.category("views").add("form", formView);

首先来看FormView的组成结构：

2

-> FormController

----> Layout

------> FormControlPanel

------> FormRenderer

主体内容通过Layout渲染.

Note

Layout的组成结构：

  • t-slot: layout-buttons
  • t-component: components.ControlPanel (slots="controlPanelSlots")
  • t-component: components.Banner
  • t-component: components.SearchPanel
  • t-slot: dafault

在FormView中，顶部内容属于ControlPanel，如下图所示： 1

ControlPanel: FormControlPanel.

那么接下来看FormControlPanel:

FormControlPanel有以下几个可用的Slot：

  • control-panel-breadcrumb
  • control-panel-status-indicator
  • control-panel-action-menu
  • control-panel-create-button

此处展示在FormControlPanel的Slot(control-panel-action-menu)前面插入一个Slot以供后续使用。

form_control_panel_inherit.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="form_view_search.FormControlPanel" owl="1" t-inherit="web.FormControlPanel" t-inherit-mode="extension">
        <xpath expr="//t[@t-slot='control-panel-action-menu']" position="before">
            <t t-slot="control-panel-search"/>
        </xpath>
    </t>

</templates>

下面给出一个示例，在新增的Slot中设置内容(此处用的是自定义组件FormViewSearch)：

form_controller_inherit.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="form_view_search.FormView" owl="1" t-inherit="web.FormView" t-inherit-mode="extension">
        <xpath expr="//Layout" position="inside">
            <t t-set-slot="control-panel-search">
                <t t-if="props.archInfo.enableFormViewSearch">
                    <FormViewSearch model="model" domain="props.domain"
                                    enableFormViewSearch="archInfo.enableFormViewSearch"
                                    formViewSearchCode="archInfo.formViewSearchCode"/>
                </t>
            </t>
        </xpath>
    </t>

</templates>

效果图如下： 3

FormView隐藏顶部ControlPanel​

<form>
    <script>
        $(document).ready(function(){
        $(".o_control_panel").hide();
        });
    </script>
    <!-- ... fields -->
</form>