Skip to content

Commit 43daaf3

Browse files
xlornexlorne
committed
fix node-title.tsx
1 parent 1acce26 commit 43daaf3

12 files changed

Lines changed: 220 additions & 129 deletions

File tree

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/advanced-script-editor.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import {ScriptType,GroovyVariableMapping} from '@/components/design-editor/typings/script';
2+
import {Button, Input, Space} from 'antd';
3+
import React from "react";
4+
import {GroovyScriptContent} from "@/components/design-editor/node-components/scripts/components/groovy-script-modal";
5+
import {
6+
NodeTitleGroovyConvertor
7+
} from "@/components/design-editor/node-components/scripts/services/convertor/node-title";
8+
import { DeleteOutlined } from "@ant-design/icons";
9+
import {
10+
GroovyScriptConverterContext
11+
} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
12+
13+
const {TextArea} = Input;
14+
15+
interface ScriptEditorProps {
16+
/** 脚本类型 */
17+
type: ScriptType;
18+
/** 当前脚本内容 */
19+
script: string;
20+
/** 变量映射列表 */
21+
variables: GroovyVariableMapping[];
22+
/** 脚本变更回调 */
23+
onChange: (script: string) => void;
24+
/** 是否只读 */
25+
readonly?: boolean;
26+
}
27+
28+
/**
29+
* 高级脚本编辑器组件
30+
* 支持自由编辑 Groovy 脚本
31+
*/
32+
export const ScriptEditor:React.FC<ScriptEditorProps> = (props: ScriptEditorProps)=> {
33+
const {script, onChange, readonly = false, variables} = props;
34+
35+
const handleChange = (value: string) => {
36+
if (!readonly) {
37+
onChange(value);
38+
}
39+
};
40+
41+
return (
42+
<TextArea
43+
value={script}
44+
onChange={(e) => handleChange(e.target.value)}
45+
readOnly={readonly}
46+
style={{ fontFamily: 'Courier New, monospace' }}
47+
placeholder="请输入 Groovy 脚本..."
48+
autoSize={{ minRows: 6, maxRows: 10 }}
49+
/>
50+
);
51+
}
52+
53+
54+
export const AdvancedScriptEditor: React.FC<GroovyScriptContent> = (props) => {
55+
56+
const groovyScriptConvertor = GroovyScriptConverterContext.getInstance().createConverter(props.type, props.content, props.variables);
57+
58+
if(groovyScriptConvertor) {
59+
60+
return (
61+
<div>
62+
自定义脚本
63+
<ScriptEditor
64+
type={props.type}
65+
script={props.content}
66+
variables={props.variables}
67+
onChange={props.onChange}
68+
/>
69+
<Space
70+
style={{
71+
marginTop: 8
72+
}}
73+
>
74+
<Button
75+
icon={<DeleteOutlined/>}
76+
danger={true}
77+
onClick={() => {
78+
props.onChange(groovyScriptConvertor.getDefaultScript());
79+
}}
80+
>
81+
重置配置
82+
</Button>
83+
</Space>
84+
</div>
85+
)
86+
}
87+
}

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/groovy-script-preview.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import React from "react";
2+
import {GroovyVariableMapping, ScriptType} from "@/components/design-editor/typings/script";
3+
import {
4+
GroovyScriptConverterContext
5+
} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
26

37
interface GroovyScriptPreviewProps {
4-
value: string;
8+
script: string;
9+
variables: GroovyVariableMapping[];
10+
type: ScriptType;
511
// 多行
612
multiline?: boolean;
713
}
814

