条件表达式

多语功能 需要自行引入 多语组 YS_PF_RULEENGINE-FE

安装

安装方法：

    npm安装：
        npm install iuap-expression

    yarn安装：
        yarn add iuap-expression

    ynpm安装：
        ynpm install iuap-expression

引入方法

React环境

import IuapExpression from 'iuap-expression'
import 'iuap-expression/lib/index.css'

<IuapExpression
    onChange={onChange}
    activeExp={activeExp} 
    sourceForm={sourceForm} 
    sourceProps={sourceProps}>
</IuapExpression>

非React环境（如：Vue环境）

import IuapExpression from 'iuap-expression/build/index.js' // 非react环境
import 'iuap-expression/build/index.css'

<template>
    <IuapExpression
        onChange={onChange}
        activeExp={activeExp} 
        sourceForm={sourceForm} 
        sourceProps={sourceProps}>
    </IuapExpression>
</template>

API

Expression Props

| 参数 | 说明 | 类型 | 默认值 | | :------------ | :---------------------------------------------------- | :------------- | :---------------- | | serviceCode | 需要鉴权的serviceCode(必传字段) | string | | | serviceName | 公式计算校验目标服务(sourceFormula或targetFormula为true时必传)| string | | | title | 表达式标题 | string | '' | | readOnly | 表达式是否只读 | string | false | | showFooter | 底部区域，是否显示 | boolean | false | | cancelText | 底部区域，取消按钮显示的文字 | string | '取消' | | okText | 底部区域，确认按钮显示的文字 | string | '确认' | | activeExp | 传入的上次存储的表达式 | object | {} | | sourceForm | 左侧区域，可供选择的数据 | array | - | | sourceType | 左侧区域，可供选择的数据方式['auto', 'uiMeta', 'busiObj'] | string | 'auto' | | sourceProps | 左侧区域，可供选择的数据键值配置 | object | - | | sourceFormula | 左侧区域，支持公式，需要sourceForm存在 | boolean | false | | targetForm | 右侧区域，可供选择的数据 | array | - | | targetType | 右侧区域，可供选择的数据方式['auto', 'uiMeta', 'busiObj'] | string | 'auto' | | targetProps | 右侧区域，可供选择的数据键值配置 | object | - | | targetFormula | 右侧区域，支持公式，需要targetForm存在 | boolean | false | | referFilter | 右侧区域，参照类型字段，打开参照的过滤条件 | object | - | | relationList | 左侧和右侧值之间支持的运算关系列表 | object | - |
| logicMap | 表达式之间, 支持的逻辑关系，['and', 'or'] | array | ['and', 'or'] | | unifiedOutput | 统一新的真实值输出方式 默认true | boolean | false | | expressionType| 表达式类型 （条件表达式【conditions】或结果表达式【results】） ｜ string ｜ ‘conditions’ | | hideAddBtn | 是否隐藏 添加条件组按钮和增加按钮 | boolean | false | | useNewArch | 是否强制使用新版组件（默认false走接口判断） ｜ boolean ｜ false | | disabledItem | 穿透字段是否禁用 | boolean | true | | multiFun | 多语使用那种格式(默认走cb.lang,可传递'lang'字符串走lang) | string | 空 | | filterChild | 数据源为业务对象情况下是否过滤子表（ChildEntity） | boolean | false | |showExecutionMethod| 是否展示执行条件 | boolean | true | |maxNumber | 数字框最大值 | number | undefined | |maxLength | 最大长度 | number | undefined |

Expression Events

| 参数 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------ | :------------- | :---------------- | | onChange | 表达式改变时，实时触发的事件 | function | - | | onCancel | 底部区域，取消按钮点击触发的事件 | function | - | | onOk | 底部区域，确定按钮点击触发的事件 | function | - |

sourceProps/targetProps

| 参数 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------ | :------------- | :---------------- | | key | 配置sourceForm/targetForm一级数据key的属性 | string | 'id' | | label | 配置sourceForm/targetForm一级数据显示名的属性 | string | 'name' | | children | 配置sourceForm/targetForm二级数据在什么属性下 | string | 'fields' | | childrenProps | 配置sourceForm/targetForm二级数据的配置 | string | - |

