Skip to content

Commit 82b8c0e

Browse files
xlornexlorne
committed
fix form
1 parent 245907e commit 82b8c0e

File tree

8 files changed

+93
-164
lines changed

8 files changed

+93
-164
lines changed

‎admin-pro-ui/src/components/flow/domain/FlowPanelContext.ts

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import {NodeButtonProperties, NodeProperties, NodeType} from "@/components/flow/
44
import {message} from "antd";
55
import {isEmpty} from "lodash-es";
66
import {CustomButtonType} from "@/components/flow/flow/types";
7-
import {FormField} from "@/components/form/types";
8-
import ValidateUtils from "@/components/form/utils";
97
import NodeData = LogicFlow.NodeData;
108
import RegisterConfig = LogicFlow.RegisterConfig;
119
import GraphConfigData = LogicFlow.GraphConfigData;
@@ -77,28 +75,6 @@ class FlowPanelContext {
7775
value: CustomButtonType;
7876
}[];
7977

80-
81-
private readonly defaultNodeButtons = [
82-
{
83-
type: "input",
84-
props: {
85-
name: "id",
86-
hidden: true
87-
}
88-
},
89-
{
90-
type: "input",
91-
props: {
92-
label: "按钮名称",
93-
name: "name",
94-
required: true,
95-
placeholder: "请输入按钮名称",
96-
validateFunction: ValidateUtils.validateNotEmpty
97-
}
98-
}
99-
] as FormField[];
100-
101-
10278
constructor(lfRef: React.RefObject<LogicFlow>) {
10379
this.lfRef = lfRef;
10480
}

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

Lines changed: 83 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import React from "react";
2-
import {
3-
ActionType,
4-
ModalForm,
5-
ProColumns,
6-
ProForm,
7-
ProFormColorPicker,
8-
ProFormDigit,
9-
ProFormSelect,
10-
ProFormText,
11-
ProTable
12-
} from "@ant-design/pro-components";
13-
import {Button, ColorPicker, Popconfirm, Space} from "antd";
2+
import {ActionType, ProColumns, ProForm, ProTable} from "@ant-design/pro-components";
3+
import {Button, ColorPicker, Modal, Popconfirm, Space} from "antd";
144
import FlowUtils from "@/components/flow/utils";
155
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
16-
import {EyeOutlined, ReloadOutlined} from "@ant-design/icons";
6+
import {EyeOutlined} from "@ant-design/icons";
177
import FlowContext from "@/components/flow/domain/FlowContext";
8+
import Form, {FormAction} from "@/components/form";
9+
import FormInput from "@/components/form/input";
10+
import ValidateUtils from "@/components/form/utils";
11+
import FormSelect from "@/components/form/select";
12+
import FormColor from "@/components/form/color";
1813

1914
interface ButtonPanelProps {
2015
id: string;
@@ -24,6 +19,8 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
2419

2520
const actionRef = React.useRef<ActionType>();
2621

22+
const formAction = React.useRef<FormAction>(null);
23+
2724
const [form] = ProForm.useForm();
2825

2926
const [groovyForm] = ProForm.useForm();
@@ -128,127 +125,93 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
128125
}}
129126
/>
130127

