iuap-expression v1.2.95

条件表达式

多语功能 需要自行引入 多语组 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

Expression Events

sourceProps/targetProps

sourceProps/targetProps ==》childrenProps

sourceProps/targetProps ==》 childrenProps ==》typeProps

主要参数实例

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')
)