sourceProps/targetProps ==》childrenProps

| 参数 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------ | :------------- | :--------------- | | key | 配置sourceForm/targetForm二级数据key的属性 | string | 'id' | | label | 配置sourceForm/targetForm二级数据显示名的属性 | string | 'name' | | type | 配置sourceForm/targetForm二级数据类型的属性 | string | 'type' | | cRefType | 配置sourceForm/targetForm二级数据参照refCode | string | 'cRefType' | | typeProps | 配置sourceForm/targetForm二级数据类型的配置 | string | - | | entityUri | 配置sourceForm 二级数据参照编码 | string | 'entityUri' | | firstAttributeType | 配置sourceForm 业务对象第一级的attributeType | string | 'firstAttributeType'|

sourceProps/targetProps ==》 childrenProps ==》typeProps

| 参数 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------ | :------------- | :--------------- | | string | childrenProps.type 字段为string类型映射列表 | array | ['string'] | | date | childrenProps.type 字段为date类型映射列表 | array | ['date'] | | dateTime | childrenProps.type 字段为dateTime类型映射列表 | array | ['dateTime'] | | time | childrenProps.type 字段为time类型映射列表 | array | ['time'] | | reference | childrenProps.type 字段为reference类型映射列表 | array | ['reference'] | | number | childrenProps.type 字段为number类型映射列表 | array | ['number'] | | boolean | childrenProps.type 字段为boolean类型映射列表 | array | ['boolean'] | | select | childrenProps.type 字段为select类型映射列表 | array | ['select'] |

主要参数实例

activeExp： 用于回显上次保存的数据，默认: {}

    const activeExp = {} 

logicMap: 两条表达式之间, 支持的逻辑关系, 默认值：['and', 'or']

    const logicMap = ['and']            // 仅支持且逻辑
    const logicMap = ['or']             // 仅支持或逻辑
    const logicMap = ['and', 'or']      // 同时支持且、或两种逻辑

relationList：不同类型类型字段，支持的所有运算符如下，可根据自己的需求，删减不需要的运算符

