3.5.6.4 动作的配置

在3.5.3【Action的类型】一文中,我们介绍Action的几种类型,以及组合动作。

通用配置

配置项 可选值 默认值 作用
name 动作名称
label 显示名称
icon 图标
type primary defaultlink primary 按钮类型样式,支持主要样式、次要样式以及链接样式。
bizStyle defaultsuccesswarningdangerinfo default 按钮业务样式,支持成功(green)、警告(yellow)、危险(red)、信息(grey)四种样式。
invisible truefalse condition false 展示规则,有简单的true/false显隐,也支持复杂的表达式
disabled truefalse condition 根据动作上下文类型进行自动推断 是否禁用自动推断规则:当上下文类型为【单行】时,相当于使用表达式LIST_COUNT(context.activeRecords) != 1当上下文类型为【多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) <= 1当上下文类型为【单行或多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) == 0
disabledTitle string 根据动作上下文类型进行自动推断 禁用悬浮提示

表3-5-6-12 动作通用配置

二次确认配置

二次确认框默认支持两种模式,对话框和气泡框;

对话框

image.png

图3-5-6-51 对话框提示

气泡框

image.png

图3-5-6-52 气泡框警告

配置项

配置项 可选值 默认值 作用 备注
confirm string 二次确认提示文字 配置后开启二次确认
confirmType POPPER(气泡提示框) MODAL(对话框) POPPER 确认框类型
confirmPosition TM(按钮上方) BM(按钮下方) LM(按钮左侧) RM(按钮右侧) BM 确认框位置 气泡框该配置生效
enterText 确定 确定按钮文字
cancelText 取消 取消按钮文字

表3-5-6-13 配置项

弹出层动作配置(窗口动作ViewAction)

目前平台对于弹出层支持了两种展示形式。弹窗(modal/dialog)和抽屉(drawer)

支持两种配置方式【内嵌视图配置】和【引用已有页面】,内嵌视图配置优先于引用已有页面。

内嵌视图配置

该配置对于弹窗和抽屉均适用。

<action name="窗口动作名称" label="创建">
    <view model="模型编码" type="form">
        <template slot="form" widget="form">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </template>
        <template slot="footer">
            <action name="$$internal_DialogCancel" label="关闭" type="default" />
            <action name="create" label="确定" />
        </template>
    </view>
</action>

图3-5-6-53 内嵌视图配置

引用已有页面配置

该配置对于弹窗和抽屉均适用。

<view model="模型编码" type="form">
    <template slot="form" widget="form">
        <field data="id" invisible="true" />
        <field data="code" label="编码" widget="Input" />
        <field data="name" label="名称" widget="Input" />
    </template>
    <template slot="footer">
        <action name="$$internal_DialogCancel" label="关闭" type="default" />
        <action name="create" label="确定" />
    </template>
</view>

图3-5-6-54 引用已有页面示例

<action name="窗口动作名称" label="创建" resViewName="$viewName$" />

图3-5-6-55 引用已有页面

弹窗

当窗口动作的路由方式(target)为dialog时,内嵌视图/引用页面将以弹窗形式展示在页面上。

配置项

配置项 可选值 默认值 作用
title string 动作名称 标题名称
width string/number/enumsmall(560px)medium(890px)large(1200px) medium 宽度

表3-5-6-14 弹窗配置项

示例:配置标题名称为【自定义创建弹窗】,宽度为70%的弹窗

<!-- 内嵌视图配置 -->
<action name="窗口动作名称" label="创建">
    <template slot="default" title="自定义创建弹窗" width="70%">
        <view model="模型编码" type="form">
            <template slot="form" widget="form">
                <field data="id" invisible="true" />
                <field data="code" label="编码" widget="Input" />
                <field data="name" label="名称" widget="Input" />
            </template>
            <template slot="footer">
                <action actionType="client" name="$$internal_DialogCancel" label="关闭" type="default" />
                <action name="create" label="确定" />
            </template>
        </view>
    </template>
</action>

<!-- 引用已有页面配置 -->
<action name="窗口动作名称" label="创建" resViewName="引用页面名称">
    <template slot="default" title="自定义创建弹窗" width="70%" />
</action>

图3-5-6-56 内嵌视图配置

抽屉

当窗口动作的路由方式(target)为drawer时,内嵌视图/引用页面将以弹窗形式展示在页面上。

配置项

