amis中条件组合器condition-builder的使用 和 解析

news2024/11/24 10:24:05

1.amis中配置一个条件组合器,condition-builder。并根据自己业务需求配置source。这里用了一些自定义filter来进行预处理。


{
    "type": "condition-builder",
    "label": "条件组合",
    "name": "node.conditions",
    "description": "",
    "source": "${m.config|doTree:undefined:'dataType,name':'this.utils.convertCondField(item); if((item.children && item.children.length)) {item.disabled=true;}'}",
    "id": "u:91c6f78eb6c4",
    "selectMode": "tree",
    "searchable": true
  }

source表达式中用到的部分函数如下:

  //根据不同的数据类型,使用condition-builder中不同的组件类型来展示。

 function convertCondField(item){ 
    switch (item.dataType) {
      case "string":
          item.type = 'text';
          break;
      case "bool": // 0 or 1
      case "bit": 
          _.merge(item, {
            "type": "custom",
            "value": {
              "type": "switch",
              "trueValue": 1,
              "falseValue": 0
            },
            "operators": [
              "equal",
              "not_equal"
            ]
          })
          break;
      case "float":
      case "double":
          item.type = 'number';
          item.step = 0.01
          break;
      default:
          item.type = 'number';
          break;
   }
  }

  //doTree filter函数定义

  function doTree(arr, filter, extraParams, callback) { // 支持lodash断言过滤.  函数断言传入字符串形式: 'return (n)=>{ return n.enable }'  |   ${m.children|doTree:{nodeClass:'state'}}
    return _.map(filter !== undefined ? _.filter(arr, filter) : arr, (n) => {
      const result = {
        label:
          n["label"] ||
          n["title"] ||
          n["browseName"] ||
          n["displayName"],
        value: n["name"] || n["value"],
      };
      _.forEach(extraParams, extraParam => {
        result[extraParam] = n[extraParam];
      });
      if (n.children) {
        result.children = doTree(n.children, filter, extraParams, callback);
      } else {
        result.disabled = false;
      }
      try{
        callback && callback(result);
      }catch(e){
        console.error(e)
      }
      return result;
    });
  }

  //注册doTree进入到filter中

  amisLib.registerFilter('doTree', function (arr, filter, extraParams, callback) {
    this.utils = utils;
    filter = resolveFilter(filter);
    extraParams = extraParams?.split(",");
    callback = callback ? new Function('item', callback).bind(this) : callback;
    return doTree(arr, filter, extraParams, callback);
  });

source最终生成结果如下:

[
    {
        "label": "冷热源系统",
        "value": "冷热源系统",
        "name": "冷热源系统",
        "children": [
            {
                "label": "主机",
                "value": "冷热源系统.主机",
                "name": "冷热源系统.主机",
                "children": [
                    {
                        "label": "1号主机",
                        "value": "冷热源系统.主机.1号主机",
                        "name": "冷热源系统.主机.1号主机",
                        "children": [
                            {
                                "label": "冷冻水供水温度",
                                "value": "冷热源系统.主机.1号主机.冷冻水供水温度",
                                "dataType": "short",
                                "name": "冷热源系统.主机.1号主机.冷冻水供水温度",
                                "disabled": false,
                                "type": "number"
                            },
                            {
                                "label": "冷冻水回水温度",
                                "value": "冷热源系统.主机.1号主机.冷冻水回水温度",
                                "dataType": "short",
                                "name": "冷热源系统.主机.1号主机.冷冻水回水温度",
                                "disabled": false,
                                "type": "number"
                            },
                            {
                                "label": "冷却水出口温度",
                                "value": "冷热源系统.主机.1号主机.冷却水出口温度",
                                "dataType": "short",
                                "name": "冷热源系统.主机.1号主机.冷却水出口温度",
                                "disabled": false,
                                "type": "number"
                            },
  
                            {
                                "label": "累计制冷量",
                                "value": "冷热源系统.主机.1号主机.累计制冷量",
                                "dataType": "float",
                                "name": "冷热源系统.主机.1号主机.累计制冷量",
                                "disabled": false,
                                "type": "number",
                                "step": 0.01
                            },
                            {
                                "label": "COP",
                                "value": "冷热源系统.主机.1号主机.COP",
                                "dataType": "short",
                                "name": "冷热源系统.主机.1号主机.COP",
                                "disabled": false,
                                "type": "number"
                            },
                     
                            {
                                "label": "累计耗电量",
                                "value": "冷热源系统.主机.1号主机.累计耗电量",
                                "dataType": "float",
                                "name": "冷热源系统.主机.1号主机.累计耗电量",
                                "disabled": false,
                                "type": "number",
                                "step": 0.01
                            },
                            {
                                "label": "方法",
                                "value": "冷热源系统.主机.1号主机.方法",
                                "name": "冷热源系统.主机.1号主机.方法",
                                "disabled": false,
                                "type": "number"
                            }
                        ],
                        "type": "number",
                        "disabled": true
                    }
                ],
                "type": "number",
                "disabled": true
            }
        ],
        "type": "number",
        "disabled": true
    }
]

