Commit 2ef8422acbf0848d59d765497e50a9677855fe30
1 parent
f9572dfa
库位导入及一些文件下载模板
Showing
5 changed files
with
131 additions
and
7 deletions
src/pages/pms/storage/StorageManage/components/UploadLoaction.tsx
0 → 100644
1 | +import React, { useState, useEffect } from 'react'; | |
2 | +import { InboxOutlined } from '@ant-design/icons'; | |
3 | +import { Button, Modal, Upload, message, Select } from 'antd'; | |
4 | + | |
5 | +const Dragger = Upload.Dragger; | |
6 | +const Option = Select.Option; | |
7 | +interface Props { | |
8 | + storages: PartStorageSpace.PageVO[], | |
9 | + onCancel: () => any, | |
10 | + visible: boolean | |
11 | +} | |
12 | + | |
13 | +export default function UploadModal(props: Props) { | |
14 | + const { onCancel, visible, storages } = props; | |
15 | + const [fileList, setFileList] = useState<any[]>([]); | |
16 | + const [uploadResult, setUploadResult] = useState<any>(); | |
17 | + const [storageid, setStorageid] = useState<number>(); | |
18 | + | |
19 | + useEffect(() => { | |
20 | + if (visible) { | |
21 | + setFileList([]); | |
22 | + setUploadResult(undefined); | |
23 | + setStorageid(undefined); | |
24 | + } | |
25 | + }, [visible]); | |
26 | + | |
27 | + function beforeUpload(file: any) { | |
28 | + if (!storageid) { | |
29 | + message.error('请先选择库房'); | |
30 | + return false; | |
31 | + } | |
32 | + const isLt2M = file.size / 1024 / 1024 < 20; | |
33 | + if (!isLt2M) { | |
34 | + message.error('文件不能超过20MB!'); | |
35 | + } | |
36 | + return isLt2M; | |
37 | + } | |
38 | + | |
39 | + function handleChange(info: any) { | |
40 | + if (!storageid) { | |
41 | + setFileList([]); | |
42 | + return; | |
43 | + } | |
44 | + const { file: { status, response }, fileList } = info; | |
45 | + if (status !== 'uploading' && response) { | |
46 | + const { success, result, data } = response; | |
47 | + if (status === 'done' && success) { | |
48 | + message.success(`${info.file.name} 上传成功`); | |
49 | + // 调用上传接口 | |
50 | + setUploadResult(data); | |
51 | + } else if (response && !success) { | |
52 | + message.error(`${info.file.name} 上传失败: ${result}`); | |
53 | + } | |
54 | + } | |
55 | + setFileList(fileList.splice(-1)); | |
56 | + } | |
57 | + const uploadProps = { | |
58 | + accept: 'application/vnd.ms-excel application/x-excel .xlsx', | |
59 | + name: 'file', | |
60 | + fileList, | |
61 | + data: { storageId: storageid }, | |
62 | + multiple: false, | |
63 | + action: `/api/pms/erp/storage/location/import/no`, | |
64 | + onChange: (file: any) => handleChange(file), | |
65 | + beforeUpload: (info: any) => beforeUpload(info) | |
66 | + }; | |
67 | + return ( | |
68 | + <Modal | |
69 | + title={uploadResult ? '配件库位导入结果' : '配件库位导入'} | |
70 | + visible={visible} | |
71 | + width={420} | |
72 | + keyboard={false} | |
73 | + maskClosable={false} | |
74 | + onCancel={() => onCancel()} | |
75 | + footer={[<Button key="close" type="default" onClick={() => onCancel()}>关闭</Button>]} | |
76 | + > | |
77 | + {!uploadResult ? ( | |
78 | + <> | |
79 | + <span>库房:</span> | |
80 | + <Select | |
81 | + value={storageid} | |
82 | + style={{ width: 328 }} | |
83 | + placeholder="请先选择库房" | |
84 | + onChange={setStorageid} | |
85 | + showSearch | |
86 | + optionFilterProp="children" | |
87 | + > | |
88 | + {storages.map(it => (<Option key={it.id} value={it.id}>{it.storageName}</Option>))} | |
89 | + </Select> | |
90 | + <Dragger {...uploadProps} style={{ marginTop: 20, marginBottom: 20 }}> | |
91 | + <p className="ant-upload-drag-icon"> | |
92 | + <InboxOutlined /> | |
93 | + </p> | |
94 | + <p className="ant-upload-text">将文件拖到此处上传</p> | |
95 | + </Dragger> | |
96 | + <a href="/api/pms/erp/part/template/storage/location/import">下载配件库位导入模版</a> | |
97 | + </> | |
98 | + ) : ( | |
99 | + <div> | |
100 | + <p>数据总条数:{uploadResult.totalCount}条</p> | |
101 | + <p>成功条数:{uploadResult.successCount}条</p> | |
102 | + <p>失败条数:{uploadResult.failedCount}条</p> | |
103 | + {uploadResult.filePath ? (<a href={uploadResult.filePath} target="_blank" rel="noopener noreferrer">下载错误文件</a>) : null} | |
104 | + </div> | |
105 | + )} | |
106 | + </Modal> | |
107 | + ); | |
108 | +} | ... | ... |
src/pages/pms/storage/StorageManage/components/UploadModal.tsx
... | ... | @@ -87,12 +87,13 @@ export default function UploadModal(props: Props) { |
87 | 87 | > |
88 | 88 | {storages.map(it => (<Option key={it.id} value={it.id}>{it.storageName}</Option>))} |
89 | 89 | </Select> |
90 | - <Dragger {...uploadProps} style={{marginTop: 20}}> | |
90 | + <Dragger {...uploadProps} style={{marginTop: 20, marginBottom: 20}}> | |
91 | 91 | <p className="ant-upload-drag-icon"> |
92 | 92 | <InboxOutlined /> |
93 | 93 | </p> |
94 | 94 | <p className="ant-upload-text">将文件拖到此处上传</p> |
95 | 95 | </Dragger> |
96 | + <a href="/api/pms/erp/part/template/storage/location/export">下载配件库位导出模版</a> | |
96 | 97 | </> |
97 | 98 | ) : ( |
98 | 99 | <div> | ... | ... |
src/pages/pms/storage/StorageManage/index.tsx
1 | 1 | import React, { useState } from 'react'; |
2 | -import { PlusOutlined } from '@ant-design/icons'; | |
2 | +import { PlusOutlined, UploadOutlined, DownloadOutlined } from '@ant-design/icons'; | |
3 | 3 | import { Card, Button } from 'antd'; |
4 | 4 | import { PageHeaderWrapper } from '@ant-design/pro-layout'; |
5 | 5 | import * as api from './api'; |
... | ... | @@ -8,6 +8,7 @@ import List from './components/List'; |
8 | 8 | import useInitial from "@/hooks/useInitail"; |
9 | 9 | import CreateModal from './components/CreateModal'; |
10 | 10 | import UploadModal from './components/UploadModal'; |
11 | +import UploadLoction from './components/UploadLoaction'; | |
11 | 12 | |
12 | 13 | const indexS = require('./style.less'); |
13 | 14 | |
... | ... | @@ -15,6 +16,7 @@ export default function StoreHouse() { |
15 | 16 | const { list, loading, setLoading, paginationConfig } = usePagination<PartStorageSpace.PageVO>(api.getStoragePage, { current: 1, pageSize: 10 }, { pageName: '/pms/storage/storageManage', notList: true }); |
16 | 17 | const { data: shops } = useInitial<PartStorageSpace.optionItem[], object>(api.getShopList, [], {}); |
17 | 18 | const [visibleUpload, setVisibleUpload] = useState(false); |
19 | + const [visibleLoction, setVisibleLoction] = useState(false); | |
18 | 20 | const [current, setCurrent] = useState<{ visible: boolean, row: PartStorageSpace.PageVO }>({ visible: false, row: {} }); |
19 | 21 | |
20 | 22 | function modalSwitch(row: PartStorageSpace.PageVO = {}) { |
... | ... | @@ -30,8 +32,11 @@ export default function StoreHouse() { |
30 | 32 | className={indexS.page} |
31 | 33 | extra={ |
32 | 34 | <> |
33 | - <Button icon={<PlusOutlined />} type="primary" onClick={() => setVisibleUpload(true)}> | |
34 | - 导入 | |
35 | + <Button icon={<UploadOutlined />} type="primary" onClick={() => setVisibleLoction(true)}> | |
36 | + 导入配件库位 | |
37 | + </Button> | |
38 | + <Button icon={<DownloadOutlined />} style={{ marginLeft: 20 }} type="primary" onClick={() => setVisibleUpload(true)}> | |
39 | + 导出配件库位 | |
35 | 40 | </Button> |
36 | 41 | <Button icon={<PlusOutlined />} style={{marginLeft: 20}} type="primary" onClick={() => modalSwitch()}> |
37 | 42 | 新增 |
... | ... | @@ -59,6 +64,11 @@ export default function StoreHouse() { |
59 | 64 | onCancel={() => setVisibleUpload(false)} |
60 | 65 | visible={visibleUpload} |
61 | 66 | /> |
67 | + <UploadLoction | |
68 | + storages={list} | |
69 | + onCancel={() => setVisibleLoction(false)} | |
70 | + visible={visibleLoction} | |
71 | + /> | |
62 | 72 | </Card> |
63 | 73 | </PageHeaderWrapper> |
64 | 74 | ); | ... | ... |
src/pages/pms/storage/partShop/components/UploadExcel.tsx
... | ... | @@ -80,7 +80,7 @@ export default function UploadExcel(props: Props) { |
80 | 80 | <Modal |
81 | 81 | visible={importVisible} |
82 | 82 | maskClosable={false} |
83 | - title={uploadResult ? '导入结果' : stock ? '调运库存导入': '文件导入'} | |
83 | + title={uploadResult ? '导入结果' : stock ? '调拨库存导入': '文件导入'} | |
84 | 84 | onCancel={cancel} |
85 | 85 | footer={[ |
86 | 86 | <Button |
... | ... | @@ -118,12 +118,17 @@ export default function UploadExcel(props: Props) { |
118 | 118 | <span>导入原因:</span> |
119 | 119 | <Input value={fixRemark} onChange={(e) => setFixRemark(e.target.value)} style={{width: 200}} /> |
120 | 120 | </div> |
121 | - <Dragger {...uploadProps}> | |
121 | + <Dragger {...uploadProps} style={{marginBottom: 20}}> | |
122 | 122 | <p className="ant-upload-drag-icon"> |
123 | 123 | <InboxOutlined /> |
124 | 124 | </p> |
125 | 125 | <p className="ant-upload-text">将文件拖到此处上传</p> |
126 | 126 | </Dragger> |
127 | + <a | |
128 | + href={stock ? "/api/pms/erp/part/template/stock/transfer/import" : "/api/pms/erp/part/template/stock/import"} | |
129 | + > | |
130 | + 配件库存{stock ? '调拨' : ''}导入模板 | |
131 | + </a> | |
127 | 132 | </div> |
128 | 133 | ) : ( |
129 | 134 | <div> | ... | ... |