补充条件组合逻辑
This commit is contained in:
liaoxuezhi
parent
e6defff385
commit
cec7a942a5
|
|
@ -1,74 +1,3 @@
|
|||
import React from 'react';
|
||||
import ConditionBuilder from '../../../src/components/condition-builder';
|
||||
|
||||
const fields = [
|
||||
{
|
||||
label: '姓名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: '年龄',
|
||||
name: 'age',
|
||||
type: 'number'
|
||||
},
|
||||
|
||||
{
|
||||
label: '出生日期',
|
||||
name: 'birthday',
|
||||
type: 'date'
|
||||
},
|
||||
|
||||
{
|
||||
label: '起床时间',
|
||||
name: 'wakeupAt',
|
||||
type: 'time'
|
||||
},
|
||||
|
||||
{
|
||||
label: '入职时间',
|
||||
name: 'ruzhi',
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
{
|
||||
label: '关系字段',
|
||||
children: [
|
||||
{
|
||||
label: '姓名',
|
||||
name: 'name2',
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: '年龄',
|
||||
name: 'age2',
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const funcs = [
|
||||
// {
|
||||
// label: '文本',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'LOWERCASE',
|
||||
// label: '转小写',
|
||||
// returnType: 'text',
|
||||
// args: [
|
||||
// {
|
||||
// type: 'text',
|
||||
// label: '文本'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
];
|
||||
|
||||
export default {
|
||||
type: 'page',
|
||||
title: '表单页面',
|
||||
|
|
@ -76,50 +5,19 @@ export default {
|
|||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
title: '',
|
||||
data: {a: [{b: 1, c: [{d: 2}]}]},
|
||||
// debug: true,
|
||||
debug: true,
|
||||
api: '/api/mock2/form/saveForm',
|
||||
controls: [
|
||||
// {
|
||||
// label: 'Name',
|
||||
// type: 'text',
|
||||
// name: 'name'
|
||||
// },
|
||||
|
||||
// {
|
||||
// label: 'Email',
|
||||
// type: 'email',
|
||||
// name: 'email'
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: 'a',
|
||||
// type: 'static',
|
||||
// tpl: '${a|json:2}'
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: 'a.0.b',
|
||||
// type: 'text',
|
||||
// label: 'B'
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: 'a.0.c.0.d',
|
||||
// type: 'number',
|
||||
// label: 'D'
|
||||
// },
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
name: 'name'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'a',
|
||||
component: ({value, onChange}) => (
|
||||
<ConditionBuilder
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
fields={fields}
|
||||
funcs={funcs}
|
||||
/>
|
||||
)
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
name: 'email'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.#{$ns}CBDelete {
|
||||
margin-left: $gap-xs;
|
||||
}
|
||||
}
|
||||
&:not(:hover) .#{$ns}CBGroup-toolbarRight {
|
||||
opacity: 0;
|
||||
|
|
@ -168,7 +172,7 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover > &-body {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import {
|
|||
ExpressionFunc,
|
||||
Type,
|
||||
FieldSimple,
|
||||
FieldGroup
|
||||
FieldGroup,
|
||||
OperatorType
|
||||
} from './types';
|
||||
import React from 'react';
|
||||
import ConditionField from './Field';
|
||||
|
|
@ -34,6 +35,7 @@ export interface ExpressionProps extends ThemeProps {
|
|||
funcs?: Funcs;
|
||||
defaultType?: 'value' | 'field' | 'func' | 'raw';
|
||||
allowedTypes?: Array<'value' | 'field' | 'func' | 'raw'>;
|
||||
op?: OperatorType;
|
||||
}
|
||||
|
||||
const fieldMap = {
|
||||
|
|
@ -109,7 +111,8 @@ export class Expression extends React.Component<ExpressionProps> {
|
|||
defaultType,
|
||||
allowedTypes,
|
||||
funcs,
|
||||
fields
|
||||
fields,
|
||||
op
|
||||
} = this.props;
|
||||
const inputType =
|
||||
((value as any)?.type === 'field'
|
||||
|
|
@ -138,6 +141,7 @@ export class Expression extends React.Component<ExpressionProps> {
|
|||
field={valueField!}
|
||||
value={value}
|
||||
onChange={this.handleValueChange}
|
||||
op={op}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
|
|
|
|||
|
|
@ -158,11 +158,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
|
|||
<Icon icon="plus" className="icon" />
|
||||
添加条件
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.handleAddGroup}
|
||||
size="xs"
|
||||
className="m-r-xs"
|
||||
>
|
||||
<Button onClick={this.handleAddGroup} size="xs">
|
||||
<Icon icon="plus-cicle" className="icon" />
|
||||
添加条件组
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
|
|||
}
|
||||
|
||||
renderLeft() {
|
||||
const {value, fields, funcs} = this.props;
|
||||
const {value, fields, funcs, config} = this.props;
|
||||
|
||||
return (
|
||||
<Expression
|
||||
|
|
@ -104,7 +104,9 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
|
|||
onChange={this.handleLeftChange}
|
||||
fields={fields}
|
||||
defaultType="field"
|
||||
allowedTypes={['field', 'func']}
|
||||
allowedTypes={(config.valueTypes || ['field', 'func']).filter(
|
||||
type => type === 'field' || type === 'func'
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -272,13 +274,17 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
|
|||
|
||||
return (
|
||||
<Expression
|
||||
op={op}
|
||||
funcs={funcs}
|
||||
valueField={field}
|
||||
value={value.right}
|
||||
onChange={this.handleRightChange}
|
||||
fields={fields}
|
||||
defaultType="value"
|
||||
allowedTypes={field?.valueTypes || ['value', 'field', 'func', 'raw']}
|
||||
allowedTypes={
|
||||
field?.valueTypes ||
|
||||
config.valueTypes || ['value', 'field', 'func', 'raw']
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
import React from 'react';
|
||||
import {FieldSimple} from './types';
|
||||
import {FieldSimple, OperatorType} from './types';
|
||||
import {ThemeProps, themeable} from '../../theme';
|
||||
import InputBox from '../InputBox';
|
||||
import NumberInput from '../NumberInput';
|
||||
import DatePicker from '../DatePicker';
|
||||
import Select from '../Select';
|
||||
import Switch from '../Switch';
|
||||
|
||||
export interface ValueProps extends ThemeProps {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
field: FieldSimple;
|
||||
op?: OperatorType;
|
||||
}
|
||||
|
||||
export class Value extends React.Component<ValueProps> {
|
||||
render() {
|
||||
const {classnames: cx, field, value, onChange} = this.props;
|
||||
const {classnames: cx, field, value, onChange, op} = this.props;
|
||||
let input: JSX.Element | undefined = undefined;
|
||||
|
||||
if (field.type === 'text') {
|
||||
|
|
@ -27,7 +30,7 @@ export class Value extends React.Component<ValueProps> {
|
|||
} else if (field.type === 'number') {
|
||||
input = (
|
||||
<NumberInput
|
||||
placeholder={field.placeholder || '请选择日期'}
|
||||
placeholder={field.placeholder || '请输入数字'}
|
||||
min={field.minimum}
|
||||
max={field.maximum}
|
||||
value={value ?? field.defaultValue}
|
||||
|
|
@ -69,6 +72,20 @@ export class Value extends React.Component<ValueProps> {
|
|||
timeFormat={field.timeFormat || 'HH:mm'}
|
||||
/>
|
||||
);
|
||||
} else if (field.type === 'select') {
|
||||
input = (
|
||||
<Select
|
||||
simpleValue
|
||||
options={field.options!}
|
||||
value={value ?? field.defaultValue}
|
||||
onChange={onChange}
|
||||
multiple={op === 'select_any_in' || op === 'select_not_any_in'}
|
||||
/>
|
||||
);
|
||||
} else if (field.type === 'boolean') {
|
||||
input = (
|
||||
<Switch value={value ?? field.defaultValue} onChange={onChange} />
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={cx('CBValue')}>{input}</div>;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export interface BaseFieldConfig {
|
|||
}
|
||||
|
||||
export interface Config {
|
||||
valueTypes?: Array<'value' | 'field' | 'func' | 'raw'>;
|
||||
fields: Fields;
|
||||
funcs?: Funcs;
|
||||
maxLevel?: number;
|
||||
|
|
@ -27,10 +28,15 @@ export const OperationMap = {
|
|||
like: '模糊匹配',
|
||||
not_like: '不匹配',
|
||||
starts_with: '匹配开头',
|
||||
ends_with: '匹配结尾'
|
||||
ends_with: '匹配结尾',
|
||||
select_equals: '等于',
|
||||
select_not_equals: '不等于',
|
||||
select_any_in: '包含',
|
||||
select_not_any_in: '不包含'
|
||||
};
|
||||
|
||||
const defaultConfig: Config = {
|
||||
valueTypes: ['value'],
|
||||
types: {
|
||||
text: {
|
||||
placeholder: '请输入文本',
|
||||
|
|
@ -103,6 +109,20 @@ const defaultConfig: Config = {
|
|||
'is_empty',
|
||||
'is_not_empty'
|
||||
]
|
||||
},
|
||||
|
||||
select: {
|
||||
operators: [
|
||||
'select_equals',
|
||||
'select_not_equals',
|
||||
'select_any_in',
|
||||
'select_not_any_in'
|
||||
],
|
||||
valueTypes: ['value']
|
||||
},
|
||||
|
||||
boolean: {
|
||||
operators: ['equal', 'not_equal']
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,11 @@ export type OperatorType =
|
|||
| 'greater'
|
||||
| 'greater_or_equal'
|
||||
| 'between'
|
||||
| 'not_between';
|
||||
| 'not_between'
|
||||
| 'select_equals'
|
||||
| 'select_not_equals'
|
||||
| 'select_any_in'
|
||||
| 'select_not_any_in';
|
||||
|
||||
export type FieldItem = {
|
||||
type: 'text';
|
||||
|
|
@ -180,4 +184,5 @@ export type Type = {
|
|||
defaultOp?: OperatorType;
|
||||
operators: Array<OperatorType>;
|
||||
placeholder?: string;
|
||||
valueTypes?: Array<'value' | 'field' | 'func' | 'raw'>;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue