@coding-flow/flow-design 0.0.47 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/api/workflow.d.ts +1 -0
  2. package/dist/api/workflow.js +2 -1
  3. package/dist/components/design-editor/node-components/action/index.js +20 -7
  4. package/dist/components/design-editor/node-components/action/presenter.d.ts +3 -2
  5. package/dist/components/design-editor/node-components/action/presenter.js +26 -27
  6. package/dist/components/design-panel/manager/form.d.ts +1 -0
  7. package/dist/components/design-panel/manager/form.js +28 -0
  8. package/dist/components/design-panel/presenters/index.d.ts +1 -0
  9. package/dist/components/design-panel/presenters/index.js +6 -0
  10. package/dist/components/design-panel/tabs/form/table.js +12 -0
  11. package/dist/plugins/action-custom-view-type.d.ts +1 -2
  12. package/dist/plugins/view/action-custom-view.js +41 -45
  13. package/dist/script-components/components/action/components/custom.js +80 -19
  14. package/dist/script-components/components/action/index.js +11 -1
  15. package/dist/script-components/components/action/style.d.ts +2 -2
  16. package/dist/script-components/components/action/style.js +70 -6
  17. package/dist/script-components/components/advanced-script-editor.js +1 -0
  18. package/dist/script-components/components/groovy-script-loader.d.ts +2 -2
  19. package/dist/script-components/components/groovy-script-modal.d.ts +2 -0
  20. package/dist/script-components/default-script.d.ts +1 -1
  21. package/dist/script-components/default-script.js +1 -1
  22. package/dist/script-components/typings/script.d.ts +5 -1
  23. package/dist/script-components/typings/script.js +2 -0
  24. package/package.json +8 -8
  25. package/dist/script-components/components/action/script.d.ts +0 -8
  26. package/dist/script-components/components/action/script.js +0 -68
