diff --git a/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx index 24528ad56..fd322c557 100644 --- a/examples/components/Page/Form.jsx +++ b/examples/components/Page/Form.jsx @@ -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}) => ( - - ) + label: 'Email', + type: 'email', + name: 'email' } ] } diff --git a/scss/components/_condition-builder.scss b/scss/components/_condition-builder.scss index 764fac43a..8d1bad73e 100644 --- a/scss/components/_condition-builder.scss +++ b/scss/components/_condition-builder.scss @@ -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); } diff --git a/src/components/condition-builder/Expression.tsx b/src/components/condition-builder/Expression.tsx index 877cac1eb..e407fa57d 100644 --- a/src/components/condition-builder/Expression.tsx +++ b/src/components/condition-builder/Expression.tsx @@ -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 { 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 { field={valueField!} value={value} onChange={this.handleValueChange} + op={op} /> ) : null} diff --git a/src/components/condition-builder/Group.tsx b/src/components/condition-builder/Group.tsx index 10644a01f..9ebeec579 100644 --- a/src/components/condition-builder/Group.tsx +++ b/src/components/condition-builder/Group.tsx @@ -158,11 +158,7 @@ export class ConditionGroup extends React.Component { 添加条件 - diff --git a/src/components/condition-builder/Item.tsx b/src/components/condition-builder/Item.tsx index 893512b7e..53679e16f 100644 --- a/src/components/condition-builder/Item.tsx +++ b/src/components/condition-builder/Item.tsx @@ -95,7 +95,7 @@ export class ConditionItem extends React.Component { } renderLeft() { - const {value, fields, funcs} = this.props; + const {value, fields, funcs, config} = this.props; return ( { 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 { return ( ); } diff --git a/src/components/condition-builder/Value.tsx b/src/components/condition-builder/Value.tsx index 0e7ab2de5..f87d0a160 100644 --- a/src/components/condition-builder/Value.tsx +++ b/src/components/condition-builder/Value.tsx @@ -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 { 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 { } else if (field.type === 'number') { input = ( { timeFormat={field.timeFormat || 'HH:mm'} /> ); + } else if (field.type === 'select') { + input = ( +