1. Oinone社区Home
  2. Oinone 7天入门到精通

3.5.2.3 构建View的Layout

史, 昂 • • Oinone 7天入门到精通 • 1736 views

在日常需求中也经常需要调整Layout的情况，如出现树表结构（左树右表、级联），我们则需要通过修改View的Layout来完成。今天就带您学习下Layout的自定义

第一个表格Layout

如果我们想去除表格视图区域的搜索区、ActionBar（操作区），就可以为视图自定义一个简单的Layout就行啦

Step1 新建一个表格的Layout

在views/demo_core/layout路径下增加一个名为sample_table_layout.xml文件，name设置为sampleTableLayout

<view type="TABLE" name="sampleTableLayout">
<!--    <view type="SEARCH">-->
<!--        <pack widget="fieldset">-->
<!--            <element widget="search" slot="search" slotSupport="field"/>-->
<!--        </pack>-->
<!--    </view>-->
    <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
        <pack widget="row" style="height: 100%; flex-direction: column">
<!--            <pack widget="col" mode="full" style="flex: 0 0 auto">-->
<!--                <element widget="actionBar" slot="actionBar" slotSupport="action">-->
<!--                    <xslot name="actions" slotSupport="action" />-->
<!--                </element>-->
<!--            </pack>-->
            <pack widget="col" mode="full" style="min-height: 234px">
                <element widget="table" slot="table" slotSupport="field">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                </element>
            </pack>
        </pack>
    </pack>
</view>

图3-5-2-27 新建一个表格的Layout

Step2 修改宠物达人自定义表格Template

在view标签上增加layout属性值为"sampleTableLayout"

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" layout="sampleTableLayout">
……省略其他
</view>

图3-5-2-28 修改宠物达人自定义表格Template

Step3 重启看效果

image.png

图3-5-2-29 示例效果

Step4 修改宠物达人自定义表格Template

去除在view标签上的layout属性配置，让其回复正常

第一个树表Layout

本节以“给商品管理页面以树表的方式增加商品类目过滤”为例

Step1 增加商品类目模型

增加PetItemCategory模型继承CodeModel，新增两个字段定义name和parent，其中parent字段M2O关联自身模型，非必填字段（如字段值为空即为一级类目）：

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategory.MODEL_MODEL)
@Model(displayName = "宠物商品类目",summary="宠物商品类目",labelFields={"name"})
public class PetItemCategory extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategory";
    @Field(displayName = "类目名称",required = true)
    private String name;

    @Field(displayName = "父类目")
    @Field.many2one
    private PetItemCategory parent;
}

图3-5-2-30 增加商品类目模型

Step2 修改自定义商品模型

为商品模型PetItem增加一个category字段m2o关联PetItemCategory

@Field(displayName = "类目")
@Field.many2one
private PetItemCategory category;

图3-5-2-31 修改宠物商品模型

Step3 新增名为treeTableLayout的Layout

在views/demo_core/layout路径下增加一个名为tree_table_layout.xml文件，name设置为treeTableLayout

image.png

图3-5-2-32 新增名为treeTableLayout的Layout

<view type="TABLE" name="treeTableLayout">
  <view type="SEARCH">
    <pack widget="fieldset">
      <element widget="search" slot="search" slotSupport="field"/>
    </pack>
  </view>
  <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
    <pack widget="row" wrap="false" style="height: 100%">
      <pack widget="col" mode="full" style="min-width: 257px; max-width: 257px">
        <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; padding: 24px 16px">
          <pack widget="col" style="height: 100%">
            <element widget="tree" slot="tree" style="height: 100%" />
          </pack>
        </pack>
      </pack>
      <pack widget="col" mode="full" style="min-width: 400px">
        <pack widget="row" style="height: 100%; flex-direction: column">
          <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
            <element widget="actionBar" slot="actionBar" slotSupport="action">
              <xslot name="actions" slotSupport="action" />
            </element>
          </pack>
          <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
            <element widget="table" slot="table" slotSupport="field">
              <xslot name="fields" slotSupport="field" />
              <element widget="rowAction" slot="rowActions" slotSupport="action" />
            </element>
          </pack>
        </pack>
      </pack>
    </pack>
  </pack>
</view>

图3-5-2-33 treeTableLayout的示例代码

Step4 自定义商品管理的Template

  1. 在views/demo_core/template路径下增加一个名为pet_item_table.xml文件

  2. 跟普通自定义template的区别在于

