index.tsx
3.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { useEffect, useState } from 'react';
import { Form, Input, InputNumber, Select, Tooltip } from 'antd-v4';
import * as commonUtils from "@/utils/utils";
import type { SelectProps } from 'antd-v4';
import type { PropsType, FormItemTypeKey } from './type';
const FormItemTypeEvent = (props: PropsType) => {
const { showConfig } = props;
const { sName = "", bNotEmpty } = showConfig;
const addState: any = {};
addState.formItemProps = (): any => {
return {
style: { margin: 0 },
name: sName,
rules: [{ required: bNotEmpty, message: <Tooltip title="此字段必填！"><div>必填</div></Tooltip> }]
}
}
return {
...props,
...addState,
}
}
const FormItemType: React.FC<PropsType> = (baseProps): React.ReactElement => {
const props = FormItemTypeEvent(baseProps);
const { showConfig } = props;
const { sName = "", bNotEmpty } = showConfig;
const firstDataIndex = sName.charAt(0) as FormItemTypeKey;
const FormItemJson: Record<FormItemTypeKey, JSX.Element> = {
"s": <FormItemInput {...props} />,
"i": <FormItemInputNumber {...props} />,
"d": <FormItemInputNumber {...props} />,
"t": <FormItemDatePicker {...props} />,
"b": <FormItemInputCheckbox {...props} />,
}
return FormItemJson[firstDataIndex];
}
// 文本框
const FormItemInput: React.FC<PropsType> = (props): React.ReactElement => {
const { showConfig } = props;
const { sDropDownType } = showConfig;
if (["sql", "const"].includes(sDropDownType)) {
return <FormItemInputSelect {...props} />
}
return <Form.Item
{...props.formItemProps()}
>
<Input ref={props.ref} onPressEnter={props.onSave} onBlur={props.onSave} />
</Form.Item>
}
// 下拉框
const FormItemInputSelect: React.FC<PropsType> = (props): React.ReactElement => {
const { name, showConfig, record } = props;
const { sName } = showConfig;
const [options, setOptions] = useState<any[]>([]);
const [fieldNames, setFieldNames] = useState<any>(null);
// 获取下拉数据
useEffect(() => {
const { dropDownData, showDropDown, sAssignField } = showConfig;
const data = dropDownData || (typeof showDropDown === 'object') ? showDropDown : commonUtils.objectToArr(commonUtils.convertStrToObj(showDropDown));
if (!data?.length) return;
setOptions(data);
const data0 = data[0];
setFieldNames({
label: Object.keys(data0)[0],
value: data0.sSlaveId ? 'sSlaveId' : 'sId',
})
}, [])
const selectProps: SelectProps = {
fieldNames,
options,
onChange: (value: any) => {
props.onChange(name, sName, { [sName]: value }, record.sId, options)
}
}
return <Form.Item
{...props.formItemProps()}
>
<Select {...selectProps} />
</Form.Item>
}
// 数字框
const FormItemInputNumber: React.FC<PropsType> = (props): React.ReactElement => {
return <Form.Item
{...props.formItemProps()}
>
<InputNumber ref={props.ref} onPressEnter={props.onSave} onBlur={props.onSave} />
</Form.Item>
}
// 日期框
const FormItemDatePicker: React.FC<PropsType> = (props): React.ReactElement => {
return <FormItemInput {...props} />
}
// 复选框
const FormItemInputCheckbox: React.FC<PropsType> = (props): React.ReactElement => {
return <FormItemInput {...props} />
}
export default FormItemType;