915
export const GroovyScriptPreview: React.FC<GroovyScriptPreviewProps> = (props) => {
10-
const value = props.value;
16+
const groovyScriptConvertor = GroovyScriptConverterContext.getInstance().createConverter(props.type, props.script, props.variables);
1117

1218
const multiline = props.multiline || false;
1319

20+
const value = groovyScriptConvertor?.toExpression() || '';
21+
1422
return (
1523
<>
1624
{multiline && (

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/script-editor.tsx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.tsx‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,27 @@ const VariablePickerContent: React.FC<VariablePickerProps> = (props) => {
6969
cursor: 'pointer',
7070
backgroundColor: '#fff',
7171
}}
72-
onClick={()=>{
72+
onClick={() => {
7373
props.onSelect(mapping);
7474
}}
7575
>
76-
<div>{mapping.label}</div>
77-
<div>{mapping.value}</div>
76+
<div style={{
77+
fontSize: 14,
78+
color: '#333',
79+
fontWeight: 500,
80+
whiteSpace: 'nowrap',
81+
overflow: 'hidden',
82+
textOverflow: 'ellipsis',
83+
}}>{mapping.label}</div>
84+
<div
85+
style={{
86+
fontSize: 12,
87+
color: '#999',
88+
marginTop: 4,
89+
whiteSpace: 'nowrap',
90+
overflow: 'hidden',
91+
textOverflow: 'ellipsis',
92+
}}>{mapping.expression}</div>
7893
</Col>
7994
)
8095
})}
@@ -94,11 +109,19 @@ export const VariablePicker: React.FC<VariablePickerProps> = (props) => {
94109

95110
const [visible, setVisible] = React.useState(false);
96111

112+
const handleSelect = (mapping: GroovyVariableMapping) => {
113+
props.onSelect(mapping);
114+
setVisible(false);
115+
}
116+
97117
return (
98118
<Popover
99119
content={
100120
(
101-
<VariablePickerContent {...props}/>
121+
<VariablePickerContent
122+
{...props}
123+
onSelect={handleSelect}
124+
/>
102125
)
103126
}
104127
open={visible}

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/node-title-config-modal.tsx‎

Lines changed: 15 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {GroovyScriptContent, GroovyScriptModal} from "./components/groovy-script
55
import {GroovyScriptPreview} from "@/components/design-editor/node-components/scripts/components/groovy-script-preview";
66
import {CodeOutlined, DeleteOutlined} from "@ant-design/icons";
77
import {NodeTitleGroovyConvertor} from "./services/convertor/node-title";
8-
import ScriptEditor from "@/components/design-editor/node-components/scripts/components/script-editor";
9-
import {GroovyScriptUtil} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
8+
import {AdvancedScriptEditor} from "@/components/design-editor/node-components/scripts/components/advanced-script-editor";
9+
import {GroovyScriptConvertorUtil} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
1010
import {VariablePicker} from "@/components/design-editor/node-components/scripts/components/variable-picker";
1111

1212
const {TextArea} = Input;
@@ -24,7 +24,7 @@ export interface NodeTitleConfigModalProps {
2424
}
2525

2626

27-
const NodeTitleDefaultContent: React.FC<GroovyScriptContent> = (props)=>{
27+
const NodeTitleDefaultContent: React.FC<GroovyScriptContent> = (props) => {
2828

2929
const nodeTitleGroovyConvertor = new NodeTitleGroovyConvertor(props.content, props.variables);
3030

@@ -33,7 +33,9 @@ const NodeTitleDefaultContent: React.FC<GroovyScriptContent> = (props)=>{
3333
<div>
3434
预览
3535
<GroovyScriptPreview
36-
value={nodeTitleGroovyConvertor.toExpression()}
36+
script={props.content}
37+
variables={props.variables}
38+
type={ScriptType.TITLE}
3739
multiline={true}
3840
/>
3941
</div>
@@ -53,27 +55,27 @@ const NodeTitleDefaultContent: React.FC<GroovyScriptContent> = (props)=>{
5355

5456
<Space
5557
style={{
56-
marginTop:8
58+
marginTop: 8
5759
}}
5860
>
5961
<VariablePicker
6062
mappings={props.variables}
61-
onSelect={(variable)=>{
63+
onSelect={(variable) => {
6264
props.onChange(nodeTitleGroovyConvertor.addVariable(variable));
6365
}}
6466
/>
6567
<Button
66-
icon={<CodeOutlined />}
67-
onClick={()=>{
68-
props.onChange(GroovyScriptUtil.toCustomScript(props.content));
68+
icon={<CodeOutlined/>}
69+
onClick={() => {
70+
props.onChange(GroovyScriptConvertorUtil.toCustomScript(props.content));
6971
}}
7072
>
7173
高级配置
7274
</Button>
7375
<Button
74-
icon={<DeleteOutlined />}
76+
icon={<DeleteOutlined/>}
7577
danger={true}
76-
onClick={()=>{
78+
onClick={() => {
7779
props.onChange(nodeTitleGroovyConvertor.getDefaultScript());
7880
}}
7981
>
@@ -84,49 +86,16 @@ const NodeTitleDefaultContent: React.FC<GroovyScriptContent> = (props)=>{
8486
);
8587
}
8688

87-
const NodeTitleAdvancedContent: React.FC<GroovyScriptContent> = (props) => {
88-
89-
const nodeTitleGroovyConvertor = new NodeTitleGroovyConvertor(props.content, props.variables);
90-
91-
return (
92-
<div>
93-
自定义脚本
94-
<ScriptEditor
95-
scriptType={ScriptType.TITLE}
96-
script={props.content}
97-
variables={props.variables}
98-
onChange={props.onChange}
99-
/>
100-
<Space
101-
style={{
102-
marginTop:8
103-
}}
104-
>
105-
<Button
106-
icon={<DeleteOutlined />}
107-
danger={true}
108-
onClick={()=>{
109-
props.onChange(nodeTitleGroovyConvertor.getDefaultScript());
110-
}}
111-
>
112-
重置配置
113-
</Button>
114-
</Space>
115-
</div>
116-
)
117-
}
118-
11989

12090
const NodeTitleConfigContent: React.FC<GroovyScriptContent> = (props) => {
91+
const isAdvance = GroovyScriptConvertorUtil.isCustomScript(props.content);
12192

12293
console.log('NodeTitleConfigContent script', props.content);
12394

124-
const isAdvance = GroovyScriptUtil.isCustomScript(props.content);
125-
12695
return (
12796
<>
12897
{isAdvance && (
129-
<NodeTitleAdvancedContent {...props} />
98+
<AdvancedScriptEditor {...props} />
13099
)}
131100
{!isAdvance && (
132101
<NodeTitleDefaultContent {...props} />

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/services/convertor/node-title.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {GroovyVariableMapping} from "@/components/design-editor/typings/script";
2-
import {GroovyScriptConverter, GroovyScriptUtil} from "./utils";
2+
import {GroovyScriptConverter, GroovyScriptConvertorUtil} from "./utils";
33

44

55
export class NodeTitleGroovyConvertor implements GroovyScriptConverter {
@@ -13,28 +13,28 @@ export class NodeTitleGroovyConvertor implements GroovyScriptConverter {
1313
this.mappings = mappings;
1414
}
1515

16-
toScript(): string {
16+
getScript(): string {
1717
return this.script;
1818
}
1919

2020
toExpression(): string {
21-
const returnExpression = GroovyScriptUtil.getReturnExpression(this.script);
22-
return GroovyScriptUtil.toExpression(returnExpression, this.mappings);
21+
const returnExpression = GroovyScriptConvertorUtil.getReturnScript(this.script);
22+
return GroovyScriptConvertorUtil.toExpression(returnExpression, this.mappings);
2323
}
2424

2525
getDefaultScript(): string {
2626
return "def run(request){\nreturn \"您有一条待办消息\"\n}";
2727
}
2828

2929
addVariable(variable: GroovyVariableMapping): string {
30-
const returnExpression = GroovyScriptUtil.getReturnExpression(this.script);
30+
const returnExpression = GroovyScriptConvertorUtil.getReturnScript(this.script);
3131
const newExpression = `${returnExpression}` + ` + ${variable.value}`;
3232
return this.script.replace(returnExpression, newExpression);
3333
}
3434

35-
resetExpression(value:string) {
36-
const returnExpression = GroovyScriptUtil.getReturnExpression(this.script);
37-
const script = GroovyScriptUtil.toScript(value, this.mappings);
35+
resetExpression(expression:string) {
36+
const returnExpression = GroovyScriptConvertorUtil.getReturnScript(this.script);
37+
const script = GroovyScriptConvertorUtil.toScript(expression, this.mappings);
3838
return this.script.replace(returnExpression, `${script}`);
3939
}
4040
}

0 commit comments

Comments
 (0)