增加资产导入日志

src/model/assetmanage.js

@@ -125,6 +125,10 @@ export function* createDataAssetByMetadataIds(payload) {
   return yield call(service.createDataAssetByMetadataIds, payload);
 }
 
+export function* importLogs(payload) {
+  return yield call(service.importLogs, payload);
+}
+
 export function* getMetadataModelTree() {
   return yield call(service.getMetadataModelTree);
 }

src/service/dataassetmanager.js

@@ -80,6 +80,10 @@ export function createDataAssetByMetadataIds(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/createDataAssetByMetadataIds", payload);
 }
 
+export function importLogs(payload) {
+  return GetJSON("/dataassetmanager/dataAssetApi/listDataAssetImportLogsByPage", payload);
+}
+
 export function addOrUpdateDirectory(payload) {
   return PostJSON("/dataassetmanager/directoryApi/addOrUpdateDirectory", payload);
 }

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -5,7 +5,7 @@ import SmoothScroll from 'smooth-scroll';
 
 import FilterElementModal from './FilterElementModal';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
-import ImportAsset from './ImportAsset';
+import ImportAssetDrawer from './ImportAssetDrawer';
 import AssetEdit from './AssetEdit';
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
@@ -342,9 +342,13 @@ const AssetTable = (props) => {
     }
   }
 