2.选中条件选择器之后的amis json结构如下:

const conditions = {
    "id": "a6dbc0b12fe6",
    "conjunction": "and",
    "children": [
        {
            "id": "f5d7bc47bec9",
            "left": {
                "type": "field",
                "field": "冷热源系统.主机.1号主机.冷冻水供水温度"
            },
            "op": "less",
            "right": 50
        }
    ]
}

//封装data数据

const fact = {
    ['冷热源系统.主机.1号主机.冷冻水供水温度']: 28
    ['冷热源系统.主机.1号主机.累计制冷量']: 50.08
}


3.后端校验condition是否为true。

 3-1.由于nodejs端兼容性问题,不能直接引入amis-core来使用,需将amis源码amis-core/src/utils 放到 common/amisUtils中(主要是resolveCondition.ts相关文件)。并移除了部分不兼容的代码,如dom.tsx等。

npm install typescript -g

根目录下创建tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,// 转换为cjs语法时,fix (0 , assign_1.default) is not a function 问题。 
    //会加入一个__importDefault来解决此问题。如下:var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; };
    "module": "commonJS",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "node",
      "lodash"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  }
}

tsc // 编译common/amisUtils为cjs格式。

3-2.使用resolveCondition对conditions条件进行判定:

const { resolveCondition, resolveConditionAsync } = require('../common/amisUtils');

let result = resolveCondition(conditions, fact, false);
console.log(result); //输出结果为true

ps:前端校验condition是否为true:

const { resolveCondition } = amisRequire("amis");
let result = resolveCondition(conditions, fact, false);
console.log(result); //输出结果为true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1893415.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【软件测试】Postman接口测试基本操作

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,薪资嘎嘎涨 Postman-获取验证码 需求:使用Postman访问验证码接口,并查看响应结果…

Python基于PyQt5和卷积神经网络分类模型(CNN分类算法)实现时装类别识别系统GUI界面项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 随着深度学习技术的发展,计算机视觉领域取得了显著的进步,特别是在图像分类、目…

QT截屏,截取控件为图片,指定范围截屏三种截屏方式

项目中我们常用到截取屏幕,Qt给我的们多种方式: 主要有以下三种: 截取全屏;截取控件为图片;指定位置截屏三种截屏方式; 1.截取全屏 常用: 实现: QScreen *screen QGuiApplicat…

使用selenium定位input标签下的下拉框

先来看一下页面效果&#xff1a;是一个可输入的下拉列表 再来看一下下拉框的实现方式&#xff1a; 是用<ul>和<li>方式来实现的下拉框&#xff0c;不是select类型的&#xff0c;所以不能用传统的select定位方法。 在着手定位元素前一定一定要先弄清楚下拉列表…

汽车信息安全--数据安全:图像脱敏

General 随着车联网的发展&#xff0c;汽车越来越智能化&#xff0c;就像是一部“装着四个轮子的手机”。 有人说&#xff0c;智能手机就如同一部窃听器&#xff0c;无论你开机或者关机&#xff0c;它都会无时不刻地监听着用户的一举一动。 可想而知&#xff0c;智能车辆上…

热网无线监测系统 SystemManager.asmx SQL注入漏洞复现

0x01 产品简介 热网无线监测系统是一种先进的热力管网监测解决方案,它通过无线通信技术实现对热力管网各项参数的实时监测和数据分析,以提高供热效率、降低能耗、保障管网安全。系统利用先进的传感器技术和无线通信技术,对热力管网中的温度、压力、流量等关键参数进行实时监…

内容评分越高,谷歌排名就越靠前吗?

我研究并分析了目前流行的四个内容优化工具的内容评分和Google排名之间的关联性&#xff1a;Clearscope、 Surfer、 MarketMuse 和 Frase&#xff0c;结果显示关联性普遍不高。 虽然相关性并不一定意味着绝对的因果关系&#xff0c;但也表明&#xff0c;一味的追求内容得分并不…

【数据结构】04.单链表