131-
<ModalForm
128+
<Modal
132129
title={"添加节点按钮"}
133130
open={visible}
134-
form={form}
135-
modalProps={{
136-
onCancel: () => {
137-
setVisible(false);
138-
},
139-
onOk: () => {
140-
setVisible(false);
141-
},
142-
destroyOnClose: true
143-
}}
144-
onFinish={async (values) => {
131+
onCancel={()=>{setVisible(false)}}
132+
onOk={()=>{
133+
const values = formAction.current?.getFieldsValue();
145134
flowContext.getFlowPanelContext()?.updateButton(props.id, values);
146135
setVisible(false);
147136
actionRef.current?.reload();
148137
}}
138+
destroyOnClose={true}
149139
>
150-
<ProFormText
151-
name={"id"}
152-
hidden={true}
153-
/>
154-
155-
156-
<ProFormText
157-
name={"name"}
158-
label={"按钮名称"}
159-
placeholder={"请输入按钮名称"}
160-
rules={[
161-
{
162-
required: true,
163-
message: '请输入按钮名称'
164-
}
165-
]}
166-
/>
140+
<Form
141+
actionRef={formAction}
142+
layout={"vertical"}
143+
>
144+
<FormInput
145+
name={"id"}
146+
hidden={true}
147+
/>
167148

168-
<ProFormColorPicker
169-
name={"style"}
170-
label={(
171-
<Space>
172-
按钮颜色
173-
<ReloadOutlined
174-
alt={"重置"}
175-
onClick={() => {
176-
form.setFieldsValue({'style': null});
177-
}}
178-
/>
179-
</Space>
180-
)}
181-
normalize={(value: any) => {
182-
if (value) {
183-
return {
184-
background: value.toHexString()
185-
};
186-
}
187-
return value;
188-
}}
189-
getValueProps={(value: any) => {
190-
const color = value?.background;
191-
if (color) {
192-
return {
193-
value: color
194-
}
195-
}
196-
return value;
197-
}}
198-
placeholder={"请选择按钮颜色"}
199-
/>
149+
<FormInput
150+
name={"name"}
151+
label={"按钮名称"}
152+
placeholder={"请输入按钮名称"}
153+
required={true}
154+
validateFunction={ValidateUtils.validateNotEmpty}
155+
/>
200156

201-
<ProFormSelect
202-
name={"type"}
203-
label={(
204-
<Space>
205-
按钮类型
157+
<FormColor
158+
name={["style","background"]}
159+
label={"按钮颜色"}
160+
placeholder={"请输入按钮颜色"}
161+
required={true}
162+
validateFunction={ValidateUtils.validateNotEmpty}
163+
/>
206164

207-
{type === 'CUSTOM' && (
208-
<EyeOutlined
209-
onClick={() => {
210-
groovyForm.resetFields();
211-
const script = form.getFieldValue('groovy') || 'def run(content){\n //你的代码 \n return content.createMessageResult(\'我是自定义标题\');\n}';
212-
groovyForm.setFieldsValue({
213-
'script': script
214-
});
215-
setScriptVisible(!scriptVisible);
216-
}}/>
217-
)}
165+
<FormSelect
166+
name={"type"}
167+
label={(
168+
<Space>
169+
按钮类型
170+
171+
{type === 'CUSTOM' && (
172+
<EyeOutlined
173+
onClick={() => {
174+
groovyForm.resetFields();
175+
const script = form.getFieldValue('groovy') || 'def run(content){\n //你的代码 \n return content.createMessageResult(\'我是自定义标题\');\n}';
176+
groovyForm.setFieldsValue({
177+
'script': script
178+
});
179+
setScriptVisible(!scriptVisible);
180+
}}/>
181+
)}
182+
183+
</Space>
184+
)}
185+
placeholder={"请输入按钮类型"}
186+
required={true}
187+
options={flowContext.getFlowPanelContext()?.getButtonEventOptions()}
188+
onChange={(value: string) => {
189+
setType(value);
190+
}}
191+
/>
218192

219-
</Space>
193+
{type === 'VIEW' && (
194+
<FormInput
195+
name={"eventKey"}
196+
label={"事件Key"}
197+
help={"事件Key用于流程Form的事件触发"}
198+
required={true}
199+
/>
220200
)}
221-
placeholder={"请输入按钮类型"}
222-
rules={[
223-
{
224-
required: true,
225-
message: '请输入按钮类型'
226-
}
227-
]}
228-
options={flowContext.getFlowPanelContext()?.getButtonEventOptions()}
229-
onChange={(value: string) => {
230-
setType(value);
231-
}}
232-
/>
233201

234-
{type === 'VIEW' && (
235-
<ProFormText
236-
name={"eventKey"}
237-
label={"事件Key"}
238-
tooltip={"事件Key用于流程Form的事件触发"}
239-
rules={[
240-
{
241-
required: true,
242-
message: '请输入事件Key'
243-
}
244-
]}
202+
<FormInput
203+
name={"groovy"}
204+
hidden={true}
245205
/>
246-
)}
247206

248-
<ProFormText
249-
name={"groovy"}
250-
hidden={true}
251-
/>
207+
<FormInput
208+
name={"order"}
209+
label={"排序"}
210+
inputType={"number"}
211+
placeholder={"请输入排序"}
212+
/>
213+
214+
</Form>
252215

253216
<ScriptModal
254217
onFinish={(values) => {
@@ -260,23 +223,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
260223
setVisible={setScriptVisible}
261224
visible={scriptVisible}/>
262225

263-
<ProFormDigit
264-
name={"order"}
265-
label={"排序"}
266-
min={0}
267-
fieldProps={{
268-
step: 1
269-
}}
270-
placeholder={"请输入排序"}
271-
rules={[
272-
{
273-
required: true,
274-
message: '请输入排序'
275-
}
276-
]}
277-
/>
278-
279-
</ModalForm>
226+
</Modal>
280227
</>
281228
)
282229
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ const ScriptModal: React.FC<ScriptModalProps> = (props) => {
4646
}}><EyeOutlined /> 查看帮助</a>
4747

4848
{show && (
49-
<div>
49+
<div style={{
50+
height:200,
51+
overflow:'auto'
52+
}}>
5053
<pre>
5154
脚本说明：
5255
函数的定义必须为

‎admin-pro-ui/src/components/form/date.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ const FormDate: React.FC<FormItemProps> = (props) => {
9292
width:"100%"
9393
}}
9494
disabled={props.disabled}
95-
title={props.label}
9695
value={props.value}
9796
picker={precision}
9897
showTime={showTimeConfig?{format: showTimeConfig.format}:false}

‎admin-pro-ui/src/components/form/types.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export interface FormItemProps {
4646
// 表单字段名
4747
name?: NamePath;
4848
// 表单字段标签
49-
label?: string;
49+
label?: React.ReactNode;
5050
// 帮助提示信息
5151
help?: string;
5252
// 表单值

‎admin-pro-ui/src/components/form/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ class ValidateUtils {
1515
if (Array.isArray(value)) {
1616
if (value.length === 0) {
1717
return [errorMessage];
18+
}else {
19+
return [];
1820
}
1921
} else {
2022
return [];

‎mobile-ui/src/components/form/types.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export interface FormItemProps {
4444
// 表单字段名
4545
name?: NamePath;
4646
// 表单字段标签
47-
label?: string;
47+
label?: React.ReactNode;
4848
// 帮助提示信息
4949
help?: string;
5050
// 表单值

‎mobile-ui/src/components/form/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ class ValidateUtils {
1515
if (Array.isArray(value)) {
1616
if (value.length === 0) {
1717
return [errorMessage];
18+
}else {
19+
return [];
1820
}
1921
} else {
2022
return [];

0 commit comments

Comments
 (0)