From 93297e8c5caead6fb8c89f21967436470ca6758f Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Thu, 13 Aug 2020 20:05:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=8A=E6=88=90=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/Page/Form.jsx             | 27 ++++++
 scss/components/_condition-builder.scss       |  7 ++
 scss/themes/cxd.scss                          |  1 +
 scss/themes/dark.scss                         |  1 +
 scss/themes/default.scss                      |  1 +
 .../condition-builder/ConditionBuilder.tsx    |  9 +-
 .../condition-builder/ConditionGroup.tsx      | 48 +++++++++++
 .../condition-builder/ConditionItem.tsx       | 13 +++
 src/components/condition-builder/config.ts    | 16 +++-
 src/components/condition-builder/types.ts     | 83 +++++++++++++++++--
 10 files changed, 192 insertions(+), 14 deletions(-)
 create mode 100644 scss/components/_condition-builder.scss
 create mode 100644 src/components/condition-builder/ConditionGroup.tsx
 create mode 100644 src/components/condition-builder/ConditionItem.tsx

diff --git a/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx
index ed3a757a..81069dc8 100644
--- a/examples/components/Page/Form.jsx
+++ b/examples/components/Page/Form.jsx
@@ -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} />
       }
     ]
   }
diff --git a/scss/components/_condition-builder.scss b/scss/components/_condition-builder.scss
new file mode 100644
index 00000000..bab436ce
--- /dev/null
+++ b/scss/components/_condition-builder.scss
@@ -0,0 +1,7 @@
+.#{$ns}CBCGroup {
+  &-toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index c9d38b68..31fd67c9 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -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';
diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss
index 25bd89bf..bae59c11 100644
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@@ -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';
diff --git a/scss/themes/default.scss b/scss/themes/default.scss
index 8551bf6d..ca66bd61 100644
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@@ -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';
diff --git a/src/components/condition-builder/ConditionBuilder.tsx b/src/components/condition-builder/ConditionBuilder.tsx
index 96f977f0..5cd92227 100644
--- a/src/components/condition-builder/ConditionBuilder.tsx
+++ b/src/components/condition-builder/ConditionBuilder.tsx
@@ -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} />;
   }
 }
 
diff --git a/src/components/condition-builder/ConditionGroup.tsx b/src/components/condition-builder/ConditionGroup.tsx
new file mode 100644
index 00000000..7822f997
--- /dev/null
+++ b/src/components/condition-builder/ConditionGroup.tsx
@@ -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>
+    );
+  }
+}
diff --git a/src/components/condition-builder/ConditionItem.tsx b/src/components/condition-builder/ConditionItem.tsx
new file mode 100644
index 00000000..52a82f70
--- /dev/null
+++ b/src/components/condition-builder/ConditionItem.tsx
@@ -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>;
+  }
+}
diff --git a/src/components/condition-builder/config.ts b/src/components/condition-builder/config.ts
index ad707e80..c4d225cc 100644
--- a/src/components/condition-builder/config.ts
+++ b/src/components/condition-builder/config.ts
@@ -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: [
diff --git a/src/components/condition-builder/types.ts b/src/components/condition-builder/types.ts
index da3f74bb..c27b0b79 100644
--- a/src/components/condition-builder/types.ts
+++ b/src/components/condition-builder/types.ts
@@ -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;