-  const onImportAssetCancel = (visible = false, refresh = false, tip = '') => {
-    setImportAssetVisible(visible);
-    refresh && getDataAssets();
+  const onImportAssetCancel = () => {
+    setImportAssetVisible(false);
+  }
+
+  const onImportAssetSuccess = (tip = '') => {
+    getDataAssets();
+    
     if ((tip||'') !== '') {
       showNotifaction('导入提示', tip, 5);
     }
@@ -488,10 +492,11 @@ const AssetTable = (props) => {
         nodeId={nodeId}
         onCancel={onAssetEditCancel}
       />
-      <ImportAsset 
+      <ImportAssetDrawer 
         visible={importAssetVisible}
         nodeId={nodeId}
         onCancel={onImportAssetCancel}
+        onSuccess={onImportAssetSuccess}
       />
       <AssetMount
         visible={ assetMountVisible }

src/view/Manage/AssetManage/Component/ImportAsset.jsx

-import React from 'react';
-import { Button, Upload, Modal } from 'antd';
-import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
-
-import { dispatch } from '../../../../model';
-import { showMessage } from '../../../../util';
-
-class ImportAsset extends React.Component {
-
-  constructor() {
-    super();
-    this.state = {
-      fileList: [],
-      confirmLoading: false,
-    };
-  }
-
-  downloadTemplate = () => {
-    window.open("/api/dataassetmanager/dataAssetApi/getImportTemplate");
-  }
-
-  reset = () => {
-    this.setState({ fileList: [], confirmLoading: false });
-  }
-
-  onOk = () => {
-    const { nodeId, onCancel } = this.props;
-    const { fileList } = this.state;
-
-    if ((fileList||[]).length === 0) {
-      showMessage('info', '请先选择模版上传');
-      return;
-    }
-
-    this.setState({ confirmLoading: true }, () => {
-      dispatch({
-        type: 'assetmanage.getDirectoryById',
-        payload: { 
-          dirId: nodeId
-        },
-        callback: data => {
-          dispatch({
-            type: 'assetmanage.assetImport',
-            payload: { fileList: fileList, params: { parentPath: data.path||'' } },
-            callback: data => {
-              this.setState({ confirmLoading: false, fileList: [] }, () => {
-                onCancel && onCancel(false, true, data||'');
-              });
-            },
-            error: () => {
-              this.setState({ confirmLoading: false });
-            }
-          });  
-        }
-      })
-    });
-  }
-
-  render() {
-
-    const { onCancel, visible } = this.props;
-    const { fileList, confirmLoading } = this.state;
-
-    const uploadProps = {
-      onRemove: file => {
-        const index = fileList.indexOf(file);
-        const newFileList = fileList.slice();
-        newFileList.splice(index, 1);
-
-        this.setState({ fileList: newFileList });
-      },
-      beforeUpload: file => {
-        
-        this.setState({ fileList: [file] });
-        return false;
-      },
-      accept:".xlsx",
-      fileList: fileList||[]
-    };
-
-    return (
-      <Modal 
-        forceRender
-        visible={visible}
-        title='资产导入'
-        width={520}
-        confirmLoading={confirmLoading}
-        onCancel={() => {
-          this.reset();
-          onCancel && onCancel();
-        }}
-        onOk={this.onOk}
-      >
-        <div>
-          <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
-          模版下载
-          </Button>
-        </div>
-        <div className='mt-3'>
-          <Upload {...uploadProps}>
-            <Button icon={<UploadOutlined />}>
-              选择文件上传
-            </Button>
-          </Upload>
-        </div>
-      </Modal>
-    )
-  }
-}
-
-export default ImportAsset;
\ No newline at end of file

src/view/Manage/AssetManage/Component/ImportAssetDrawer.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Upload, Drawer, Table, Pagination, Divider, Form } from 'antd';
+import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
+
+import { dispatch } from '../../../../model';
+import { showMessage, formatDate } from '../../../../util';
+
+const ImportAssetDrawer = (props) => {
+  const { onCancel, onSuccess, visible, nodeId } = props;
+  const [ fileList, setFileList ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [ loading, setLoading ] = useState(false);
+  const [ logs, setLogs ] = useState([]);
+  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
+  const { pageNum, pageSize } = pagination;
+  const [ total, setTotal ] = useState(0);
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      width: 200,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return formatDate(record.startTime);
+      }
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 200,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return formatDate(record.endTime);
+      }
+    },
+    {
+      title: '耗时',
+      dataIndex: 'costTime',
+      width: 100,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return record.costTime?`${Number(record.costTime/1000)}秒`:'';
+      }
+    },
+    {
+      title: '导入人',
+      dataIndex: 'operator',
+      width: 100,
+      ellipsis: true,
+    },
+    {
+      title: '导入状态',
+      dataIndex: 'state',
+      ellipsis: true,
+    }
+  ]
+
+  useEffect(() => {
+
+    if (visible) {
+      setPagination({ pageNum: 1, pageSize: 20 });
+      getLogs();
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const downloadTemplate = () => {
+    window.open("/api/dataassetmanager/dataAssetApi/getImportTemplate");
+  }
+
+  const getLogs = (p = 1, s = 20) => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.importLogs',
+      payload: {
+        page: p,
+        pageSize: s
+      },
+      callback: data => {
+        setLoading(false);
+        setTotal(data.totalElements);
+        setLogs(data.content||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const uploadProps = {
+    onRemove: file => {
+
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+
+      setFileList([file]);
+      return false;
+    },
+    fileList: fileList || [],
+    accept:".xlsx",
+  };
+
+  const handleOk = () => {
+
+    if ((fileList||[]).length === 0) {
+      showMessage('info', '请先选择模版上传');
+      return;
+    }
+    
+    setConfirmLoading(true);
+    dispatch({
+      type: 'assetmanage.getDirectoryById',
+      payload: { 
+        dirId: nodeId
+      },
+      callback: data => {
+        console.log('path', data.path);
+        dispatch({
+          type: 'assetmanage.assetImport',
+          payload: { fileList: fileList, params: { parentPath: data?.path||'' } },
+          callback: data => {
+            setConfirmLoading(false);
+            setFileList([]);
+            getLogs(pageNum, pageSize);   
+            onSuccess && onSuccess(data||''); 
+          },
+          error: () => {
+            setConfirmLoading(false);
+          }
+        });  
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    });
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    setFileList([]);
+  }
+
+  return (
+    <Drawer 
+      forceRender
+      visible={ visible }
+      title='资产导入'
+      width={900}
+      placement="right"
+      closable={ true }
+      onClose={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+    >
+      <div className='mt-3'>
+        <Form layout='inline'>
+          <Form.Item label='Word上传:'>
+            <Button className='mr-2' icon={<DownloadOutlined />} onClick={ downloadTemplate }>
+            模版下载
+            </Button>
+            <Upload style={{ display: 'inline' }} {...uploadProps }>
+              <Button icon={
+                <UploadOutlined />}>
+                选择文件上传
+              </Button>
+            </Upload>
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' onClick={handleOk} loading={confirmLoading}>确定导入</Button>
+          </Form.Item>
+        </Form>
+      </div>
+      <Divider orientation="left">导入日志</Divider>
+      <Table
+        className='mt-3'
+        columns={columns||[]} 
+        rowKey={'id'}
+        dataSource={logs||[]}
+        pagination={false} 
+        loading={loading}
+        expandable={{
+          expandedRowRender: record => <p style={{ margin: 0 }}>{record.message||''}</p>
+        }}
+        sticky
+      />
+      <Pagination
+        className="text-center mt-3"
+        showSizeChanger
+        showQuickJumper
+        onChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: _pageNum||1, pageSize: _pageSize || 20 });
+          getLogs(_pageNum||1, _pageSize||20);
+        }}
+        onShowSizeChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize || 20 });
+          getLogs(_pageNum||1, _pageSize||20);
+        }}
+        current={pageNum}
+        pageSize={pageSize}
+        defaultCurrent={1}
+        total={total}
+        pageSizeOptions={[10,20]}
+        showTotal={total => `共 ${total} 条`}
+      />
+    </Drawer>
+  )
+}
+
+export default ImportAssetDrawer;
\ No newline at end of file