Skip to content

Commit 855c726

Browse files
xlornexlorne
committed
fix Form
1 parent 6d4530b commit 855c726

File tree

3 files changed

+190
-80
lines changed

3 files changed

+190
-80
lines changed

‎mobile-ui/src/components/flow/components/FlowHistory.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -136,29 +136,32 @@ const FlowHistory = () => {
136136

137137
const currentFlowRecord = flowRecordContext?.getCurrentFlowRecord();
138138

139-
return (
140-
<div className={"flow-history"}>
141-
<div className={"flow-basic"}>
142-
<Descriptions
143-
columns={fields}
144-
request={async () => {
145-
return {
146-
...currentFlowRecord,
147-
createOperatorName: currentFlowRecord.createOperator?.name,
148-
createOperatorDate: moment(currentFlowRecord.createTime).format('YYYY-MM-DD HH:mm:ss'),
149-
flowStatus: flowStatusConvert(currentFlowRecord),
150-
recodeType: recodeTypeConvert(currentFlowRecord),
151-
postponedCount: postponedCountConvert(currentFlowRecord),
152-
interfere: interfereConvert(currentFlowRecord),
153-
read: readConvert(currentFlowRecord),
154-
timeoutTime: timeoutTimeConvert(currentFlowRecord),
155-
nodeName: flowRecordContext?.getNode(currentFlowRecord.nodeCode)?.name,
156-
};
157-
}}
158-
/>
139+
if(currentFlowRecord) {
140+
return (
141+
<div className={"flow-history"}>
142+
<div className={"flow-basic"}>
143+
<Descriptions
144+
columns={fields}
145+
request={async () => {
146+
return {
147+
...currentFlowRecord,
148+
createOperatorName: currentFlowRecord.createOperator?.name,
149+
createOperatorDate: moment(currentFlowRecord.createTime).format('YYYY-MM-DD HH:mm:ss'),
150+
flowStatus: flowStatusConvert(currentFlowRecord),
151+
recodeType: recodeTypeConvert(currentFlowRecord),
152+
postponedCount: postponedCountConvert(currentFlowRecord),
153+
interfere: interfereConvert(currentFlowRecord),
154+
read: readConvert(currentFlowRecord),
155+
timeoutTime: timeoutTimeConvert(currentFlowRecord),
156+
nodeName: flowRecordContext?.getNode(currentFlowRecord.nodeCode)?.name,
157+
};
158+
}}
159+
/>
160+
</div>
159161
</div>
160-
</div>
161-
)
162+
)
163+
}
164+
return <></>
162165
}
163166

164167
export default FlowHistory;

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

Lines changed: 150 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useEffect} from "react";
22
import {FormItemProps, FormOption} from "@/components/form/types";
3-
import {Button, CheckList, Form, Popup, SearchBar} from "antd-mobile";
3+
import {Button, CheckList, Form, InfiniteScroll, Popup, PullToRefresh, SearchBar} from "antd-mobile";
44
import {RightOutline, SetOutline} from "antd-mobile-icons";
55
import formFieldInit from "@/components/form/common";
66
import {FormAction} from "@/components/form/index";
@@ -21,6 +21,122 @@ const formToValue = (value: string[]) => {
2121
return value;
2222
}
2323

