Skip to content

Commit 245907e

Browse files
xlornexlorne
committed
fix form
1 parent b50371a commit 245907e

File tree

4 files changed

+118
-38
lines changed

4 files changed

+118
-38
lines changed

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

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {NamePath} from "rc-field-form/es/interface";
33
import {FormField} from "@/components/form/types";
44
import {FormValidateContext} from "@/components/form/validate";
55
import {FormFieldOptionListenerContext, FormFieldReloadListenerContext} from "@/components/form/listener";
6-
import {Form as AntForm} from "antd";
6+
import {Form as AntForm, message} from "antd";
77
import FormFactory from "@/components/form/factory";
88
import "./form.scss";
99

@@ -28,13 +28,13 @@ export interface FormAction {
2828
// 禁用表单项，禁用后的表单项还会被提交
2929
disable: (name: NamePath) => void;
3030
// 全部禁用，禁用后的表单项还会被提交
31-
disableAll:()=>void;
31+
disableAll: () => void;
3232
// 启用表单项，启用后的表单项还会被提交
3333
enable: (name: NamePath) => void;
3434
// 全部启用，启用后的表单项还会被提交
35-
enableAll:()=>void;
35+
enableAll: () => void;
3636
// 必填选项控制,true为必填false为非必填提示
37-
required: (name: NamePath,required:boolean) => void;
37+
required: (name: NamePath, required: boolean) => void;
3838
// 获取字段的值
3939
getFieldValue: (name: NamePath) => any;
4040
// 重新加载选项
@@ -57,7 +57,7 @@ export interface FormAction {
5757

5858
export interface FormProps {
5959
// 表单字段
60-
loadFields?: ()=>Promise<FormField[]>;
60+
loadFields?: () => Promise<FormField[]>;
6161
// 表单提交事件
6262
onFinish?: (values: any) => Promise<void>;
6363
// 表单控制对象
@@ -78,9 +78,9 @@ interface FormContextProps {
7878
// 检验控制对象
7979
validateContext: FormValidateContext;
8080
// 表单刷新监听对象
81-
reloadContext:FormFieldReloadListenerContext;
81+
reloadContext: FormFieldReloadListenerContext;
8282
// 选项刷新监听对象
83-
optionContext:FormFieldOptionListenerContext;
83+
optionContext: FormFieldOptionListenerContext;
8484
}
8585

8686
export const FormContext = React.createContext<FormContextProps | null>(null);
@@ -100,7 +100,7 @@ const namePathEqual = (name1: NamePath, name2: NamePath): boolean => {
100100
return name1 === name2;
101101
}
102102

103-
const Form:React.FC<FormProps> = (props)=>{
103+
const Form: React.FC<FormProps> = (props) => {
104104

105105
const [form] = AntForm.useForm();
106106

@@ -126,8 +126,12 @@ const Form:React.FC<FormProps> = (props)=>{
126126
},
127127

128128
hidden: (name: NamePath) => {
129+
if (fields.length == 0) {
130+
message.error("表单项未加载").then();
131+
return;
132+
}
129133
setFields(prevFields => prevFields.map((field) => {
130-
if (namePathEqual(field.props.name,name)) {
134+
if (namePathEqual(field.props.name, name)) {
131135
return {
132136
...field,
133137
props: {
@@ -142,9 +146,13 @@ const Form:React.FC<FormProps> = (props)=>{
142146
validateContext.clear();
143147
},
144148

145-
required:(name: NamePath,required:boolean) => {
149+
required: (name: NamePath, required: boolean) => {
150+
if (fields.length == 0) {
151+
message.error("表单项未加载").then();
152+
return;
153+
}
146154
setFields(prevFields => prevFields.map((field) => {
147-
if (namePathEqual(field.props.name,name)) {
155+
if (namePathEqual(field.props.name, name)) {
148156
return {
149157
...field,
150158
props: {
@@ -159,8 +167,12 @@ const Form:React.FC<FormProps> = (props)=>{
159167
},
160168

161169
show: (name: NamePath) => {
170+
if (fields.length == 0) {
171+
message.error("表单项未加载").then();
172+
return;
173+
}
162174
setFields(prevFields => prevFields.map((field) => {
163-
if (namePathEqual(field.props.name,name)) {
175+
if (namePathEqual(field.props.name, name)) {
164176
return {
165177
...field,
166178
props: {
@@ -175,8 +187,12 @@ const Form:React.FC<FormProps> = (props)=>{
175187
},
176188

177189
disable: (name: NamePath) => {
190+
if (fields.length == 0) {
191+
message.error("表单项未加载").then();
192+
return;
193+
}
178194
setFields(prevFields => prevFields.map((field) => {
179-
if (namePathEqual(field.props.name,name)) {
195+
if (namePathEqual(field.props.name, name)) {
180196
return {
181197
...field,
182198
props: {
@@ -190,7 +206,11 @@ const Form:React.FC<FormProps> = (props)=>{
190206
validateContext.clear();
191207
},
192208

193-
disableAll:()=>{
209+
disableAll: () => {
210+
if (fields.length == 0) {
211+
message.error("表单项未加载").then();
212+
return;
213+
}
194214
setFields(prevFields => prevFields.map((field) => {
195215
return {
196216
...field,
@@ -204,8 +224,12 @@ const Form:React.FC<FormProps> = (props)=>{
204224
},
205225

206226
enable: (name: NamePath) => {
227+
if (fields.length == 0) {
228+
message.error("表单项未加载").then();
229+
return;
230+
}
207231
setFields(prevFields => prevFields.map((field) => {
208-
if (namePathEqual(field.props.name,name)) {
232+
if (namePathEqual(field.props.name, name)) {
209233
return {
210234
...field,
211235
props: {
@@ -219,7 +243,11 @@ const Form:React.FC<FormProps> = (props)=>{
219243
validateContext.clear();
220244
},
221245

222-
enableAll:()=>{
246+
enableAll: () => {
247+
if (fields.length == 0) {
248+
message.error("表单项未加载").then();
249+
return;
250+
}
223251
setFields(prevFields => prevFields.map((field) => {
224252
return {
225253
...field,
@@ -233,11 +261,19 @@ const Form:React.FC<FormProps> = (props)=>{
233261
},
234262

235263
remove: (name: NamePath) => {
236-
setFields(prevFields => prevFields.filter((field) => !namePathEqual(field.props.name,name)));
264+
if (fields.length == 0) {
265+
message.error("表单项未加载").then();
266+
return;
267+
}
268+
setFields(prevFields => prevFields.filter((field) => !namePathEqual(field.props.name, name)));
237269
validateContext.clear();
238270
},
239271

240272
create: (field: FormField, index?: number) => {
273+
if (fields.length == 0) {
274+
message.error("表单项未加载").then();
275+
return;
276+
}
241277
setFields(prevFields => {
242278
const filteredFields = prevFields.filter((item) => item.props.name !== field.props.name);
243279
if (index === undefined || index < 0) {
@@ -261,18 +297,18 @@ const Form:React.FC<FormProps> = (props)=>{
261297

262298
getFieldProps(name: NamePath): FormField | null {
263299
for (const field of fields) {
264-
if (namePathEqual(field.props.name,name)) {
300+
if (namePathEqual(field.props.name, name)) {
265301
return field;
266302
}
267303
}
268304
return null;
269305
},
270306

271-
reloadOptions:(name: NamePath) => {
307+
reloadOptions: (name: NamePath) => {
272308
optionContext.notify(name);
273309
},
274310

275-
reloadAllOptions:()=>{
311+
reloadAllOptions: () => {
276312
optionContext.notifyAll();
277313
},
278314

@@ -299,15 +335,15 @@ const Form:React.FC<FormProps> = (props)=>{
299335
const formContextProps = {
300336
formAction: formAction,
301337
validateContext: validateContext,
302-
reloadContext:reloadContext,
303-
optionContext:optionContext
338+
reloadContext: reloadContext,
339+
optionContext: optionContext
304340
}
305341

306342
const [fields, setFields] = React.useState<FormField[]>([]);
307343

308-
const reloadFields = ()=>{
309-
if(props.loadFields){
310-
props.loadFields().then(fields=>{
344+
const reloadFields = () => {
345+
if (props.loadFields) {
346+
props.loadFields().then(fields => {
311347
setFields(fields);
312348
})
313349
}

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@ import {NamePath} from "rc-field-form/es/interface";
33
// Form字段组件刷新控制监听上下文对象
44
export class FormFieldReloadListenerContext {
55

6-
private readonly map:Map<NamePath,()=>void>;
6+
private readonly map:Map<string,()=>void>;
77

88
constructor() {
99
this.map = new Map();
1010
}
1111

1212
public addListener(name:NamePath,listener:()=>void){
13-
this.map.set(name, listener);
13+
const key = Array.isArray(name)?name.join("."):name;
14+
this.map.set(key, listener);
1415
}
1516

1617

1718
public notify(name:NamePath){
18-
const listener = this.map.get(name);
19+
const key = Array.isArray(name)?name.join("."):name;
20+
const listener = this.map.get(key);
1921
if(listener){
2022
listener();
2123
}
@@ -32,19 +34,21 @@ export class FormFieldReloadListenerContext {
3234
// Form字段组件选项刷新控制监听上下文对象
3335
export class FormFieldOptionListenerContext {
3436

35-
private readonly map:Map<NamePath,()=>void>;
37+
private readonly map:Map<string,()=>void>;
3638

3739
constructor() {
3840
this.map = new Map();
3941
}
4042

4143
public addListener(name:NamePath,listener:()=>void){
42-
this.map.set(name, listener);
44+
const key = Array.isArray(name)?name.join("."):name;
45+
this.map.set(key, listener);
4346
}
4447

4548

4649
public notify(name:NamePath){
47-
const listener = this.map.get(name);
50+
const key = Array.isArray(name)?name.join("."):name;
51+
const listener = this.map.get(key);
4852
if(listener){
4953
listener();
5054
}

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useEffect} from "react";
2-
import {Form as MobileForm} from "antd-mobile";
2+
import {Form as MobileForm, Toast} from "antd-mobile";
33
import FormFactory from "@/components/form/factory";
44
import {FormField} from "@/components/form/types";
55
import {FormValidateContext} from "@/components/form/validate";
@@ -128,6 +128,10 @@ const Form: React.FC<FormProps> = (props) => {
128128
},
129129

130130
hidden: (name: NamePath) => {
131+
if(fields.length==0){
132+
Toast.show('表单项未加载');
133+
return;
134+
}
131135
setFields(prevFields => prevFields.map((field) => {
132136
if (namePathEqual(field.props.name,name)) {
133137
return {
@@ -145,6 +149,10 @@ const Form: React.FC<FormProps> = (props) => {
145149
},
146150

147151
required:(name: NamePath,required:boolean) => {
152+
if(fields.length==0){
153+
Toast.show('表单项未加载');
154+
return;
155+
}
148156
setFields(prevFields => prevFields.map((field) => {
149157
if (namePathEqual(field.props.name,name)) {
150158
return {
@@ -161,6 +169,10 @@ const Form: React.FC<FormProps> = (props) => {
161169
},
162170

163171
show: (name: NamePath) => {
172+
if(fields.length==0){
173+
Toast.show('表单项未加载');
174+
return;
175+
}
164176
setFields(prevFields => prevFields.map((field) => {
165177
if (namePathEqual(field.props.name,name)) {
166178
return {
@@ -177,6 +189,10 @@ const Form: React.FC<FormProps> = (props) => {
177189
},
178190

179191
disable: (name: NamePath) => {
192+
if(fields.length==0){
193+
Toast.show('表单项未加载');
194+
return;
195+
}
180196
setFields(prevFields => prevFields.map((field) => {
181197
if (namePathEqual(field.props.name,name)) {
182198
return {
@@ -193,6 +209,10 @@ const Form: React.FC<FormProps> = (props) => {
193209
},
194210

195211
disableAll:()=>{
212+
if(fields.length==0){
213+
Toast.show('表单项未加载');
214+
return;
215+
}
196216
setFields(prevFields => prevFields.map((field) => {
197217
return {
198218
...field,
@@ -206,6 +226,10 @@ const Form: React.FC<FormProps> = (props) => {
206226
},
207227

208228
enable: (name: NamePath) => {
229+
if(fields.length==0){
230+
Toast.show('表单项未加载');
231+
return;
232+
}
209233
setFields(prevFields => prevFields.map((field) => {
210234
if (namePathEqual(field.props.name,name)) {
211235
return {
@@ -222,6 +246,10 @@ const Form: React.FC<FormProps> = (props) => {
222246
},
223247

224248
enableAll:()=>{
249+
if(fields.length==0){
250+
Toast.show('表单项未加载');
251+
return;
252+
}
225253
setFields(prevFields => prevFields.map((field) => {
226254
return {
227255
...field,
@@ -235,11 +263,19 @@ const Form: React.FC<FormProps> = (props) => {
235263
},
236264

237265
remove: (name: NamePath) => {
266+
if(fields.length==0){
267+
Toast.show('表单项未加载');
268+
return;
269+
}
238270
setFields(prevFields => prevFields.filter((field) => !namePathEqual(field.props.name,name)));
239271
validateContext.clear();
240272
},
241273

242274
create: (field: FormField, index?: number) => {
275+
if(fields.length==0){
276+
Toast.show('表单项未加载');
277+
return;
278+
}
243279
setFields(prevFields => {
244280
const filteredFields = prevFields.filter((item) => item.props.name !== field.props.name);
245281
if (index === undefined || index < 0) {

0 commit comments

Comments
 (0)