默认View视图

页面结构与逻辑

1. 页面组成部分：
   • 标题栏：页面的标题或标识，通常位于页面顶部。
   • 导航栏：用于导航到不同部分或功能的菜单栏，可以水平或垂直排列。
   • 内容区域：展示主要内容的区域，可能包括表格、图表、表单等。
   • 侧边栏：显示附加信息或导航链接的侧边栏，通常位于页面左侧或右侧。
   • 页脚：显示版权信息、联系方式等的页面底部区域。
2. 页面交互逻辑：
   • 用户输入：响应用户的输入和操作，例如点击按钮、填写表单等。
   • 数据展示：从后端获取数据并展示在页面上，支持分页、筛选、排序等操作。
   • 状态管理：根据用户操作或后端返回的数据更新页面状态，保持页面的一致性和实时性。
   • 错误处理：处理用户输入错误或后端返回的错误信息，向用户提供友好的提示和解决方案。

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

母版布局

默认母版基础布局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 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>