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

相关推荐

  • 5.3 基础支撑之用户与客户域

    一、三户概念 三户由来 介绍下经典的三户模型,它是电信运营支持系统的基础。三户模型即客户、用户和帐户,来源于etom的模型。这三者之间的关系应该是一个相互关联但又是独立的三个实体,这种关联只是一个归属和映射的关系,而三个实体本身是相互独立的,分别是体现完全不同的几个域的信息,客户是体现了社会域的信息,用户体现了业务域的信息,帐户体现的是资金域的信息。 客户:它是个社会化的概念,一个自然人或一个法人 用户:它是客户使用运营商开发的一个产品以及基于该产品之上的增值业务时,产生的一个实体。如果说一个客户使用了多个产品,那么一个客户就会对应好几个用户(即产品) 账户:它的概念起源于金融业,只是一个客户在运营商存放资金的实体,目的是为选择的产品付费 Oinone的三户 在原三户模型中【用户】是购买关系产生的产品与客户关系的服务实例,在互联网发展中用户的概念发生了非常大的变化,【用户】概念变成了:使用者,是指使用电脑或网络服务的人,通常拥有一个用户账号,并以用户名识别。而且新概念在互联网强调用户数的大背景下已经被普遍介绍,再去强调电信行业的用户概念就会吃力不讨好。而且不管是企业应用领域和互联网领域,原用户概念都显得过于复杂和没有必要。也就有了特色的oinone的三户模型: 客户:它是个社会化的概念,一个自然人或一个法人 用户:使用者,是指使用电脑或网络服务的人,通常拥有一个用户账号,并以用户名识别 账户:它的概念起源于金融业,只是一个客户在运营商存放资金的实体,目的是为选择的产品付费 二、Oinone的客户与用户 三户模型是构建上层应用的基础支撑能力,任何业务行为都跟这里两个实体脱不了干系。以客户为中心建立商业关系与商业行为主体,以用户为中心构建一致体验与操作行为主体。在底层设计上二者相互独立并无关联,由上层应用自行作关联绑定,往往在登陆时在Session的处理逻辑中会根据【用户】去找到对应一个或多个【商业(主体)客户】,Session的实现可以参考4.1.20【框架之Session】一文。 图5-3-1 Oinone的客户与用户 客户设计说明 PamirsPartner作为商业关系与商业行为的主体,派生了两个子类PamirsCompany与PamirsPerson分别对应:公司(法人)客户、自然人客户 公司(法人)客户PamirsCompany对应多个组织部门PamirsDepartment,公司(法人)客户PamirsCompany对应多个员工PamirsEmployee 部门PamirsDepartment对应一个公司(法人)客户PamirsCompany,对应多个员工PamirsEmployee 员工PamirsEmployee对应多个部门PamirsDepartment,对应一个或多个公司(法人)客户PamirsCompany,其中有一个主的 用户设计说明 PamirsUser作为一致体验与操作行为主体,本身绑定登陆账号,并且可以关联多个三方登陆账户PamirsUserThirdParty 客户与用户如何关联(举例) 例子设计: 新建demo系统的PetComany和PetEmployee,用PetEmployee去关联用户。 当用户登陆时,根据用户Id找到PetEmployee,在根据PetEmployee找到PetComany,把PetComany放到Session中去 修改PetShop模型关联一个PamirsPartner,PamirsPartner的信息从Session取。 Step1 pamirs-demo-api工程增加依赖,并且DemoModule增加对BusinessModule的依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-business-api</artifactId> </dependency> 图5-3-2 pamirs-demo-api工程增加依赖 在DemoModule类中通过@Module.dependencies中增加BusinessModule.MODULE_MODULE @Module( dependencies = { BusinessModule.MODULE_MODULE} ) 图5-3-3 声明对BusinessModule的依赖 Step2 新建PetComany和PetEmployee,以及对应的服务 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.business.api.model.PamirsEmployee; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetEmployee.MODEL_MODEL) @Model(displayName = "宠物公司员工",labelFields = "name") public class PetEmployee extends PamirsEmployee { public static final String MODEL_MODEL="demo.PetEmployee"; @Field(displayName = "用户") private PamirsUser user; } 图5-3-4 新建PetEmployee package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.business.api.entity.PamirsCompany; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(PetCompany.MODEL_MODEL) @Model(displayName = "宠物公司",labelFields = "name") public class PetCompany extends PamirsCompany { public static final String MODEL_MODEL="demo.PetCompany"; @Field.Text @Field(displayName = "简介") private String introductoin; } 图5-3-5 新建PetComany package pro.shushi.pamirs.demo.api.service; import pro.shushi.pamirs.demo.api.model.PetEmployee; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; @Fun(PetEmployeeQueryService.FUN_NAMESPACE) public interface PetEmployeeQueryService { String FUN_NAMESPACE ="demo.PetEmployeeQueryService"; @Function PetEmployee queryByUserId(Long userId); } 图5-3-6 新建PetEmployee对应服务 package pro.shushi.pamirs.demo.core.service; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.model.PetEmployee; import pro.shushi.pamirs.demo.api.service.PetEmployeeQueryService; import pro.shushi.pamirs.framework.connectors.data.sql.query.QueryWrapper; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; @Fun(PetEmployeeQueryService.FUN_NAMESPACE) @Component public class PetEmployeeQueryServiceImpl implements PetEmployeeQueryService { @Override @Function public PetEmployee queryByUserId(Long userId) { if(userId==null){ return null; } QueryWrapper<PetEmployee> queryWrapper = new QueryWrapper<PetEmployee>().from(PetEmployee.MODEL_MODEL).eq("user_id", userId); return…

    2024年5月23日
    1.7K00
  • 工作台

    有工作台权限的用户,默认登录页为工作台,也可以通过APP Finder进入工作台。 1. 快捷处理 右上角消息中会气泡展示未处理或未读的操作,点击展开后可以点过去进行快捷处理。 2. 查看、处理流程 2.1 流程查看 流程管理页面共同点: 1包含选项分类筛选 2包含标签筛选 3包含应用下拉选筛选 4包含根据流程名称搜素 流程管理页面名词解释: 待办:当前登录用户未处理的流程节点 我发起的:当前登录用户人为触发的流程(模型触发) 抄送:抄送给当前登录用户的节点(审批/填写) 我已办结:由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点 无需办理:当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务 站内信:当前登录用户收到的站内信 2.2 流程处理 每条流程数据下方有动作,点击进入流程处理页面,大致分为详情页和操作页。 待办中点击“审批/填写”会进入流程操作页。审批操作页可能包含“同意、拒绝、退回、加签、转交、返回”,填写操作页可能包含“提交、暂存”,审批操作页包含哪些动作由流程设计决定。 我发起的、抄送、我已办结、无需处理点击“查看”会进入流程详情页。 3. 应用快捷入口 应用中心中星标的收藏应用会展示在此处,点击可快捷进入应用。 应用中心中已安装的应用点击星标即可收藏。

    2024年6月20日
    2.0K00
  • 书籍封面

    2024年5月23日
    3.6K00
  • 应用审计

    1. 整体介绍 应用审计是基于模型字段记录用户操作留痕记录,通过定义审计规则,平台基于审计规则订阅的字段记录形成日志。平台名词概念: 应用日志:针对已订阅的审计规则记录用户操作信息,是用户在各应用中操作行为留痕记录。 审计规则:业务审计中,数据变化订阅记录的规则。 操作入口:应用中心——业务审计应用。 2. 审计规则 审计规则是指定义审计过程订阅数据变化的信息,根据模型、订阅到具体字段内容变化形成应用日志。如订阅销售订单的备注,销售订单S20231001888,订单备注【尽快发货】,备注修改为【需易碎品包装】,审计规则为:销售订单模型,订阅【备注】。 操作包括:新增、编辑、删除。 2.1. 新增 新增时,定义审计规则名称,选择需要审计的模型,指定需要订阅的字段信息,同时可以指定关联关系的字段。 需要注意:每个模型仅限定义单条审计规则。 2.2. 编辑 编辑同新增操作,不做赘述。 2.3. 删除 删除规则后,平台将不再监听对应数据的变更日志,请慎重删除。 3. 应用日志 应用日志是针对已订阅的审计规则记录用户操作信息。记录操作用户、IP、登录设备、位置、订阅的字段变化内容。 应用日志详情 4. 业务表达 4.1. 展示效果 表格-行操作—日志记录 详情—日志记录 4.2. 操作步骤 Step1:在应用中心,需要维护业务应用依赖业务审计应用; 操作入口:应用中心,找到业务应用——编辑,依赖模块选择业务审计。 Step2:配置审计规则; 操作入口:业务审计应用——审计规则——新增规则。 Step2:界面设计器配置日志记录; 操作入口:界面设计器,找到需要配置的页面——模型组件,将动作区的日志记录拖动到页面中。

    2024年1月20日
    1.5K00
  • 第3章 Oinone的基础入门

    本章主要介绍如何快速入门,了解如何在Oinone上进行开发。我们将通过准备环境、构建自己的第一个Oinone模块、完成一些小功能等方式来全面了解Oinone,这将是一个很好的开始。 具体来说,本章包括以下几个方面: 环境搭建:准备Windows或Mac版环境。 Oinone以模块为组织:了解Oinone模块的概念和如何创建和使用模块。 Oinone以模型为驱动:了解Oinone模型的概念和如何使用模型来构建应用。 Oinone以函数为内在:了解Oinone函数的概念和如何使用函数来实现应用逻辑。 Oinone以交互为外在:了解Oinone交互的概念和如何使用交互来设计和实现应用界面。

    Oinone 7天入门到精通 2024年5月23日
    3.0K00

Leave a Reply

Please Login to Comment