3.5.2.1 整体介绍

虽然我们有小眼睛可以让用户自定义展示字段和排序喜好，以及通过权限控制行、列展示，但在我们日常业务开发中还是会对页面进行调整，以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑，再带小伙伴一起完成自定义view的Template和Layout，以及整个母版的Template和Layout

页面的构成讲解

页面交互拓扑图

注：页面逻辑交互拓扑图说明

1. 模块作为主切换入口

2. 模块决定菜单列表

3. 菜单切换触发点击action

4. 前端根据Mask、View进行渲染，

a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版

bMask和View都是有layout定义和template定义合并而成，系统会提供默认母版，以及为每种视图提供默认layout

c. layout与template通过插槽进行匹配

5. Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等

6. Aciton路由可以指定Mask、视图组件的layout、template

a. 当layout没有指定的时候则用系统默认的

b. 当template没有指定的时候，且视图组件相同类型有多条记录时，根据优先级选取

7. Mask和视图组件的layout优先级（视图组件>视图动作 > 应用 > 全局）

默认母版以及各类视图组件

母版布局

默认母版基础布局base-layout

<mask layout="default">
    <header slot="header"/>
    <container slot="main" name="main">
        <sidebar slot="sidebar"/>
        <container slot="content"/>
    </container>
    <footer slot="footer"/>
</mask>

母版template

<mask layout="default">
    <mask name="defaultMask">
    <template slot="header">
        <container name="appBar">
            <element widget="logo"/>
            <element widget="appFinder"/>
        </container>
        <container name="operationBar">
            <element widget="notification"/>
            <element widget="dividerVertical"/>
            <element widget="languages"/>
        </container>
        <element widget="userProfile"/>
    </template>
    <template slot="sidebar">
        <element widget="navMenu"/>
    </template>
    <template slot="content">
      <element widget="breadcrumb"/>
      <element widget="mainView"/>
    </template>
</mask>

注：

• 上例中因为名称为main的插槽不需要设置更多的属性，所以在template中缺省了main插槽的template标签。

最终可执行视图

<mask name="defaultMask">
    <header>
        <container name="appBar">
            <element widget="logo"/>
            <element widget="appFinder"/>
        </container>
        <container name="operationBar">
            <element widget="notification"/>
            <element widget="dividerVertical"/>
            <element widget="languages"/>
        </container>
        <element widget="userProfile"/>
    </header>
    <container name="main">
        <sidebar name="sidebar">
            <element widget="navMenu"/>
        </sidebar>
        <container name="content">
            <element widget="breadcrumb"/>
            <element widget="mainView"/>
        </container>
    </container>
    <footer/>
</mask>

表格视图布局

默认表格视图基础布局base-layout

<view type="table">
    <view type="search">
        <element widget="search" slot="search">
            <xslot name="fields" slotSupport="field" />
        </element>
    </view>
    <pack widget="fieldset">
        <element widget="actionBar" slot="actions" slotSupport="action" />
        <element widget="table" slot="table">
            <xslot name="fields" slotSupport="field" />
            <element widget="actionsColumn" slot="actionsColumn">
                <xslot name="rowActions" slotSupport="action" />
            </element>
        </element>
    </pack>
</view>

注：table标签的子标签为column组件，如果field填充到元数据插槽fields没有column组件将自动包裹column组件。

表格视图template

<view type="table" model="xxx" name="tableViewExample">
    <template slot="search">
        <field data="name"/>
    </template>
    <template slot="actions">
        <action name="create"/>
    </template>
    <template slot="fields">
        <field data="id"/>
        <field data="name"/>
        <field data="code"/>
    </template>
    <template slot="rowActions">
        <action name="delete"/>
        <action name="update"/>
    </template>
</view>

最终可执行视图

<view type="table" model="xxx" name="tableViewExample">
    <view type="search">
        <element widget="search">
            <field data="name"/>
        </element>
    </view>
    <action-bar>
        <action name="create"/>
    </action-bar>
    <table>
        <column>
            <field data="id"/>
        </column>
        <column>
            <field data="name"/>
        </column>
        <column>
            <field data="code"/>
        </column>
        <column>
            <action name="delete"/>
            <action name="update"/>
        </column>
    </table>
</view>

表单视图布局

默认表单视图基础布局base-layout

<view type="form">
    <element widget="actionBar" slot="actions" slotSupport="action"/>
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field"/>
    </element>
</view>

表单视图template

<view type="form" model="xxx" name="viewExample">
    <template slot="actions">
        <action name="submit"/>
    </template>
    <template slot="fields">
        <pack widget="group">
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </pack>
        <pack widget="tabs">
            <pack widget="tab" title="商品列表">
                <field data="items" />
            </pack>
            <pack widget="tab" title="子订单列表">
                <field data="orders" />
            </pack>
        </pack>
    </template>
</view>

注：tabs标签的子标签为tab，如果dsl填充到layout没有tab标签将自动包裹tab标签。

最终可执行视图

<view type="form" model="xxx" name="viewExample">
    <action-bar>
        <action name="submit"/>
    </action-bar>
    <form>
        <group>
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </group>
        <tabs>
            <tab title="商品列表">
                <field data="items" />
            </tab>
            <tab title="子订单列表">
                <field data="orders" />
            </tab>
        </tabs>
    </form>
</view>

详情视图布局

默认详情视图基础布局base-layout

<view type="detail">
    <element widget="actionBar" slot="actions" slotSupport="action"/>
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field"/>
    </element>
</view>

详情视图template

<view name="viewExample">
    <template slot="actions">
        <action name="back"/>
    </template>
    <template slot="fields">
        <pack widget="group">
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </pack>
        <pack widget="tabs">
            <pack widget="tab" title="商品列表">
                <field data="items" />
            </pack>
            <pack widget="tab" title="子订单列表">
                <field data="orders" />
            </pack>
        </pack>
    </template>
</view>

最终可执行视图

<view type="detail" model="xxx" name="viewExample">
    <action-bar>
        <action name="back"/>
    </action-bar>
    <detail>
        <group>
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </group>
        <tabs>
            <tab title="商品列表">
                <field data="items" />
            </tab>
            <tab title="子订单列表">
                <field data="orders" />
            </tab>
        </tabs>
    </detail>
</view>