a. 配置layout属性为【treeTableLayout】跟前面layout定义一致

b. 配置了widget为tree的template节点，node可以配置多个，node配置说明如下

ⅰ. model，模型编码，必填。

ⅱ. label，数据标题，支持表达式，必填。

ⅲ. labelFields，数据标题中使用的字段列表，必填。

ⅳ. references，层级关联字段，第一层无效，其他层必填。模型编码#字段。

ⅴ. selfReferences，自关联字段，模型编码#字段。

ⅵ. search，点击搜索字段，必须使用主表格字段。模型编码#字段。

ⅶ. filter，层级过滤条件。模型编码#字段。

以上所有使用#拼接的属性配置，与model一致的情况下，均可以省略模型编码。

image.png

图3-5-2-34 pet_item_table.xml示例代码图

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="treeTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" data="dataStatus" label="数据状态">
      <options>
        <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/>
        <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
        <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
        <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
      </options>
    </field>
    <field priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="tree" style="height: 100%" widget="tree">
    <nodes>
<!--       <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="parent"/> -->
           <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="demo.PetItemCategory#parent"/>
     </nodes>
   </template>
 </view>

图3-5-2-35 pet_item_table.xml示例代码

Step5 为商品类目增加管理入口

修改DemoMenus类，增加类目管理菜单

image.png

图3-5-2-36 增加类目管理菜单

@UxMenu("类目管理")@UxRoute(PetItemCategory.MODEL_MODEL) class PetItemCategoryMenu{
}

图3-5-2-37 增加类目管理菜单代码

Step6 重启看效果

  1. 进入类目管理页面，新增商品类目数据

image.png

图3-5-2-38 示例效果

  1. 进入商品管理页面，找一行数据修改其类目字段，然后再点击左边树看过滤效果

image.png

图3-5-2-39 示例效果

第一个级联Layout

本节以“给商品管理页面以级联的方式增加商品类目过滤”为例，该例子中左边级联项由多个模型组成

Step1 增加商品类目类型模型

增加PetItemCategoryType模型集成CodeModel，新增两个字段定义name

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategoryType.MODEL_MODEL)
@Model(displayName = "宠物商品类目类型",summary="宠物商品类目类型",labelFields={"name"})
public class PetItemCategoryType extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategoryType";
    @Field(displayName = "类目类型名称",required = true)
    private String name;

}

图3-5-2-40 增加PetItemCategoryType模型集成CodeModel

Step2 修改商品类目

为商品类目模型PetItemCategory增加一个type字段m2o关联PetItemCategoryType

@Field(displayName = "类目类型")
@Field.many2one
private PetItemCategoryType type;

图3-5-2-41 为商品类目模型PetItemCategory增加一个type字段

Step3 新增名为cascaderTableLayout的Layout

在views/demo_core/layout路径下增加一个名为cascader_table_layout.xml文件

image.png

图3-5-2-42 新增名为cascaderTableLayout的Layout

<view type="TABLE" name="cascaderTableLayout">
<view type="SEARCH">
    <pack widget="fieldset">
        <element widget="search" slot="search" slotSupport="field"/>
    </pack>
</view>
<pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; overflow: auto">
    <pack widget="row" wrap="false" style="height: 100%">
        <pack widget="col" mode="full" style="flex: unset">
            <element widget="card-cascader" slot="cardCascader" style="height: 100%" />
        </pack>
        <pack widget="col" mode="full" style="min-width: 564px">
            <pack widget="row" style="height: 100%; flex-direction: column">
                <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
                    <element widget="actionBar" slot="actionBar" slotSupport="action">
                        <xslot name="actions" slotSupport="action" />
                    </element>
                </pack>
                <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
                    <element widget="table" slot="table" slotSupport="field">
                        <xslot name="fields" slotSupport="field" />
                        <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                    </element>
                </pack>
            </pack>
        </pack>
    </pack>
</pack>
</view>

图3-5-2-43 代码说明

Step4 修改商品管理的Template

  1. 修改在views/demo_core/template路径下名为pet_item_table.xml的文件

a. 配置layout属性为【cascaderTableLayout】跟前面layout定义一致

