3.5.7.3 自定义布局

布局是什么

在系统中，布局决定了母版内的页面元素，一个页面可以由多个组件进行组装，布局可以根据视图类型来替换。

默认布局范围:

作用场景

系统内置了多个布局组件，这些组件适用于全局、某个应用或某个页面，提供了灵活的布局定制选项。这些组件根据不同类型的视图进行了默认的组装，这也是选择了视图类型后，页面能够呈现的原因。当然，这些默认的组装是可以被覆盖、新增和添加新组件的。

使用registerLayout进行自定义布局

开发者在使用这些布局组件时，应该遵循公司的规范进行统一的调整。自定义布局组件的使用可通过 registerLayout 实现。registerLayout 的第一个参数是代表布局的 XML，第二个参数是不同的选项维度，默认包含以下维度：

• viewType: 视图类型
• module: 视图模型所在模块
• moduleName: 视图模型所在模块名称
• model: 视图模型编码
• modelName: 视图模型名称
• viewName: 视图名称
• actionName: 动作名称
• inline: 是否内嵌视图(子视图特有)
• ttype: 模型字段类型(子视图特有)
• relatedTtype: 关联模型字段类型(子视图特有)
• field: 字段(子视图特有)

需要注意的是，动作可以是A模块下的a模型，这个动作可以打开B模块下的b模型的视图，module、moduleName、model、modelName应该填b模型对应的值，只不过大部分场景我们都是本模型的动作打开本模型的视图，所以这些场景拿动作所在模型填这些值也可以
这些纬度也可以通过查看TS的定义查看

全局

在系统中，我们可以通过指定视图类型来决定某一类视图的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table } 时，代表了替换了系统内所有表格的布局样式。

示例工程目录

以下是需关注的工程目录示例，main.ts更新导入./layout，layout/index.ts更新导出./tableLayout：

示例代码

import {registerLayout, ViewType} from '@kunlun/dependencies'

/**
 * 把系统内所有表格类型视图的全局动作放入搜索区域
 *
 * 移动actionBar布局至外层
 * <element widget="actionBar" slot="actionBar" slotSupport="action">
 *   <xslot name="actions" slotSupport="action" />
 * </element>
 * */

const registerGlobalTableLayout = () => {
    return registerLayout(`<view type="TABLE">
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />

        </view>
    </pack>
    <pack widget="group" slot="tableGroup">
        <element widget="table" slot="table" slotSupport="field">
            <element widget="expandColumn" slot="expandRow" />
            <xslot name="fields" slotSupport="field" />
            <element widget="rowActions" slot="rowActions" slotSupport="action" />
        </element>
    </pack>
</view>`, { viewType: ViewType.Table })
}

registerGlobalTableLayout()

效果

应用

在系统中，我们可以通过指定视图类型和模块名称来替换某一类视图在特定模块下的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table, moduleName: 'resource' } 时，代表了替换了资源应用下所有表格的布局样式，而其他应用仍使用默认布局

import {registerLayout, ViewType} from '@kunlun/dependencies'

const registerModuleTableLayout = () => {
    return registerLayout(`<view type="TABLE">
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />

        </view>
    </pack>
    <pack widget="group" slot="tableGroup">
        <element widget="table" slot="table" slotSupport="field">
            <element widget="expandColumn" slot="expandRow" />
            <xslot name="fields" slotSupport="field" />
            <element widget="rowActions" slot="rowActions" slotSupport="action" />
        </element>
    </pack>
</view>`, { viewType: ViewType.Table, moduleName: 'resource' })
}

registerModuleTableLayout()

参数说明

• viewType: ViewType.Table: 通过这个参数，我们指定视图类型为表格。
• moduleName: 'resource': 通过这个参数，我们指定模块名称为 'resource'，表示替换资源应用下所有表格的布局。

页面

