在前端视图添加自定义的区域块

添加自定义区域块

平台提供了一系列默认的视图布局,可以帮助开发人员快速构建出复杂的企业应用系统。当然,我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。

自定义区域块概述

平台视图布局都是通过XML配置实现的。在视图布局中,我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块,就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块,来扩展页面功能。

视图类型及相关元素

视图类型分为表格(TABLE)、表单(FORM)、画廊(GALLERY)、树形(TREE)等。不同类型的视图布局,包含的元素也有所不同。

下面是几种视图类型及其对应的元素:

  • 表格:搜索区域、表格主体,其中表格主体包含了表格上面的动作、表格区域等部分。
  • 表单:表单区域,包含了表单动作、表单区域等部分。
  • 画廊:动作、卡片详细信息。

在表格页面添加自定义区域块

以下是一个示例,演示如何在表格页面顶部添加自定义区域块。

1. 修改视图布局XML

首先,我们需要修改表格视图的XML布局,添加自定义区域块元素标签。

<view type="TABLE">
    <!-- 这是搜索区域 -->
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
        </view>
    </pack>

    <!-- 这是表格主体 -->
    <pack widget="group" slot="tableGroup">
        <!-- 在这里添加自定义区域块元素标签 -->
        <element widget="MyCustomElement"></element>

        <!-- 这是表格上面的动作 -->
        <element widget="actionBar" slot="actionBar" slotSupport="action">
            <xslot name="actions" slotSupport="action" />
        </element>

        <!-- 这是表格区域 -->
        <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>

在上述代码中,我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。

2. 创建自定义Vue组件

接下来,我们需要创建一个Vue组件,并将其指定为自定义元素标签MyCustomElement的模板。

<template>
  <div>
    <!-- 在这里编写自定义区域块的内容 -->
    <p>Hello, world!</p>
  </div>
</template>

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

export default defineComponent({
  components: {

  },
  props: [],
  setup(props) {
    return {};
  }
});
</script>

在上述代码中,我们定义了一个非常简单的Vue组件,它在页面上显示一个“Hello, world!”的文本信息。

3. 创建自定义Element Widget

为了使自定义Vue组件与XML布局文件关联起来,我们需要创建一个对应的Element Widget。

import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies';

import MyCustomElement from './MyCustomElement.vue';

@SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' }))
export class MyCustomElementWidget extends BaseElementWidget {
  public initialize(props: BaseElementWidgetProps): this {
    super.initialize(props)
    this.setComponent(MyCustomElement)
    return this
  }
}

在上述代码中,我们继承了BaseElementWidget类,并在其中指定了Vue组件MyCustomElement。这样,XML布局文件中的元素标签就能够正确地与Vue组件关联起来。

4. 注册视图布局

最后,我们需要将上述代码配置注册。具体而言,我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。

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

registerLayout(
  `<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
        </view>
    </pack>

    <pack widget="group" slot="tableGroup">
        <element widget="MyCustomElement"></element>
        <element widget="actionBar" slot="actionBar" slotSupport="action">
            <xslot name="actions" slotSupport="action" />
        </element>
        <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>`,
  {
    moduleName: 'moduleName',
    model: 'model',
    viewType: ViewType.Table
  }
);

在上述代码中,我们调用registerLayout方法,并将XML布局文件、模块名和视图类型进行关联。这样就能够正确地显示我们的自定义区域块。

下面是平台对应不同的视图类型注册的默认XML:

1: Table

<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
        </view>
    </pack>
    <pack widget="group" slot="tableGroup">
        <element widget="actionBar" slot="actionBar" slotSupport="action">
            <xslot name="actions" slotSupport="action" />
        </element>
        <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>

2: Form

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

3: Detail

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

4: Gallery

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
    </view>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <element widget="gallery" slot="gallery">
        <element widget="card" slot="card" slotSupport="pack,field" />
    </element>
</view>

5: Tree

<view type="TREE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
        </view>
    </pack>
    <pack widget="group">
        <element widget="actionBar" slot="actionBar" slotSupport="action">
            <xslot name="actions" slotSupport="action" />
        </element>
        <element widget="card-cascader" slot="tree" slotSupport="nodes,node" />
    </pack>
</view>

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

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

(0)
oinone的头像oinone
上一篇 2023年6月20日 下午4:07
下一篇 2023年11月2日 下午1:58

相关推荐

  • 如何在表格的字段内添加动作        低无一体

    如何在表格的字段内添加动作

    介绍 在日常的业务中,我们经常需要在表格内直接点击动作完成一些操作,而不是只能在操作栏中,例如:订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面,这里我们将带来大家来通过自定义表格字段来实现这个功能。 1.编写表格字段组件 组件ts文件TableBtnFieldWidget.ts import { ActionWidget, BaseFieldWid…

    2天前
    00
  • oio-modal 对话框        组件

    oio-modal 对话框

    API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁…

    2023年12月18日
    00
  • 默认布局模板(v4)        前端

    默认布局模板(v4)

    默认布局 表格视图(TABLE) <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="sea…

    2023年11月1日
    00
  • 如何通过 Oineone 平台自定义视图        前端

    如何通过 Oineone 平台自定义视图

    在 Oineone 平台上,自定义视图允许用户替换默认提供的页面布局,以使用自定义页面。本文将指导您如何利用 Oineone 提供的 API 来实现这一点。 默认视图介绍 Oineone 平台提供了多种默认视图,包括: 表单视图 表格视图 详情视图 画廊视图 树视图 每种视图都有其标准的 layout。自定义视图实际上是替换这些默认 layout 的过程。 …

    2024年4月3日
    00
  • 如果让表单支持单选 ?        前端

    如果让表单支持单选 ?

    本文将介绍在代码和XML配置中的修改,支持表格的单选功能。 先自定义一个widget,继承平台默认的table @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MyRadioTable' }) ) export class My…

    2023年11月27日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注