const relationList = {
    string: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_like', name: '均包含' },
        { code: 'all_nlike', name: '均不包含' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'like', name: '包含' },
        { code: 'nlike', name: '不包含' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    number: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'gt', name: '大于', showCode: '>' },
        { code: 'ge', name: '大于等于', showCode: '>=' },
        { code: 'lt', name: '小于', showCode: '<' },
        { code: 'le', name: '小于等于', showCode: '<=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    select: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'in', name: '在列表中' },
        { code: 'nin', name: '不在列表中' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    reference: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'in', name: '在列表中', multiple: true },
        { code: 'nin', name: '不在列表中', multiple: true },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    date: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'gt', name: '大于', showCode: '>' },
        { code: 'ge', name: '大于等于', showCode: '>=' },
        { code: 'lt', name: '小于', showCode: '<' },
        { code: 'le', name: '小于等于', showCode: '<=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    dateTime: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'gt', name: '大于', showCode: '>' },
        { code: 'ge', name: '大于等于', showCode: '>=' },
        { code: 'lt', name: '小于', showCode: '<' },
        { code: 'le', name: '小于等于', showCode: '<=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    time: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'gt', name: '大于', showCode: '>' },
        { code: 'ge', name: '大于等于', showCode: '>=' },
        { code: 'lt', name: '小于', showCode: '<' },
        { code: 'le', name: '小于等于', showCode: '<=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    boolean: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    formula: [
        { code: 'all_eq', name: '均等于', showCode: '==' },
        { code: 'all_ne', name: '均等于', showCode: '!=' },
        { code: 'all_gt', name: '均大于', showCode: '>' },
        { code: 'all_ge', name: '均大于等于', showCode: '>=' },
        { code: 'all_lt', name: '均小于', showCode: '<' },
        { code: 'all_le', name: '均小于等于', showCode: '<=' },
        { code: 'eq', name: '等于', showCode: '==' },
        { code: 'ne', name: '不等于', showCode: '!=' },
        { code: 'gt', name: '大于', showCode: '>' },
        { code: 'ge', name: '大于等于', showCode: '>=' },
        { code: 'lt', name: '小于', showCode: '<' },
        { code: 'le', name: '小于等于', showCode: '<=' },
        { code: 'empty', name: '为空' },
        { code: 'notEmpty', name: '不为空'}
    ],
    decimalRange:[
        { code: 'decimal_range_eq', name: '等于', showCode: '=' },
        { code: 'decimal_range_ne', name: '不等于', showCode: '!=' },
        { code: 'contains', name: '包含', showCode: '包含' },
        { code: 'not_contains', name: '不包含', showCode: '不包含' },
        { code: 'within', name: '介于', showCode: '介于' },
        { code: 'not_within', name: '不介于', showCode: '不介于' },
        { code: 'intersection', name: '有交集', showCode: '有交集' },
        { code: 'not_intersection', name: '无交集', showCode: '无交集' },
        { code: 'starts_with', name: '左包含', showCode: '左包含' },
        { code: 'ends_with', name: '右包含', showCode: '右包含' },
        { code: 'decimal_range_empty', name: '为空', showCode: '为空' },
        { code: 'decimal_range_not_empty', name: '不为空', showCode: '不为空' }
    ]
}

调用实例

自定义数据调用：（sourceProps = 'auto'）

 const sourceForm = [{
    "code":"ProjectVO",
    "name":"项目",
    "domainKey":"ucf-mdf",
    "cBillNo":"mdd_templatelist",
    "paramType":"STRING",
    "children":[
        {
            "code":"id",
            "type":"reference",
            "name":"名称",
            "paramType":"STRING",
            "multiple":true,
            "refCode":"ucfbasedoc.bd_projectcardref"
        }
    ]
}]
const sourceProps = {
    key: 'code',        
    label: 'name',
    children: 'children',
    childrenProps: {
        key: 'code',
        label: 'name',
        type: 'type',
        cRefType: 'refCode',
        typeProps: {
            string: ['string'],
            date: ['date'],
            dateTime: ['dateTime'],
            time: ['time'],
            reference: ['reference'],
            number: ['number'],
            boolean: ['boolean'],
            decimalRange:['decimalRange']
        }
    }
}
function onOk (a) {
    console.log(a, 'onOK')
}
function onChange (a) {
    console.log(a, JSON.stringify(a.activeExp), 'onChange')
}
function onCancel (a) {
    console.log(a, 'onCancel')
}
render(
    <Expression 
        title="表达式"  // 组件标题
        sourceType='auto'  // 左侧数据的数据类型支持 auto, uiMeta, busiObj 三种
        sourceForm={sourceForm} // 左侧条件的数据，具体数据见sourceForm参数实例
        sourceProps={sourceProps} // 左侧数据配置
        targetType='auto' // 右侧数据的类型，
        targetForm={sourceForm} // targetForm 可以 sourceForm 不同，数据格式一致即可
        targetProps={sourceProps} // 右侧数据配置
        targetFormula={true} // 右侧是否支持公式
        readOnly={false}  // 是否只读
        relationList={relationList} // 不同类型字段支持的运算符，具体见relationList参数实例
        activeExp={activeExp}
        onChange={onChange} // 条件组件数据变化的回调函数
        onCancel={onCancel}
        onOk={onOk}
    />,
    document.getElementById('root')
)

UI元数据调用实例：(sourceType = 'uiMeta')

const sourceForm = [{
    "iBillId":1002108502,
    "cBillName":"出差申请单",
    "cName_resid":"P_YS_PF_PRINT_0000057826",
    "cBillNo":"znbzbx_busistrip",
    "bPrintLimited":true,
    "iSystem":1,
    "cBillType":"Voucher",
    "cSubId":"RBSM",
    "entities":[{
        "cCode":"znbzbx_busistrip",
        "cEntityName":"出差申请单主表",
        "cEntityNameResid":"P_YS_ZNBZ_BZBX-UI_0001129672",
        "cType":"Bill",
        "cDataSourceName":"znbzbx.memoapply.MemoApplyVO",
        "iBillEntityId":29970201,
        "bMain":true,
        "fields":[{
            "cFieldName":"ismulticurrency",
            "cItemName":"ismulticurrency",
            "cCaption":"是否多币种",
            "cCaptionResid":"P_YS_ZNBZ_BZBX-UI_0001236430",
            "cShowCaption":"是否多币种",
            "cShowCaptionResid":"P_YS_ZNBZ_BZBX-UI_0001236430",
            "iBillEntityId":29970201,
            "iBillTplGroupId":17453254,
            "iTplId":1983994,
            "iMaxLength":255,
            "iFieldType":1,
            "bEnum":true,
            "cEnumString":"{\"true\":\"是\",\"false\":\"否\"}",
            "enumArray":"[{\"nameType\":\"text\",\"value\":\"是\",\"resid\":\"P_YS_FED_EXAMP_0000020600\",\"key\":\"true\"},{\"nameType\":\"text\",\"value\":\"否\",\"resid\":\"P_YS_FED_EXAMP_0000020344\",\"key\":\"false\"}]",
            "cEnumType":"aa_boolean",
            "bMustSelect":false,
            "bHidden":false,
            "bSplit":false,
            "bExtend":false,
            "bCanModify":true,
            "iMaxShowLen":255,
            "iColWidth":1,
            "bNeedSum":false,
            "bShowIt":true,
            "bFilter":true,
            "cDefaultValue":"false",
            "bIsNull":false,
            "bPrintCaption":true,
            "bJointQuery":false,
            "bPrintUpCase":false,
            "bSelfDefine":false,
            "bMain":true,
            "cDataSourceName":"znbzbx.memoapply.MemoApplyVO",
            "cControlType":"Radio",
            "bVmExclude":0,
            "iOrder":0,
            "isshoprelated":false,
            "iSystem":1,
            "isExport":true,
            "uncopyable":false,
            "isMasterOrg":false,
            "iAlign":1,
            "bEnableFormat":false
        }],
        "isTplExport":true
    }],
    "pubts":"2021-12-14 00:00:00",
    "supportTimeline":false
}]
render(
    <Expression 
        title="表达式"  // 组件标题
        sourceType='uiMeta'  // 左侧数据的数据类型支持 auto, uiMeta, busiObj 三种
        sourceForm={sourceForm} // 左侧条件的数据，具体数据见sourceForm参数实例
        targetType='uiMeta' // 右侧数据的类型，
        targetForm={sourceForm} // targetForm 可以 sourceForm 不同，数据格式一致即可
        targetFormula={true} // 右侧是否支持公式
        readOnly={false}  // 是否只读
        relationList={relationList} // 不同类型字段支持的运算符，具体见relationList参数实例
        activeExp={activeExp}
        onChange={onChange} // 条件组件数据变化的回调函数
        onCancel={onCancel}
        onOk={onOk}
    />,
    document.getElementById('root')
)

业务对象调用实例：(sourceType = 'busiObj')

const sourceForm = [
    'upu.st_purchaseorder' // 业务对象编码、 ${domain}.${billNo}
]
render(
    <Expression 
        title="表达式"  // 组件标题
        sourceType='busiObj'  // 左侧数据的数据类型支持 auto, uiMeta, busiObj 三种
        sourceForm={sourceForm} // 左侧条件的数据，具体数据见sourceForm参数实例
        targetType='busiObj' // 右侧数据的类型，
        targetForm={sourceForm} // targetForm 可以 sourceForm 不同，数据格式一致即可
        targetFormula={true} // 右侧是否支持公式
        readOnly={false}  // 是否只读
        relationList={relationList} // 不同类型字段支持的运算符，具体见relationList参数实例
        activeExp={activeExp}
        onChange={onChange} // 条件组件数据变化的回调函数, 具体数据见参数详情
        onCancel={onCancel}
        onOk={onOk}
    />,
    document.getElementById('root')
)