b. 配置了widget为card-cascader的template节点，node可以配置多个，node配置跟树表的配置一致

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="cascaderTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" data="dataStatus" label="数据状态">
      <options>
        <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/>
        <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
        <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
        <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
      </options>
    </field>
    <field priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="cardCascader" style="height: 100%" widget="card-cascader">
      <nodes>
          <node label="activeRecord.name" title="类目类型" labelFields="name" model="demo.PetItemCategoryType" />
          <node label="activeRecord.name" title="类目" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" references="demo.PetItemCategory#type" selfReferences="demo.PetItemCategory#parent"/>
      </nodes>
  </template>
</view>

图3-5-2-44 修改商品管理的Template

Step5 为商品类目类型增加管理入口

image.png

图3-5-2-45 为商品类目类型增加管理入口

@UxMenu("类目类型")@UxRoute(PetItemCategoryType.MODEL_MODEL) class PetItemCategoryTypeMenu{
}

图3-5-2-46 代码示例

Step6 重启看效果

  1. 进入类目类型管理页面，新增商品类目类型数据

image.png

图3-5-2-47 进入类目类型管理页面

  1. 进入类目管理页面，修改一级类目的类型

image.png

图3-5-2-48 修改一级类目的类型

  1. 进入商品管理页面，找一行数据修改其类目字段，然后再点击左边级联项看过滤效果

image.png

图3-5-2-49 进入商品管理页面

树表与级联的更多配置

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

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

Like (0)
史, 昂's avatar史, 昂数式管理员
0 0
Previous 2024年5月23日 am9:24
Next 2024年5月23日 am9:26

