Design-iuap-expression NPM

条件表达式

安装

警告：

  该依赖包不提供个性化更新，仅单独项目使用，公版请使用iuap-expression

安装

安装方法：

    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

参数	说明	类型	默认值
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	左侧区域，支持公式，需要targetForm存在	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	统一新的真实值输出方式默认false	boolean	false
expressionType	表达式类型（条件表达式【conditions】或结果表达式【results】）｜ string ｜ ‘conditions’
hideAddBtn	是否隐藏添加条件组按钮和增加按钮	boolean	false
useNewArch	是否强制使用新版组件（默认false走接口判断）｜ boolean ｜ false

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":"developplatform",
    "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} // 右侧数据配置
        sourceFormula={true}  // 左侧是否支持公式
        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 不同，数据格式一致即可
        sourceFormula={true}  // 左侧是否支持公式
        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 不同，数据格式一致即可
        sourceFormula={true}  // 左侧是否支持公式
        targetFormula={true} // 右侧是否支持公式
        readOnly={false}  // 是否只读
        relationList={relationList} // 不同类型字段支持的运算符，具体见relationList参数实例
        activeExp={activeExp}
        onChange={onChange} // 条件组件数据变化的回调函数, 具体数据见参数详情
        onCancel={onCancel}
        onOk={onOk}
    />,
    document.getElementById('root')
)

@tinper/next-ui axios clone-deep react react-dom ac-lang-cn

@infinitebrahmanuniverse/nolb-des @zalastax/nolb-des

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago