feat: condition

@@ -20,5 +20,6 @@ export * from './qx-dynamic-component';
 export * from './qx-widget-icon';
 export * from './qx-widget-icon';
 export * from './qx-flow-node-selector';
 export * from './qx-flow-node-selector';
 export * from './qx-icon-selector';
 export * from './qx-icon-selector';
+export * from './qx-condition';
 
 
 
 

@@ -684,6 +684,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   subset,
   subset,
   params,
   params,
   fieldGroupType,
   fieldGroupType,
+  showAssignment = true,
   isMixValue,
   isMixValue,
 }) => {
 }) => {
   const valuesObj = value?.valuesObj?.[0] || {};
   const valuesObj = value?.valuesObj?.[0] || {};
@@ -760,12 +761,15 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         widget={field.extract?.widget}
         widget={field.extract?.widget}
         isMixValue={isMixValue}
         isMixValue={isMixValue}
       />
       />
-      <ControlOutlined
-        onClick={() => {
-          setOpen(!open);
-        }}
-        className="qx-base-condition-item__content-suffix"
-      />
+
+      {showAssignment ? (
+        <ControlOutlined
+          onClick={() => {
+            setOpen(!open);
+          }}
+          className="qx-base-condition-item__content-suffix"
+        />
+      ) : null}
     </>
     </>
   );
   );
 
 
@@ -817,18 +821,22 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         </div>
         </div>
       </div>
       </div>
       <div className="qx-base-condition-item__content">
       <div className="qx-base-condition-item__content">
-        <QxFlowNodeFieldSelector
-          mode="variable"
-          node={node!}
-          nodes={nodes!}
-          open={open}
-          value={valuesObj?.value}
-          onChange={handleAssignment}
-          limitTypes={[field.extract?.fieldType]}
-          subset={subset}
-        >
-          {RenderContent}
-        </QxFlowNodeFieldSelector>
+        {showAssignment ? (
+          <QxFlowNodeFieldSelector
+            mode="variable"
+            node={node!}
+            nodes={nodes!}
+            open={open}
+            value={valuesObj?.value}
+            onChange={handleAssignment}
+            limitTypes={[field.extract?.fieldType]}
+            subset={subset}
+          >
+            {RenderContent}
+          </QxFlowNodeFieldSelector>
+        ) : (
+          RenderContent
+        )}
       </div>
       </div>
     </div>
     </div>
   );
   );