24+
interface CheckboxItemProps {
25+
item: FormOption;
26+
paths: FormOption[];
27+
setPaths: (paths: FormOption[]) => void;
28+
setOptions: (options: FormOption[]) => void;
29+
30+
}
31+
32+
const CheckboxItem: React.FC<CheckboxItemProps> = (props) => {
33+
const {item, paths, setPaths, setOptions} = props;
34+
if (item.children && item.children.length > 0) {
35+
return (
36+
<CheckList.Item
37+
value={item.value}
38+
disabled={item.disable}
39+
readOnly={true}
40+
>
41+
<div
42+
className={"checkbox-parent"}
43+
onClick={() => {
44+
setPaths([...paths, item]);
45+
setOptions(item.children || []);
46+
}}
47+
>
48+
{item.label}
49+
<RightOutline/>
50+
</div>
51+
</CheckList.Item>
52+
)
53+
}
54+
return (
55+
<CheckList.Item
56+
value={item.value}
57+
disabled={item.disable}
58+
>
59+
{item.label}
60+
</CheckList.Item>
61+
)
62+
}
63+
64+
interface CheckboxListViewProps {
65+
data: FormOption[];
66+
paths: FormOption[];
67+
setPaths: (paths: FormOption[]) => void;
68+
setOptions: (options: FormOption[]) => void;
69+
}
70+
71+
const CheckboxListView: React.FC<CheckboxListViewProps> = (props) => {
72+
const {data} = props;
73+
const pageSize = 20;
74+
75+
const [currentPage, setCurrentPage] = React.useState(1);
76+
77+
const [list, setList] = React.useState<FormOption[]>([]);
78+
79+
const [hasMore, setHasMore] = React.useState(true);
80+
81+
const reload = () => {
82+
const currentPage = 1;
83+
if (data.length > 0) {
84+
const list = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
85+
setList(list);
86+
setHasMore(true);
87+
} else {
88+
setList([]);
89+
setHasMore(false);
90+
}
91+
setCurrentPage(currentPage);
92+
}
93+
94+
const loadMore = () => {
95+
setCurrentPage(prevState => {
96+
const newPage = prevState + 1;
97+
if (newPage * pageSize >= data.length) {
98+
setHasMore(false);
99+
} else {
100+
setHasMore(true);
101+
}
102+
setList(prevState => {
103+
const list = data.slice((newPage - 1) * pageSize, newPage * pageSize);
104+
return [...prevState, ...list]
105+
});
106+
return newPage;
107+
});
108+
}
109+
110+
111+
useEffect(() => {
112+
reload();
113+
}, [props.data]);
114+
115+
return (
116+
<>
117+
<PullToRefresh
118+
onRefresh={async () => {
119+
reload();
120+
}}
121+
>
122+
{list && list.map((item: FormOption, index: number) => {
123+
return <CheckboxItem key={index} item={item} {...props}/>
124+
})}
125+
126+
{hasMore && (
127+
<InfiniteScroll
128+
loadMore={async () => {
129+
loadMore();
130+
}}
131+
hasMore={hasMore}
132+
/>
133+
)}
134+
135+
</PullToRefresh>
136+
</>
137+
)
138+
}
139+
24140
const FormSelect: React.FC<FormItemProps> = (props) => {
25141

26142
const [visible, setVisible] = React.useState(false);
@@ -97,37 +213,6 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
97213
return displaySpan(currentValue);
98214
}
99215