相关推荐

  • 数据大屏 Oinone 7天入门到精通

    数据大屏

    1. 业务场景 数据大屏是利用相应的系统来分析数据，通过图形的形式为企业提供客观、直接的数据分析结果，让业务人员和企业决策者直观面对数据背后的信息，实时监测企业数据，给予更直观的决策场景体验，助力企业数字化运营升级。 2. 操作流程 1）进入数据可视化，进入数据大屏tab，维护分组信息； 2）在二级分组名称后点击“+”【添加数据大屏】，对数据大屏进行设计； 3）创建完成后可以【编辑】数据大屏； 4）数据大屏完善后，可以点击【发布】数据大屏，则数据大屏此时可以被显示器引用播放； 5）如果数据大屏有更新，则可以点击【更新发布】； 6）如果数据大屏数据不再可以公开使用，则需要通过【隐藏】功能将数据大屏的引用权限收起，但不影响已被使用的数据大屏； 7）隐藏后可以【取消隐藏】，数据大屏恢复隐藏前的状态和功能，可以被引用 。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-数据大屏-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建数据大屏 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-数据大屏-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-数据大屏-删除分组 3）鼠标移动至需要删除的分组上，当分组下无报表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只有分组下没有数据大屏的分组才能直接删除成功 3.4 创建数据大屏 1）操作流程：选择二级分组-创建数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-创建数据大屏 3）鼠标移动至需要创建数据大屏的二级分组上，出现「+」，点击图标后=需要填写数据大屏标题 a数据大屏标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）输入标题后进入设计页面 3.5 编辑数据大屏 1）操作流程：选择数据大屏-编辑数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-编辑数据大屏 3）只能编辑未发布或者已发布但没有被隐藏的数据大屏，且存在三种编辑情况 a. 第一种：点击数据大屏标题后的编辑图标，仅能编辑数据大屏标题； b. 第二种：点击数据大屏中的数据大屏标题、备注后的编辑图标，可以直接编辑数据大屏标题； c. 第三种：点击【编辑】按钮，进入数据大屏设计页面，带出已有的组件内容，编辑时的规则与创建时一致，编辑后可以点击保存进行更新，如果未保存直接返回，则编辑无效； 4）编辑后实时生效，数据大屏信息保持展示最新效果 3.6 删除数据大屏 1）操作流程：选择数据大屏-删除数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-删除数据大屏 3）未发布或者已发布但没有被隐藏的数据大屏，并且没被引用，才展示数据大屏菜单名称后的删除图标 4）删除后数据大屏消失 3.7 复制 1）操作流程：选择数据大屏-复制数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-复制数据大屏 3）点击【复制】按钮，复制成功，名称为copy of 原数据大屏标题，展示在原数据大屏分组的最后一个 3.8 发布 1）操作流程：选择数据大屏-发布数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-发布 3）选择单个未发布且没有被隐藏的数据大屏，点击【发布】按钮，数据大屏状态变为已发布，展示最近发布时间； 4）如果数据大屏发布后有更新内容，会展示的更新类型：更新数据大屏信息/更新数据大屏内容 3.9 查看最近一次发布的版本 1）操作流程：选择数据大屏-查看最近一次发布的版本 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3）当数据大屏发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版本 3.10 更新发布 1）操作流程：选择数据大屏-更新发布数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3）选择单个已发布且没有被隐藏的数据大屏，并且该数据大屏在上次发布后有所更新，可以点击【更新发布】按钮，将最新的数据大屏内容发布至业务系统，业务系统引用的数据大屏为最新内容； 4）如果更新了内容，但未点击更新发布，则展示的仍是上次发布的数据大屏 3.11 隐藏 1）操作流程：选择数据大屏-隐藏数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-隐藏数据大屏 3）数据大屏默认不隐藏，点击数据大屏左侧的是否隐藏可以切换 a. 未发布的数据大屏，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的数据大屏，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； 4）隐藏后的数据大屏不可以被用于展示在其他大屏上，但不影响已经被引用的数据 3.12 取消隐藏 1）操作流程：选择数据大屏-取消隐藏数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-取消隐藏数据大屏 3）隐藏后的数据大屏可以取消隐藏，切换是否隐藏=否，取消隐藏后，数据大屏恢复隐藏前的状态和功能，可以被引用 3.13 查看引用 1）流程：选择图表-查看被哪些报表/数据大屏/页面引用 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-查看引用 3）选择具体的数据大屏，查看当前数据大屏被引用的所有信息 3.14 不允许别人编辑 1）流程：选择数据大屏-不允许别人编辑 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人编辑 3）选择自己创建的数据大屏，对数据大屏是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑数据大屏 3.15 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人引用 3）选择自己创建的数据大屏，对数据大屏是否允许他人引用进行设置；如果设置为不允许，则其他人无法选择到 3.16 导出图片 1）操作流程：选择数据大屏-导出图片 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-导出图片 3）选择数据大屏后，点击【导出图片】按钮可以将当前数据大屏导出为图片 3.17 导出EXCEL 1）操作流程：选择数据大屏-导出EXCEL 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-数据大屏导出EXCEL 3）选择数据大屏后，点击【导出EXCEL】按钮可以将当前数据大屏包含的图表导出为EXCEL 4. 数据大屏设计页面 4.1 缩放自适应 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）进入页面后，默认按照当前屏幕展示最适合的数据大屏尺寸，可以通过+、-进行自定义缩放，每次缩放10% 4.2 全屏 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）进入页面后，设置完成，可以【全屏】查看效果，按esc退出全屏 4.3 保存 1) 流程：创建数据大屏-进入数据大屏设计页面 2) 操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3) 进入页面后，设置完成后进行保存，数据大屏保持最新内容 4.4 添加、编辑、删除组件 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）可以添加图表、文本、通用标题、倒计时、时间器、图片、轮播图、视频、边框等组件；图表组件中，一个图表只能添加一次，其他组件不限制数量； 4）所有组件添加后均可进行设置样式，有编辑权限的图表组件可以通过【编辑】图标直接进入图表设计页面； 5）添加后均可删除，删除后组件不再展示在数据大屏画布中，可以重新添加 4.5 数据大屏设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）设置数据大屏时可以设置屏幕的宽高、背景颜色、背景图片、主题 a. 宽高：根据数据大屏需要投放的屏幕大小进行设置； b. 背景颜色：当数据大屏无图片背景时可以调整背景颜色； c. 背景图片：支持为数据大屏上传一张图片作为背景； d. 主题模版：可任选其一，需要先选定模版后再进行设计，不然设计完后再修改模版，会清空已选组件。 4.6 图表组件设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）拖入图表组件，可与边框合为一体，可以设置图表的显示内容、边框信息、动画效果、刷新频率 a. 图表显示内容：展示标题、副标题、描述、标签、图例，一屏展示条数，原图表有的内容在设置展示后展示在数据大屏，原图表没有的内容设置展示后不生效； b. 边框信息：包括边框样式、背景颜色、边框线条颜色、展示边框标题、边框标题内容、边框标题颜色、边框标题字体大小； c. 动画效果：可以设置自动轮播，为是时可以设置结束后停顿时长、速度、切换形式； d. 刷新频率：设置图表获取数据的频率，自动刷新、刷新频率。 4.7 文本组件设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）拖入文本组件后，可以输入多行文本，可以设置内容、对齐方式、字体大小、字体加粗、字体颜色、背景颜色、边框样式、文字滚动、结束后停顿、速度 4）当文字滚动开启时，文字会按照一行展示，通过设置结束后停顿和速度来控制文字滚动的效果 4.8 通用标题组件设置…

    史, 昂's avatar 史, 昂
    2024年6月20日
    1.8K00

  • 4.2.1 组件之生命周期

    组件生命周期的意义所在：比如动态创建了「视图、字段」，等它们初始化完成或者发生了修改后要执行业务逻辑，这个时候只能去自定义当前字段或者视图，体验极差，平台应该提供一些列的生命周期，允许其他人调用生命周期的api去执行对应的逻辑。 一、实现原理 图4-2-1-1 实现原理 当用户通过内部API去监听某个生命周期的时候，内部会动态的去创建该生命周期，每个生命周期都有「唯一标识」，内部会根据「唯一标识」去创建对应的「Effect」，Effect会根据生命周期的「唯一标识」实例化一个「lifeCycle」，「lifeCycle」创建完成后，会被存放到「Heart」中，「Heart」是整个生命周期的心脏，当心脏每次跳动的时候（生命周期被监听触发）都会触发对应的生命周期 二、生命周期API API 描述 返回值 View LifeCycle onViewBeforeCreated 视图创建前 ViewWidget onViewCreated 视图创建后 ViewWidget onViewBeforeMount 视图挂载前 ViewWidget onViewMounted 视图挂载后 ViewWidget onViewBeforeUpdate 视图数据发生修改前 ViewWidget onViewUpdated 视图数据修改后 ViewWidget onViewBeforeUnmount 视图销毁前 ViewWidget onViewUnmounted 视图销毁 ViewWidget onViewSubmit 提交数据 ViewWidget onViewSubmitStart 数据开始提交 ViewWidget onViewSubmitSuccess 数据提交成功 ViewWidget onViewSubmitFailed 数据提交失败 ViewWidget onViewSubmitEnd 数据提交结束 ViewWidget onViewValidateStart 视图字段校验 ViewWidget onViewValidateSuccess 校验成功 ViewWidget onViewValidateFailed 校验失败 ViewWidget onViewValidateEnd 校验结束 ViewWidget Field LifeCycle onFieldBeforeCreated 字段创建前 FieldWidget onFieldCreated 字段创建后 FieldWidget onFieldBeforeMount 字段挂载前 FieldWidget onFieldMounted 字段挂载后 FieldWidget onFieldBeforeUpdate 字段数据发生修改前 FieldWidget onFieldUpdated 字段数据修改后 FieldWidget onFieldBeforeUnmount 字段销毁前 FieldWidget onFieldUnmounted 字段销毁 FieldWidget onFieldFocus 字段聚焦 FieldWidget onFieldChange 字段的值发生了变化 FieldWidget onFieldBlur 字段失焦 FieldWidget onFieldValidateStart 字段开始校验 FieldWidget onFieldValidateSuccess 校验成功 FieldWidget onFieldValidateFailed 校验失败 FieldWidget onFieldValidateEnd 校验结束 FieldWidget 表4-2-1-1 生命周期API 上面列出的分别是「视图、字段」的生命周期，目前Action的生命周期还没有，后续再补充。 三、第一个View组件生命周期的监听（举例） Step1 新建registryLifeCycle.ts 新建registryLifeCycle.ts，监听宠物达人的列表页。’宠物达人table_demo_core’为视图名，您需要找后端配合 import { onViewCreated } from '@kunlun/dependencies' function registryLifeCycle(){ onViewCreated('宠物达人table_demo_core', (viewWidget) => { console.log('宠物达人table_demo_core'); console.log(viewWidget); }); } export {registryLifeCycle} 图4-2-1-2 新建registryLifeCycle.ts Step2 修改main.ts 全局注册lifeCycle import { registryLifeCycle } from './registryLifeCycle'; registryLifeCycle(); 图4-2-1-3 修改main.ts Step3 看效果 图4-2-1-4 示例效果 四、第一个Filed组件生命周期的监听（举例） Step1 修改registryLifeCycle.ts 通过onFieldValueChange增加宠物达人搜索视图的name（达人）字段的值变化进行监听。 宠物达人search:name 代表 视图名:字段名 import { onViewCreated , onFieldValueChange} from '@kunlun/dependencies' function registryLifeCycle(){ onViewCreated('宠物达人table_demo_core', (viewWidget) => { console.log('宠物达人table_demo_core'); console.log(viewWidget); }); onFieldValueChange('宠物达人search:name', (filedWidget) => { console.log('宠物达人search:name');…

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.4K00
  • 工作台 Oinone 7天入门到精通

    工作台

    1. 工作台介绍 工作台用于呈现集成相关的统计数据，包括： 连接器总数：集成资源连接器总数； 数据流程总数：定义的数据连接流程总数； 任务总执行数：任务总执行数（统计流程实例数量）； 总异常任务数：总执行异常的任务数； 开放接口数：合计开放接口数量（包含所有状态）。 2. 快捷连接 快捷连接是通过快捷筛选所需要链接的集成资源（应用/Oinone平台应用/数据库等），进入【数据流程创建页】，同时展示平台提供的数据流程模版，点击开始连接可使用数据流程模型创建数据流程。 开始连接后进入流程创建页：

    史, 昂's avatar 史, 昂
    2024年6月20日
    2.6K00
  • 3.5.3 Action的类型 Oinone 7天入门到精通

    3.5.3 Action的类型

    各类动作我们都碰到过，但都没有展开讲过。这篇文章我们来系统介绍下oinone涉及到的所有Action类型。 一、动作类型 服务器动作ServerAction 类似于Spring MVC的控制器Controller，通过模型编码和动作名称路由，定义存储模型或代理模型将为该模型自动生成动作名称为consturct，queryOne，queryPage，create，update，delete，deleteWithFieldBatch的服务器动作。定义传输模型将为该模型自动生成动作名称为consturct的服务器动作 窗口动作ViewAction 站内跳转，通过模型编码和动作名称路由。系统将为存储模型和代理模型自动生成动作名称为redirectDetailPage的跳转详情页窗口动作，动作名称为redirectListPage的跳转列表页窗口动作，动作名称为redirectCreatePage的跳转新增页窗口动作，动作名称为redirectUpdatePage的跳转更新页窗口动作。 跳转动作UrlAction 外链跳转 客户端动作ClientAction 调用客户端函数 二、默认动作 如果在UI层级，有开放新增语义函数，则会默认生成新增的窗口动作ViewAction，跳转到新增页面 如果在UI层级，有开放更新语义函数，则会默认生成修改的窗口动作ViewAction，跳转到更新页面 如果在UI层级，有开放删除语义函数，则会默认生成删除的客户端动作ClientAction，弹出删除确认对话框 三、第一个服务器动作ServerAction 回顾第一个ServerAction 第一个ServerAction是在3.3.2【模型的类型】一文中的“代理模型”部分出现的，再来看下当时的定义代码 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-1 回顾第一个ServerAction @Action注解将创建服务器动作，并@Model.model绑定 自定义ServerAction请勿使用get、set、unset开头命名方法或toString命名方法。 ServerAction之校验(举例) Step1 为动作配置校验表达式 使用@Validation注解为PetShopProxyAction的dataStatusEnable服务端动作进行校验表达式配置 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长，不能超过128位"), }) @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-2 为动作配置校验表达式 注： ruleWithTips可以声明多个校验规则及错误提示； IS_BLANK和LEN为内置文本函数，更多内置函数详见4.1.12【函数之内置函数与表达式】一文； 当内置函数不满足时参考4.1.13【Action之校验】一文。 Step2 重启看效果 在商店管理页面点击【启用】得到了预期返回错误信息，显示"编码为必填项" 图3-5-3-3 在商店管理页面点击启用得到了预期返回错误信息 ServerAction之前端展示规则(举例) 既然后端对ServerAction发起提交做了校验，那能不能在前端就不展示呢？当然可以，我们现在就来试下。 Step1 配置PetShopProxyAction的dataStatusEnable的前端出现规则 用注解@Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")来表示，注意这里配对invisible是给前端识别的，所以写法上跟后端的校验有些不一样，但如内置函数IS_BLANK这些是前后端一致实现的，activeRecord在前端用于表示当前记录。 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.name) < 128", error = "名称过长，不能超过128位"), }) @Action(displayName = "启用") @Action.Advanced(invisible="!(activeRecord.code !== undefined…

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.8K00
  • 3.3.1 构建第一个Model Oinone 7天入门到精通

    3.3.1 构建第一个Model

    定义模型，并配上相应的菜单或配置模块的homepage为该模型，模块就具备了可访问的该模型对应的列表页、新增页、修改页、删除记录和导入导出功能。 都说oinone是以model为驱动，对于模型的理解，希望通过本节跟给大家带来一个初步的认识。 一、构建宠物店铺模型 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; import java.sql.Time; @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺") public class PetShop extends IdModel { public static final String MODEL_MODEL="demo.PetShop"; @Field(displayName = "店铺名称",required = true) private String shopName; @Field(displayName = "开店时间",required = true) private Time openTime; @Field(displayName = "闭店时间",required = true) private Time closeTime; } 图3-3-1-1 构建宠物店铺模型 配置注解 模型类必需使用@Model注解来标识当前类为模型类。 可以使用@Model.model、@Fun注解模型的模型编码（也表示命名空间），先取@Model.model注解值，若为空则取@Fun注解值，若皆为空则取全限定类名。 使用@Model.model注解配置模型编码，模型编码唯一标识一个模型。 请勿使用Query和Mutation作为模型编码和技术名称的结尾。 上方示例使用Model注解和Field注解来定义一个实体模型。displayName属性最终会作为label展现在前端界面上。 更多Model的详细元数据描述介绍参见4.1.6【模型元数据详解】一文 模型命名规范 模型属性 默认取值规范 命名规则规范 name 默认取model.model的点分割最后一位 1仅支持数字、字母2必须以字母开头3长度必须小于等于128个字符 module 无默认值开发人员定义规范示例：{项目名称}_{模块功能示意名称} 1仅支持数字、大写或小写字母、下划线2必须以字母开头3不能以下划线结尾4长度必须小于等于128个字符 model 默认使用全类名，取lname的值开发人员定义规范示例：{项目名称}.{模块功能示意名称}.{简单类名} 1仅支持数字、字母、点2必须以字母开头3不能以点结尾4长度必须小于等于128个字符 display_name 空字符串 1长度必须小于等于128个字符 lname 符合java命名规范，真实的java全类名，无法指定，要符合model的约束，即为包名+类名 lname是不能定义的，为全类名：包名+类名，和model一样的校验规则：包名和类名的校验 summary 默认使用displayName属性 1不能使用分号2长度必须小于等于128个字符 descripition NULL，注解无法定义 1长度必须小于等于65535个字符 table 默认使用name字段生成表名时，table字段的命名规则约束同样生效（大小驼峰命名转为下划线分割的表名称） 1仅支持数字、字母、下划线2长度必须小于等于128个字符（此限制为系统存储约束，与数据库本身无关） type java属性类型与数据库存储类型可执行转换即可 ModelTypeEnum枚举值 表3-3-1-1 模型命名规范 字段命名规范 字段属性 默认取值规范 命名规则规范 name 默认使用java属性名 1仅支持数字、字母2必须以小写字母开头3长度必须小于等于128个字符 field 默认使用java属性名 与name使用相同命名规则约束 display_name 默认使用name属性 1长度必须小于等于128个字符 lname 使用java属性名，符合java命名规范，真实的属性名称，无法指定 与name使用相同命名规则约束 column 列名为属性名的小驼峰转下划线格式 1仅支持数字、字母、下划线2长度必须小于等于128个字符（此限制为系统存储约束，与数据库本身无关） summary 默认使用displayName属性 1不能使用分号2长度必须小于等于500个字符 表3-3-1-2 字段命名规范 我们重启Demo应用以后，打开Insomnia刷新GraphQL的schema，就可以看到PetShop默认对应的读写服务了 图3-3-1-2 PetShopQuery默认读写服务 图3-3-1-3 PetShopMutatiom默认读写服务 配置模块的主页为宠物商店的列表页 为了方便大家对模型有个更加直观的了解，接下来我们通过前端交互来感受下。 在3.2.2【启动前端工程】一文中，在模块下拉列表中“oinoneDemo工程”还是不能点击的。是因为该模块没有配置主页，我们现在把主页设置为宠物商店的列表页，只需要在DemoModule这个类上增加一个注解@UxHomepage(@UxRoute(PetShop.MODEL_MODEL))，关于该注解的更多说明请查看4.1.4一文中的【UxHomepage注解详解】部分 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxHomepage; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(@UxRoute(PetShop.MODEL_MODEL)) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public…

    史, 昂's avatar 史, 昂
    2024年5月23日
    2.1K00

Leave a Reply

Please Login to Comment