Skip to content

Commit 0eafb4d

Browse files
xlornexlorne
committed
update flow form
1 parent 956e5df commit 0eafb4d

File tree

9 files changed

+155
-151
lines changed

9 files changed

+155
-151
lines changed

‎admin-pro-ui/src/components/flow/nodes/panel/ButtonPanel.tsx

+100-100
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from "react";
2-
import {ActionType, ModalForm, ProColumns, ProForm, ProFormText, ProTable} from "@ant-design/pro-components";
3-
import {Button, ColorPicker, Popconfirm, Space} from "antd";
2+
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
3+
import {Button, ColorPicker, Modal, Popconfirm, Space} from "antd";
44
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
55
import {EyeOutlined} from "@ant-design/icons";
66
import FlowContext from "@/components/flow/domain/FlowContext";
77
import FormInput from "@/components/form/input";
88
import ValidateUtils from "@/components/form/utils";
99
import FormSelect from "@/components/form/select";
1010
import FormColor from "@/components/form/color";
11+
import Form from "@/components/form";
1112

1213
interface ButtonPanelProps {
1314
id: string;
@@ -17,9 +18,8 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
1718

1819
const actionRef = React.useRef<ActionType>();
1920

20-
const [form] = ProForm.useForm();
21-
const [groovyForm] = ProForm.useForm();
22-
21+
const form = Form.useForm();
22+
const groovyForm = Form.useForm();
2323

2424
const [visible, setVisible] = React.useState(false);
2525

@@ -70,7 +70,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
7070
<a
7171
key={"edit"}
7272
onClick={() => {
73-
groovyForm.resetFields();
73+
groovyForm.reset();
7474
form.setFieldsValue(record);
7575
setType(record.type);
7676
setVisible(true);
@@ -113,119 +113,119 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
113113
<Button
114114
type={"primary"}
115115
onClick={() => {
116-
groovyForm.resetFields();
116+
groovyForm.reset();
117117
setVisible(true);
118118
}}
119119
>添加按钮</Button>
120120
]
121121
}}
122122
/>
123123