100-
const CheckboxItem: React.FC<FormOption> = (item) => {
101-
if (item.children && item.children.length > 0) {
102-
return (
103-
<CheckList.Item
104-
value={item.value}
105-
disabled={item.disable}
106-
readOnly={true}
107-
>
108-
<div
109-
className={"checkbox-parent"}
110-
onClick={() => {
111-
setPaths([...paths, item]);
112-
setOptions(item.children);
113-
}}
114-
>
115-
{item.label}
116-
<RightOutline/>
117-
</div>
118-
</CheckList.Item>
119-
)
120-
}
121-
return (
122-
<CheckList.Item
123-
value={item.value}
124-
disabled={item.disable}
125-
>
126-
{item.label}
127-
</CheckList.Item>
128-
)
129-
}
130-
131216
const reloadOptions = () => {
132217
if (props.loadOptions) {
133218
props.loadOptions(formAction).then(list => {
@@ -155,7 +240,7 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
155240
const selectOptionFormEditAction = React.useRef<FormAction>(null);
156241

157242

158-
const handlerOptionFormFinish = ()=>{
243+
const handlerOptionFormFinish = () => {
159244
if (props.onSelectOptionFormFinish && selectOptionFormEditAction.current && formAction) {
160245
props.onSelectOptionFormFinish(
161246
formAction,
@@ -209,11 +294,16 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
209294
setVisible(false)
210295
}}
211296
>取消</a>
297+
{settingOptionVisible && (
298+
<>
299+
{props.selectOptionFormEditFooterOkText || "添加选项"}
300+
</>
301+
)}
212302
<a
213303
onClick={() => {
214-
if(props.selectOptionFormEditable){
304+
if (props.selectOptionFormEditable) {
215305
handlerOptionFormFinish();
216-
}else {
306+
} else {
217307
formAction?.setFieldValue(props.name, formToValue(selected));
218308
props.onChange && props.onChange(selected, formAction);
219309
setVisible(false);
@@ -265,8 +355,10 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
265355

266356
{settingOptionVisible && (
267357
<div className={"select-popup-content-custom-form"}>
268-
{props.selectOptionFormEditView && (
269-
<props.selectOptionFormEditView formAction={selectOptionFormEditAction}/>
358+
{formAction && props.selectOptionFormEditView && (
359+
<props.selectOptionFormEditView
360+
currentAction={selectOptionFormEditAction}
361+
formAction={formAction}/>
270362
)}
271363
<div className={"select-popup-content-custom-footer"}>
272364
<Button
@@ -275,12 +367,13 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
275367
onClick={() => {
276368
handlerOptionFormFinish();
277369
}}
278-
>添加选项</Button>
370+
>{props.selectOptionFormEditFooterOkText || "添加"}</Button>
279371
<Button
280372
size={'middle'}
281373
onClick={() => {
282374
setSettingOptionVisible(false);
283-
}}>取消添加</Button>
375+
}}
376+
>{props.selectOptionFormEditFooterOkText || "取消"}</Button>
284377
</div>
285378

286379
</div>
@@ -303,24 +396,25 @@ const FormSelect: React.FC<FormItemProps> = (props) => {
303396
}}
304397
multiple={props.selectMultiple}
305398
>
306-
{options
307-
&& options
308-
.filter(item => {
309-
if (searchText) {
310-
if (item.value.toUpperCase().includes(searchText.toUpperCase())) {
311-
return true;
399+
<CheckboxListView
400+
data={options && options
401+
.filter((item => {
402+
if (searchText) {
403+
if (item.value.toUpperCase().includes(searchText.toUpperCase())) {
404+
return true;
405+
}
406+
if (item.label.toUpperCase().includes(searchText.toUpperCase())) {
407+
return true;
408+
}
409+
return false;
312410
}
313-
if (item.label.toUpperCase().includes(searchText.toUpperCase())) {
314-
return true;
315-
}
316-
return false;
317-
}
318-
return true;
319-
}).map((item,index) => {
320-
return (
321-
<CheckboxItem key={index} {...item}/>
322-
)
323-
})}
411+
return true;
412+
}))
413+
|| []}
414+
setOptions={setOptions}
415+
paths={paths}
416+
setPaths={setPaths}
417+
/>
324418
</CheckList>
325419
)}
326420
</div>

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@ export interface FormField {
2727

2828
// 自定义Select组件选项维护视图
2929
export interface SelectOptionFormEditProps {
30-
formAction?: React.Ref<FormAction>;
30+
// 当前表单操作对象
31+
currentAction?: React.RefObject<FormAction>;
32+
// 父级表单操作对象
33+
formAction?: FormAction;
3134
}
3235

3336
// Form表单字段属性
@@ -68,10 +71,16 @@ export interface FormItemProps {
6871
textAreaMaxLength?: number,
6972
// select组件是否支持多选
7073
selectMultiple?: boolean,
71-
//select组件添加的视图是否开启编辑
74+
// select组件添加的视图是否开启编辑
7275
selectOptionFormEditable?: boolean,
7376
// select组件添加的视图
7477
selectOptionFormEditView?: React.ComponentType<SelectOptionFormEditProps>,
78+
// select组件添加的视图title，默认添加选项
79+
selectOptionFormEditTitle?: string,
80+
// select组件添加的视图footer确定按钮文字，默认添加选项
81+
selectOptionFormEditFooterOkText?: string,
82+
// select组件添加的视图footer取消按钮文字，默认取消添加
83+
selectOptionFormEditFooterCancelText?: string,
7584
// Select组件添加数据事件
7685
onSelectOptionFormFinish?: (formAction: FormAction,
7786
selectOptionFormEditFormAction: FormAction,
@@ -125,6 +134,10 @@ export interface FormItemProps {
125134
// Captcha组件切换验证码事件
126135
onCaptchaChange?: (value: string) => void;
127136

137+
// 验证规则
138+
rules?: any[],
139+
140+
128141
}
129142

130143

0 commit comments

Comments
 (0)