ChoosePartModal.tsx
2.54 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
import React, { useState } from 'react';
import { Modal, Button, InputNumber, Form } from 'antd';
import PartModal from './PartModal';
const {Item} = Form;
interface Props {
onCancel: () => any,
visible: boolean,
onOk: (_: any) => any,
partParams?:{stId?:number, spId?: number}
}
export default function Index({ onCancel, visible, onOk, partParams }: Props) {
const [form] = Form.useForm();
const [isclear, setIsclear] = useState<boolean>(false);
function handSave() {
form.validateFields().then(fields => {
const part = {...fields.part, partCnt: fields.partCnt, price: fields.price};
setIsclear(true);
form.setFieldsValue({partCnt: "", price: ""});
onOk && onOk(part);
onCancel && onCancel();
});
}
const getPart = (p:{partId?: number, partName?: string, partCode?: string, price?:number}) => {
form.setFieldsValue({price: p.price});
};
return (
<Modal
width={800}
style={{ height: "100%" }}
visible={visible}
onCancel={onCancel}
maskClosable={false}
title="选择配件"
footer={[
<Button key="cancel" onClick={onCancel}>取消</Button>,
<Button
key="submit"
onClick={handSave}
type="primary"
htmlType="submit"
>
确认
</Button>
]}
>
<Form
form={form}
labelCol={{span: 5}}
wrapperCol={{span: 19}}
>
<Item label="配件名称" name="part" required rules={[{ required: true, message: '请选择配件' }]}>
<PartModal isclear={isclear} setIsclear={setIsclear} partParams={partParams} onChange={(p: { partId?: number | undefined; partName?: string | undefined; partCode?: string | undefined; price?: number | undefined; }) => getPart(p)} />
</Item>
<Item
label="配件单价"
name="price"
rules={[
{ required: true, message: '请输入配件价格' },
({ getFieldValue }) => ({
validator(_, value) {
if (value > 0) {
return Promise.resolve();
}
return Promise.reject(new Error('配件价格必须大于0'));
},
}),
]}
>
<InputNumber style={{ width: 250 }} />
</Item>
<Item label="配件数量" name="partCnt" required rules={[{ required: true, message: '请输入配件数量' }]}>
<InputNumber min={1} max={90000} placeholder="请输入配件数量" style={{ width: 250 }} />
</Item>
</Form>
</Modal>
);
}