add condition Group

Author: xlorne

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/condition/index.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import {GroovyScriptPreview} from "@/components/script/components/groovy-script-preview";
 import {EditOutlined} from "@ant-design/icons";
 import {ConditionConfigModal} from "@/components/script/modal/condition-config-modal";
+import {useScriptVariables} from "@/components/design-editor/hooks/use-script-variables";
 
 /**
  * 条件配置
@@ -13,6 +14,7 @@ export const ConditionScript = ()=>{
 
     const [form] = Form.useForm();
     const [visible,setVisible] = React.useState(false);
+    const scriptVariables = useScriptVariables();
 
     return (
         <Form
@@ -49,6 +51,7 @@ export const ConditionScript = ()=>{
                                 onCancel={()=>{setVisible(false);}}
                                 onConfirm={(value)=>{onChange(value)}}
                                 script={value}
+                                variables={scriptVariables}
                             />
                         </Space.Compact>
                     )}

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/condition/components/condition-group/condition.tsx

@@ -1,23 +1,126 @@
 import {Condition} from "@/components/script/components/condition/typings";
 import {Input, Select, Space} from "antd";
 import React from "react";
+import {useConditionContext} from "@/components/script/components/condition/hooks/use-condition-context";
+import {GroovyVariableMapping} from "@/components/script/typings";
 
 interface ConditionItemViewProps {
     data?: Condition;
+    id: string;
+    location: 'left' | 'right';
+}
+
+interface ConditionInputProps {
+    value: string;
+    onChange: (value: Condition) => void;
+}
+
+const VariableSelect: React.FC<ConditionInputProps> = (props) => {
+
+    const {state} = useConditionContext();
+
+    const variables = React.useMemo(() => {
+        const groups = new Map<string, GroovyVariableMapping[]>();
+
+        for (const mapping of state.variables) {
+            const existing = groups.get(mapping.tag) || [];
+            existing.push(mapping);
+            groups.set(mapping.tag, existing);
+        }
+
+        const options: any[] = [];
+        for (const group of Array.from(groups.keys())) {
+            const children = groups.get(group) || [];
+
+            options.push({
+                label: group,
+                options: children,
+            })
+        }
+
+        return options;
+    }, [state.variables]);
+
+    const handleChange = (value: string, option: any) => {
+        props.onChange({
+            label: option.label,
+            value: option.value,
+            dataType: option.type,
+            type: 'variable',
+        });
+    }
+
+    return (
+        <Select
+            showSearch={{
+                filterOption: (value: string, option) => {
+                    if (option.value) {
+                        return option.value.includes(value) || option.label.includes(value);
+                    }
+                    return false;
+                }
+            }}
+            value={props.value}
+            placeholder={"请选择参数"}
+            style={{width: "200px"}}
+            options={variables}
+            onChange={handleChange}
+        />
+    )
+}
+
+const TypeInput: React.FC<ConditionInputProps> = (props) => {
+
+    const handleChange = (value: string) => {
+        props.onChange({
+            label: value,
+            value: value,
+            dataType: 'STRING',
+            type: 'input',
+        });
+    }
+
+    return (
+        <Input
+            style={{width: "200px"}}
+            value={props.value}
+            placeholder={"请输入参数"}
+            onChange={(event)=>{
+                handleChange(event.target.value);
+            }}
+        />
+    )
 }
 
 export const ConditionItemView: React.FC<ConditionItemViewProps> = (props) => {
-    const label = props.data?.label || '未设置';
-    const [type,setType] = React.useState('variable');
+    const [type, setType] = React.useState(props.data?.type || 'variable');
+
+    const {context} = useConditionContext();
+
+    const presenter =  context.getPresenter().getConditionGroupPresenter();
+
+    const handleUpdate = (value: any) => {
+        const latest = {
+            ...props.data,
+            ...value
+        }
+        presenter.updateCondition(props.id,props.location, latest);
+    }
+
+    React.useEffect(()=>{
+        if(props.data) {
+            setType(props.data.type);
+        }
+    },[props.data])
 
     return (
         <Space.Compact>
             <Select
-                style={{ width: "100px" }}
-                defaultValue={type}
+                style={{width: "100px"}}
+                value={type}
                 options={[
                     {
-                        label: '插入参数',
+                        label: '选择变量',
                         value: 'variable'
                     },
                     {
@@ -30,14 +133,20 @@ export const ConditionItemView: React.FC<ConditionItemViewProps> = (props) => {
                 }}
             />
             {type === "variable" && (
-                <Select
-                    style={{ width: "100px" }}
+                <VariableSelect
+                    value={props.data?.value || ''}
+                    onChange={(value) => {
+                        handleUpdate(value)
+                    }}
                 />
             )}
 
             {type === "input" && (
-                <Input
-                    style={{ width: "100px" }}
+                <TypeInput
+                    value={props.data?.value || ''}
+                    onChange={(value) => {
+                        handleUpdate(value)
+                    }}
                 />
             )}
 

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/condition/components/condition-group/group.tsx

@@ -43,23 +43,34 @@ export const Group = () => {
                         title: '左侧参数',
                         dataIndex: 'left',
                         render: (_, record) => {
-                            return (<ConditionItemView data={record.left}/>)
+                            return (<ConditionItemView
+                                id={record.id}
+                                location={'left'}
+                                data={record.left}
+                            />)
                         }
                     },
                     {
                         key: 'type',
                         title: '条件关系',
                         dataIndex: 'type',
                         render: (_, record) => {
-                            return (<ConditionTypeView type={record.type}/>)
+                            return (<ConditionTypeView
+                                type={record.type}
+                                id={record.id}
+                            />)
                         }
                     },
                     {
                         key: 'right',
                         title: '右侧参数',
                         dataIndex: 'right',
                         render: (_, record) => {
-                            return (<ConditionItemView data={record.right}/>)
+                            return (<ConditionItemView
+                                id={record.id}
+                                location={'right'}
+                                data={record.right}
+                            />)
                         }
                     },
                     {

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/condition/components/condition-group/type.tsx

@@ -1,19 +1,30 @@
 import {RelationType, relationTypeOptions} from "@/components/script/components/condition/typings";
+import {Select} from "antd";
 import React from "react";
+import {useConditionContext} from "@/components/script/components/condition/hooks/use-condition-context";
 
 interface ConditionTypeViewProps {
     type?: RelationType;
+    id: string;
 }
 
 export const ConditionTypeView: React.FC<ConditionTypeViewProps> = (props) => {
     const type = props.type;
-    const typeLabel = relationTypeOptions.find(item => item.value === type);
-    if (typeLabel) {
-        return (
-            <span>{typeLabel.label}</span>
-        )
+
+    const {context} = useConditionContext();
+    const presenter = context.getPresenter().getConditionGroupPresenter();
+
+    const handleChangeType = (value: string) => {
+        presenter.updateType(props.id, value as RelationType);
     }
+
     return (
-        <span>未知</span>
+        <Select
+            placeholder={"请选择关系"}
+            options={relationTypeOptions}
+            value={type}
+            style={{width: "100px"}}
+            onChange={handleChangeType}
+        />
     )
 }

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/condition/hooks/use-condition-context.ts

@@ -2,7 +2,7 @@ import React from "react";
 import {Presenter} from "../presenters";
 import {useDispatch, useSelector} from "react-redux";
 import {ConditionContext, ConditionContextScope} from "../context";
-import {ConditionReduxState,updateState} from "../store";
+import {ConditionReduxState, updateState} from "../store";
 import {ConditionApiImpl} from "../models";
 import {ConditionViewProps} from "../typings";
 import {useScriptMetaData} from "@/components/script/hooks/use-script-meta-data";
@@ -38,21 +38,24 @@ export const createConditionContext = (props: ConditionViewProps) => {
             new ConditionApiImpl()
         );
         ref.current = new ConditionContextScope(presenter, props);
-        ref.current.initState(initData);
+        ref.current.initState({
+            ...initData,
+            variables: props.variables
+        });
     }
 
     React.useEffect(() => {
         ref.current?.syncState(state);
     }, [state]);
 
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         // 关闭时清空redux的数据
-        return ()=>{
+        return () => {
             ref.current?.clearState();
             ref.current = undefined;
         }
-    },[]);
+    }, []);
 
     return {
         state,

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/condition/presenters/group-presenter.ts

@@ -1,6 +1,6 @@
 import {IdUtils} from "@/utils";
 import {Presenter} from "./index";
-import {ConditionGroup} from "@/components/script/components/condition/typings";
+import {Condition, ConditionGroup, RelationType} from "@/components/script/components/condition/typings";
 
 /**
  *  条件分组的Presenter对象
@@ -12,6 +12,50 @@ export class ConditionGroupPresenter {
         this.presenter = presenter;
     }
 
+    /**
+     * 更新条件参数
+     * @param id
+     * @param location
+     * @param condition
+     */
+    public updateCondition(id: string, location: 'left' | 'right', condition: Condition) {
+        this.presenter.updateState(prevState => {
+            const groups = prevState.groups.map(group => {
+                if (group.id === id) {
+                    return {
+                        ...group,
+                        [location]: condition
+                    };
+                }
+                return group;
+            });
+            console.log('updateCondition:', groups);
+            return {
+                ...prevState,
+                groups: groups
+            }
+        })
+    }
+
+
+    public updateType(id: string, type: RelationType) {
+        this.presenter.updateState(prevState => {
+            const groups = prevState.groups.map(group => {
+                if (group.id === id) {
+                    return {
+                        ...group,
+                        type: type
+                    };
+                }
+                return group;
+            });
+            return {
+                ...prevState,
+                groups: groups
+            }
+        })
+    }
+
     /**
      *  添加条件
      */