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
|
import React, { useState } from 'react';
import { Form, FormikProps } from 'formik';
import _ from 'lodash';
import Input from '../components/Input';
import Button from '../components/Button';
import Select from '../components/Select';
import Paper from '../components/Paper';
import useOptions from '../hooks/useOptions';
const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
const [recordsNumber, setRecordsNumber] = useState<number>(values.records.length);
const handleAddRecord = () => setRecordsNumber(v => v + 1);
const productInitFields = _.times(recordsNumber).map(index => `records.${index}.productId`);
const contractorOptions = useOptions('contractors', ['contractorId'], values, setFieldValue);
const productOptions = useOptions('products', productInitFields, values, setFieldValue);
return (
<Form id="form">
<Select
name="contractorId"
label="Контрагент"
options={contractorOptions}
/>
<Select
name="operation"
label="Операция"
options={[
{ key: 'in', label: 'Приход' },
{ key: 'out', label: 'Расход' },
]}
/>
{_.times(recordsNumber).map(index => (
<Paper variant="outlined">
<Select
name={`records.${index}.productId`}
label="Товар"
options={productOptions}
/>
<Input
name={`records.${index}.price`}
type="number"
label="Цена, $"
/>
<Input
name={`records.${index}.quantity`}
type="number"
label="Количество"
/>
</Paper>
))}
<Button onClick={handleAddRecord} variant="outlined" size="sm">Добавить товар</Button>
</Form>
);
};
export default WaybillForm;
|
