主数据导入

src/model/msd.js

@@ -67,4 +67,16 @@ export function* updateData(payload) {
 
 export function* deleteDatas(payload) {
   return yield call(service.deleteDatas, payload);
+}
+
+export function* importData(payload) {
+  return yield call(service.importData, payload);
+}
+
+export function* importLog(payload) {
+  return yield call(service.importLog, payload);
+}
+
+export function* importLogs(payload) {
+  return yield call(service.importLogs, payload);
 }
\ No newline at end of file

src/service/msd.js

-import { PostJSON, GetJSON, Post } from "../util/axios"
+import { PostJSON, GetJSON, Post, PostFile } from "../util/axios"
 
 export function getTreeNodes() {
   return GetJSON("/metadatarepo/rest/msdDefinition/getTreeNode");
@@ -66,4 +66,16 @@ export function updateData(payload) {
 
 export function deleteDatas(payload) {
   return PostJSON("/metadatarepo/rest/msdMgr/deleteData", payload);
+}
+
+export function importData(payload) {
+  return PostFile("/metadatarepo/rest/msdMgr/importData", payload);
+}
+
+export function importLog(payload) {
+  return GetJSON("/metadatarepo/rest/msdMgr/getImportLog", payload);
+}
+
+export function importLogs(payload) {
+  return GetJSON("/metadatarepo/rest/msdMgr/listLog", payload);
 }
\ No newline at end of file

src/view/Manage/DataMaster/Manage/Component/ImportDataDrawer.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Upload, Drawer, Table, Pagination, Form, Tooltip, Typography, Space, Spin } from 'antd';
+import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
+
+import ResizeableTable from '../../../ResizeableTable';
+import { dispatch, dispatchLatest } from '../../../../../model';
+import { showMessage, formatDate } from '../../../../../util';
+
+const { Text } = Typography;
+
+const ExpandedRow = (props) => {
+  const {data} = props;
+
+  const [loading, setLoading] = useState(false);
+  const [log, setLog] = useState({});
+
+  useEffect(() => {
+    getLog();
+  }, [data])
+
+  const getLog = () => {
+    setLoading(true);
+    dispatch({
+      type: 'msd.importLog',
+      payload: {
+        logId: data?.id
+      },
+      callback: data => {
+        setLoading(false);
+        setLog(data||{});
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  return <Spin spinning={loading}>
+    <p style={{ margin: 0 }}>{log?.message||''}</p>
+  </Spin>
+}
+
+const ImportDataDrawer = (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 cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      width: 170,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return formatDate(record.startTime);
+      }
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 170,
+      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,
+      render: (text, record, __) => {
+        return text.split(':')[0]; 
+      }
+    },
+    {
+      title: '导入状态',
+      dataIndex: 'state',
+      width: 100,
+      ellipsis: true,
+    }
+  ]
+
+  const [ columns, setColumns ] = useState(cols);
+
+  useEffect(() => {
+    if (visible) {
+      setPagination({ pageNum: 1, pageSize: 20 });
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  useEffect(() => {
+    if (visible) {
+      getLogs();
+    }
+  }, [pagination])
+
+  const getLogs = () => {
+    setLoading(true);
+    dispatch({
+      type: 'msd.importLogs',
+      payload: {
+        page: pageNum,
+        size: pageSize
+      },
+      callback: data => {
+        setLoading(false);
+        setTotal(data.totalElements);
+        setLogs(data.content||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onRefreshClick = () => {
+    getLogs();
+  }
+
+  const changeCurrent = (page,size) => {
+    setPagination({ pageNum: page, pageSize: size });
+  }
+
+  const downloadTemplate = () => {
+    window.open(`/api/metadatarepo/rest/msdMgr/exportTemplate?modelId=${nodeId}`);
+  }
+
+  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', '请先选择Excel文件上传');
+      return;
+    }
+
+    setConfirmLoading(true);
+    dispatchLatest({
+      type: 'msd.importData',
+      payload: {
+        params: {
+          modelId: nodeId,
+        },
+        fileList
+      },
+      callback: data => {
+        setConfirmLoading(false);
+        setFileList([]);
+        getLogs();   
+        onSuccess && onSuccess();     
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    setFileList([]);
+  }
+
+  return (
+    <Drawer 
+      forceRender
+      visible={ visible }
+      title='主数据导入'
+      width={1000}
+      placement="right"
+      closable={ true }
+      onClose={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+    >
+      <div className='mt-3'>
+        <Form layout='inline'>
+          <Form.Item label='Word上传:'>
+            <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.Item>
+            <Button icon={<DownloadOutlined />} onClick={downloadTemplate }>
+            模版下载
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+      <div className='d-flex my-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <h3 style={{ marginBottom: 0 }}>导入日志</h3> 
+        <Button onClick={onRefreshClick}>刷新</Button>
+      </div>
+      <ResizeableTable
+        className='mt-3'
+        columns={columns} 
+        rowKey={'id'}
+        dataSource={logs||[]}
+        pagination={false} 
+        loading={loading}
+        expandable={{
+          expandedRowRender: record => <ExpandedRow data={record} />
+        }}
+        sticky
+      />
+      <Pagination
+        className="text-center mt-3"
+        showSizeChanger
+        showQuickJumper
+        onChange={changeCurrent}
+        onShowSizeChange={changeCurrent}
+        current={pageNum}
+        pageSize={pageSize}
+        defaultCurrent={1}
+        total={total}
+        pageSizeOptions={[10,20]}
+        showTotal={total => `共 ${total} 条`}
+      />
+    </Drawer>
+  )
+}
+
+export default ImportDataDrawer;
\ No newline at end of file

src/view/Manage/DataMaster/Manage/Component/ManageTable.jsx

@@ -5,6 +5,7 @@ import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify"
 import ResizeableTable from '../../../ResizeableTable';
 import DebounceInput from '../../../Model/Component/DebounceInput';
 import UpdateDataMasterModal from './UpdateDataMasterModal';
+import ImportDataDrawer from './ImportDataDrawer';
 import { inputWidth, showMessage } from '../../../../../util';
 import { dispatch } from '../../../../../model';
 
@@ -26,6 +27,7 @@ const ManageTable = (props) => {
   const [tableData, setTableData] = useState([]);
   const [total, setTotal] = useState(0);
   const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
+  const [importDataDrawerVisible, setImportDataDrawerVisible] = useState(false);
 
   const {pageNum, pageSize} = pagination;
 
@@ -125,6 +127,10 @@ const ManageTable = (props) => {
     setIsDataMasterModalVisible(true);
   }
 
+  const onImportClick = () => {
+    setImportDataDrawerVisible(true);
+  }
+
   const onDataMasterModalCancel = (refresh = false) => {
     setIsDataMasterModalVisible(false);
 
@@ -176,6 +182,14 @@ const ManageTable = (props) => {
     setPagination({ pageNum: page, pageSize: size });
   }
 
+  const onImportDataDrawerCancel = () => {
+    setImportDataDrawerVisible(false);
+  }
+
+  const onImportDataSuccess = () => {
+    getFiledsAndDatas();
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onTableSelectChange,
@@ -189,6 +203,9 @@ const ManageTable = (props) => {
             <Button onClick={onAddClick}>新建</Button>
           </Space>
           <Space>
+            <Button onClick={onImportClick}>导入</Button>
+          </Space>
+          <Space>
             <Tooltip title={(checkedKeys||[]).length===0?'请先选择主数据':''}>
               <Button onClick={onBatchDeleteClick} disabled={(checkedKeys||[]).length===0} loading={deleteLoading}>删除</Button>
             </Tooltip>
@@ -244,6 +261,13 @@ const ManageTable = (props) => {
         onCancel={onDataMasterModalCancel}
       />
 
+      <ImportDataDrawer 
+        visible={importDataDrawerVisible}
+        nodeId={nodeId}
+        onCancel={onImportDataDrawerCancel}
+        onSuccess={onImportDataSuccess}
+      />  
+
       <RcMenu id={MENU_ID}>
         <RcItem id="detail" onClick={handleItemClick}>
           详情