资产管理调整

src/index.less

@@ -98,5 +98,9 @@ div[id^='__qiankun_microapp_wrapper_'] {
   word-break: break-all; 
 }
 
+.yy-popover-content {
+  pointer-events: auto !important;
+}
+
 
 

src/view/Manage/AssetManage/components/AssetDetail.jsx

-import React from "react"
-import {Modal,Descriptions} from "antd"
+import React, { useEffect, useState } from "react"
+import { Modal, Typography } from "antd"
 
+import AssetItem from './AssetItem';
 
+const AssetDetail = (props)=>{
+  const { onCancel,visible, item } = props
+  const [ assetName, setAssetName ] = useState('');
 
+  useEffect(() => {
+
+    if (item) {
+      const index = (item.elements||[]).findIndex(element => element.name==='中文名称');
+      if (index !== -1) {
+        setAssetName(item.elements[index].value||'');
+      }
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ item ])
 
-const AssetDetail =  (props)=>{
-    const {handleCancle,visible,boxDetail} = props
   return(
     <Modal
-            title={`资产Id:${boxDetail.id}`}
+      title={
+        <Typography.Paragraph 
+          className='mr-5'
+          title={`资产: ${assetName||''}`} 
+          ellipsis 
+        >
+        {`资产: ${assetName||''}`}
+        </Typography.Paragraph>}
       visible={visible}
       width={800}
-            onCancel={()=>{handleCancle()}}
-            // style={{ top: 30}}
+      onCancel={()=>{ onCancel && onCancel()}}
       footer={null}
     >
-            <Descriptions size="small" column={2} bordered>
-                {boxDetail.elements&&boxDetail.elements.map((element, index)=>{
-                return(
-                        <Descriptions.Item key={index} label={element.name}>{element.value}</Descriptions.Item>
-
-                    )
-                })
-                }
-            </Descriptions>
-
+      <AssetItem data={item} />
     </Modal>
   )
 }

src/view/Manage/AssetManage/components/AssetItem.jsx

+import React, { useEffect, useState } from 'react';
+import { Avatar, Row, Col, Typography, Divider } from 'antd';
+
+import './AssetItem.less';
+
+const colors = [
+  '#BDD2FD',
+  '#C2C8D5',
+  '#FBE5A2',
+  '#F6C3B7',
+  '#B6E3F5',
+  '#D3C6EA',
+  '#FFD8B8',
+  '#AAD8D8',
+  '#FFD6E7',
+];
+
+const AssetItem = (props) => {
+
+  const { data } = props;
+  const [ typesOfElements, setTypesOfElements ] = useState([]);
+
+  useEffect(() => {
+
+    if (data) {
+      convertData();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ data ]);
+
+  const convertData = () => {
+    const _typesOfElements = [];
+
+    const _types = [];
+
+    data && (data.elements||[]).forEach(element => {
+      if (_types.indexOf(element.type||'') === -1) {
+        _types.push(element.type||'');
+      }
+    })
+
+    _types.forEach(type => {
+      const _elements =  (data.elements||[]).filter(element => (element.type||'') === type);
+      _typesOfElements.push({ type, elements: _elements||[] });
+    })
+
+    setTypesOfElements(_typesOfElements);
+  }
+
+  return (
+    <div className='asset-item'>
+    {
+      (typesOfElements||[]).map((typeOfElements, index) => {
+        const _type = typeOfElements.type||'';
+
+        return (
+          <div key={index} className='d-flex' style={{ alignItems: 'center' }}>
+            <Avatar className='mr-3' style={{ backgroundColor: colors[index%colors.length] }}>{ _type==='' ? '无' : _type.slice(0, 1) }</Avatar>
+            <div className='textOverflow' style={{ flex: 1 }}>
+              <Row className='mb-3' style={{ width: '100%' }}>
+              {
+                typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
+                  return (
+                    <Col className='mt-3' key={_index} md={8}>
+                      <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
+                      { `${element.name||''}: ${element.value||''}` }
+                      </Typography.Paragraph>
+                    </Col>
+                  );
+                })
+              }
+              </Row>
+              { index !== ((typesOfElements||[]).length-1) && <Divider /> }
+            </div>
+          </div>
+        )
+      })
+    }
+    </div>
+  );
+}
+
+export default AssetItem;
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetItem.less

+.asset-item {
+  .yy-divider-horizontal {
+    margin: 0 !important;
+  }
+
+  .yy-typography, .yy-typography p {
+    margin-bottom: 0 !important;
+  }
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetTable.less

@@ -12,4 +12,15 @@
         height: calc(100vh - 64px - 30px - 53px - 53px - 5px) !important;
         overflow: auto !important;
     }
+    .yy-divider-horizontal {
+        margin: 0 !important;
+    }
+    .yy-list-vertical {
+        .yy-list-item-meta, .yy-list-item-meta-title {
+            margin-bottom: 0 !important;
+        }
+    }
+    .yy-list-item {
+        padding: 0 !important;
+    }
 }
