表格字段配置Switch开关

在业务开发中,我们经常会遇到表格中有个Switch开关组件:

数式Oinone低代码-表格字段配置Switch开关

那么如何通过界面设计器配置这个组件呢,下面让我们一起来学习下吧。

设计布尔类型的组件

1: 首先在界面设计器的组件区域添加一个组件。

数式Oinone低代码-表格字段配置Switch开关

2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致

数式Oinone低代码-表格字段配置Switch开关

3: 给元件添加属性配置

拖拽一个单行文本字段, 字段编码必须是truthyAction,代表的是该字段为true的时候要执行的动作
数式Oinone低代码-表格字段配置Switch开关

再拖拽一个单行文本字段, 字段编码必须是falsyAction,代表的是该字段为false的时候要执行的动作

数式Oinone低代码-表格字段配置Switch开关

4: 发布元件,然后再去对应的界面设计器页面,将对应的字段切换成刚刚设计的组件

数式Oinone低代码-表格字段配置Switch开关

数式Oinone低代码-表格字段配置Switch开关

5: 发布界面设计器,染红我们可以在运行时的页面看到效果

数式Oinone低代码-表格字段配置Switch开关

当switch切换的时候,会执行对应的action

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

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

Like (0)
汤乾华's avatar汤乾华数式员工
Previous 2023年11月21日 pm2:22
Next 2023年11月22日 am4:28

