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-1.前端校验condition是否为true:

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


3-2.后端校验condition是否为true

(1).编译amis-core/src/utils下代码以使用

由于nodejs端兼容性问题,不能直接引入amis-core来使用,需将amis源码amis-core/src/utils 放到 common/amisUtils中(主要是用resolveCondition.ts这个文件),编译ts为js使用

还需移除部分不兼容的浏览器端特性代码,如dom.tsx等(或者用js-dom兼容下也行)。

安装一些编译amis-core/src/utils时依赖的库:npm install amis-formula lodash moment

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格式。

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李庆政370

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值