1
1
import React from "react" ;
2
2
import { Button , Divider , Space } from "antd" ;
3
- import { ProForm , ProFormDigit , ProFormSelect , ProFormSwitch , ProFormText } from "@ant-design/pro-components" ;
3
+ import { ProForm } from "@ant-design/pro-components" ;
4
4
import { EyeOutlined , SettingOutlined } from "@ant-design/icons" ;
5
5
import GroovyScript from "@/components/flow/utils/script" ;
6
6
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal" ;
7
7
import { getComponent } from "@/framework/ComponentBus" ;
8
8
import { UserSelectProps , UserSelectViewKey } from "@/components/flow/flow/types" ;
9
+ import Form , { FormAction } from "@/components/form" ;
10
+ import FormInput from "@/components/form/input" ;
11
+ import ValidateUtils from "@/components/form/utils" ;
12
+ import FormSelect from "@/components/form/select" ;
13
+ import FormSwitch from "@/components/form/switch" ;
9
14
10
15
interface NodePanelProps {
11
16
id ?: string ,
12
17
data ?: any ,
13
18
onFinish : ( values : any ) => void ,
14
- form : any ,
19
+ formAction : React . RefObject < FormAction > ,
15
20
type : string ,
16
21
}
17
22
@@ -31,69 +36,54 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
31
36
32
37
return (
33
38
< >
34
- < ProForm
39
+ < Form
35
40
initialValues = { {
36
41
...props . data ,
37
42
operatorMatcherType : GroovyScript . operatorMatcherType ( props . data ?. operatorMatcher ) ,
38
43
errTriggerType : GroovyScript . errTriggerType ( props . data ?. errTrigger ) ,
39
44
titleGeneratorType : GroovyScript . titleGeneratorType ( props . data ?. titleGenerator ) ,
40
45
} }
41
- form = { props . form }
46
+ actionRef = { props . formAction }
42
47
layout = { "vertical" }
43
- onFinish = { props . onFinish }
44
- submitter = { false }
48
+ onFinish = { async ( values ) => {
49
+ props . onFinish ( values ) ;
50
+ } }
45
51
>
46
52
< Divider >
47
53
基本信息
48
54
</ Divider >
49
- < ProFormText
55
+ < FormInput
50
56
name = { "name" }
51
57
label = { "节点名称" }
52
- rules = { [
53
- {
54
- required : true ,
55
- message : "请输入节点名称"
56
- }
57
- ] }
58
+ required = { true }
59
+ validateFunction = { ValidateUtils . validateNotEmpty }
58
60
/>
59
- < ProFormText
61
+ < FormInput
60
62
name = { "code" }
61
63
disabled = { props . type === 'start' || props . type === 'over' }
62
64
label = { "节点编码" }
63
- rules = { [
64
- {
65
- required : true ,
66
- message : "请输入节点编码"
67
- }
68
- ] }
65
+ required = { true }
66
+ validateFunction = { ValidateUtils . validateNotEmpty }
69
67
/>
70
- < ProFormText
68
+ < FormInput
71
69
name = { "view" }
72
70
label = { "视图名称" }
73
71
tooltip = { "界面渲染视图的名称" }
74
- rules = { [
75
- {
76
- required : true ,
77
- message : "请输入视图名称"
78
- }
79
- ] }
72
+ required = { true }
73
+ validateFunction = { ValidateUtils . validateNotEmpty }
80
74
/>
81
75
82
76
< Divider >
83
77
节点配置
84
78
</ Divider >
85
79
86
- < ProFormSelect
80
+ < FormSelect
87
81
name = { "approvalType" }
88
82
label = { "节点类型" }
89
83
hidden = { props . type !== 'node' }
90
84
tooltip = { "会签即多人审批以后再处理,非会签则是一个人处理以后即可响应" }
91
- rules = { [
92
- {
93
- required : true ,
94
- message : "请输入节点类型"
95
- }
96
- ] }
85
+ required = { true }
86
+ validateFunction = { ValidateUtils . validateNotEmpty }
97
87
options = { [
98
88
{
99
89
label : "会签" ,
@@ -106,18 +96,17 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
106
96
] }
107
97
/>
108
98
109
- < ProFormText
99
+ < FormInput
110
100
tooltip = { "操作人匹配脚本" }
111
101
name = { "operatorMatcher" }
112
102
label = { "操作人" }
113
103
hidden = { true }
114
104
/>
115
105
116
- < ProFormSelect
106
+ < FormSelect
117
107
tooltip = { "操作人匹配脚本" }
118
108
name = { "operatorMatcherType" }
119
109
label = { "操作人" }
120
- width = { "lg" }
121
110
options = { [
122
111
{
123
112
label : "任意人" ,
@@ -134,7 +123,7 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
134
123
] }
135
124
onChange = { ( value ) => {
136
125
setOperatorMatcherType ( value as string ) ;
137
- props . form . setFieldsValue ( {
126
+ props . formAction . current ? .setFieldsValue ( {
138
127
operatorMatcher : GroovyScript . operatorMatcher ( value as string )
139
128
} )
140
129
} }
@@ -153,7 +142,7 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
153
142
154
143
< EyeOutlined
155
144
onClick = { ( ) => {
156
- const value = props . form . getFieldValue ( "operatorMatcher" ) ;
145
+ const value = props . formAction . current ? .getFieldValue ( "operatorMatcher" ) ;
157
146
form . setFieldValue ( "type" , "operatorMatcher" ) ;
158
147
form . setFieldValue ( "script" , value ) ;
159
148
setVisible ( true ) ;
@@ -163,33 +152,30 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
163
152
) }
164
153
/>
165
154
166
- < ProFormDigit
155
+ < FormInput
156
+ inputType = { "number" }
167
157
tooltip = { "超时提醒时间,单位毫米。为0时则为无超时设置" }
168
- fieldProps = { {
169
- step : 1
170
- } }
171
158
name = { "timeout" }
172
159
hidden = { props . type === 'circulate' }
173
160
label = { "超时时间" }
174
161
/>
175
162
176
- < ProFormSwitch
163
+ < FormSwitch
177
164
tooltip = { "关闭编辑以后在当前节点下的流程表单无法修改数据" }
178
165
name = { "editable" }
179
166
label = { "是否编辑" }
180
167
/>
181
168
182
- < ProFormText
169
+ < FormInput
183
170
name = { "titleGenerator" }
184
171
label = { "自定义标题" }
185
172
hidden = { true }
186
173
/>
187
174
188
- < ProFormSelect
175
+ < FormSelect
189
176
tooltip = { "待办记录中的标题生成器脚本" }
190
177
name = { "titleGeneratorType" }
191
178
label = { "自定义标题" }
192
- width = { "lg" }
193
179
options = { [
194
180
{
195
181
label : "默认" ,
@@ -202,15 +188,15 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
202
188
] }
203
189
onChange = { ( value ) => {
204
190
if ( value === "default" ) {
205
- props . form . setFieldsValue ( {
191
+ props . formAction . current ? .setFieldsValue ( {
206
192
titleGenerator : GroovyScript . defaultTitleGenerator
207
193
} )
208
194
}
209
195
} }
210
196
addonAfter = { (
211
197
< EyeOutlined
212
198
onClick = { ( ) => {
213
- const value = props . form . getFieldValue ( "titleGenerator" ) ;
199
+ const value = props . formAction . current ? .getFieldValue ( "titleGenerator" ) ;
214
200
form . setFieldValue ( "type" , "titleGenerator" ) ;
215
201
form . setFieldValue ( "script" , value ) ;
216
202
setVisible ( true ) ;
@@ -222,17 +208,16 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
222
208
异常配置
223
209
</ Divider >
224
210
225
- < ProFormText
211
+ < FormInput
226
212
name = { "errTrigger" }
227
213
label = { "异常配置" }
228
214
hidden = { true }
229
215
/>
230
216
231
- < ProFormSelect
217
+ < FormSelect
232
218
tooltip = { "当节点无人员匹配时的异常补偿脚本,可以指定人员或节点处理" }
233
219
name = { "errTriggerType" }
234
220
label = { "异常配置" }
235
- width = { "lg" }
236
221
options = { [
237
222
{
238
223
label : "默认" ,
@@ -245,28 +230,28 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
245
230
] }
246
231
onChange = { ( value ) => {
247
232
if ( value === "default" ) {
248
- props . form . setFieldsValue ( {
233
+ props . formAction . current ? .setFieldsValue ( {
249
234
errTrigger : GroovyScript . defaultOutTrigger
250
235
} )
251
236
}
252
237
} }
253
238
addonAfter = { (
254
239
< EyeOutlined
255
240
onClick = { ( ) => {
256
- const value = props . form . getFieldValue ( "errTrigger" ) ;
241
+ const value = props . formAction . current ? .getFieldValue ( "errTrigger" ) ;
257
242
form . setFieldValue ( "type" , "errTrigger" ) ;
258
243
form . setFieldValue ( "script" , value ) ;
259
244
setVisible ( true ) ;
260
245
} } />
261
246
) }
262
247
/>
263
248
264
- </ ProForm >
249
+ </ Form >
265
250
266
251
< ScriptModal
267
252
onFinish = { ( values ) => {
268
253
const type = values . type ;
269
- props . form . setFieldsValue ( {
254
+ props . formAction . current ? .setFieldsValue ( {
270
255
[ type ] : values . script
271
256
} ) ;
272
257
} }
@@ -279,12 +264,12 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
279
264
visible = { userSelectVisible }
280
265
setVisible = { setUserSelectVisible }
281
266
userSelectType = { "users" }
282
- specifyUserIds = { GroovyScript . getOperatorUsers ( props . form . getFieldValue ( "operatorMatcher" ) ) }
267
+ specifyUserIds = { GroovyScript . getOperatorUsers ( props . formAction . current ? .getFieldValue ( "operatorMatcher" ) ) }
283
268
mode = { "multiple" }
284
269
onFinish = { ( values ) => {
285
270
setUserSelectVisible ( false ) ;
286
271
const script = GroovyScript . specifyOperatorMatcher . replaceAll ( "%s" , values . map ( ( item : any ) => item . id ) . join ( "," ) ) ;
287
- props . form . setFieldsValue ( {
272
+ props . formAction . current ? .setFieldsValue ( {
288
273
operatorMatcher : script
289
274
} ) ;
290
275
} }
0 commit comments