配置项 可选值 默认值 作用 备注
title string 动作名称 标题名称
placement top(上)right(右)bottom(下)left(左) right 抽屉打开位置
width string/number/enumsmall(20%)medium(40%)large(80%) small 宽度 打开位置为left和right时生效
height string/number/enumsmall(20%)medium(40%)large(80%) small 宽度 打开位置为top和bottom时生效

表3-5-6-15 抽屉配置项

示例:配置从下方打开,高度为large的抽屉

<!-- 内嵌视图配置 -->
<action name="窗口动作名称" label="创建">
    <template slot="default" placement="bottom" height="large">
        <view model="模型编码" type="form">
            <template slot="form" widget="form">
                <field data="id" invisible="true" />
                <field data="code" label="编码" widget="Input" />
                <field data="name" label="名称" widget="Input" />
            </template>
            <template slot="footer">
                <action actionType="client" name="$$internal_DialogCancel" label="关闭" type="default" />
                <action name="create" label="确定" />
            </template>
        </view>
    </template>
</action>

<!-- 引用已有页面配置 -->
<action name="窗口动作名称" label="创建" resViewName="引用页面名称">
    <template slot="default" placement="bottom" height="large" />
</action>

图3-5-6-57 配置从下方打开,高度为large的抽屉

组合动作配置

具体例子详见3.5.3【Aciton的类型】一文中介绍的“前端动作之组合动作”部分。

服务器动作串行

<action actionType="composition" label="组合动作">
    <action name="服务器动作1" />
    <action name="服务器动作2" />
</action>

图3-5-6-58 服务器动作串行

服务器动作与跳转动作组合执行

<action actionType="composition" label="组合动作">
    <action name="服务器动作1" />
    <action name="跳转动作1" />
</action>

图3-5-6-59 服务器动作与跳转动作组合执行

后端动作与前端动作组合

<action actionType="composition" label="组合动作">
    // 校验表单
    <action actionType="client" name="$$internal_ValidateForm" />
    <action name="服务器动作" />
    // 返回上一级页面
    <action actionType="client" name="$$internal_GotoListTableRouter" />
</action>

图3-5-6-60 后端动作与前端动作组合

展示规则

在介绍3.5.3【Action的类型】一文中的“ServerAction之前端展示规则(举例)”部分,用到invisible这个属性定义。这个在xml中也可以配置,而且前端的优先级高于后端

可以通过 invisible 属性配置一个表达式来使动作根据数据记录条件显示、隐藏。

如果 invisible 所引用的动作的 bindingType 是个列表型视图,则要用 context.activeRecords 获取当前选中记录,如果是个对象型视图或列表型视图的行内显示则需用 context.activeRecord:

<!-- 列表型视图 -->
<action name="a" invisible="context.activeRecords && context.activeRecords[0].a === true" />
<!-- 对象型视图或列表型视图的行内显示 -->
<action name="b" invisible="context.activeRecord && context.activeRecord.b === true" />

图3-5-6-61 列表型视图

举例

Table视图动作配置

示例1:不允许删除编码为“5”的数据

PS:当配置disabled时,自动推断规则将会失效,需要按需配置。下方的配置保留了【单行或多行】的自动推断规则。

<view model="模型编码" type="table">
    <template slot="actionBar" widget="actionBar">
        <action name="delete" label="删除" disabled="LIST_COUNT(context.activeRecords) == 0 || LIST_CONTAINS(LIST_FIELD_VALUES(context.activeRecords, '', 'code'), '5')" refreshData="true" />
    </template>
    <template slot="fields">
        <field data="id" invisible="true" />
        <field data="code" label="编码" widget="Input" />
        <field data="name" label="名称" widget="Input" />
    </template>
</view>

图3-5-6-62 Table视图动作配置

结果展示

未选中时

image.png

图3-5-6-63 未选中时

选中编码不是“5”的数据

image.png

图3-5-6-64 选中编码不是“5”的数据

选中编码包含“5”的数据

image.png

图3-5-6-65 选中编码包含“5”的数据

Form视图动作配置

示例:创建和编辑使用同一个视图配置

<view model="模型编码" type="form">
    <template slot="actionBar" widget="actionBar">
        <action actionType="client" name="$$internal_GotoListTableRouter" label="返回" type="default" />
        <action name="create" label="创建" invisible="!IS_NULL(activeRecord.id)" validateForm="true" goBack="true" />
        <action name="update" label="更新" invisible="IS_NULL(activeRecord.id)" validateForm="true" goBack="true" />
    </template>
    <template slot="fields">
        <pack widget="fieldset" title="基础信息">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </pack>
    </template>