124-
<ModalForm
124+
<Modal
125125
title={"添加节点按钮"}
126126
open={visible}
127-
form={form}
128-
onFinish={async (values) => {
129-
flowContext.getFlowPanelContext()?.updateButton(props.id, values as any);
127+
onCancel={()=>{
130128
setVisible(false);
131-
actionRef.current?.reload();
132129
}}
133-
modalProps={{
134-
onCancel: () => {
135-
setVisible(false);
136-
},
137-
onClose:()=>{
138-
setVisible(false);
139-
},
140-
destroyOnClose:true
130+
onClose={()=>{
131+
setVisible(false);
141132
}}
133+
onOk={async ()=>{
134+
await form.submit();
135+
}}
136+
destroyOnClose={true}
142137
>
143-
<FormInput
144-
name={"id"}
145-
hidden={true}
146-
/>
147-
148-
<ProFormText
149-
name={"name"}
150-
label={"按钮名称"}
151-
placeholder={"请输入按钮名称"}
152-
required={true}
153-
rules={[
154-
{
155-
required: true,
156-
message: '请输入按钮名称',
157-
},
158-
]}
159-
/>
160-
161-
<FormColor
162-
name={["style","background"]}
163-
label={"按钮颜色"}
164-
placeholder={"请输入按钮颜色"}
165-
required={true}
166-
validateFunction={ValidateUtils.validateNotEmpty}
167-
/>
168-
169-
<FormSelect
170-
name={"type"}
171-
label={(
172-
<Space>
173-
按钮类型
174-
175-
{type === 'CUSTOM' && (
176-
<EyeOutlined
177-
onClick={() => {
178-
groovyForm.resetFields();
179-
const script = form.getFieldValue('groovy') || 'def run(content){\n //你的代码 \n return content.createMessageResult(\'我是自定义标题\');\n}';
180-
groovyForm.setFieldsValue({
181-
'script': script
182-
});
183-
setScriptVisible(!scriptVisible);
184-
}}/>
185-
)}
186-
187-
</Space>
188-
)}
189-
placeholder={"请输入按钮类型"}
190-
required={true}
191-
options={flowContext.getFlowPanelContext()?.getButtonEventOptions()}
192-
onChange={(value: string) => {
193-
setType(value);
138+
139+
<Form
140+
layout={"vertical"}
141+
form={form}
142+
onFinish={async (values) => {
143+
flowContext.getFlowPanelContext()?.updateButton(props.id, values as any);
144+
setVisible(false);
145+
actionRef.current?.reload();
194146
}}
195-
/>
147+
>
148+
149+
<FormInput
150+
name={"id"}
151+
hidden={true}
152+
/>
196153

197-
{type === 'VIEW' && (
198154
<FormInput
199-
name={"eventKey"}
200-
label={"事件Key"}
201-
help={"事件Key用于流程Form的事件触发"}
155+
name={"name"}
156+
label={"按钮名称"}
157+
placeholder={"请输入按钮名称"}
202158
required={true}
159+
validateFunction={ValidateUtils.validateNotEmpty}
203160
/>
204-
)}
205-
206-
<FormInput
207-
name={"groovy"}
208-
hidden={true}
209-
/>
210-
211-
<FormInput
212-
name={"order"}
213-
label={"排序"}
214-
inputType={"number"}
215-
placeholder={"请输入排序"}
216-
/>
217-
218-
<ScriptModal
219-
onFinish={(values) => {
220-
form.setFieldsValue({
221-
'groovy': values.script
222-
});
223-
}}
224-
form={groovyForm}
225-
setVisible={setScriptVisible}
226-
visible={scriptVisible}/>
227161

228-
</ModalForm>
162+
<FormColor
163+
name={["style","background"]}
164+
label={"按钮颜色"}
165+
placeholder={"请输入按钮颜色"}
166+
/>
167+
168+
<FormSelect
169+
name={"type"}
170+
label={(
171+
<Space>
172+
按钮类型
173+
174+
{type === 'CUSTOM' && (
175+
<EyeOutlined
176+
onClick={() => {
177+
groovyForm.reset();
178+
const script = form.getFieldValue('groovy') || 'def run(content){\n //你的代码 \n return content.createMessageResult(\'我是自定义标题\');\n}';
179+
groovyForm.setFieldsValue({
180+
'script': script
181+
});
182+
setScriptVisible(!scriptVisible);
183+
}}/>
184+
)}
185+
186+
</Space>
187+
)}
188+
placeholder={"请输入按钮类型"}
189+
required={true}
190+
options={flowContext.getFlowPanelContext()?.getButtonEventOptions()}
191+
onChange={(value: string) => {
192+
setType(value);
193+
}}
194+
/>
195+
196+
{type === 'VIEW' && (
197+
<FormInput
198+
name={"eventKey"}
199+
label={"事件Key"}
200+
help={"事件Key用于流程Form的事件触发"}
201+
required={true}
202+
/>
203+
)}
204+
205+
<FormInput
206+
name={"groovy"}
207+
hidden={true}
208+
/>
209+
210+
<FormInput
211+
name={"order"}
212+
label={"排序"}
213+
inputType={"number"}
214+
placeholder={"请输入排序"}
215+
/>
216+
217+
<ScriptModal
218+
onFinish={(values) => {
219+
form.setFieldsValue({
220+
'groovy': values.script
221+
});
222+
}}
223+
form={groovyForm}
224+
setVisible={setScriptVisible}
225+
visible={scriptVisible}/>
226+
227+
</Form>
228+
</Modal>
229229
</>
230230
)
231231
}

‎admin-pro-ui/src/components/flow/nodes/panel/EdgePanel.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {Input, InputNumber, Popconfirm, Space} from "antd";
44
import {CheckOutlined, EditOutlined, SettingOutlined} from "@ant-design/icons";
55
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
66
import FlowContext from "@/components/flow/domain/FlowContext";
7+
import Form from "@/components/form";
78

89
interface EdgePanelProps {
910
id?: string;
@@ -17,7 +18,7 @@ const EdgePanel: React.FC<EdgePanelProps> = (props) => {
1718
const [name, setName] = React.useState("");
1819
const [order, setOrder] = React.useState(0);
1920

20-
const [groovyForm] = ProForm.useForm();
21+
const groovyForm = Form.useForm();
2122
const actionRef = React.useRef<ActionType>();
2223

2324
const flowContext = FlowContext.getInstance();

‎admin-pro-ui/src/components/flow/nodes/panel/NodePanel.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from "react";
2-
import {Button, Divider, Form, Space} from "antd";
2+
import {Button, Divider, Space} from "antd";
33
import {EyeOutlined, SettingOutlined} from "@ant-design/icons";
44
import GroovyScript from "@/components/flow/utils/script";
55
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
66
import {getComponent} from "@/framework/ComponentBus";
77
import ValidateUtils from "@/components/form/utils";
88
import FormSelect from "@/components/form/select";
99
import FormSwitch from "@/components/form/switch";
10-
import {ProForm} from "@ant-design/pro-components";
1110
import FormInput from "@/components/form/input";
12-
import {FormInstance} from "antd/es/form/hooks/useForm";
1311
import {UserSelectFormProps, UserSelectFormViewKey} from "@/components/flow/types";
12+
import FormInstance from "@/components/form/domain/FormInstance";
13+
import Form from "@/components/form";
1414

1515
interface NodePanelProps {
1616
id?: string,
@@ -22,7 +22,7 @@ interface NodePanelProps {
2222

2323
const NodePanel: React.FC<NodePanelProps> = (props) => {
2424

25-
const [groovyForm] = ProForm.useForm();
25+
const groovyForm = Form.useForm();
2626

2727
const [visible, setVisible] = React.useState(false);
2828

@@ -33,7 +33,6 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
3333
// 用户选人视图
3434
const UserSelectView = getComponent(UserSelectFormViewKey) as React.ComponentType<UserSelectFormProps>;
3535

36-
3736
return (
3837
<>
3938
<Form

‎admin-pro-ui/src/components/flow/nodes/panel/ScriptModal.tsx

+31-27
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import {markdown} from "@/components/flow/nodes/panel/help";
44
import remarkGfm from 'remark-gfm'
55
import FormInput from "@/components/form/input";
66
import FormCode from "@/components/form/code";
7-
import {ModalForm} from "@ant-design/pro-components";
8-
import {FormInstance} from "antd/es/form/hooks/useForm";
97
import "./ScriptModal.scss";
8+
import FormInstance from "@/components/form/domain/FormInstance";
9+
import {Modal} from "antd";
10+
import Form from "@/components/form";
1011

1112
interface ScriptModalProps {
1213
form: FormInstance;
@@ -16,39 +17,41 @@ interface ScriptModalProps {
1617
}
1718

1819
const ScriptModal: React.FC<ScriptModalProps> = (props) => {
19-
2020
return (
21-
<ModalForm
22-
form={props.form}
21+
<Modal
2322
width={"85vw"}
2423
className={"flow-script-modal"}
2524
title={"脚本预览"}
2625
open={props.visible}
27-
modalProps={{
28-
onCancel: () => {
29-
props.setVisible(false);
30-
},
31-
onClose: () => {
32-
props.setVisible(false);
33-
},
34-
destroyOnClose: true
26+
onCancel={() => {
27+
props.setVisible(false);
3528
}}
36-
onFinish={async (values) => {
37-
props.onFinish(values);
29+
onClose={() => {
3830
props.setVisible(false);
3931
}}
32+
onOk={async ()=>{
33+
await props.form.submit();
34+
}}
35+
destroyOnClose={true}
4036
>
41-
<div className={"flow-script-content"}>
42-
<div className={"flow-script-help"}>
43-
<div className={"flow-script-help-markdown"}>
44-
<Markdown
45-
remarkPlugins={[remarkGfm]}
46-
>
47-
{markdown}
48-
</Markdown>
37+
<Form
38+
form={props.form}
39+
onFinish={async (values) => {
40+
props.onFinish(values);
41+
props.setVisible(false);
42+
}}
43+
>
44+
<div className={"flow-script-content"}>
45+
<div className={"flow-script-help"}>
46+
<div className={"flow-script-help-markdown"}>
47+
<Markdown
48+
remarkPlugins={[remarkGfm]}
49+
>
50+
{markdown}
51+
</Markdown>
52+
</div>
4953
</div>
50-
</div>
51-
<div className={"flow-script-form"}>
54+
<div className={"flow-script-form"}>
5255
<FormInput
5356
name={"type"}
5457
hidden={true}
@@ -60,9 +63,10 @@ const ScriptModal: React.FC<ScriptModalProps> = (props) => {
6063
height: '65vh',
6164
}}
6265
/>
66+
</div>
6367
</div>
64-
</div>
65-
</ModalForm>
68+
</Form>
69+
</Modal>
6670
)
6771
}
6872

0 commit comments

Comments
 (0)