相关推荐

  • 左树右表页面,点击表格的新建按钮,获取选中的树节点

    左树右表页面,点击表格的新建按钮,获取选中的树节点 通过自定义action的方式来实现 新建一个action文件TreeActionWidget.ts import { ActionType, ActionWidget, SPI, ViewActionTarget, RouterViewActionWidget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], name: 'uiView0000000000079503' // action对应的name }) ) export class TreeActionWidget extends RouterViewActionWidget { protected async clickAction() { const context = this.rootRuntimeContext.view.context || {}; const activeTreeContext = context.activeTreeContext || null; if (!activeTreeContext) { // 没有选中左侧树 OioNotification.error('', '请选择左侧节点!'); } else { // 选中的时候 (this.action as any).context = activeTreeContext; // 执行原先的action逻辑 super.clickAction(); } } }

    2023年11月1日
    2.0K00
  • 自定义字段的数据联动

    某种情况下,开发人员期望自定以的字段发生变化后,需要修改其他的字段,这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段,设计元件 2: 在模型区域,搜索提交方式,如果找到了,就把该字段拖拽进来, 如果找不到,就在元件中的组件区域,拖拽一个文本字段,按照下面的配置进行配置,然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数,将其拖拽进来 3: 从模型区搜索提交数据,将其拖拽进来4: 从模型区搜索提交字段,将其拖拽进来 5: 发布 (记得刷新页面哦) 最后再到对应的设计器页面,选中该字段,进行配置 提交方式为blur或者change , 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段,如果配置的指定字段,那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

    2023年11月9日
    3.0K00
  • 树型表格全量加载数据如何处理

    阅读该文档的前置条件 【界面设计器】树形表格 1.前端自定义表格组件 import { ActiveRecord, BaseElementWidget, Condition, Entity, SPI, TableWidget, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: ['demo-tree-table'] }) ) export class TreeTableWidget extends TableWidget { // 默认展开所有层级 protected getTreeExpandAll() { return true; } // 关闭懒加载 protected getTreeLazy(): boolean { return false; } public async $$loadTreeNodes(condition?: Condition, currentRow?: ActiveRecord): Promise<Entity[]> { // 树表加载数据的方法,默认首次只查第一层的数据,这里去掉这个查询条件的参数condition,这样就会查所有层级数据 return super.$$loadTreeNodes(undefined, currentRow); } } 2. 注册layout import { registerLayout, ViewType } from '@kunlun/dependencies'; const install = () => { registerLayout( ` <view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="demo-tree-table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Table, model: "resource.resourceCity", // 变量,需要替换 actionName: "MenuuiMenu6f6005bdddba468bb2fb814a62fa83c6", // 变量,需要替换 } ); }; install();

    2024年8月17日
    2.1K00
  • 设计器串联动作使用说明

    工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明:当流程满足触发条件后,该流程将自动执行,和是否开启代码手动触发无关。此外,为了适应特定的业务场景,流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发,则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”;仅能选择流程触发模型和当前主视图所属模型相同的流程;按钮点击后,流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在,因此在运行时的创建页中,按钮将以禁用状态显示,防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”: 请求地址:/user/queryById/{id} 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后,在属性中找到连接器配置,选择Api资源。 请求参数配置 选择API资源后,若该API需配置请求与响应参数,则相应的参数配置项将会呈现。如上图所示,因所选API含有Path类型的参数,故可进行Path参数的映射配置。此API并无Body或Query类型的参数,因此这些配置项将不会显示。 Path参数的具体配置如下:左侧列出了集成设计器为API创建的参数名称,而右侧对应的是当前模型中的字段,将赋值表达式设定为ID。该配置的含义是:在用户点击按钮之后,系统将调用配置的Api资源,并以当前视图中的ID参数值来映射Path参数,发起请求。 响应参数配置 同样地,左侧的参数名称是由集成设计器配置的响应参数,而右侧则为当前模型中的字段。当请求成功发送并接收响应后,这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前,若字段已填充数据,但在响应中未获取相应数据,则该字段将被置为空;比如在发送请求前,性别字段已有数据,而请求发送后,若接口返回的数据中未包含性别信息,则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询(queryOne)。若未查询到相关信息,则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示:条件查询用户 请求地址:/user/query 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…

    2024年9月20日
    2.2K00
  • oinone的rsql与传统sql语法对照表

    rsql sql 描述 field01 == "name" field01 = "name" 等于 field01 != "name" field01 != "name" 不等于 field01 =gt= 1 field01 > 1 大于 field01 =ge= 1 field01 >= 1 大于等于 field01 =lt= 1 field01 < 1 小于 field01 =le= 1 field01 <= 1 小于等于 field01 =isnull=true field01 is null 字段为null field01 =notnull= 1 field01 is not null 字段不为null field01 =in= ("foo") field01 in ("foo") 多条件 field01 =out= ("foo") field01 not in ("foo") 不在多条件中 field01 =cole= field02 field01 = field02 字段作为查询参数 field01 =colnt= field02 field01 != field02 字段作为查询参数 field01 =like="foo" field01 like "%foo%" 全模糊匹配,rsql语法中无需拼接通配符”%“ field01 =starts="foo" field01 like "foo%" 前缀模糊匹配,rsql语法中无需拼接通配符”%“ field01 =ends="foo" field01 like “%foo" 后缀模糊匹配,rsql语法中无需拼接通配符”%“ field01 =notlike="foo" field01 not like "%foo%" 全模糊不匹配,rsql语法中无需拼接通配符”%“ field01 =notstarts="foo" field01 not like "foo%" 前缀模糊不匹配,rsql语法中无需拼接通配符”%“ field01 =notends="foo" field01 not like “%foo" 后缀模糊不匹配,rsql语法中无需拼接通配符”%“ field01 =has=(ENUM_NAME1, ENUM_NAME2) 有多值枚举中的几个值 field01 =hasnt=(ENUM_NAME1,ENUM_NAME2) 没有多值枚举中的几个值 field01 =bit=ENUM_NAME1 有二进制枚举中的单个值 field01 =notbit=ENUM_NAME1 没有二进制枚举中的单个值 前端代码中使用工具类拼接rsql 该工具类在oinone的前端基础框架中提供 import { Condition } from '@kunlun/dependencies'; const rsqlCondition = new Condition('field01').equal('foo') .and(new Condition('field02').in(['bar'])) .and(new Condition('field03').notIn(['foo'])) .or(new Condition('field04').greaterThanOrEuqalTo(12)) .or(new Condition('field05').like('foo')) .or(new Condition('field06').notStarts('bar')) .or(new Condition('field07').isNull()) .or(new Condition('field08').notNull()) .and(new Condition('field09').bitEqual('BIT_ENUM_1')) .and(new Condition('field10').bitNotEqual('BIT_ENUM_2')) .and(new Condition('field11').has('ENUM_NAME_1')) .and(new Condition('field12').hasNot(['ENUM_NAME_2', 'ENUM_NAME_3'])); const rsqlStr = rsqlCondition.toString();…

    2023年11月1日
    4.6K00

Leave a Reply

Please Login to Comment