@@ -848,7 +856,7 @@ export interface QxBaseConditionItemProps {
   value?: any;
   value?: any;
   onChange?: (val: any) => void;
   onChange?: (val: any) => void;
   remove?: (field: QxBaseConditionField) => void;
   remove?: (field: QxBaseConditionField) => void;
-  ValueAssignment?: React.FC<ValueAssignmentPopupProps>;
+  showAssignment?: boolean;
   mode?: string;
   mode?: string;
   node?: INode;
   node?: INode;
   nodes?: INode[];
   nodes?: INode[];

@@ -3,7 +3,7 @@ import { QxBaseConditionItem } from '../qx-base-condition-item';
 import { INode } from '../qx-flow-node-selector';
 import { INode } from '../qx-flow-node-selector';
 import './index.less';
 import './index.less';
 
 
-const FieldBaseType = {
+export const FieldBaseType = {
   STRING: 'TEXT',
   STRING: 'TEXT',
   DOUBLE: 'NUM',
   DOUBLE: 'NUM',
   NUMBER: 'NUM',
   NUMBER: 'NUM',
@@ -68,6 +68,7 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
         nodes={props.nodes}
         nodes={props.nodes}
         node={props.node}
         node={props.node}
         subset={props.subset}
         subset={props.subset}
+        showAssignment={props.showAssignment}
         onChange={(val) => handleItemChange(val, key)}
         onChange={(val) => handleItemChange(val, key)}
         remove={() => handleDelete(key)}
         remove={() => handleDelete(key)}
       />
       />
@@ -107,13 +108,21 @@ export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
 
 
 export type QxBaseConditionMode = 'condition' | 'variable';
 export type QxBaseConditionMode = 'condition' | 'variable';
 
 
+export interface QxBaseConditionValueType {
+  code: string;
+  type: string;
+  opt: string;
+  mappingValues: string[];
+  [key: string]: any
+}
+
 export interface QxBaseConditionProps {
 export interface QxBaseConditionProps {
   showIdx?: boolean;
   showIdx?: boolean;
   mode: QxBaseConditionMode;
   mode: QxBaseConditionMode;
-  options: QxBaseConditionOptionsProps[];
-  value: any[];
+  value?: QxBaseConditionValueType[];
   onChange?: (val: any[]) => void;
   onChange?: (val: any[]) => void;
   nodes?: INode[];
   nodes?: INode[];
   node?: INode;
   node?: INode;
   subset?: boolean;
   subset?: boolean;
+  showAssignment?: boolean;
 }
 }

+@import '~@qx/ui/src/style/variable.less';
+@prefix: ~'qx-condition-sql';
+
+.@{prefix} {
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid @N4;
+  }
+
+  &__title {
+    color: @N9;
+  }
+
+  &__select {
+    color: @B8;
+    width: 60px !important;
+    text-align: right;
+    :global {
+      .ant-select-suffix {
+        color: @B8;
+      }
+    }
+  }
+
+  &__input-textarea {
+    display: block;
+  }
+}

+import { FunctionOutlined } from '@ant-design/icons';
+import { Input, Select } from 'antd';
+import cx from 'classnames';
+import React, { useEffect, useState } from 'react';
+import './index.less';
+
+const prefix = 'qx-condition-sql';
+
+/**
+ * 条件表达式运算符
+ */
+export const OperatorCol = [
+  {
+    key: 'AND',
+    text: '且',
+  },
+  {
+    key: 'OR',
+    text: '或',
+  },
+  {
+    key: 'CUSTOM',
+    text: 'CUSTOM',
+  },
+];
+
+const options = OperatorCol.map((item) => ({
+  value: item.key,
+  label: item.key === 'CUSTOM' ? <FunctionOutlined /> : item.text,
+}));
+
+/**
+ * 组合条件
+ */
+export const QxConditionSql: React.FC<ConditionSqlProps> = ({
+  onChange,
+  onBlur,
+  value,
+}) => {
+  const [state, setState] = useState<ConditionSqlState>(
+    value || {
+      sqlType: 'AND',
+    },
+  );
+
+  const handleInputValueChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    const expression = e.target.value;
+    setState({ ...state, expression });
+  };
+
+  useEffect(() => {
+    onChange?.(state);
+  }, [state]);
+
+  useEffect(() => {
+    onChange?.({ expression: '', sqlType: 'AND' });
+  }, []);
+
+  return (
+    <div className={prefix}>
+      <div className={`${prefix}__header`}>
+        <span className={`${prefix}__title`}>添加组合方式</span>
+        <Select
+          value={state.sqlType || value?.sqlType}
+          bordered={false}
+          className={`${prefix}__select`}
+          options={options}
+          onChange={(value) => {
+            setState({
+              sqlType: value,
+              expression:
+                value !== 'CUSTOM'
+                  ? `1 ${value.toLocaleLowerCase()} 2`
+                  : state.expression,
+            });
+          }}
+        />
+      </div>
+      {state.sqlType === 'CUSTOM' ? (
+        <div className={`${prefix}__input`}>
+          <Input.TextArea
+            className={cx(`${prefix}__input-textarea`, 'qx-input')}
+            defaultValue={state.expression}
+            onChange={handleInputValueChange}
+            onBlur={(e) => {
+              handleInputValueChange(e);
+              onBlur?.({ ...state, expression: e.target.value });
+            }}
+            placeholder="请使用序号、小括号(英文)、逻辑符(and,or) 编写表达式例如：(1 and 2) or 3"
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+interface ConditionSqlProps {
+  onChange?: (val: ConditionSqlState) => void;
+  onBlur?: (val: ConditionSqlState) => void;
+  value?: ConditionSqlState;
+}
+
+export interface ConditionSqlState {
+  expression?: string;
+  sqlType: SqlType;
+}
+
+export type SqlType = 'AND' | 'OR' | 'CUSTOM';

+@import '~@qx/ui/src/style/variable.less';
+
+.qx-condition {
+  width: 100%;
+  
+  &-item {
+    display: flex;
+    align-items: center;
+
+
+    &__idx {
+      color: @N9;
+      margin-right: 4px;
+      width: 24px;
+      display: inline-block;
+    }
+  }
+}

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /common
+  title: 条件配置
+  order: 0
+---
+
+## QxBaseCondition 条件配置
+
+### 条件配置
+
+```tsx
+import { QxCondition } from '@qx/common';
+import { Form } from 'antd';
+
+export default () => {
+  return (
+    <div>
+      <Form
+        initialValues={{
+          condition: {
+            sqlType: 'AND',
+            operators: [
+              {
+                type: 'STRING',
+                name: '文本',
+                mappingValues: [],
+                field: {
+                  code: 'text',
+                  name: '文本',
+                  extract: { widget: 'qxInput', fieldType: 'STRING' },
+                },
+              },
+              {
+                type: 'STRING',
+                name: '文本',
+                mappingValues: [],
+                field: {
+                  code: 'text',
+                  name: '文本',
+                  extract: { widget: 'qxInput', fieldType: 'STRING' },
+                },
+              },
+            ],
+          },
+        }}
+        onValuesChange={(value, values) => {
+          console.log('values', values)
+        }}
+      >
+        <Form.Item name="condition">
+          <QxCondition showAssignment={false} />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+```
+
+<API id="QxCondition"></API>

+import React, { useEffect } from 'react';
+import {
+  QxBaseCondition,
+  QxBaseConditionValueType,
+} from '../qx-base-condition';
+import { QxConditionSql, SqlType } from '../qx-condition-sql';
+import { INode } from '../qx-flow-node-selector';
+
+export const QxCondition: React.FC<QxConditionProps> = ({
+  value,
+  className,
+  style,
+  enabled = true,
+  showAssignment = true,
+  onChange,
+  node,
+  nodes
+}) => {
+  const handleChange = (opt: Partial<QxConditionValueType>) => {
+    onChange?.(Object.assign({}, value, opt, { enabled }));
+  };
+
+  return (
+    <div className={`qx-condition ${className}`} style={style}>
+      <QxBaseCondition
+        mode="condition"
+        nodes={nodes}
+        node={node}
+        showAssignment={showAssignment}
+        value={value?.operators}
+        onChange={(condition) => {
+          handleChange({
+            operators: condition,
+          });
+        }}
+      />
+
+      {(value?.operators?.length || 0) >= 2 ? (
+        <QxConditionSql value={value} onChange={handleChange} />
+      ) : null}
+    </div>
+  );
+};
+
+export interface QxConditionValueType {
+  /**
+   * 是否启用条件
+   */
+  enabled?: boolean;
+  /**
+   * 条件组合类型
+   */
+  sqlType: SqlType;
+  /**
+   * 自定义条件表达式
+   */
+  expression: string;
+  /**
+   * 算子
+   */
+  operators: OperatorsType[];
+}
+
+export type OperatorsType = QxBaseConditionValueType;
+
+export interface QxConditionProps {
+  [key: string]: any;
+  value?: QxConditionValueType;
+  onChange?: (value: QxConditionValueType) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  node?: INode
+  nodes?: INode[]
+  showAssignment?: boolean
+}

@@ -95,7 +95,6 @@ export const useNodeFieldDisplay = ({
     ) || [],
     ) || [],
   );
   );
 
 
-  // const [targetParentNodes, setTargetParentNodes] = useState(sourceParentNodes)
   const [inputDisplay, setInputDisplay] = useState<React.ReactNode>();
   const [inputDisplay, setInputDisplay] = useState<React.ReactNode>();
   const [optionalNodes, setOptionalNodes] = useState<INode[]>([]); // 根据 fieldType 过滤后的 nodes
   const [optionalNodes, setOptionalNodes] = useState<INode[]>([]); // 根据 fieldType 过滤后的 nodes
 
 
@@ -109,9 +108,9 @@ export const useNodeFieldDisplay = ({
     return null;
     return null;
   };
   };
 
 
-  const genDisplayDom = (value: string, nodes: INode[]) => {
+  const getDisplayConfig = (value: string, nodes: INode[] = optionalNodes) => {
     const itemId = getId(value);
     const itemId = getId(value);
-    if (!itemId) return;
+    if (!itemId) return [];
     let displayConfig: any[] = [];
     let displayConfig: any[] = [];
     let n = true;
     let n = true;
     let index = 0;
     let index = 0;
@@ -151,6 +150,12 @@ export const useNodeFieldDisplay = ({
         n = false;
         n = false;
       }
       }
     }
     }
+
+    return displayConfig
+  }
+
+  const genDisplayDom = (value: string, nodes: INode[] = optionalNodes) => {
+    const displayConfig = getDisplayConfig(value, nodes)
     return (
     return (
       <>
       <>
         {displayConfig?.map((item, idx) => (
         {displayConfig?.map((item, idx) => (
@@ -185,7 +190,10 @@ export const useNodeFieldDisplay = ({
     );
     );
   };
   };
 
 
-  const renderInputDisplay = (nodes: INode[] = optionalNodes, val: string = value || '', ) => {
+  const renderInputDisplay = (
+    nodes: INode[] = optionalNodes,
+    val: string = value || '',
+  ) => {
     setInputDisplay(
     setInputDisplay(
       <Tag bordered={false} className="qx-node-select-input__content">
       <Tag bordered={false} className="qx-node-select-input__content">
         {genDisplayDom(val, nodes)}
         {genDisplayDom(val, nodes)}
@@ -345,8 +353,8 @@ export const useNodeFieldDisplay = ({
   return {
   return {
     genDisplayDom,
     genDisplayDom,
     optionalNodes,
     optionalNodes,
-    // targetParentNodes,
     renderInputDisplay,
     renderInputDisplay,
+    getDisplayConfig,
     inputDisplay,
     inputDisplay,
   };
   };
 };
 };