一、链表的概念及结构 概念&#xff1a;链表是⼀种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 节点的组成主要有两个部分&#xff1a;当前节点要保存的数据和保存下⼀个节点的地址&#xff08;指针变量&#…

Postman使用教程

传统接口风格 RESTful风格 使用Postman完成测试用例目标&#xff1a; Postman教程 &#xff08;1&#xff09;准备工作&#xff0c;下载Postman新建 &#xff08;2&#xff09;登录接口调试-获取验证码 &#xff08;3&#xff09;登录接口调试-登录 &#xff08;4&#xff09;…

Android - Json/Gson

Json数据解析 json对象&#xff1a;花括号开头和结尾&#xff0c;中间是键值对形式————”属性”:属性值”” json数组&#xff1a;中括号里放置 json 数组&#xff0c;里面是多个json对象或者数字等 JSONObject 利用 JSONObject 解析 1.创建 JSONObject 对象&#xff0c;传…

工厂方法模式:概念与应用

目录 工厂方法模式工厂方法模式结构工厂方法适合的应用场景工厂方法模式的优缺点练手题目题目描述输入描述输出描述**提示信息**解题&#xff1a; 工厂方法模式 工厂方法模式是一种创建型设计模式&#xff0c; 其在父类中提供一个创建对象的方法&#xff0c; 允许子类决定实例…

无法启动此程序,因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。

在windows server2012系统中利用WinSW部署jar包时&#xff0c;报错&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。 原因&#xff1a; 缺少Microsoft Visual C 2015运行库或者已安装低版本运行库…

提升TK直播体验:使用美国直播网络的六大优势

国内有许多公司想在TikTok上进行美国直播&#xff0c;但由于TikTok的政策限制&#xff0c;在国内直接访问存在困难。然而&#xff0c;通过使用Ogcloud的美国直播网络&#xff0c;这一问题得以解决。那么&#xff0c;TikTok海外直播使用美国直播网络具体有哪些优势呢&#xff1f…

【Koa】KOA 基础-掌握基于koa2搭建web应用的基础

目录 KOA 基础框架介绍与环境搭建koa2 基本介绍Node.JS 环境安装创建 Hello World 程序 Web 应用开发基础处理get请求参数处理post请求参数响应一个页面处理静态资源 中间件基本概念和执行过程中间件概念理解Koa 中间件执行模型-洋葱圈模型Koa洋葱圈设计理解 用 koa-body 处理 …

【掌握C++ string 类】——【高效字符串操作】的【现代编程艺术】

专栏&#xff1a;C学习笔记 上一篇&#xff1a;【C】——【 STL简介】——【详细讲解】 1. 为什么要学习 string 类&#xff1f; 1.1 C 语言中的字符串 在 C 语言中&#xff0c;字符串是以 \0 结尾的字符集合。如下所示&#xff1a; #include <stdio.h>int main() {c…

【第五节】C/C++数据结构之图

目录 一、图的基本概念 1.1 图的定义 1.2 图的其他术语概念 二、图的存储结构 2.1 邻接矩阵 2.2 邻接表 三、图的遍历 3.1 广度优先遍历 3.2 深度优先遍历 四、最小生成树 4.1 最小生成树获取策略 4.2 Kruskal算法 4.3 Prim算法 五、最短路径问题 5.1 Dijkstra算…

springboot+vue人事管理系统 +LW +PPT+源码+讲解

3系统分析 3.1可行性分析 在开发系统之前要进行系统可行性分析&#xff0c;目的是在用最简单的方法去解决最大的问题&#xff0c;程序一旦开发出来满足了员工的需要&#xff0c;所带来的利益也很多。下面我们将从技术、操作、经济等方面来选择这个系统最终是否开发。 3.1.1技…

米国政府呼吁抛弃 C 和 C++

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 很多观点认为C 或 C永远不可被…

C++那些事之小项目实战-进程间通信

小项目实战之进程间通信 进程间通信是一个非常重要的话题&#xff0c;特别是像一些大型项目都有它的影子&#xff0c;例如&#xff1a;PostgreSQL使用了管道完成copy的进程间通信&#xff0c;那么本节也将基于这个主题&#xff0c;使用C去搭建一个进程间通过管道通信的demo出来…

Angluar 实现pdf页面预览以及编辑

之前用过一个pdf预览的lib&#xff0c;并且还支持在线编辑&#xff0c;和直接下载编辑之后的pdf和直接打印&#xff0c;还不错&#xff0c;记录下 PdfShowcase 首先安装依赖 npm install ngx-extended-pdf-viewer 然后引入 import { NgxExtendedPdfViewerModule } from &q…