</view>

<!-- 使用组合动作实现validateForm和goBack属性 -->
<view model="模型编码" type="form">
    <template slot="actionBar" widget="actionBar">
        <action actionType="client" name="$$internal_GotoListTableRouter" label="返回" type="default" />
        <action actionType="composition" label="创建" invisible="!IS_NULL(activeRecord.id)">
            <action actionType="client" name="$$internal_ValidateForm" />
            <action name="create" />
            <action actionType="client" name="$$internal_GotoListTableRouter" />
        </action>
        <action actionType="composition" label="更新" invisible="IS_NULL(activeRecord.id)">
            <action actionType="client" name="$$internal_ValidateForm" />
            <action name="update" />
            <action actionType="client" name="$$internal_GotoListTableRouter" />
        </action>
    </template>
    <template slot="fields">
        <pack widget="fieldset" title="基础信息">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </pack>
    </template>
</view>

图3-5-6-66 创建和编辑使用同一个视图配置

结果展示

使用【上下文无关】的跳转动作进入该视图时

image.png

图3-5-6-67 使用上下文无关的跳转动作进入该视图时

使用【单行】的跳转动作进入该视图时

image.png

图3-5-6-68 使用单行的跳转动作进入该视图时

实战

Step1 修改宠物商品代理表格视图的Template

启用和禁用服务器动作根据状态分别显示其中一个

<view name="tableView1" type="TABLE" cols="2" enableSequence="false" model ='demo.PetShopProxy' priority="1" >
    <template slot="actions" autoFill="true"/>
    <template slot="rowActions">
        <action name="dataStatusEnable" label="启用" invisible="activeRecord.dataStatus == 'ENABLED'" />
        <action name="dataStatusDisable" label="禁用" invisible="activeRecord.dataStatus == 'DISABLED'" />
    </template>
    <template slot="fields">
        <field priority="1" data="income" label="收入"/>
        <field priority="101" data="code" label="店铺编码"/>
        <field priority="102" data="relatedShopName" label="引用字段shopName"/>
        <field priority="102" data="codeTwo" label="店铺编码2"/>
        <field priority="103" data="createrId" label="引用创建者Id"/>
        <field priority="110" data="description" label="描述"/>
        <field priority="111" data="description1" label="描述"/>
        <field priority="112" data="descHtml" label="html描述"/>
        <field priority="113" data="anniversary" label="店庆"/>
        <field priority="114" data="publishYear" label="开店年份"/>
        <!-- 表格其他字段-->
    </template>
</view>

图3-5-6-69 修改宠物商品代理表格视图的Template

Step2 重启看效果

【已启用】状态时只显示【禁用】按钮

image.png

图3-5-6-70 已启用状态时只显示禁用按钮

【已禁用】状态时只显示【启用】按钮

image.png

图3-5-6-71 已禁用状态时只显示启用按钮

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

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

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

