InvoicingDrawerForm.tsx
3.04 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import {
DrawerForm,
ProForm,
ProFormDateRangePicker,
ProFormSelect,
ProFormText,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
export default ({ subOrders, totalPayment, onClose }) => {
const [form] = Form.useForm<{ name: string; company: string }>();
return (
<DrawerForm<{
name: string;
company: string;
}>
title="新建表单"
resize={{
onResize() {
console.log('resize!');
},
maxWidth: window.innerWidth * 0.8,
minWidth: 300,
}}
form={form}
/*trigger={
<Button type="primary">
<PlusOutlined />
新建表单
</Button>
}*/
open={true}
autoFocusFirstInput
drawerProps={{
destroyOnClose: true,
}}
submitTimeout={2000}
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
console.log(subOrders);
console.log(totalPayment);
message.success('提交成功');
onClose();
// 不返回不会关闭弹框
return true;
}}
>
<ProForm.Group>
<ProFormText
name="name"
width="md"
label="签约客户名称"
tooltip="最长为 24 位"
placeholder="请输入名称"
/>
<ProFormText
rules={[
{
required: true,
},
]}
width="md"
name="company"
label="我方公司名称"
placeholder="请输入名称"
/>
</ProForm.Group>
<ProForm.Group>
<ProFormText
width="md"
name="contract"
label="合同名称"
placeholder="请输入名称"
/>
<ProFormDateRangePicker name="contractTime" label="合同生效时间" />
</ProForm.Group>
<ProForm.Group>
<ProFormSelect
options={[
{
value: 'chapter',
label: '盖章后生效',
},
]}
width="xs"
name="useMode"
label="合同约定生效方式"
/>
<ProFormSelect
width="xs"
options={[
{
value: 'time',
label: '履行完终止',
},
]}
formItemProps={{
style: {
margin: 0,
},
}}
name="unusedMode"
label="合同约定失效效方式"
/>
</ProForm.Group>
<ProFormText width="sm" name="id" label="主合同编号" />
<ProFormText
name="project"
disabled
label="项目名称"
initialValue="xxxx项目"
/>
<ProFormText
width="xs"
name="mangerName"
disabled
label="商务经理"
initialValue="启途"
/>
</DrawerForm>
);
};