资产多模块

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

@@ -5,6 +5,7 @@ import LocalStorage from 'local-storage';
 import { dispatch } from '../../../../model';
 import { AssetManageReference, ResourceBrowseReference } from '../../../../util/constant';
 import ImportElement from './ImportElement';
+import ExportElement from './ExportElement';
 import AttributeRelationModal from "./AttributeRelationModal";
 import FilterElementModal from './FilterElementModal';
 import { showNotifaction } from '../../../../util';
@@ -21,6 +22,7 @@ const AssetDirectory = (props) => {
   const [ dir, setDir ] = useState(null);
   const [ loading, setLoading ] = useState(false);
   const [ importElementVisible, setImportElementVisible ] = useState(false);
+  const [ exportElementVisible, setExportElementVisible ] = useState(false);
   const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
   const [ resourceState, setResourceState ] = useState(null);
@@ -91,9 +93,7 @@ const AssetDirectory = (props) => {
   }
 
   const onExportElementBtnClick = () => {
-    const env = LocalStorage.get('assetsEnv');
-
-    window.open(`/api/dataassetmanager/elementApi/export?env=${env}&resourceType=${dir?.resourceType}`);
+    setExportElementVisible(true);
   }
 
   const onFilterElementClick = () => {
@@ -116,6 +116,10 @@ const AssetDirectory = (props) => {
     }
   }
 
+  const onExportElementCancel = () => {
+    setExportElementVisible(false);
+  }
+
   const onFilterElementModalCancel = () => {
     setFilterElementVisible(false);
   }
@@ -284,7 +288,11 @@ const AssetDirectory = (props) => {
       <ImportElement 
         visible={importElementVisible}
         onCancel={onImportElementCancel}
-        dir={dir}
+      />
+
+      <ExportElement 
+        visible={exportElementVisible}
+        onCancel={onExportElementCancel}
       />
 
       <FilterElementModal

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

+import React, { useEffect, useState } from 'react';
+import { Button, Upload, Modal, Select, Space, Spin } from 'antd';
+import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
+import LocalStorage from 'local-storage';
+
+import { dispatchLatest, dispatch } from '../../../../model'; 
+import { showMessage } from '../../../../util';
+
+const FC = (props) => {
+  const { onCancel, visible } = props;
+  const [ resourceTypes, setResourceTypes ] = useState(undefined);
+  const [ currentResourceType, setCurrentResourceType ] = useState(undefined);
+  const [ loading, setLoading ] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      getResourceTypes();
+    }
+  }, [visible])
+
+  const getResourceTypes = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getResourceTypes',
+      callback: data => {
+        setLoading(false);
+        setResourceTypes(data);
+        if ((data||[]).length > 0) {
+          setCurrentResourceType(data[0].code);
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const handleOk = () => {
+
+    if (!currentResourceType) {
+      showMessage('info', '请先选择资产类型');
+      return;
+    }
+
+    const env = LocalStorage.get('assetsEnv');
+
+    window.open(`/api/dataassetmanager/elementApi/export?env=${env}&resourceType=${currentResourceType}`);
+    reset();
+    onCancel();
+  }
+
+  const reset = () => {
+    setLoading(false);
+  }
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='资产属性导出'
+      width={520}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
+      <Spin spinning={loading} >
+        <div className='mb-3 flex'>
+          <Select 
+            value={currentResourceType} 
+            onChange={(val) => {
+              setCurrentResourceType(val);
+            }}
+            style={{ width: 200 }}
+          >
+          {
+            resourceTypes?.map((item,index) => {
+              return <Select.Option key={item.code}>{item.name}</Select.Option>
+            })
+          }
+          </Select>
+        </div>
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC;
\ 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 { Button, Upload, Drawer, Table, Pagination, Divider, Form, Select } from 'antd';
 import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
 import LocalStorage from 'local-storage';
 
@@ -16,6 +16,8 @@ const ImportAssetDrawer = (props) => {
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const { pageNum, pageSize } = pagination;
   const [ total, setTotal ] = useState(0);
+  const [ resourceTypes, setResourceTypes ] = useState(undefined);
+  const [ currentResourceType, setCurrentResourceType ] = useState(undefined);
 
   const columns = [
     {
@@ -71,12 +73,30 @@ const ImportAssetDrawer = (props) => {
     if (visible) {
       setPagination({ pageNum: 1, pageSize: 20 });
       getLogs();
+      getResourceTypes();
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible])
 
+  const getResourceTypes = () => {
+    dispatch({
+      type: 'assetmanage.getResourceTypes',
+      callback: data => {
+        setResourceTypes(data);
+        if ((data||[]).length > 0) {
+          setCurrentResourceType(data[0].code);
+        }
+      }
+    })
+  }
+
   const downloadTemplate = () => {
+    if (!currentResourceType) {
+      showMessage('warn', '请先选择资产类型');
+      return;
+    }
+
     const env = LocalStorage.get('assetsEnv');
     dispatch({
       type: 'assetmanage.getDirectoryById',
@@ -84,7 +104,7 @@ const ImportAssetDrawer = (props) => {
         dirId: nodeId
       },
       callback: data => {
-        window.open(`/api/dataassetmanager/dataAssetApi/getImportTemplate?env=${env}&resourceType=${data?.resourceType}`);
+        window.open(`/api/dataassetmanager/dataAssetApi/getImportTemplate?env=${env}&resourceType=${currentResourceType}`);
       }
     })
   }
@@ -134,6 +154,10 @@ const ImportAssetDrawer = (props) => {
   };
 
   const handleOk = () => {
+    if (!currentResourceType) {
+      showMessage('warn', '请先选择资产类型');
+      return;
+    }
 
     if ((fileList||[]).length === 0) {
       showMessage('info', '请先选择模版上传');
@@ -142,29 +166,18 @@ const ImportAssetDrawer = (props) => {
     
     setConfirmLoading(true);
     dispatch({
-      type: 'assetmanage.getDirectoryById',
-      payload: { 
-        dirId: nodeId
-      },
+      type: 'assetmanage.assetImport',
+      payload: { fileList: fileList, params: { dirId: nodeId, resourceType: currentResourceType } },
       callback: data => {
-        dispatch({
-          type: 'assetmanage.assetImport',
-          payload: { fileList: fileList, params: { dirId: nodeId, resourceType: data.resourceType } },
-          callback: data => {
-            setConfirmLoading(false);
-            setFileList([]);
-            getLogs(pageNum, pageSize);   
-            onSuccess && onSuccess(data||''); 
-          },
-          error: () => {
-            setConfirmLoading(false);
-          }
-        });  
+        setConfirmLoading(false);
+        setFileList([]);
+        getLogs(pageNum, pageSize);   
+        onSuccess && onSuccess(data||''); 
       },
       error: () => {
         setConfirmLoading(false);
       }
-    });
+    });  
   }
 
   const reset = () => {
@@ -185,7 +198,7 @@ const ImportAssetDrawer = (props) => {
         onCancel && onCancel();
       }}
     >
-      <div className='mt-3'>
+      <div className='mt-3 flex' style={{ justifyContent: 'space-between' }}>
         <Form layout='inline'>
           <Form.Item label='Word上传:'>
             <Button className='mr-2' icon={<DownloadOutlined />} onClick={ downloadTemplate }>
@@ -202,6 +215,19 @@ const ImportAssetDrawer = (props) => {
             <Button type='primary' onClick={handleOk} loading={confirmLoading}>确定导入</Button>
           </Form.Item>
         </Form>
+        <Select 
+          value={currentResourceType} 
+          onChange={(val) => {
+            setCurrentResourceType(val);
+          }}
+          style={{ width: 200 }}
+        >
+        {
+          resourceTypes?.map((item,index) => {
+            return <Select.Option key={item.code}>{item.name}</Select.Option>
+          })
+        }
+        </Select>
       </div>
       <Divider orientation="left">导入日志</Divider>
       <Table

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

-import React, { useState } from 'react';
-import { Button, Upload, Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Button, Upload, Modal, Select, Space, Spin } from 'antd';
 import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
 
-import { dispatchLatest } from '../../../../model'; 
+import { dispatchLatest, dispatch } from '../../../../model'; 
 import { showMessage } from '../../../../util';
 
 const ImportElement = (props) => {
-  const { onCancel, visible, dir } = props;
+  const { onCancel, visible } = props;
   const [ fileList, setFileList ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ resourceTypes, setResourceTypes ] = useState(undefined);
+  const [ currentResourceType, setCurrentResourceType ] = useState(undefined);
+  const [ loading, setLoading ] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      getResourceTypes();
+    }
+  }, [visible])
+
+  const getResourceTypes = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getResourceTypes',
+      callback: data => {
+        setLoading(false);
+        setResourceTypes(data);
+        if ((data||[]).length > 0) {
+          setCurrentResourceType(data[0].code);
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
 
   const downloadTemplate = () => {
     window.open("/data-govern/docs/ElementModel.xlsx");
@@ -44,7 +70,7 @@ const ImportElement = (props) => {
       type: 'assetmanage.importElement',
       payload: { 
         params: {
-          resourceType: dir?.resourceType
+          resourceType: currentResourceType
         },
         fileList 
       },
@@ -61,6 +87,8 @@ const ImportElement = (props) => {
 
   const reset = () => {
     setFileList([]);
+    setLoading(false);
+    setConfirmLoading(false);
   }
 
   return (
@@ -76,18 +104,33 @@ const ImportElement = (props) => {
       }}
       onOk={handleOk}
     >
-      <div>
-        <Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
-        模版下载
-        </Button>
-      </div>
-      <div className='mt-3'>
-        <Upload {...uploadProps}>
-          <Button icon={<UploadOutlined />}>
-            选择文件上传
+      <Spin spinning={loading} >
+        <div className='mb-3 flex'>
+          <Select 
+            value={currentResourceType} 
+            onChange={(val) => {
+              setCurrentResourceType(val);
+            }}
+            style={{ width: 200 }}
+          >
+          {
+            resourceTypes?.map((item,index) => {
+              return <Select.Option key={item.code}>{item.name}</Select.Option>
+            })
+          }
+          </Select>
+        </div>
+        <Space>
+          <Upload {...uploadProps}>
+            <Button icon={<UploadOutlined />}>
+              选择文件上传
+            </Button>
+          </Upload>
+          <Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
+          模版下载
           </Button>
-        </Upload>
-      </div>
+        </Space>
+      </Spin>
     </Modal>
   )
 }