@@ -9,6 +9,7 @@ export declare const deleteVersion: (id: any) => Promise<import("@coding-flow/fl
9
9
  export declare const changeState: (id: string) => Promise<import("@coding-flow/flow-core").Response>;
10
10
  export declare const create: () => Promise<import("@coding-flow/flow-core").Response>;
11
11
  export declare const createNode: (type: string) => Promise<import("@coding-flow/flow-core").Response>;
12
+ export declare const createCustomAction: () => Promise<import("@coding-flow/flow-core").Response>;
12
13
  export declare const save: (body: any) => Promise<import("@coding-flow/flow-core").Response>;
13
14
  export declare const load: (id: string) => Promise<import("@coding-flow/flow-core").Response>;
14
15
  export declare const exportWorkflow: (id: string) => Promise<void>;
@@ -24,6 +24,7 @@ const create = ()=>httpClient.post('/api/cmd/workflow/create', {});
24
24
  const createNode = (type)=>httpClient.post('/api/cmd/workflow/create-node', {
25
25
  type
26
26
  });
27
+ const createCustomAction = ()=>httpClient.post('/api/cmd/workflow/create-custom-action', {});
27
28
  const save = (body)=>httpClient.post('/api/cmd/workflow/save', body);
28
29
  const load = (id)=>httpClient.get('/api/cmd/workflow/load', {
29
30
  id
@@ -33,4 +34,4 @@ const exportWorkflow = (id)=>{
33
34
  return httpClient.download('/api/cmd/workflow/export?id=' + id, filename);
34
35
  };
35
36
  const importWorkflow = (file)=>httpClient.post('/api/cmd/workflow/import', file);
36
- export { changeState, changeVersion, create, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions };
37
+ export { changeState, changeVersion, create, createCustomAction, createNode, deleteVersion, exportWorkflow, importWorkflow, list, load, meta, options, remove, save, updateVersionName, versions };
@@ -7,12 +7,11 @@ import { PlusOutlined } from "@ant-design/icons";
7
7
  import { actionOptions } from "@coding-flow/flow-types";
8
8
  import { ActionConfigModal } from "../../../../script-components/modal/action-config-modal.js";
9
9
  import { FlowActionListPresenter } from "./presenter.js";
10
- import { SCRIPT_DEFAULT_CUSTOM } from "../../../../script-components/default-script.js";
10
+ import { createCustomAction } from "../../../../api/workflow.js";
11
11
  const ActionTable = (props)=>{
12
12
  const { node } = useNodeRenderContext();
13
- const actions = node.getNodeRegistry()?.meta.actions || [];
14
13
  const presenter = new FlowActionListPresenter(props.value, props.onChange);
15
- const datasource = presenter.getDatasource(actions);
14
+ const datasource = presenter.getDatasource();
16
15
  const [visible, setVisible] = react.useState(false);
17
16
  const [form] = Form.useForm();
18
17
  const columns = react.useCallback(()=>[
@@ -63,6 +62,18 @@ const ActionTable = (props)=>{
63
62
  },
64
63
  children: "编辑"
65
64
  }),
65
+ /*#__PURE__*/ jsx("a", {
66
+ onClick: ()=>{
67
+ presenter.sort(record.id, -1);
68
+ },
69
+ children: "↑"
70
+ }),
71
+ /*#__PURE__*/ jsx("a", {
72
+ onClick: ()=>{
73
+ presenter.sort(record.id, 1);
74
+ },
75
+ children: "↓"
76
+ }),
66
77
  'CUSTOM' === record.type && /*#__PURE__*/ jsx(Popconfirm, {
67
78
  title: "确认删除吗?",
68
79
  onConfirm: ()=>{
@@ -87,11 +98,13 @@ const ActionTable = (props)=>{
87
98
  icon: /*#__PURE__*/ jsx(PlusOutlined, {}),
88
99
  onClick: ()=>{
89
100
  form.resetFields();
90
- form.setFieldsValue({
91
- script: SCRIPT_DEFAULT_CUSTOM,
92
- type: "CUSTOM"
101
+ createCustomAction().then((res)=>{
102
+ if (res.success) {
103
+ const data = res.data;
104
+ form.setFieldsValue(data);
105
+ setVisible(true);
106
+ }
93
107
  });
94
- setVisible(true);
95
108
  },
96
109
  children: "自定义按钮"
97
110
  })
@@ -1,4 +1,4 @@
1
- import { ActionType, FlowAction } from "@coding-flow/flow-types";
1
+ import { FlowAction } from "@coding-flow/flow-types";
2
2
  import { FlowActionManager } from "./manager";
3
3
  export declare class FlowActionListPresenter {
4
4
  private readonly data;
@@ -7,7 +7,8 @@ export declare class FlowActionListPresenter {
7
7
  constructor(data: FlowAction[], onChange: (data: FlowAction[]) => void);
8
8
  getFlowActionManager(): FlowActionManager;
9
9
  enable(id: any, value: boolean): void;
10
+ sort(id: string, order: number): void;
10
11
  delete(id: string): void;
11
12
  update(action: any): void;
12
- getDatasource(actions: ActionType[]): any[];
13
+ getDatasource(): any[];
13
14
  }
@@ -1,6 +1,3 @@
1
- import { actionOptions } from "@coding-flow/flow-types";
2
- import { nanoid } from "nanoid";
3
- import { IdUtils } from "../../../../utils/index.js";
4
1
  import { FlowActionManager } from "./manager.js";
5
2
  class FlowActionListPresenter {
6
3
  data;
@@ -24,13 +21,30 @@ class FlowActionListPresenter {
24
21
  });
25
22
  this.onChange(data);
26
23
  }
24
+ sort(id, order) {
25
+ const index = this.data.findIndex((item)=>item.id === id);
26
+ if (-1 === index) return;
27
+ const targetIndex = index + order;
28
+ if (targetIndex < 0 || targetIndex >= this.data.length) return;
29
+ const data = [
30
+ ...this.data
31
+ ];
32
+ [data[index], data[targetIndex]] = [
33
+ data[targetIndex],
34
+ data[index]
35
+ ];
36
+ this.onChange(data);
37
+ }
27
38
  delete(id) {
28
39
  const data = this.data.filter((item)=>item.id !== id);
29
40
  this.onChange(data);
30
41
  }
31
42
  update(action) {
32
43
  const actionId = action.id;
33
- if (actionId) {
44
+ const actionIdList = this.data.map((action)=>action.id);
45
+ console.log('actionIdList:', actionIdList);
46
+ console.log('action:', action);
47
+ if (actionIdList.indexOf(actionId) > 0) {
34
48
  const data = this.data.map((item)=>{
35
49
  if (item.id === actionId) return {
36
50
  ...item,
@@ -43,20 +57,15 @@ class FlowActionListPresenter {
43
57
  return item;
44
58
  });
45
59
  this.onChange(data);
46
- } else {
47
- const custom = {
60
+ } else this.onChange([
61
+ ...this.data,
62
+ {
48
63
  ...action,
49
- type: 'CUSTOM',
50
- enable: true,
51
- id: IdUtils.generateId()
52
- };
53
- this.onChange([
54
- ...this.data,
55
- custom
56
- ]);
57
- }
64
+ type: "CUSTOM"
65
+ }
66
+ ]);
58
67
  }
59
- getDatasource(actions) {
68
+ getDatasource() {
60
69
  if (this.data) return this.data.map((item)=>{
61
70
  const enable = item.enable;
62
71
  return {
@@ -64,17 +73,7 @@ class FlowActionListPresenter {
64
73
  enable: void 0 === enable ? true : enable
65
74
  };
66
75
  });
67
- const list = actions.map((type)=>{
68
- const title = actionOptions.filter((value)=>value.value === type)[0]?.label || '未命名操作';
69
- return {
70
- id: nanoid(),
71
- enable: true,
72
- title: title,
73
- type: type
74
- };
75
- });
76
- this.onChange(list);
77
- return list;
76
+ return [];
78
77
  }
79
78
  }
80
79
  export { FlowActionListPresenter };
@@ -18,6 +18,7 @@ export declare class WorkflowFormManager {
18
18
  fields: FormField[];
19
19
  };
20
20
  updateFieldValue(code: string, values: any): FlowForm;
21
+ sortField(formCode: string, fieldCode: string, order: number): FlowForm;
21
22
  removeField(formCode: string, fieldCode: string): {
22
23
  fields: FormField[];
23
24
  name: string;
@@ -13,6 +13,7 @@ class WorkflowFormManager {
13
13
  getFormFields(code) {
14
14
  let result = [];
15
15
  for (const subForm of this.formList)if (subForm.code == code) result = subForm.fields || [];
16
+ console.log(result);
16
17
  return result;
17
18
  }
18
19
  removeSubForm(code) {
@@ -62,6 +63,33 @@ class WorkflowFormManager {
62
63
  })
63
64
  };
64
65
  }
66
+ sortField(formCode, fieldCode, order) {
67
+ const currentFields = this.getFormFields(formCode) || [];
68
+ const fields = [
69
+ ...currentFields
70
+ ];
71
+ const index = fields.findIndex((item)=>item.code === fieldCode);
72
+ if (-1 === index) return this.form;
73
+ const targetIndex = index + order;
74
+ if (targetIndex < 0 || targetIndex >= fields.length) return this.form;
75
+ const [field] = fields.splice(index, 1);
76
+ fields.splice(targetIndex, 0, field);
77
+ const mainCode = this.form.code;
78
+ if (formCode === mainCode) return {
79
+ ...this.form,
80
+ fields
81
+ };
82
+ return {
83
+ ...this.form,
84
+ subForms: (this.form.subForms || []).map((item)=>{
85
+ if (item.code === formCode) return {
86
+ ...item,
87
+ fields
88
+ };
89
+ return item;
90
+ })
91
+ };
92
+ }
65
93
  removeField(formCode, fieldCode) {
66
94
  const currentFields = this.getFormFields(formCode) || [];
67
95
  const fields = [
@@ -19,6 +19,7 @@ export declare class Presenter {
19
19
  updateViewPanelTab(tab: TabPanelType): void;
20
20
  private updateWorkflowForm;
21
21
  updateWorkflow(data: any): void;
22
+ sort(formCode: string, fieldCode: string, order: number): void;
22
23
  removeWorkflowFormField(formCode: string, fieldCode: string): void;
23
24
  removeWorkflowSubForm(code: string): void;
24
25
  addWorkflowSubForm(values: any): void;
@@ -74,6 +74,12 @@ class Presenter {
74
74
  workflow: this.mergeWorkflow(prevState.workflow, data)
75
75
  }));
76
76
  }
77
+ sort(formCode, fieldCode, order) {
78
+ const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
79
+ const form = workflowFormManager.sortField(formCode, fieldCode, order);
80
+ console.log('sort:', form);
81
+ this.updateWorkflowForm(form);
82
+ }
77
83
  removeWorkflowFormField(formCode, fieldCode) {
78
84
  const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
79
85
  const form = workflowFormManager.removeField(formCode, fieldCode);
@@ -82,6 +82,18 @@ const FormTable = (props)=>{
82
82
  },
83
83
  children: "编辑"
84
84
  }),
85
+ /*#__PURE__*/ jsx("a", {
86
+ onClick: ()=>{
87
+ presenter.sort(props.code, record.code, -1);
88
+ },
89
+ children: "↑"
90
+ }),
91
+ /*#__PURE__*/ jsx("a", {
92
+ onClick: ()=>{
93
+ presenter.sort(props.code, record.code, 1);
94
+ },
95
+ children: "↓"
96
+ }),
85
97
  /*#__PURE__*/ jsx(Popconfirm, {
86
98
  title: "确认要删除该字段吗?",
87
99
  onConfirm: ()=>{
@@ -1,11 +1,10 @@
1
- import { ActionSelectOption } from "../script-components/typings";
2
1
  import React from "react";
3
2
  import { DesignViewPluginAction } from "./design-view-plugin-action";
4
3
  export declare const VIEW_KEY = "ActionCustomViewPlugin";
5
4
  export interface ActionCustomViewPlugin {
5
+ scriptKey: string;
6
6
  value?: string;
7
7
  onChange?: (value: string) => void;
8
- options: ActionSelectOption[];
9
8
  /** 动作控制 **/
10
9
  action?: React.Ref<DesignViewPluginAction>;
11
10
  }
@@ -1,64 +1,60 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import react from "react";
3
- import { ActionCustomScriptUtils } from "../../script-components/services/action-custom.js";
4
- import { GroovyCodeEditor } from "../../components/groovy-code/index.js";
5
- import { Select } from "antd";
3
+ import { Button, Input, Space } from "antd";
6
4
  import { VIEW_KEY } from "../action-custom-view-type.js";
7
5
  import { ViewBindPlugin } from "@coding-flow/flow-core";
6
+ import { GroovyScriptModal } from "../../script-components/components/groovy-script-modal.js";
7
+ import { AdvancedScriptEditor } from "../../script-components/components/advanced-script-editor.js";
8
+ import { ScriptType } from "../../script-components/typings/index.js";
9
+ import { EditOutlined } from "@ant-design/icons";
10
+ import { GroovyScriptConvertorUtil } from "@coding-script/script-engine";
11
+ import { SCRIPT_DEFAULT_CUSTOM } from "../../script-components/default-script.js";
8
12
  const ActionCustomView = (props)=>{
9
13
  const ActionCustomViewComponent = ViewBindPlugin.getInstance().get(VIEW_KEY);
14
+ const [visible, setVisible] = react.useState(false);
10
15
  if (ActionCustomViewComponent) return /*#__PURE__*/ jsx(ActionCustomViewComponent, {
11
16
  ...props
12
17
  });
13
- const trigger = react.useMemo(()=>{
14
- if (props.value) return ActionCustomScriptUtils.getTrigger(props.value);
15
- }, [
16
- props.value
17
- ]);
18
- const handleChangeNodeType = (value)=>{
19
- const script = props.value;
20
- if (script) {
21
- const groovy = ActionCustomScriptUtils.update(value, script);
22
- props.onChange?.(groovy);
23
- }
24
- };
25
- return /*#__PURE__*/ jsxs("div", {
26
- style: {
27
- marginTop: "8px",
28
- padding: "8px"
29
- },
18
+ return /*#__PURE__*/ jsxs(Fragment, {
30
19
  children: [
31
- /*#__PURE__*/ jsxs("div", {
32
- style: {
33
- display: "flex",
34
- justifyContent: "start",
35
- alignItems: "center",
36
- marginBottom: "8px"
37
- },
20
+ /*#__PURE__*/ jsxs(Space.Compact, {
38
21
  children: [
39
- /*#__PURE__*/ jsx("span", {
40
- children: "触发动作:"
22
+ /*#__PURE__*/ jsx(Space.Addon, {
23
+ style: {
24
+ width: '150px'
25
+ },
26
+ children: "触发动作"
41
27
  }),
42
- /*#__PURE__*/ jsx(Select, {
43
- size: "small",
28
+ /*#__PURE__*/ jsx(Input, {
44
29
  style: {
45
- width: '200px',
46
- marginLeft: "10px"
30
+ width: '150px'
47
31
  },
48
- value: trigger,
49
- placeholder: "请选择触发动作类型",
50
- onChange: handleChangeNodeType,
51
- options: props.options
32
+ value: GroovyScriptConvertorUtil.getScriptTitle(props.value || ''),
33
+ readOnly: true
34
+ }),
35
+ /*#__PURE__*/ jsx(Button, {
36
+ icon: /*#__PURE__*/ jsx(EditOutlined, {}),
37
+ onClick: ()=>{
38
+ setVisible(true);
39
+ },
40
+ children: "编辑"
52
41
  })
53
42
  ]
54
43
  }),
55
- /*#__PURE__*/ jsx(GroovyCodeEditor, {
56
- value: props.value,
57
- onChange: props.onChange,
58
- placeholder: "请输入自定义脚本",
59
- options: {
60
- minHeight: 200
61
- }
44
+ /*#__PURE__*/ jsx(GroovyScriptModal, {
45
+ type: ScriptType.CUSTOM_ACTION,
46
+ variables: [],
47
+ open: visible,
48
+ onCancel: ()=>{
49
+ setVisible(false);
50
+ },
51
+ resetScript: ()=>SCRIPT_DEFAULT_CUSTOM,
52
+ scriptKey: props.scriptKey,
53
+ script: props.value || "",
54
+ onConfirm: (script)=>{
55
+ props.onChange?.(script);
56
+ },
57
+ content: AdvancedScriptEditor
62
58
  })
63
59
  ]
64
60
  });
@@ -1,27 +1,88 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import "react";
3
- import { Col, Form, Row } from "antd";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import react from "react";
3
+ import { Col, Form, Input, Radio, Row } from "antd";
4
4
  import { ActionCustomView } from "../../../../plugins/view/action-custom-view.js";
5
+ import { GroovyScriptLoader } from "../../groovy-script-loader.js";
6
+ const ScriptEditorContent = (props)=>/*#__PURE__*/ jsx(Fragment, {
7
+ children: /*#__PURE__*/ jsx(ActionCustomView, {
8
+ scriptKey: props.scriptKey,
9
+ value: props.value
10
+ })
11
+ });
5
12
  const CustomActionForm = (props)=>{
6
- const actionOptionTypes = props.manager.getCurrentNodeActionOptions();
13
+ const [customType, setCustomType] = react.useState("0");
14
+ react.useEffect(()=>{
15
+ const customType = props.form.getFieldValue('customType');
16
+ if (customType) return void setCustomType(customType);
17
+ const triggerFrontEvent = props.form.getFieldValue('triggerFrontEvent');
18
+ if (triggerFrontEvent) {
19
+ setCustomType("-1");
20
+ props.form.setFieldValue('customType', "-1");
21
+ return;
22
+ }
23
+ const script = props.form.getFieldValue("script");
24
+ if (script) {
25
+ setCustomType("1");
26
+ props.form.setFieldValue('customType', "1");
27
+ return;
28
+ }
29
+ setCustomType("0");
30
+ }, [
31
+ props,
32
+ customType
33
+ ]);
7
34
  return /*#__PURE__*/ jsx(Row, {
8
- children: /*#__PURE__*/ jsx(Col, {
35
+ children: /*#__PURE__*/ jsxs(Col, {
9
36
  span: 24,
10
- children: /*#__PURE__*/ jsx(Form.Item, {
11
- name: "script",
12
- label: "自定义脚本",
13
- required: true,
14
- help: "请先设置触发动作类型",
15
- rules: [
16
- {
17
- required: true,
18
- message: '自定义脚本不能为空'
19
- }
20
- ],
21
- children: /*#__PURE__*/ jsx(ActionCustomView, {
22
- options: actionOptionTypes
37
+ children: [
38
+ /*#__PURE__*/ jsx(Form.Item, {
39
+ name: "customType",
40
+ label: "脚本类型",
41
+ children: /*#__PURE__*/ jsxs(Radio.Group, {
42
+ value: customType,
43
+ onChange: (e)=>{
44
+ setCustomType(e.target.value);
45
+ },
46
+ children: [
47
+ /*#__PURE__*/ jsx(Radio, {
48
+ value: "-1",
49
+ children: "前端模式"
50
+ }),
51
+ /*#__PURE__*/ jsx(Radio, {
52
+ value: "1",
53
+ children: "后端模式"
54
+ })
55
+ ]
56
+ })
57
+ }),
58
+ "-1" === customType && /*#__PURE__*/ jsx(Form.Item, {
59
+ name: "triggerFrontEvent",
60
+ label: "前端触发事件",
61
+ required: true,
62
+ rules: [
63
+ {
64
+ required: true,
65
+ message: '前端触发事件不能为空'
66
+ }
67
+ ],
68
+ children: /*#__PURE__*/ jsx(Input, {
69
+ placeholder: "请输入前端触发事件"
70
+ })
71
+ }),
72
+ "1" === customType && /*#__PURE__*/ jsx(Form.Item, {
73
+ name: "script",
74
+ label: "后端执行脚本",
75
+ rules: [
76
+ {
77
+ required: true,
78
+ message: '自定义脚本不能为空'
79
+ }
80
+ ],
81
+ children: /*#__PURE__*/ jsx(GroovyScriptLoader, {
82
+ content: ScriptEditorContent
83
+ })
23
84
  })
24
- })
85
+ ]
25
86
  })
26
87
  });
27
88
  };
@@ -19,6 +19,16 @@ const ActionForm = (props)=>{
19
19
  hidden: true,
20
20
  children: /*#__PURE__*/ jsx(Input, {})
21
21
  }),
22
+ /*#__PURE__*/ jsx(Form.Item, {
23
+ name: "type",
24
+ hidden: true,
25
+ children: /*#__PURE__*/ jsx(Input, {})
26
+ }),
27
+ /*#__PURE__*/ jsx(Form.Item, {
28
+ name: "enable",
29
+ hidden: true,
30
+ children: /*#__PURE__*/ jsx(Input, {})
31
+ }),
22
32
  /*#__PURE__*/ jsxs(Row, {
23
33
  gutter: [
24
34
  8,
@@ -53,7 +63,7 @@ const ActionForm = (props)=>{
53
63
  /*#__PURE__*/ jsx(Col, {
54
64
  span: 24,
55
65
  children: /*#__PURE__*/ jsx(Form.Item, {
56
- name: "style",
66
+ name: "display",
57
67
  label: "按钮样式",
58
68
  children: /*#__PURE__*/ jsx(ActionStyle, {})
59
69
  })
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  interface ActionStyleProps {
3
- value?: string;
4
- onChange?: (value: string) => void;
3
+ value?: any;
4
+ onChange?: (value: any) => void;
5
5
  }
6
6
  export declare const ActionStyle: React.FC<ActionStyleProps>;
7
7
  export {};
@@ -1,10 +1,67 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Col, ColorPicker, Input, Row, Space } from "antd";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { Button, Col, ColorPicker, Input, Row, Space } from "antd";
3
3
  import react from "react";
4
+ import { GroovyScriptLoader } from "../groovy-script-loader.js";
5
+ import { AdvancedScriptEditor } from "../advanced-script-editor.js";
6
+ import { ScriptType } from "../../typings/index.js";
7
+ import { GroovyScriptConvertorUtil } from "@coding-script/script-engine";
8
+ import { GroovyScriptModal } from "../groovy-script-modal.js";
9
+ import { EditOutlined } from "@ant-design/icons";
10
+ const ActionScriptContent = (props)=>/*#__PURE__*/ jsx(AdvancedScriptEditor, {
11
+ ...props
12
+ });
13
+ const ActionScript = (props)=>{
14
+ const [visible, setVisible] = react.useState(false);
15
+ return /*#__PURE__*/ jsxs(Fragment, {
16
+ children: [
17
+ /*#__PURE__*/ jsxs(Space.Compact, {
18
+ children: [
19
+ /*#__PURE__*/ jsx(Space.Addon, {
20
+ style: {
21
+ width: '150px'
22
+ },
23
+ children: /*#__PURE__*/ jsx("span", {
24
+ children: "显示条件"
25
+ })
26
+ }),
27
+ /*#__PURE__*/ jsx(Input, {
28
+ readOnly: true,
29
+ style: {
30
+ width: '150px'
31
+ },
32
+ value: GroovyScriptConvertorUtil.getScriptTitle(props.value || '')
33
+ }),
34
+ /*#__PURE__*/ jsx(Button, {
35
+ icon: /*#__PURE__*/ jsx(EditOutlined, {}),
36
+ onClick: ()=>{
37
+ setVisible(true);
38
+ },
39
+ children: "修改"
40
+ })
41
+ ]
42
+ }),
43
+ /*#__PURE__*/ jsx(GroovyScriptModal, {
44
+ type: ScriptType.ACTION_DISPLAY,
45
+ variables: [],
46
+ scriptKey: props.scriptKey,
47
+ script: props.value || '',
48
+ open: visible,
49
+ onCancel: ()=>{
50
+ setVisible(false);
51
+ },
52
+ onConfirm: (value)=>{
53
+ props.onChange?.(value);
54
+ setVisible(false);
55
+ },
56
+ content: ActionScriptContent
57
+ })
58
+ ]
59
+ });
60
+ };
4
61
  const ActionStyle = (props)=>{
5
- const [style, setStyle] = react.useState(props.value ? JSON.parse(props.value) : {});
62
+ const [style, setStyle] = react.useState(props.value || {});
6
63
  react.useEffect(()=>{
7
- props.onChange && props.onChange(JSON.stringify(style));
64
+ props.onChange && props.onChange(style);
8
65
  }, [
9
66
  style
10
67
  ]);
@@ -28,7 +85,7 @@ const ActionStyle = (props)=>{
28
85
  })
29
86
  }),
30
87
  /*#__PURE__*/ jsx(ColorPicker, {
31
- value: style.backgroundColor,
88
+ value: style.backgroundColor || '',
32
89
  onChange: (value)=>{
33
90
  if (value) setStyle((prevState)=>({
34
91
  ...prevState,
@@ -52,7 +109,7 @@ const ActionStyle = (props)=>{
52
109
  })
53
110
  }),
54
111
  /*#__PURE__*/ jsx(ColorPicker, {
55
- value: style.borderColor,
112
+ value: style.borderColor || '',
56
113
  onChange: (value)=>{
57
114
  if (value) setStyle((prevState)=>({
58
115
  ...prevState,
@@ -120,6 +177,13 @@ const ActionStyle = (props)=>{
120
177
  })
121
178
  ]
122
179
  })
180
+ }),
181
+ /*#__PURE__*/ jsx(Col, {
182
+ span: 24,
183
+ children: /*#__PURE__*/ jsx(GroovyScriptLoader, {
184
+ content: ActionScript,
185
+ value: style.script
186
+ })
123
187
  })
124
188
  ]
125
189
  })
@@ -9,6 +9,7 @@ const AdvancedScriptEditor = (props)=>{
9
9
  if (!readonly) onChange(value);
10
10
  };
11
11
  return /*#__PURE__*/ jsx(GroovyCodeEditor, {
12
+ title: props.title,
12
13
  value: script,
13
14
  scriptKey: props.scriptKey,
14
15
  readonly: readonly,
@@ -2,9 +2,9 @@ import React from 'react';
2
2
  export interface GroovyScriptLoaderProps {
3
3
  value?: string;
4
4
  onChange?: (value: string) => void;
5
- content: React.ComponentType<GroovyScriptContent>;
5
+ content: React.ComponentType<GroovyScriptLoaderContent>;
6
6
  }
7
- export interface GroovyScriptContent {
7
+ export interface GroovyScriptLoaderContent {
8
8
  scriptKey: string;
9
9
  value?: string;
10
10
  onChange?: (value: string) => void;
@@ -24,6 +24,8 @@ export interface GroovyScriptModalProps {
24
24
  content: React.ComponentType<GroovyScriptContent>;
25
25
  }
26
26
  export interface GroovyScriptContent {
27
+ /** 脚本标题 **/
28
+ title?: string;
27
29
  /** 脚本类型 */
28
30
  type: ScriptType;
29
31
  /** 当前脚本 */
@@ -7,5 +7,5 @@ export declare const SCRIPT_DEFAULT_ERROR_TRIGGER = "// @SCRIPT_TITLE \u56DE\u90
7
7
  export declare const SCRIPT_DEFAULT_CONDITION = "// @SCRIPT_TITLE \u9ED8\u8BA4\u6761\u4EF6\uFF08\u5141\u8BB8\u6267\u884C\uFF09\ndef run(request){\n return true;\n}\n";
8
8
  export declare const SCRIPT_DEFAULT_ROUTER = "// @SCRIPT_TITLE \u53D1\u8D77\u8282\u70B9\n// @SCRIPT_META {\"node\":\"START\"}\ndef run(request){\n return request.getStartNode().getId();\n}\n";
9
9
  export declare const SCRIPT_DEFAULT_TRIGGER = "// @SCRIPT_TITLE \u793A\u4F8B\u89E6\u53D1\u8282\u70B9\uFF08\u6253\u5370\u89E6\u53D1\u65E5\u5FD7\uFF09 \ndef run(request){ \n print('hello trigger node.\\n'); \n}\n";
10
- export declare const SCRIPT_DEFAULT_CUSTOM = "// @SCRIPT_TITLE \u9ED8\u8BA4\u6761\u4EF6 \u89E6\u53D1\u901A\u8FC7\n// @SCRIPT_META {\"trigger\":\"PASS\"}\ndef run(request){ \n return 'PASS'; \n}\n";
10
+ export declare const SCRIPT_DEFAULT_CUSTOM = "// @SCRIPT_TITLE \u89E6\u53D1\u901A\u8FC7\n// @SCRIPT_META {\"trigger\":\"PASS\"}\ndef run(request){ \n return 'PASS'; \n}\n";
11
11
  export declare const SCRIPT_DEFAULT_SUB_PROCESS = "// @SCRIPT_TITLE \u521B\u5EFA\u5F53\u524D\u6D41\u7A0B \ndef run(request){ \n return request.toCreateRequest() \n}\n";
@@ -49,7 +49,7 @@ def run(request){
49
49
  print('hello trigger node.\\n');
50
50
  }
51
51
  `;
52
- const SCRIPT_DEFAULT_CUSTOM = `// @SCRIPT_TITLE 默认条件 触发通过
52
+ const SCRIPT_DEFAULT_CUSTOM = `// @SCRIPT_TITLE 触发通过
53
53
  // @SCRIPT_META {"trigger":"PASS"}
54
54
  def run(request){
55
55
  return 'PASS';
@@ -18,7 +18,11 @@ export declare enum ScriptType {
18
18
  /** 路由节点脚本 */
19
19
  ROUTER = "ROUTER",
20
20
  /** 子流程节点脚本 */
21
- SUB_PROCESS = "SUB_PROCESS"
21
+ SUB_PROCESS = "SUB_PROCESS",
22
+ /** 自定义操作 */
23
+ CUSTOM_ACTION = "CUSTOM_ACTION",
24
+ /** 按钮展示条件 */
25
+ ACTION_DISPLAY = "ACTION_DISPLAY"
22
26
  }
23
27
  /**
24
28
  * Groovy变量映射接口
@@ -7,6 +7,8 @@ var script_ScriptType = /*#__PURE__*/ function(ScriptType) {
7
7
  ScriptType["TRIGGER"] = "TRIGGER";
8
8
  ScriptType["ROUTER"] = "ROUTER";
9
9
  ScriptType["SUB_PROCESS"] = "SUB_PROCESS";
10
+ ScriptType["CUSTOM_ACTION"] = "CUSTOM_ACTION";
11
+ ScriptType["ACTION_DISPLAY"] = "ACTION_DISPLAY";
10
12
  return ScriptType;
11
13
  }({});
12
14
  var script_VariableTag = /*#__PURE__*/ function(VariableTag) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coding-flow/flow-design",
3
- "version": "0.0.47",
3
+ "version": "0.0.48",
4
4
  "description": "flow-engine design components ",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@ant-design/icons": "~6.1.0",
36
- "@coding-script/script-engine": "^0.0.8",
36
+ "@coding-script/script-engine": "^0.0.9",
37
37
  "@flowgram.ai/export-plugin": "1.0.8",
38
38
  "@flowgram.ai/fixed-layout-editor": "1.0.8",
39
39
  "@flowgram.ai/fixed-semi-materials": "1.0.8",
@@ -49,16 +49,16 @@
49
49
  "nanoid": "^5.1.6",
50
50
  "react-redux": "^9.2.0",
51
51
  "styled-components": "^5.3.11",
52
- "@coding-flow/flow-core": "0.0.47",
53
- "@coding-flow/flow-types": "0.0.47",
54
- "@coding-flow/flow-pc-ui": "0.0.47",
55
- "@coding-flow/flow-icons": "0.0.47"
52
+ "@coding-flow/flow-core": "0.0.48",
53
+ "@coding-flow/flow-icons": "0.0.48",
54
+ "@coding-flow/flow-types": "0.0.48",
55
+ "@coding-flow/flow-pc-ui": "0.0.48"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@types/lodash-es": "^4.17.12",
59
59
  "@types/styled-components": "^5.1.36",
60
- "@coding-flow/flow-core": "0.0.47",
61
- "@coding-flow/flow-types": "0.0.47"
60
+ "@coding-flow/flow-core": "0.0.48",
61
+ "@coding-flow/flow-types": "0.0.48"
62
62
  },
63
63
  "scripts": {
64
64
  "build": "rslib build",
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- import { FormInstance } from "antd";
3
- interface CustomScriptViewProps {
4
- options: any[];
5
- form: FormInstance<any>;
6
- }
7
- export declare const CustomScriptView: React.FC<CustomScriptViewProps>;
8
- export {};
@@ -1,68 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import react from "react";
3
- import { GroovyCodeEditor } from "../../../components/groovy-code/index.js";
4
- import { Col, Form, Select, Space } from "antd";
5
- import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
6
- const CustomScriptView = (props)=>{
7
- const trigger = props.form.getFieldValue("trigger");
8
- const [currentTrigger, setCurrentTrigger] = react.useState(trigger);
9
- const handleChangeNodeType = (value)=>{
10
- const script = props.form.getFieldValue("script");
11
- let groovy;
12
- if (script) {
13
- const returnData = GroovyScriptConvertorUtil.getReturnScript(script).trim();
14
- groovy = script.replace(returnData, `'${value}'`);
15
- groovy = GroovyScriptConvertorUtil.updateScriptMeta(groovy, `{"trigger":"${value}"}`);
16
- } else groovy = `// @CUSTOM_SCRIPT 自定义脚本,返回的数据为动作类型
17
- // @SCRIPT_META {"trigger":"${value}"}
18
- def run(request){
19
- return '${value}';
20
- }
21
- `;
22
- props.form.setFieldValue("script", GroovyScriptConvertorUtil.formatScript(groovy));
23
- setCurrentTrigger(value);
24
- };
25
- return /*#__PURE__*/ jsx(Col, {
26
- span: 24,
27
- children: /*#__PURE__*/ jsx(Form.Item, {
28
- name: "script",
29
- label: /*#__PURE__*/ jsxs(Space, {
30
- children: [
31
- "自定义脚本",
32
- /*#__PURE__*/ jsxs(Space.Compact, {
33
- size: "small",
34
- children: [
35
- /*#__PURE__*/ jsx(Space.Addon, {
36
- children: "触发动作:"
37
- }),
38
- /*#__PURE__*/ jsx(Select, {
39
- style: {
40
- width: '100px'
41
- },
42
- value: currentTrigger,
43
- placeholder: "请选择触发动作类型",
44
- options: props.options,
45
- onChange: handleChangeNodeType
46
- })
47
- ]
48
- })
49
- ]
50
- }),
51
- required: true,
52
- help: "请先设置触发动作类型",
53
- rules: [
54
- {
55
- required: true,
56
- message: '自定义脚本不能为空'
57
- }
58
- ],
59
- children: /*#__PURE__*/ jsx(GroovyCodeEditor, {
60
- placeholder: "请输入自定义脚本",
61
- options: {
62
- minHeight: 200
63
- }
64
- })
65
- })
66
- });
67
- };
68
- export { CustomScriptView };