\ No newline at end of file

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

 import React from 'react';
-import { Modal, Button, Upload } from 'antd';
+import { Button, Upload, Space } from 'antd';
 import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
 
-import {dispatch } from '../../../../model';
+import { dispatch } from '../../../../model';
+import { showMessage } from '../../../../util';
 
 class ImportAsset extends React.Component {
 
@@ -25,13 +26,19 @@ class ImportAsset extends React.Component {
   onOk = () => {
     const { node, onCancel } = this.props;
     const { fileList } = this.state;
+
+    if ((fileList||[]).length === 0) {
+      showMessage('info', '请先选择模版上传');
+      return;
+    }
+
     this.setState({ confirmLoading: true }, () => {
       dispatch({
         type: 'assetmanage.assetImport',
         payload: { fileList: fileList[0], params: { parentPath: node.path||'' } },
         callback: () => {
           this.setState({ confirmLoading: false }, () => {
-            onCancel && onCancel(true);
+            onCancel && onCancel(false, true);
           });
         },
         error: () => {
@@ -43,8 +50,8 @@ class ImportAsset extends React.Component {
 
   render() {
 
-    const { visible, onCancel } = this.props;
-    const { fileList } = this.state;
+    const { onCancel } = this.props;
+    const { fileList, confirmLoading } = this.state;
 
     const uploadProps = {
       onRemove: file => {
@@ -64,18 +71,7 @@ class ImportAsset extends React.Component {
     };
 
     return (
-      <Modal 
-        forceRender
-        visible={visible}
-        title={'导入资产'}
-        width={520}
-        onOk={this.onOk}
-        onCancel={() => {
-          this.reset();
-          onCancel && onCancel();
-        }}
-      >
-        <>
+      <div style={{ width: 300 }}>
         <div>
           <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
           模版下载
@@ -88,8 +84,16 @@ class ImportAsset extends React.Component {
             </Button>
           </Upload>
         </div>
-        </>
-      </Modal>
+        <div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
+          <Space style={{ marginLeft: 'auto' }}>
+            <Button onClick={() => {
+              this.reset();
+              onCancel && onCancel();
+            }}>取消</Button>
+            <Button type='primary' onClick={this.onOk} loading={confirmLoading} >确定</Button>
+          </Space>
+        </div>
+      </div>
     )
   }
 }

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

+import React, { useState } from 'react';
+import { Button, Upload, Space } from 'antd';
+import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
+
+import { dispatchLatest } from '../../../../model'; 
+import { showMessage } from '../../../../util';
+
+const ImportElement = (props) => {
+  const { onCancel } = props;
+  const [ fileList, setFileList ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const downloadTemplate = () => {
+    window.open("/data-govern/docs/ElementModel.xlsx");
+  }
+
+  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);
+    dispatchLatest({
+      type: 'dataassetelement.importElement',
+      payload: { fileList },
+      callback: data => {
+        setConfirmLoading(false);
+        reset();
+        onCancel && onCancel();
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const reset = () => {
+    setFileList([]);
+  }
+
+  return (
+    <div style={{ width: 300 }}>
+      <div>
+        <Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
+        模版下载
+        </Button>
+      </div>
+      <div className='mt-3'>
+        <Upload {...uploadProps}>
+          <Button icon={<UploadOutlined />}>
+            选择文件上传
+          </Button>
+        </Upload>
+      </div>
+      <div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
+        <Space style={{ marginLeft: 'auto' }}>
+          <Button onClick={() => {
+            reset();
+            onCancel && onCancel();
+          }}>取消</Button>
+          <Button type='primary' onClick={handleOk} loading={confirmLoading} >确定</Button>
+        </Space>
+      </div>
+    </div>
+  )
+}
+
+export default ImportElement;
\ No newline at end of file