mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:18:29 +08:00
半成品
This commit is contained in:
parent
e27c38ed00
commit
93297e8c5c
@ -1,3 +1,26 @@
|
||||
import React from 'react';
|
||||
import ConditionBuilder from '../../../src/components/condition-builder/ConditionBuilder';
|
||||
|
||||
const fields = [
|
||||
{
|
||||
label: '姓名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: '年龄',
|
||||
name: 'age',
|
||||
type: 'number'
|
||||
},
|
||||
|
||||
{
|
||||
label: '入职时间',
|
||||
name: 'ruzhi',
|
||||
type: 'datetime'
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
type: 'page',
|
||||
title: '表单页面',
|
||||
@ -17,6 +40,10 @@ export default {
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
name: 'email'
|
||||
},
|
||||
|
||||
{
|
||||
children: () => <ConditionBuilder fields={fields} />
|
||||
}
|
||||
]
|
||||
}
|
||||
|
7
scss/components/_condition-builder.scss
Normal file
7
scss/components/_condition-builder.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.#{$ns}CBCGroup {
|
||||
&-toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
@ -505,6 +505,7 @@ $Satus-icon-width: px2rem(14px);
|
||||
@import '../components/dropdown';
|
||||
@import '../components/collapse';
|
||||
@import '../components/color';
|
||||
@import '../components/condition-builder';
|
||||
@import '../components/context-menu';
|
||||
@import '../components/wizard';
|
||||
@import '../components/crud';
|
||||
|
@ -188,6 +188,7 @@ pre {
|
||||
@import '../components/dropdown';
|
||||
@import '../components/collapse';
|
||||
@import '../components/color';
|
||||
@import '../components/condition-builder';
|
||||
@import '../components/context-menu';
|
||||
@import '../components/wizard';
|
||||
@import '../components/crud';
|
||||
|
@ -51,6 +51,7 @@ $Form-input-borderColor: #cfdadd;
|
||||
@import '../components/dropdown';
|
||||
@import '../components/collapse';
|
||||
@import '../components/color';
|
||||
@import '../components/condition-builder';
|
||||
@import '../components/context-menu';
|
||||
@import '../components/wizard';
|
||||
@import '../components/crud';
|
||||
|
@ -2,15 +2,18 @@ import React from 'react';
|
||||
import {ThemeProps, themeable} from '../../theme';
|
||||
import {LocaleProps, localeable} from '../../locale';
|
||||
import {uncontrollable} from 'uncontrollable';
|
||||
import {FieldTypes, FieldItem} from './types';
|
||||
import {FieldTypes, FieldItem, Fields} from './types';
|
||||
import {ConditionGroup} from './ConditionGroup';
|
||||
|
||||
export interface QueryBuilderProps extends ThemeProps, LocaleProps {
|
||||
fields: Array<FieldItem>;
|
||||
fields: Fields;
|
||||
}
|
||||
|
||||
export class QueryBuilder extends React.Component<QueryBuilderProps> {
|
||||
render() {
|
||||
return <p>this is querybuilder component</p>;
|
||||
const {classnames: cx, fields} = this.props;
|
||||
|
||||
return <ConditionGroup fields={fields} value={undefined} classnames={cx} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
48
src/components/condition-builder/ConditionGroup.tsx
Normal file
48
src/components/condition-builder/ConditionGroup.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import {Fields, ConditionGroupValue} from './types';
|
||||
import {ClassNamesFn} from '../../theme';
|
||||
import Button from '../Button';
|
||||
import {ConditionItem} from './ConditionItem';
|
||||
import {autobind} from '../../utils/helper';
|
||||
|
||||
export interface ConditionGroupProps {
|
||||
value?: ConditionGroupValue;
|
||||
fields: Fields;
|
||||
onChange: (value: ConditionGroupValue) => void;
|
||||
classnames: ClassNamesFn;
|
||||
}
|
||||
|
||||
export class ConditionGroup extends React.Component<ConditionGroupProps> {
|
||||
@autobind
|
||||
handleNotClick() {}
|
||||
|
||||
render() {
|
||||
const {classnames: cx, value, fields} = this.props;
|
||||
|
||||
return (
|
||||
<div className={cx('CBCGroup')}>
|
||||
<div className={cx('CBCGroup-toolbar')}>
|
||||
<div className={cx('CBCGroup-toolbarLeft')}>
|
||||
<Button onClick={this.handleNotClick} size="sm" active={value?.not}>
|
||||
取反
|
||||
</Button>
|
||||
<Button size="sm" active={value?.conjunction !== 'or'}>
|
||||
并且
|
||||
</Button>
|
||||
<Button size="sm" active={value?.conjunction === 'or'}>
|
||||
或者
|
||||
</Button>
|
||||
</div>
|
||||
<div className={cx('CBCGroup-toolbarRight')}>
|
||||
<Button size="sm">添加条件</Button>
|
||||
<Button size="sm">添加条件组</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Array.isArray(value)
|
||||
? value.map(item => <ConditionItem fields={fields} value={item} />)
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
13
src/components/condition-builder/ConditionItem.tsx
Normal file
13
src/components/condition-builder/ConditionItem.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import {Fields, ConditionRule, ConditionGroupValue} from './types';
|
||||
|
||||
export interface ConditionItemProps {
|
||||
fields: Fields;
|
||||
value: ConditionRule | ConditionGroupValue;
|
||||
}
|
||||
|
||||
export class ConditionItem extends React.Component<ConditionItemProps> {
|
||||
render() {
|
||||
return <p>233</p>;
|
||||
}
|
||||
}
|
@ -1,16 +1,28 @@
|
||||
import {FieldTypes, OperatorType, Funcs} from './types';
|
||||
import {FieldTypes, OperatorType, Funcs, Fields} from './types';
|
||||
|
||||
export interface BaseFieldConfig {
|
||||
operations: Array<OperatorType>;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
fields: Fields;
|
||||
funcs?: Funcs;
|
||||
maxLevel?: number;
|
||||
}
|
||||
|
||||
const defaultConfig: Config = {
|
||||
// fields: [],
|
||||
fields: [
|
||||
// {
|
||||
// type: 'text',
|
||||
// name: 'test',
|
||||
// label: 'Text'
|
||||
// },
|
||||
// {
|
||||
// label: 'Group',
|
||||
// children: [
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
|
||||
// 函数配置示例
|
||||
funcs: [
|
||||
|
@ -1,8 +1,11 @@
|
||||
type TypedMap<T> = {
|
||||
[key: string]: T;
|
||||
};
|
||||
|
||||
export type FieldTypes = 'text' | 'number' | 'boolean' | 'date' | 'datetime';
|
||||
export type FieldTypes =
|
||||
| 'text'
|
||||
| 'number'
|
||||
| 'boolean'
|
||||
| 'date'
|
||||
| 'time'
|
||||
| 'datetime'
|
||||
| 'select';
|
||||
|
||||
export type OperatorType =
|
||||
| 'equals'
|
||||
@ -42,13 +45,13 @@ export interface ConditionRule {
|
||||
right: ConditionRightValue | Array<ConditionRightValue>;
|
||||
}
|
||||
|
||||
export interface ConditionGroup {
|
||||
export interface ConditionGroupValue {
|
||||
conjunction: 'and' | 'or';
|
||||
not?: boolean;
|
||||
children?: Array<ConditionRule | ConditionGroup>;
|
||||
children?: Array<ConditionRule | ConditionGroupValue>;
|
||||
}
|
||||
|
||||
export interface ConditionValue extends ConditionGroup {}
|
||||
export interface ConditionValue extends ConditionGroupValue {}
|
||||
|
||||
interface BaseField {
|
||||
type: FieldTypes;
|
||||
@ -61,11 +64,73 @@ interface BaseField {
|
||||
defaultValue?: any;
|
||||
}
|
||||
|
||||
type FieldGroup = {
|
||||
label: string;
|
||||
children: Array<FieldSimple>;
|
||||
};
|
||||
|
||||
interface TextField extends BaseField {
|
||||
name: string;
|
||||
type: 'text';
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
}
|
||||
|
||||
type Field = TextField;
|
||||
interface NumberField extends BaseField {
|
||||
name: string;
|
||||
type: 'number';
|
||||
maximum?: number;
|
||||
minimum?: number;
|
||||
}
|
||||
|
||||
interface DateField extends BaseField {
|
||||
name: string;
|
||||
type: 'date';
|
||||
minDate?: any;
|
||||
maxDate?: any;
|
||||
}
|
||||
|
||||
interface TimeField extends BaseField {
|
||||
name: string;
|
||||
type: 'time';
|
||||
minTime?: any;
|
||||
maxTime?: any;
|
||||
}
|
||||
|
||||
interface DatetimeField extends BaseField {
|
||||
type: 'datetime';
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface SelectField extends BaseField {
|
||||
type: 'select';
|
||||
name: string;
|
||||
multiple?: boolean;
|
||||
options?: Array<any>;
|
||||
}
|
||||
|
||||
interface BooleanField extends BaseField {
|
||||
type: 'boolean';
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface GroupField {
|
||||
type: 'group';
|
||||
label: string;
|
||||
name: string;
|
||||
children: Array<FieldSimple>;
|
||||
}
|
||||
|
||||
type FieldSimple =
|
||||
| TextField
|
||||
| NumberField
|
||||
| DateField
|
||||
| TimeField
|
||||
| DatetimeField
|
||||
| SelectField
|
||||
| BooleanField;
|
||||
|
||||
type Field = FieldSimple | FieldGroup | GroupField;
|
||||
|
||||
interface FuncGroup {
|
||||
label: string;
|
||||
|
Loading…
Reference in New Issue
Block a user