StorageFlowModal.tsx
3.33 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
import React, { useEffect, useState } from 'react';
import { Modal, Button, Select, DatePicker, message } from 'antd';
import { getList } from './api';
import useInitial from "@/hooks/useInitail";
import { useStore } from '../index';
import moment from 'moment';
interface Props {
visible: boolean,
onCancel: () => any,
}
const Option = Select.Option;
export default function Upload(props: Props) {
const { storages: storageList } = useStore();
const { visible, onCancel } = props;
const [storageid, setStorageid] = useState<number>();
const [delay, setDelay] = useState(true);
const { data, setParams, setData } = useInitial(getList, 0, {}, delay);
const [date, setDate] = useState<{ startTime?: number, endTime?:number }>();
useEffect(() => {
if (!visible) {
setStorageid(undefined);
setDate({startTime: undefined, endTime: undefined});
setData(0);
}
}, [visible]);
return (
<Modal
maskClosable
title="库房流水批量导出"
visible={visible}
onCancel={onCancel}
width={800}
footer={[
<Button onClick={onCancel}>取消</Button>,
]}
>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
<span style={{ paddingLeft: 30 }}>选择库房：</span>
<Select
placeholder="请选择库房"
value={storageid}
style={{ width: 250 }}
onChange={setStorageid}
showSearch
optionFilterProp="children"
>
{storageList.map(it => (
<Option key={it.id} value={it.id || -1}>{it.storageName || ''}</Option>
))}
</Select>
</div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
<span style={{ paddingLeft: 30 }}>开始时间：</span>
<DatePicker
value={date?.startTime && moment(date.startTime) || undefined}
style={{ width: 250 }}
onChange={(d, ds) => {
setDate({ startTime: moment(ds).startOf('day').valueOf(), endTime: undefined });
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
<span style={{ paddingLeft: 30 }}>结束时间：</span>
<DatePicker
value={date?.endTime && moment(date.endTime) || undefined}
style={{ width: 250 }}
onChange={(d, ds) => {
if (!storageid || !date?.startTime) {
message.error("请先选择库房或开始时间");
return;
}
setDate({ ...date, endTime: moment(ds).startOf('day').valueOf() });
setDelay(false);
setParams({
storageId: storageid,
}, true);
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
{!!data && (
<a
href={`/api/pms/erp/storage/out/export/stock/record?storageId=${storageid}&startTime=${date?.startTime}&endTime=${date?.endTime}`}
style={{ marginRight: 20, marginBottom: 10 }}
target="_blank"
rel="noopener noreferrer"
>
{`${storageList.find(it => it.id == storageid)?.storageName}流水记录.xlsx`}
</a>
)}
</div>
</Modal>
);
}