相关推荐

  • 4.1.24 框架之分库分表

    随着数据库技术的发展如分区设计、分布式数据库等,业务层的分库分表的技术终将成老一辈程序员的回忆,谈笑间扯扯蛋既羡慕又自吹地说到“现在的研发真简单,连分库分表都不需要考虑了”。竟然这样为什么要写这篇文章呢?因为现今的数据库虽能解决大部分场景的数据量问题,但涉及核心业务数据真到过亿数据后性能加速降低,能给的方案都还有一定的局限性,或者说性价比不高。相对性价比比较高的分库分表,也会是现阶段一种不错的补充。言归正传oinone的分库分表方案是基于Sharding-JDBC的整合方案,所以大家得先具备一点Sharding-JDBC的知识。 一、分表(举例) 做分库分表前,大家要有一个明确注意的点就是分表字段的选择,它是非常重要的,与业务场景非常相关。在明确了分库分表字段以后,甚至在功能上都要做一些妥协。比如分库分表字段在查询管理中做为查询条件是必须带上的,不然效率只会更低。 Step1 新建ShardingModel模型 ShardingModel模型是用于分表测试的模型,我们选定userId作为分表字段。分表字段不允许更新,所以这里更新策略设置类永不更新,并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.FieldStrategyEnum; @Model.model(ShardingModel.MODEL_MODEL) @Model(displayName = "分表模型",summary="分表模型",labelFields ={"name"} ) public class ShardingModel extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.ShardingModel"; @Field(displayName = "名称") private String name; @Field(displayName = "用户id",summary = "分表字段",immutable=true/* 不可修改 **/) @UxForm.FieldWidget(@UxWidget(readonly = "scene == 'redirectUpdatePage'"/* 在编辑页面只读 **/ )) @Field.Advanced(updateStrategy = FieldStrategyEnum.NEVER) private Long userId; } 图4-1-24-1 新建ShardingModel模型 Step2 配置分表策略 配置ShardingModel模型走分库分表的数据源pamirsSharding 为pamirsSharding配置数据源以及sharding规则 a. pamirs.sharding.define用于oinone的数据库表创建用 b. pamirs.sharding.rule用于分表规则配置 pamirs: load: sessionMode: true framework: system: system-ds-key: base system-models: – base.WorkerNode data: default-ds-key: pamirs ds-map: base: base modelDsMap: "[demo.ShardingModel]": pamirsSharding #配置模型对应的库 图4-1-24-2 指定模型对应数据源 pamirs: sharding: define: data-sources: ds: pamirs pamirsSharding: pamirs #申明pamirsSharding库对应的pamirs数据源 models: "[trigger.PamirsSchedule]": tables: 0..13 "[demo.ShardingModel]": tables: 0..7 table-separator: _ rule: pamirsSharding: #配置pamirsSharding库的分库分表规则 actual-ds: – pamirs #申明pamirsSharding库对应的pamirs数据源 sharding-rules: # Configure sharding rule ,以下配置跟sharding-jdbc配置一致 – tables: demo_core_sharding_model: #demo_core_sharding_model表规则配置 actualDataNodes: pamirs.demo_core_sharding_model_${0..7} tableStrategy: standard: shardingColumn: user_id shardingAlgorithmName: table_inline shardingAlgorithms: table_inline: type: INLINE props: algorithm-expression: demo_core_sharding_model_${(Long.valueOf(user_id) % 8)} props: sql.show: true 图4-1-24-3 分库分表规则配置 Step3 配置测试入口 修改DemoMenus类增加一行代码,为测试提供入口 @UxMenu("分表模型")@UxRoute(ShardingModel.MODEL_MODEL) class ShardingModelMenu{} 图4-1-24-4 配置测试入口 Step4 重启看效果 自行尝试增删改查 观察数据库表与数据分布 图4-1-24-5 自行尝试增删改查 图4-1-24-6 观察数据库表与数据分布 二、分库分表(举例) Step1 新建ShardingModel2模型 ShardingModel2模型是用于分库分表测试的模型,我们选定userId作为分表字段。分库分表字段不允许更新,所以这里更新策略设置类永不更新,并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import…

    2024年5月23日
    1.4K00
  • 蒋江伟

    企业数字化转型经过多年演进,其趋势价值已经毋庸置疑。近些年来,随着流媒体平台的崛起,对企业的营销方式、渠道建设方式甚至供应链都带来了新的挑战,我们可以清晰地感觉到世界每时每刻都在发生变化。在未来的企业竞争中,谁数字化走在前沿,谁就更能掌握主动权。数字化是为了满足业务的持续创新,只有持续创新才能更好的迎接未知变化。而过去很多企业的技术路径是一个采购型的发展路径,买来的ERP和CRM,升级都是各自管各自的,有一天推出一个新概念或者业务发生新需求,又去采购另外一家企业的ERP和CRM,整个替换掉了,烟囱式地迭代演进模式。企业不怕重复建设,怕的是不断重复建设,企业不怕系统延期上线,怕的是错过业务发展的机会窗口。 本书主要介绍了一种全新的数字化构建理念和技术落地方式——用低代码的方式一站式支撑企业的商业场景并能满足商业化持续创新,和其他低代码不同的是:既结合了中台架构,又兼顾了传统企业的IT发展水平,更符合企业数字化发展需求,持续保持企业竞争力,对各行业在做数字化选型的时候有很大的帮助。 很高兴看到阿里校友陈鹏程(本书作者)在这条路上发光发热,也把此书推荐给IT从业者、程序员以及爱好计算机应用软件的所有同学,希望对大家学习新型、更高效的系统构建方式有所启发。 阿里巴巴高级研究员 蒋江伟(小邪)

    Oinone 7天入门到精通 2024年5月23日
    2.7K00
  • 1.2 Oinone的致敬

    占在巨人的肩膀上,天地孤影任我行 1.2.1 数字化时代Oinone接棒Odoo 在数字化时代,中国在互联网化的应用、技术的领先毋庸置疑,但在软件的工程化、产品化输出方面仍有许多改进的空间。这时,我了解到了Odoo——一个国外非常优秀的开源ERP厂商,全球ERP用户数量排名第一,百级别员工服务全球客户。Odoo的工程化能力和商业模式深深吸引了我,它是软件行业典型的产品制胜和长期主义者的胜利之一。 在2019年,也就是数式刚成立的时候,我们跟很多投资人聊起公司的对标是谁,我不是要成为数字化时代的SAP,而是要成为Odoo。然而,当时大部分国内投资人并不了解Odoo,尽管它已经是全球最大的ERP厂商之一,因为当时Odoo还没有明确的估值。直到2021年7月份获得Summit Partners的2.15亿美元投资后,Odoo才正式成为IT独角兽企业。 Odoo对我们提供了极大的启示,因此我们致敬Odoo,同样选择开源,每年对产品进行升级发布。如今,Odoo15已经发布,而Oinone也已推出第三版,恰好相隔12年,这是一个时代的接棒,从信息化升迁至数字化。 1.2.2Oinone与Odoo的不同之处 技术方面的不同 在技术上,Oinone和Odoo有相同之处,也有不同之处。它们都基于元数据驱动的软件系统,但是它们在如何让元数据运作的机制上存在巨大差异。Odoo是企业管理场景的单体应用,而Oinone则致力于企业商业场景的云原生应用。因此,它们在技术栈的选择、前后端协议设计、架构设计等方面存在差异。 场景方面的不同 在场景上,Oinone和Odoo呈现许多差异。相对于SAP这些老牌ERP厂商,Odoo算是西方在企业级软件领域的后起之秀,其软件构建方式、开源模式和管理理念在国外取得了非凡的成就。然而,在国内,Odoo并没有那么成功或者并没有那么知名。国内做Odoo的伙伴普遍认为,Odoo与中国用户的交互风格不符,收费模式设计以及外汇管制使商业活动受到限制,本地化服务不到位,国内生态没有形成合力,伙伴们交流合作都非常少。另外,Odoo在场景方面主要围绕内部流程管理,与国内老牌ERP如用友、金蝶重叠,市场竞争激烈。相比之下,Oinone看准了企业视角由内部管理转向业务在线、生态在线(协同)带来的新变化,聚焦新场景,利用云、端等新技术的发展,从企业内外部协同入手,以业务在线驱动企业管理流程升级。它先立足于国内,做好国内生态服务,再着眼未来的国际化。 无代码设计器的定位 在无代码设计器的定位上,Odoo的无代码设计器是一个非常轻量的辅助工具,因为ERP场景下,一个企业实施完以后基本几年不会变,流程稳定度非常高。相反,Oinone为适应"企业业务在线化后,所有的业务变化与创新都需要通过系统来触达上下游,从而敏捷响应快速创新"的时代背景,重点打造出五大设计器。(如下图1-2所示)。 图1-2 Oinone五大设计器 在数字化时代中国软件将接棒世界,而Oinone也要接棒Odoo,把数字化业务与技术的最佳实践赋能给企业,帮助企业数字化转型不走弯路!

    2024年5月23日
    1.9K00
  • 5.4 基础支撑之商业关系域

    PamirsPartner作为商业关系与商业行为的主体,那么PamirsPartner间的关系如何描述,本文将介绍两种常见的设计思路,从思维和实现两方面进行对比,给出oinone为啥选择关系设计模式的原因。 一、两种设计模式对比 设计模式思路介绍 角色设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的商业主体,并把主体间的关系类型进行整理。 图5-4-1 角色设计模式 关系设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的主体间商业关系 图5-4-2 关系设计模式 设计模式对应实现介绍 角色设计模式实现介绍 不单商业主体需要扩展,关系也要额外维护,可以是字段或是关系表。一般M2O和O2M字段维护,M2M关系表维护。 创建合同场景中甲方选择【商业主体A】,乙方必须是【商业主体A】有关联的经销商、分销商、零售商、供应商等,则在角色设计模式下就非常麻烦,因为关系都是独立维护的 图5-4-3 角色设计模式实现介绍 关系设计模式实现介绍 只需维护商业关系扩展 同时在设计上收敛了商业关系,统一管理应对不同场景都比较从容 图5-4-4 关系设计模式实现介绍 二、oinone商业关系的默认实现 首先oinone的商业关系选择关系设计模式 其次模型上采用多表继承模式,父模型上维护核心字段,子模型维护个性化字段。

    2024年5月23日
    1.6K00

Leave a Reply

Please Login to Comment