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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第十节:学习ConfigurationProperties类来配置pojo实体类参数(自学Spring boot 3.x的第二天)

大家好,我是网创有方 。这节记录下如何使用ConfigurationProperties来实现自动注入配置值。。实现将配置文件里的application.properties的参数赋值给实体类并且打印出来。 第一步:新建一个实体类WechatConfig package cn.wcyf.wcai.config;import org…

浅谈如何在linux上部署java环境

文章目录 一、部署环境1.1、JDK1.2、Tomcat1.3、MySQL 二、将自己写的的程序部署到云服务器上 一、部署环境 为了在linux上部署 Java web 程序,需要安装一下环境。 1.1、JDK 直接使用 yum 命令安装 openjdk。我们 windows系统上 下载的是 oracle 官方的 jdk。而 …

文件系统(操作系统实验)

实验内容 (1)在内存中开辟一个虚拟磁盘空间作为文件存储器, 在其上实现一个简单单用户文件系统。 在退出这个文件系统时,应将改虚拟文件系统保存到磁盘上, 以便下次可以将其恢复到内存的虚拟空间中。 (2&…

llama.cpp

https://github.com/echonoshy/cgft-llm 【大模型量化】- Llama.cpp轻量化模型部署及量化_哔哩哔哩_bilibili github.com/ggerganov/llama.cpp cd ~/code/llama.cpp/build_cuda/bin ./quantize --allow-requantize /root/autodl-tmp/models/Llama3-8B-Chinese-Chat-GGUF/Llama…

项目训练营第六天

项目训练营第六天 前端注册界面开发 1、基本布局 将登录界面文件夹复制一份,粘贴到上一层目录User目录下,改名为Register 在typings.d.ts文件中添加如下的登录前端接口函数标准参数 以及返回值类型 2、接口开发 在api.ts中修改原先接口如下&…

3.SQL注入-搜索型

SQL注入-搜索型 输入k字段进行搜索发现出用户信息 通过上图搜索可以猜测的sql语句为 select 字段1,字段2 from 表名 where username like %k%;在后台查询结果 select id,email from member where username like %k%;通过以上猜测进行构造payload语句 like %k% or 11 #%; …

mysql_config 命令, 可以查看mysqlclient库的位置在/usr/lib64/mysql下

好吧,其实我是从这里知道了 -l 后面加的库名和so文件这种名不一样,因为库文件实际叫下面这个名(前面有lib)。

零基础开始学习鸿蒙开发-页面导航栏布局设计

1.设定初始页(Idex.ets) import {find} from ../pages/find import {home} from ../pages/home import {setting} from ../pages/setting Entry Component struct Index {private controller: TabsController new TabsController()State gridMargin: number 10State gridGut…

【漏洞复现】致远互联FE协作办公平台——SQL注入

声明:本文档或演示材料仅供教育和教学目的使用,任何个人或组织使用本文档中的信息进行非法活动,均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 致远互联FE协作办公平台是一个专注于协同管理软件领域的数智化运…

论文学习——一种自适应提升的动态多目标优化进化算法

论文题目:A dynamic multi-objective optimization evolutionary algorithm with adaptive boosting 一种自适应提升的动态多目标优化进化算法(Hu Peng a,b,∗, Jianpeng Xiong a, Chen Pi a, Xinyu Zhou c, Zhijian Wu d)IEEE Swarm and Ev…

【Python游戏】猫和老鼠

本文收录于 《一起学Python趣味编程》专栏,从零基础开始,分享一些Python编程知识,欢迎关注,谢谢! 文章目录 一、前言二、代码示例三、知识点梳理四、总结一、前言 本文介绍如何使用Python的海龟画图工具turtle,开发猫和老鼠游戏。 什么是Python? Python是由荷兰人吉多范…

LeetCode热题100刷题2:283. 移动零、11. 盛最多水的容器、15. 三数之和、42. 接雨水

283. 移动零 挺简单的没啥说的 class Solution { public:void moveZeroes(vector<int>& nums) {//快慢指针 // 快指针负责往前遍历&#xff0c;慢指针记录快指针遍历过的把0撵走的最后一个元素的位置// 然后快指针遍历完之后&#xff0c;慢指针到结尾直接赋0就行in…

2-20 基于matlab的利用准二维发散喷嘴的特性法给出理想喷嘴的几何形状

基于matlab的利用准二维发散喷嘴的特性法给出理想喷嘴的几何形状。 假设气体从燃烧室排出&#xff0c;燃烧室内没有质量流量。 利用二维喷嘴流动关系&#xff0c;找到一个最佳喉管区域&#xff0c;该区域将在给定环境压力和燃烧室参数下产生最大推力。 该区域将自动设置并输入代…

Webpack: 7 款常用的性能分析工具

概述 Webpack 最大的优势在于它的功能非常强大、全面&#xff0c;加之繁荣活跃的组件生态&#xff0c;已经足够应对几乎所有 Web 构建需求&#xff0c;包括&#xff1a;SPA、MPA、SSR、桌面应用、Node 程序、WebAssemsbly、PWA、微前端等等&#xff0c;所以即使在近几年工程化…

网络io与select,poll,epoll

前言 网络 IO&#xff0c;会涉及到两个系统对象&#xff0c;一个是用户空间调用 IO 的进程或者线程&#xff0c;另一个是内核空间的内核系统&#xff0c;比如发生 IO 操作 read 时&#xff0c;它会经历两个阶段&#xff1a; 1. 等待数据准备就绪 2. 将数据从内核拷贝到进程或…

产品经理-对产品经理的认识(1)

今天跟大家聊一下产品经理这个岗位的,产品经理是互联网岗位当中比较火的一个岗位,也是最接近CEO的岗位 产品经理岗位&#xff0c;技术门槛低&#xff0c;薪水和前景都很不错&#xff0c;又处于团队的核心位置 产品经理岗位没有完全相关的专业设置和清晰的学习路径&#xff0c;绝…

HarmonyOS Next开发学习手册——选项卡 (Tabs)

当页面信息较多时&#xff0c;为了让用户能够聚焦于当前显示的内容&#xff0c;需要对页面内容进行分类&#xff0c;提高页面空间利用率。 Tabs 组件可以在一个页面内快速实现视图内容的切换&#xff0c;一方面提升查找信息的效率&#xff0c;另一方面精简用户单次获取到的信息…

第11章 规划过程组(11.5创建WBS)

第11章 规划过程组&#xff08;一&#xff09;11.5创建WBS&#xff0c;在第三版教材第380~383页&#xff1b; 文字图片音频方式 视频22 第一个知识点&#xff1a;主要输入 1、项目管理计划 范围管理计划 定义了如何根据项目范围说明书创建WBS2、项目文件 项目范围说明…

实验三 时序逻辑电路实验

仿真 链接&#xff1a;https://pan.baidu.com/s/1z9KFQANyNF5PvUPPYFQ9Ow 提取码&#xff1a;e3md 一、实验目的 1、通过实验&#xff0c;理解触发的概念&#xff0c;理解JK、D等常见触发器的功能&#xff1b; 2、通过实验&#xff0c;加深集成计数器功能的理解&#xff0c;掌…

Docker部署Dillinger个人文本编辑器

Docker部署Dillinger个人文本编辑器 一、Dillinger介绍1.1 Dillinger简介1.2 Dillinger使用场景 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、拉取Dillinger镜像五、部署Dill…