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低代码应用平台体验

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

相关推荐

  • 企业个性化配置

    平台除了帮助企业快速解决业务需求外,还提供了企业文化、风格个性化能力,本章节详细介绍个性化配置。包括:登陆页配置、企业形象配置、系统风格配置。 系统配置 配置入口 配置入口:右上角登陆账号——系统配置——全局配置——登陆页配置、企业形象配置、系统风格配置。 登陆页配置 用户自定义登陆页的主题,一共有六个主题可选择,分别为: 图一:左侧是图片,右侧是登录输入框,Logo在左上角; 图二:右左侧是图片,右侧是登录输入框,Logo在左上角; 图三:底图是图片,登录输入框浮在页面左侧,Logo在左上角; 图四:底图是图片,登录输入框浮在页面中间,Logo在左上角; 图五:底图是图片,登录输入框浮在页面右侧,Logo在左上角; 图六:底图是图片,登录输入框浮在页面中间,Logo在登录框上方。 页面背景 上传登录页背景,支持上传jpg、png格式的图片或mp4、mov、avi格式视频。尺寸建议为1920*1080px,文件大小不超过50MB。 登录页logo:指配置登录页左上角的logo图标。 预览:配置后可在右侧电脑中点击全屏预览效果。 配置示例 企业形象配置 企业形象配置:可设置企业信息、业务应用导航栏logo、浏览器logo,设置完成之后,点击发布之后设置生效。 系统风格配置 系统风格配置,可设置主题(浅色、深色)、尺寸(大、中、小),配置后可全屏预览,发布后即可更换成对应的风格。 下载代码可进行自定义风格。

    2024年6月20日
    80900
  • 致Oinone读者

    欢迎来到Oinone生态,我们为您提供了一站式低代码商业支撑平台,数式科技已经用其服务了如中烟、得力、上海电气、中航金网、雾芯科技等多个知名企业,我们的技术实力在商业场景得到了很好的验证。我们希望通过开源Oinone项目,为中国软件行业带来变革,提升整体工程化水平,与广大软件工程师一起为客户创造价值!《Oinone 7天从入门到精通》一书是Oinone开源项目的配套书籍,系统化地介绍了如何基于Oinone开源项目,快速开发高质量的软件系统。此外,如果您开发的项目是用于商业化而非企业自用,我们还为您提供了一种可选的商业化变现途径:申请成为Oinone的合作伙伴,并提交相关产品,详情请访问 www.oinone.top 网站。 书籍纲领 本书的章节安排如下: 第一章至第二章:【揭开面纱,理解Oinone】和【Oinone的技术独特性】。这两个章节可以帮助您更好地理解我们设计Oinone的初衷以及特性的由来。 第三章:面向研发人员的【Oinone的基础入门】。如果您是专业的研发人员,本章可以帮助您快速上手并做出业务系统。只要按着里面的case一步步操作下来就可以。 第四章至第六章:面向研发人员的【Oinone的高级特性】、【Oinone的CDM】、【Oinone的通用能力】。这三篇章节重点介绍了Oinone的高级技术特性、提供的通用数据模型和通用基础能力。它们能够帮助我们更快地进行业务开发,从容应对业务的特殊场景要求,比较适合进阶的研发人员。 第七章:面向非研发人员的【Oinone的设计器们】和【Oinone的低无一体】。如果您并不是专业的研发人员,本章可以帮助您通过使用Oinone的无代码可视化设计器轻松自主解决业务需求,并且当可视化设计器满足不了的时候,您还可以在【Oinone的低无一体】中找到方式,并寻求研发帮助

  • 3.5.7.9 自定义多Tab

    在业务中,可能会遇到需要对多tab的交互或UI做全新设计的需求,这个时候可以自定义多tab组件支持。 首先继承平台的MultiTabsWidget组件,将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样,这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props,编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…

    2024年5月23日
    86800
  • 陈浩

    自2017年中国推进数字建设以来,数字经济规模持续增长,“十四五”规划和2035远景目标纲要中明确强调企业和政府需大力推动数字化转型,中国正在迈进一个崭新的数字经济时代。 在这个过程中,软件已经从工具变成信息化的基础设施,如何有效应对该变化所带来的一系列新的核心技术挑战,是整个软件行业发展遇到的另一难题。我认为,开源创新是解决这些难题的有效手段之一,也是未来软件发展的重要方向。如果说,数字化转型是时代趋势,那么开源创新也已成为时代主流。十四五规划纲要首提开源,2021年11月工信部印发《十四五软件和信息技术服务业发展规划》中提到开源重塑软件发展新生态,并将开源重塑软件发展新生态作为十四五期间我国软件产业的四大发展形势之一进行重点阐述。支持国产化开源创新体系发展,建设自己的开源社区和开源平台,其所具有的大众协同、开放共享、持续创新等特点,可有效推动各行业自主可控的数字化转型。 Oinone所倡导的开源理念和生态共建,与国家开源战略不谋而合:将开源作为一种合作手段,通过完善社区注重开源治理,吸引更多的企业和个体参与其中。湖南大学作为首批国家示范性软件学院的双一流建设高校,一直致力于推进和引导国产化开源软件体系的建设,并为此开展多种形式的产学研研究和实践。基于Oinone微服务分布式的设计理念和面向生态的开源特性,湖南大学结合自身在大数据分布式存储、多元异构数据汇聚融合和大数据智能分析等方面的研究成果,与Oinone展开了深度的技术创新合作,并在多个大中型企业数字化应用和数字政府应用中取得了良好的效果。 随着Oinone的开源,相信能激发更多的开发者参与到国产软件建设中,通过开源模式实现更广泛参与方的共享、共创、共生、共赢,构建价值驱动的数字创新生态平台,为我国数字经济发展贡献科技力量。 湖南大学教授:陈浩

    Oinone 7天入门到精通 2024年5月23日
    1.1K00
  • 工作台

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

    2024年6月20日
    89400

Leave a Reply

登录后才能评论