在系统中，我们可以通过指定应用、模型和视图类型来替换当前应用下某个模型的特定视图布局。以表格为例，当第二个入参为 { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceProvince' } 时，代表了替换了资源应用下省份模型 resource.ResourceProvince 的表格视图布局。

若当前模型存在多个相同类型的视图，可以加上 actionName: "resource#省"，其中 actionName 是当前页面的唯一标识，具有唯一性。

const registerViewTableLayout = () => {
    return registerLayout(`<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
            <element widget="actionBar" slot="actionBar" slotSupport="action">
                <xslot name="actions" slotSupport="action" />
            </element>
        </view>
    </pack>
    <pack widget="group" slot="tableGroup">

        <element widget="table" slot="table" slotSupport="field">
            <element widget="expandColumn" slot="expandRow" />
            <xslot name="fields" slotSupport="field" />
            <element widget="rowActions" slot="rowActions" slotSupport="action" />
        </element>
    </pack>
</view>`, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceProvince' })
}

registerViewTableLayout()

参数说明

• viewType: ViewType.Table: 通过这个参数，我们指定视图类型为表格。
• moduleName: 'resource': 通过这个参数，我们指定应用名称为 'resource'。
• model: 'resource.ResourceProvince': 通过这个参数，我们指定模型为 'resource.ResourceProvince'，表示替换了资源应用下省份模型的表格视图布局。
• actionName: "resource#省": 通过这个参数，我们指定当前页面的唯一标识，用于区分当前模型存在多个相同类型的视图。

扩展布局

除了内置的布局组件，系统还支持添加自定义布局组件，并通过修改布局来实现个性化和灵活扩展的目标。

注册布局组件

注册自定义布局组件

示例工程目录

以下是需关注的工程目录示例，更新导出./widget：

示例代码

首先，我们需要注册自定义布局组件。以下是一个示例代码，注册了一个名为 CustomLayoutWidget 的自定义布局组件：

import { SPI, BaseElementWidget } from '@kunlun/dependencies';
import CustomLayoutWidgetVue from './LayoutWidget.vue';

@SPI.ClassFactory(BaseElementWidget.Token({ widget: 'custom-layout-widget' }))
  export class CustomLayoutWidget extends BaseElementWidget {
    public initialize(props) {
      super.initialize(props);
      this.setComponent(CustomLayoutWidgetVue);
      return this;
    }
  }

在上述代码中，我们使用 @SPI.ClassFactory 注解注册了一个名为 custom-layout-widget 的自定义布局组件，其实现为 CustomLayoutWidget 类。这个类继承自 BaseElementWidget，并在 initialize 方法中设置了对应的 Vue 组件。

自定义布局组件的 Vue 文件示例 (LayoutWidget.vue)

<template>
  <div class="layout-widget-wrapper">
    <h1>Layout组件</h1>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    inheritAttrs: false,
    name: 'LayoutComponentVue'
  });
</script>

<style lang="scss">
  .layout-widget-wrapper {
    background-color: red;
  }
</style>

自定义布局

示例工程目录

以下是需关注的工程目录示例，添加导出./widget：

示例代码

在这个示例中，我们注册了一个表格，并将自定义组件 custom-layout-widget 与布局结合。以下是代码示例：

const registerViewTableLayout = () => {
    return registerLayout(`<view type="TABLE">
    <pack widget="group">
+        <element widget="custom-layout-widget" />
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
            <element widget="actionBar" slot="actionBar" slotSupport="action">
                <xslot name="actions" slotSupport="action" />
            </element>
        </view>
    </pack>
    <pack widget="group" slot="tableGroup">

        <element widget="table" slot="table" slotSupport="field">
            <element widget="expandColumn" slot="expandRow" />
            <xslot name="fields" slotSupport="field" />
            <element widget="rowActions" slot="rowActions" slotSupport="action" />
        </element>
    </pack>
</view>`, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceProvince' })
}

registerViewTableLayout()

效果