3.5.7.3 自定义布局

布局是什么

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

默认布局范围:

image.png

图3-5-7-36 默认布局范围

作用场景

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

使用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:

image.png

图3-5-7-37 全局纬度注册布局工程目录示例

示例代码

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()

图3-5-7-38 全局纬度注册布局代码示例

效果

image.png

图3-5-7-39 全局纬度注册布局效果示例

应用

在系统中,我们可以通过指定视图类型和模块名称来替换某一类视图在特定模块下的全局布局。以表格为例,当第二个入参为 { 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()

图3-5-7-40 应用纬度注册布局代码示例

参数说明

  • 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()

图3-5-7-41 页面纬度注册布局代码示例

参数说明

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

扩展布局

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

注册布局组件

注册自定义布局组件

示例工程目录

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

image.png

图3-5-7-42 注册自定义布局工程目录示例

示例代码

首先,我们需要注册自定义布局组件。以下是一个示例代码,注册了一个名为 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;
    }
  }

图3-5-7-43 注册自定义布局组件(TS)代码示例

在上述代码中,我们使用 @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>

图3-5-7-44 注册自定义布局组件(Vue)代码示例

自定义布局

示例工程目录

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

image.png

图3-5-7-45 使用自定义布局工程目录示例

示例代码

在这个示例中,我们注册了一个表格,并将自定义组件 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()

图3-5-7-46 使用自定义布局代码示例

效果

image.png

图3-5-7-47 使用自定义布局效果示例

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9266.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:12
下一篇 2024年5月23日 am9:14

相关推荐

  • 第2章 Oinone的技术独特性

    本章的主要目的是通过分析企业商业支撑软件的项目特性和关注点,找到企业软件发展的另一个本质变化——新技术流派的产生。在对“互联网架构做为最佳实践为何失效”的思考基础上,我们分析互联网中台架构的发展历史以及企业实际现状,找出其水土不服的原因。进而引出Oinone的低代码开发平台如何结合互联网架构并完成创新,以满足企业数字化转型的需求。 具体而言,本章包括以下内容: 企业软件发展的另一个本质变化:新技术流派的产生; 最佳实践为何失效?Oinone如何打造具有企业特色的互联网架构; Oinone独特性之源:元数据与设计原则; Oinone独特性之单体与分布式的灵活切换; Oinone独特性之每一个需求都是一个模块; Oinone独特性之低无一体。

  • 3.5.7.4 自定义页面

    页面是什么 在Oinone前端体系中,页面是一个核心概念,它代表着终端用户所看到的当前视图。这个视图可以有多种形式,主要取决于页面是如何定义和构建的。在深入理解页面之前,我们需要了解两个关键的功能:自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能,但在某些情况下,它可能无法完全满足特定的需求。这时,自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充,允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时,自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计,添加特定的交互元素,或者整合复杂的业务逻辑,以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例,展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./view: 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先,我们定义了一个名为 CustomViewWidget 的 TypeScript 组件,并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次,我们创建了对应的 Vue 单文件组件 CustomView.vue,用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来,我们使用 registerLayout 函数注册了一个表格视图布局,并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后,它就可以在表格视图中被使用。在表格视图的布局中,我们通过 标签将自定义视图嵌套在表格中,从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是,registerLayout 函数和自定义布局的规则是一致的,这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则,从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先,我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…

    2024年5月23日
    93400
  • 流程类

    1.流程类 1.1 审批 审批节点配置步骤: 添加审批节点 选择审批的模型和视图 设置审批人和通过方式 设置审批人在审批时的操作权限和数据权限 1.1.1 审批节点 审批节点只能放置在有数据可审批的流程链路上,审批分支只能放置在审批节点后。 1.1.2 审批模型和视图 可选的审批模型包含添加的审批节点之前的所有能获取到数据的模型。可选视图为该选择的数据模型关联的界面设计器中视图类型为表单的页面。 1.1.3 审批人和通过方式 审批人可在个人、部门、角色和模型中的字段里复选。当某人在不同类型人员选择中被重复选中,只会收到一次审批的代办。若为多人审批,审批是同步进行的。 单人审批: 通过方式:唯一通过方式,同意通过,拒绝否决 多人审批: 通过方式:或签/会签(默认或签) a. 或签(一名审批人同意或拒绝即可) 任意一位审批人操作通过或否决后流程就结束,其他审批人无法进入审批操作,但是会弹出消息提示审批结果。 场景:紧急且影响不大的审批可以由任意一位领导层或签。 b. 会签(需所有审批人同意才为同意,一名审批人拒绝即为拒绝) 场景:影响比较重大的审批,一票否决的形式决定是否通过。 c. 会签(一名审批人同意即为同意,需所有审批人拒绝才为拒绝) 场景:需要评估项目可操作性时,若有领导觉得有意义就通过,进入下一步评估,全员否决就否决项目。 1.1.4 操作&数据权限 操作权限 可设置是否必填拒绝原因、是否允许转交、是否允许加签、是否允许退回。 选择允许转交或允许加签之后,可选择添加人员的候选名单,不填默认所有人都可选。 选择允许退回后,可以选择退回到该审批节点之前的任意审批节点。ps:需所有审批人拒绝才为拒绝的会签不允许退回。 数据权限 选择视图后自动显示该视图下的数据字段,可选择的权限为查看、编辑、隐藏数据字段,默认可查看全部字段。 1.1.5 参与人重复 勾选参与人重复的场景时,满足场景的审批流程会由系统自动审批通过。 1.2 填写 当流程需要某些人提交数据才能继续时,可以使用填写这个动作。区别于数据类中的操作,填写这个动作只能修改当前触发模型中关联的视图表单,而数据类中的更新数据可以修改其他模型中的数据。 和审批动作相似,填写动作需要选择填写的模型和视图表单,需要选择填写人,可以选择添加转交权限。另外,填写动作必须包含一个及以上的可编辑的数据权限供操作人填写。

    2024年5月23日
    76000
  • 接口日志

    记录每个PAPI接口执行日志,接口的响应结果、执行时间、执行时长等信息,可查看接口详情。 接口详情

    2023年5月23日
    82300

Leave a Reply

登录后才能评论