增加批量导入资产功能

web/src/components/asset/Asset.js

@@ -12,6 +12,7 @@ import {
     Layout,
     Menu,
     Modal,
+    notification,
     PageHeader,
     Row,
     Select,
@@ -26,19 +27,24 @@ import qs from "qs";
 import AssetModal from "./AssetModal";
 import request from "../../common/request";
 import {message} from "antd/es";
-import {isEmpty, itemRender} from "../../utils/utils";
+import {getHeaders, isEmpty, itemRender} from "../../utils/utils";
 import dayjs from 'dayjs';
 import {
     DeleteOutlined,
     DownOutlined,
     ExclamationCircleOutlined,
+    ImportOutlined,
     PlusOutlined,
     SyncOutlined,
-    UndoOutlined
+    UndoOutlined,
+    UploadOutlined
 } from '@ant-design/icons';
 import {PROTOCOL_COLORS} from "../../common/constants";
 import Logout from "../user/Logout";
 import {hasPermission, isAdmin} from "../../service/permission";
+import Upload from "antd/es/upload";
+import axios from "axios";
+import {server} from "../../common/env";
 
 
 const confirm = Modal.confirm;
@@ -88,6 +94,9 @@ class Asset extends Component {
         users: [],
         selected: {},
         selectedSharers: [],
+        importModalVisible: false,
+        fileList: [],
+        uploading: false,
     };
 
     async componentDidMount() {
@@ -726,6 +735,20 @@ class Asset extends Component {
 
                                     <Divider type="vertical"/>
 
+                                    {isAdmin() ?
+                                        <Tooltip title="批量导入">
+                                            <Button type="dashed" icon={<ImportOutlined/>}
+                                                    onClick={() => {
+                                                        this.setState({
+                                                            importModalVisible: true
+                                                        })
+                                                    }}>
+
+                                            </Button>
+                                        </Tooltip> : undefined
+                                    }
+
+
                                     <Tooltip title="新增">
                                         <Button type="dashed" icon={<PlusOutlined/>}
                                                 onClick={() => this.showModal('新增资产', {})}>
@@ -803,6 +826,85 @@ class Asset extends Component {
                             : null
                     }
 
+                    {
+                        this.state.importModalVisible ?
+                            <Modal title="资产导入" visible={true}
+                                   onOk={() => {
+                                       const formData = new FormData();
+                                       formData.append("file", this.state.fileList[0]);
+
+                                       let headers = getHeaders();
+                                       headers['Content-Type'] = 'multipart/form-data';
+
+                                       axios
+                                           .post(server + "/assets/import", formData, {
+                                               headers: headers
+                                           })
+                                           .then((resp) => {
+                                               console.log("上传成功", resp);
+                                               this.setState({
+                                                   importModalVisible: false
+                                               })
+                                               let result = resp.data;
+                                               if (result['code'] === 1) {
+                                                   let data = result['data'];
+                                                   let successCount = data['successCount'];
+                                                   let errorCount = data['errorCount'];
+                                                   if (errorCount === 0) {
+                                                       notification['success']({
+                                                           message: '导入资产成功',
+                                                           description: '共导入成功' + successCount + '条资产。',
+                                                       });
+                                                   } else {
+                                                       notification['info']({
+                                                           message: '导入资产完成',
+                                                           description: `共导入成功${successCount}条资产，失败${errorCount}条资产。`,
+                                                       });
+                                                   }
+                                               } else {
+                                                   notification['error']({
+                                                       message: '导入资产失败',
+                                                       description: result['message'],
+                                                   });
+                                               }
+                                               this.loadTableData();
+                                           });
+                                   }}
+                                   onCancel={() => {
+                                       this.setState({
+                                           importModalVisible: false
+                                       })
+                                   }}
+                                   okButtonProps={{
+                                       disabled: this.state.fileList.length === 0
+                                   }}
+                            >
+                                <Upload
+                                    maxCount={1}
+                                    onRemove={file => {
+                                        this.setState(state => {
+                                            const index = state.fileList.indexOf(file);
+                                            const newFileList = state.fileList.slice();
+                                            newFileList.splice(index, 1);
+                                            return {
+                                                fileList: newFileList,
+                                            };
+                                        });
+                                    }}
+                                    beforeUpload={(file) => {
+                                        this.setState(state => ({
+                                            fileList: [file],
+                                        }));
+                                        return false;
+                                    }}
+                                    fileList={this.state.fileList}
+                                >
+                                    <Button icon={<UploadOutlined/>}>选择csv文件</Button>
+                                </Upload>
+                            </Modal>
+                            : undefined
+                    }
+
                     <Modal title={<Text>更换资源「<strong style={{color: '#1890ff'}}>{this.state.selected['name']}</strong>」的所有者
                     </Text>}
                            visible={this.state.changeOwnerModalVisible}