Merge pull request #55 from codingapi/dev

Dev

Author: xlorne

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

@@ -0,0 +1,71 @@
+import React from "react";
+import {Table} from "@flow-engine/flow-pc-ui";
+import {Button, Space } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+
+/**
+ * TODO 尚未完成
+ * @constructor
+ */
+export const ConditionGroup = () => {
+    return (
+        <div style={{
+            backgroundColor: '#fff',
+            color: 'rgba(0,0,0,0.88)',
+            minHeight: '60px',
+        }}>
+            <Table
+                toolBarRender={()=>{
+                    return [
+                        <Button icon={<PlusOutlined />}>添加条件</Button>
+                    ]
+                }}
+                columns={[
+                    {
+                        key:'id',
+                        title:'id',
+                        hidden:true,
+                        dataIndex: 'id',
+                    },
+                    {
+                        key:'left',
+                        title:'左侧参数',
+                        dataIndex:'left',
+                    },
+                    {
+                        key:'type',
+                        title:'条件关系',
+                        dataIndex:'type',
+                    },
+                    {
+                        key:'right',
+                        title:'右侧参数',
+                        dataIndex: 'right',
+                    },
+                    {
+                        key:'option',
+                        title:'操作',
+                        render: (text, record) => {
+                            return (
+                                <Space>
+                                    <a>交换</a>
+                                    <a>删除</a>
+                                </Space>
+                            )
+                        }
+                    },
+                ]}
+                dataSource={[
+                    {
+                        id:1,
+                        left:'用户编号',
+                        type:'等于',
+                        right:'1'
+                    }
+                ]}
+                pagination={false}
+            />
+
+        </div>
+    )
+}

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

@@ -0,0 +1,80 @@
+import {PlusCircleOutlined} from "@ant-design/icons";
+import {Dropdown, MenuProps} from "antd";
+import React from "react";
+
+/**
+ * TODO 尚未完成
+ * @constructor
+ */
+export const ConditionRelation = () => {
+
+    const items: MenuProps['items'] = [
+        {
+            key: '1',
+            label: (
+                <a>
+                    括号
+                </a>
+            ),
+        },
+        {
+            key: '2',
+            label: (
+                <a>
+                    并且
+                </a>
+            ),
+        },
+        {
+            key: '3',
+            label: (
+                <a>
+                    或者
+                </a>
+            ),
+        },
+        {
+            key: '4',
+            label: '条件',
+            children: [
+                {
+                    key: '3-1',
+                    label: '分组1',
+                },
+                {
+                    key: '3-2',
+                    label: '分组2',
+                },
+            ],
+        },
+        {
+            key: '5',
+            label: (
+                <a>
+                    删除
+                </a>
+            ),
+            danger:true
+        },
+    ];
+
+    return (
+        <div style={{
+            padding: '4px 11px',
+            border: '1px solid #d9d9d9',
+            borderRadius: '6px',
+            backgroundColor: '#fff',
+            color: 'rgba(0,0,0,0.88)',
+            minHeight: '60px',
+        }}>
+
+
+            <Dropdown menu={{ items }}>
+                <PlusCircleOutlined style={{
+                    cursor: 'pointer',
+                }}/>
+            </Dropdown>
+
+        </div>
+    )
+}

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/groovy-script-preview.tsx

@@ -21,7 +21,7 @@ export const GroovyScriptPreview: React.FC<GroovyScriptPreviewProps> = (props) =
                         minHeight: '45px',
                         padding: '4px 11px',
                         border: '1px solid #d9d9d9',
-                        borderRadius: '6px 0 0 6px',
+                        borderRadius: '6px',
                         backgroundColor: value ? '#fff' : '#fafafa',
                         color: value ? 'rgba(0,0,0,0.88)' : 'rgba(0,0,0,0.25)',
                     }}

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

@@ -1,8 +1,13 @@
 import React from "react";
 import {ConditionViewPlugin, VIEW_KEY} from "@/components/script/plugins/condition-view-type";
 import {ViewBindPlugin} from "@flow-engine/flow-types";
-import {AdvancedScriptEditor} from "@/components/script/components/advanced-script-editor";
 import {SCRIPT_DEFAULT_CONDITION} from "@/components/script/default-script";
+import {GroovyScriptConvertorUtil} from "@/components/script/utils/convertor";
+import {Button, Space} from "antd";
+import {CodeOutlined, ReloadOutlined} from "@ant-design/icons";
+import {GroovyScriptPreview} from "@/components/script/components/groovy-script-preview";
+import {ConditionRelation} from "@/components/script/components/condition/condition-relation";
+import {ConditionGroup} from "@/components/script/components/condition/condition-group";
 
 /**
  * TODO 条件控制界面
@@ -17,13 +22,46 @@ export const ConditionPluginView: React.FC<ConditionViewPlugin> = (props) => {
         );
     }
 
-
     return (
-        <AdvancedScriptEditor
-            {...props}
-            resetScript={()=>{
-                return SCRIPT_DEFAULT_CONDITION;
-            }}
-        />
+       <div>
+           <div>
+               预览
+               <GroovyScriptPreview
+                   script={props.script}
+                   multiline={true}
+               />
+           </div>
+           <div>
+               关系
+               <ConditionRelation/>
+           </div>
+           <div>
+               条件
+               <ConditionGroup/>
+           </div>
+           <Space
+               style={{
+                   marginTop: 8
+               }}
+           >
+               <Button
+                   icon={<CodeOutlined/>}
+                   onClick={() => {
+                       props.onChange(GroovyScriptConvertorUtil.toCustomScript(props.script));
+                   }}
+               >
+                   高级配置
+               </Button>
+               <Button
+                   icon={<ReloadOutlined/>}
+                   danger={true}
+                   onClick={() => {
+                       props.onChange(SCRIPT_DEFAULT_CONDITION);
+                   }}
+               >
+                   重置脚本
+               </Button>
+           </Space>
+       </div>
     );
 }