优速搭组件联动配置操作手册

优树搭

已于 2025-03-14 16:13:38 修改

阅读量794

点赞数 38

文章标签： java 低代码后端 ide 开发语言

于 2025-03-14 16:12:26 首次发布

本文链接：https://blog.csdn.net/nfxpoi/article/details/146260112

版权

一、概述

本手册详细说明如何通过优速搭平台实现以下两种组件联动场景：

前端数据字典联动
后端数据库动态数据联动
多级联动效果实现
外部硬件联动

平台安装步骤

点击获取安装指南

二、数据字典联动配置

1. 配置第一个下拉框

选中下拉框组件，进入属性面板
数据来源选择"数据字典"
选择预设字典（如：用户性别字典）
确认字典映射关系（值：男=0，女=1）

2. 设置联动事件

点击"onChange"事件右侧配置按钮

添加条件判断：

if(this.getFieldValue("xialakuang1")=='0') {
  // 男性对应运动
} else {
  // 女性对应运动
}

配置动作：
- 清空下拉框2的值：this.setFieldValue("xialakuang2", "");
- 修改下拉框2选项为新的字典：this.setSelectionOptions("xialakuang2", "dict_tzujianliandong_1740985985989_xialakuang2");

3. 效果验证

选择不同性别时，第二个下拉框自动更新对应运动项目列表

三、后端数据库联动配置

1. 配置API数据源

1.绑定下拉框初始数据来源的后端IDE图形程序API。（当然，初始数据也可以来源于数据字典）

2.编写查询语句：

SELECT
    dict_name AS 'dictLabel',
    dict_type AS 'dictValue' 
FROM
    sys_dict_type

2. 配置动态联动

1.点击onChange编辑代码

2.对下拉框2进行配置

清空下拉框“字典值”的值：this.setFieldValue("houduanzidianzhi", "");
修改下拉框“字典值”选项为新的后端图形程序返回的数据：

this.setSelectionOptions("houduanzidianzhi", "xRmf4CjHK6YYXoOTfXwAxTZgKy7CQZK1", {
  dictType: this.getFieldValue("houduanzidianleixing")
});

3.在图形程序中拼接SQL，并运行SQL返回数据，更新下拉框选项值

SELECT
    dict_label AS 'dictLabel',
    dict_code AS 'dictValue' 
FROM
    sys_dict_data 
{whereCondict} --拼接的条件SQL

四、多级联动实现

1. 评分组件联动配置

//当下拉框2发生值变化时
if(this.getFieldValue("xialakuang2")%2=='0'){
  
// 设置当选框组1值
this.setFieldValue("danxuankuangzu1", "1");

// 设置评分值
this.setFieldValue("pingfen1", "5");

}else{
// 设置当选框组1值
this.setFieldValue("danxuankuangzu1", "2");
  
//设置评分值
this.setFieldValue("pingfen1", "3");
}

2. 文本组件自动更新

if(this.getFieldValue("danxuankuangzu1")=='1'){
  
// 设置单行文本值
this.setFieldValue("danxingwenben1", "加油！");

// 设置开关值
this.setFieldValue("kaiguan1", "true");

}else{
  
// 设置单行文本值
this.setFieldValue("danxingwenben1", "看好你哟！");
  
// 设置开关值
this.setFieldValue("kaiguan1", "false");
}

五、注意事项

数据格式规范：
- 根据平台字典管理中字典编码进行修改
  - 参数：("操作字段", "字典编码");
- 优树搭API响应选项数据结构：
  - [{dictLabel: "是", dictValue: "0"}, {dictLabel: "否", dictValue: "1"}]
性能优化：
- 复杂查询建议添加缓存机制
- 频繁调用的API需设置防抖（300ms）
调试技巧：
- 使用控制台输出调试信息
- 开启网络请求日志查看

六、常见问题解答

Q1：联动未生效的可能原因？ A1：

组件ID命名冲突
事件绑定顺序错误
数据格式不匹配

Q2：如何实现远程搜索？ A2：

使用setSelectionOptions脚本
实现通过字典或后端图形程序获得数据源

Q3：数据库查询无返回数据？ A3：

检查SQL权限设置
验证参数传递是否URL编码
测试数据库直连查询

七、扩展应用

1. 硬件设备联动

1.创建Java服务组件

2.引入设备SDK

3.在private OperResult running(MksNodeTool mksNodeTool) {}中编写控制逻辑：

    /**
     * 初始化构造函数
     * running 为统一的调用方法,方法名禁止修改
     */
    private OperResult running(MksNodeTool mksNodeTool) {

        //初始化程序执行出参变量数据
        OperResult result = OperResult.getSuccessInstance();

        try {
            //获取入参变量数据
            String warehourseCode = mksNodeTool.getParamByEn("warehourseCode");

            //判断入参变量是否为空
            if (CommonUtil.stringIsNull(warehourseCode)) {

                //当入参变量异常时，将错误信息返回到图形化程序
                return result.errorResult("操作异常【仓库编码不能为空】", OperResult.getErrorInstance("操作异常【仓库编码不能为空】"));
            }

            /**
             * 返回页面程序处理结果数据
             */
            String returnStr = "hello word!";


            //将页面程序处理数据保存至出参变量数据
            result.setData(OperResult.getSuccessInstance(returnStr));

        } catch (Exception e) {

            //将异常日志输出到中间件控制台
            e.printStackTrace();

            //将异常日志输出到图形化程序控制台
            result.errorResult(e.getMessage());

        } finally {

            //将当前页面程序执行结果数据返回至图形化程序
            return result;

        }
    }

通过本手册，您可以快速掌握优速搭平台各类联动场景的实现方法。