index.tsx
4.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
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
import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, InputNumber, Button, message } from 'antd';
import useInitial from '@/hooks/useInitail';
import { getDetail, saveApi, Item} from './api';
import ConfirmBnt from '../components/ConfirmBnt';
import { DeleteOutlined } from '@ant-design/icons';
const Index = () => {
const [disable, setDisable] = useState(false);
const { data, setData, loading, setLoading } = useInitial<Item[], object>(getDetail, [{ startDays: 1, endDays: null, amount: null }, { startDays: null, endDays: null, amount: null }], {});
const handleAdd = () => {
setData([...data, { startDays: null, endDays: null, amount: null }]);
};
const handleInputChange = (index: number, p: any) => {
let arr = data;
if (p.endDays) {
arr[index + 1].startDays = p.endDays + 1;
}
setData(arr.map((it, i) => {
if (index == i) {
return { ...it, ...p};
} else {
return it;
}
}
));
};
const handleDel = (event: any, index: number) => {
let arr = data;
arr.splice(index, 1);
arr[arr.length -1].startDays = arr[arr.length-2].endDays+1;
setData(arr);
};
const svae = () => {
saveApi({list: data}).then(() => {
message.success('保存成功');
setLoading(true);
setDisable(false);
}).catch(e => message.error(e.message));
};
return (
<PageHeaderWrapper title="运费目标设置">
<Card loading={loading}>
{!!data?.length && data.map((it, index) => (
index < data.length-1 ? (
<div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
<span style={{ marginRight: 10 }}>{index + 1}、</span>
<>
缺件起始天数
<InputNumber
disabled
min={index > 0 ? data[index - 1].endDays : 1}
value={index > 0 ? data[index - 1].endDays+1 : 1}
style={{ width: 100, marginLeft: 10, marginRight: 20 }}
/>
</>
<>
缺件结束天数
<InputNumber
disabled={!disable}
min={0}
value={it.endDays}
onChange={value => {
handleInputChange(index, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: value });
}}
style={{ width: 100, marginLeft: 10, marginRight: 20 }}
/>
</>
<>
运费统计增加
<InputNumber
disabled={!disable}
addonAfter="元"
value={it.amount}
min={0}
onChange={value => handleInputChange(index, { amount: value })}
style={{ width: 100, marginLeft: 10, marginRight: 20 }}
/>
</>
{(index == data.length - 2 && disable && index != 0) ? <Button onClick={(event: any) => handleDel(event, index)} shape="circle" icon={<DeleteOutlined />} /> : ''}
</div>
) :
(
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
<span style={{ marginRight: 10 }}>{data.length}、</span>
<div style={{ marginRight: 20 }}>
<InputNumber disabled min={0} value={data[data.length - 2].endDays + 1} style={{ width: 100, marginRight: 10 }} />
天及以上
</div>
<>
运费统计增加
<InputNumber
disabled={!disable}
addonAfter="元"
value={it.amount}
min={0}
onChange={value => handleInputChange(data.length - 1, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: null, amount: value })}
style={{ width: 100, marginLeft: 10, marginRight: 20 }}
/>
</>
</div>
)
))}
<Button type="default" disabled={!disable} onClick={() => handleAdd()}>添加梯度</Button>
<ConfirmBnt
disable={disable}
onOk={() => svae()}
onCancel={() => { setDisable(false); setLoading(true); }}
onEdit={() => {
setDisable(true);
setData(data);
}}
/>
</Card>
</PageHeaderWrapper>
);
};
export default Index;