自定义字段的数据联动

某种情况下,开发人员期望自定以的字段发生变化后,需要修改其他的字段,这篇文章从两个维度来讲解如果处理数据的联动

界面设计器配置

1: 在界面设计器页面中的的组件区域找到自定义的字段,设计元件
数式Oinone低代码-自定义字段的数据联动

2: 在模型区域,搜索提交方式,如果找到了,就把该字段拖拽进来, 如果找不到,就在元件中的组件区域,拖拽一个文本字段,按照下面的配置进行配置,然后保存

图一是找到了对应的字段
图二是找不到对应的字段

数式Oinone低代码-自定义字段的数据联动
【图一】

数式Oinone低代码-自定义字段的数据联动
【图二】

图二的字段编码必须是constructDataTrigger

3: 从模型区搜索联动函数,将其拖拽进来

数式Oinone低代码-自定义字段的数据联动

3: 从模型区搜索提交数据,将其拖拽进来
数式Oinone低代码-自定义字段的数据联动
4: 从模型区搜索提交字段,将其拖拽进来
数式Oinone低代码-自定义字段的数据联动

5: 发布

(记得刷新页面哦)

最后再到对应的设计器页面,选中该字段,进行配置
数式Oinone低代码-自定义字段的数据联动

提交方式为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);
  }
}

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

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

Like (0)
汤乾华's avatar汤乾华数式员工
Previous 2023年11月9日 pm12:22
Next 2023年11月9日 pm4:58

相关推荐

  • 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.5K00
  • oio-dropdown 下拉菜单

    向下弹出的列表。 何时使用 当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择,而 Dropdown 是命令集合。 API 属性如下 参数 说明 类型 默认值 destroyOnHide 关闭后是否销毁 Dropdown boolean false disabled 菜单是否禁用 boolean – getTriggerContainer 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 Function(triggerNode) () => document.body overlay(v-slot) 菜单 Menu – overlayClassName 下拉根元素的类名称 string – overlayStyle 下拉根元素的样式 object – placement 菜单弹出位置 bottomLeft | bottom | bottomRight | topLeft | top | topRight bottomLeft trigger 触发下拉的行为, 移动端不支持 hover Array<click|hover|contextmenu> ['hover'] visible(v-model:visible) 菜单是否显示 boolean – 事件 事件名称 说明 回调参数 onUpdateValue 菜单显示状态改变时调用,参数为 visible。点击菜单按钮导致的消失不会触发 function(visible)

    2023年12月18日
    1.9K00
  • 设计器串联动作使用说明

    工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <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.1K00
  • 如何自定义表格字段?

    目录 一、表单字段注册vue组件实现机制 二、表格字段注册vue组件实现机制 三、机制对比分析 四、表格字段完整案例 表单字段注册vue组件实现机制 核心代码 public initialize(props) { super.initialize(props); this.setComponent(VueComponent); return this; } 表格字段注册vue组件实现机制 核心代码 @Widget.Method() public renderDefaultSlot(context: RowContext) { const value = this.compute(context); return [createVNode(CustomTableString, { value })]; } 因为表格有行跟列,每一列都是一个单独的字段(对应的是TS文件),但是每列里面的单元格承载的是Vue组件,所以通过这种方式可以实现表格每个字段对应的TS文件是同一份,而单元格的组件入口是通过renderDefaultSlot函数动态渲染的vue组件,只需要通过createVNode创建对应的vue组件,然后将props传递进去就行 上下文接口 interface RowContext<T = unknown> { /** * 当前唯一键, 默认使用__draftId, 若不存在时,使用第三方组件内置唯一键(如VxeTable使用{@link VXE_TABLE_X_ID}) */ key: string; /** * 当前行数据 */ data: Record<string, unknown>; /** * 当前行索引 */ index: number; /** * 第三方组件原始上下文 */ origin: T; } 机制对比分析 表单字段 vs 表格字段渲染机制对比表 对比维度 表单字段实现方案 表格字段实现方案 绑定时机 initialize 阶段静态绑定 renderDefaultSlot 阶段动态创建 组件声明方式 this.setComponent(Component) createVNode(Component, props) 上下文传递 通过类成员变量访问 显式接收 RowContext 参数 渲染控制粒度 字段级(表单控件) 单元格级 表格字段完整案例 import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType, RowContext } from '@kunlun/dependencies'; import CustomTableString from './CustomTableString.vue'; import { createVNode } from 'vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ ttype: ModelFieldType.String, viewType: [ViewType.Table], widget: 'CustomTableStringWidget' }) ) export class CustomTableStringWidget extends BaseTableFieldWidget { @Widget.Method() public renderDefaultSlot(context:RowContext) { const value = this.compute(context); // 当前字段的值 const rowData = context.data // 当前行的数据 const dataSource = this.dataSource // 表格数据 if (value) { // 自定义组件入口在此处 return [createVNode(CustomTableString, { value })]; } return []; } } <template> <div>当前值: {{value}}</div> </template> <script lang="ts"> import { defineComponent } from 'vue'…

    2023年11月6日
    2.7K00
  • 移动端端默认布局模板

    默认布局 表格视图(TABLE) <view type="TABLE"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field"> <xslot name="searchFields" slotSupport="field" /> </element> </view> <pack widget="group" class="oio-m-default-view-element" style="height: 100%;flex: 1;overflow-y: hidden;" wrapperStyle="height: 100%;box-sizing:border-box;"> <pack widget="row" style="height: 100%;"> <pack widget="col" mode="full" style="min-height: 234px;height: 100%;"> <element widget="table" slot="table" slotSupport="field" checkbox="false"> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </pack> </pack> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> </view> 表单视图(FORM) <view type="FORM"> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> </view> 详情视图(DETAIL) <view type="DETAIL"> <element widget="detail" slot="detail"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> </view> 画廊视图(GALLERY) 默认内嵌布局(inline=true) 内嵌表格视图(TABLE) 内嵌表单视图(FORM) 内嵌详情视图(DETAIL) <view type="DETAIL"> <element widget="detail" slot="detail"> <xslot name="fields" slotSupport="pack,field" /> </element> </view>`

    2024年12月11日
    3.1K00

Leave a Reply

Please Login to Comment