资产项关联元数据

src/App.js

@@ -17,13 +17,15 @@ import DatasourceManage from './view/Manage/DatasourceManage';
 import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
 import ImportAction from './view/Manage/Model/Component/ImportAction';
 import EditModel from './view/Manage/Model/Component/EditModel';
+import AssetTree from './view/Manage/AssetManage/Component/AssetTree';
 
 export const AppContext = React.createContext();
 
 export class App extends React.Component {
+
   render() {
 
-    const { params } = this.props;
+    const { params, callback, setGlobalState, onGlobalStateChange } = this.props;
 
     let message = '', id = '', terms = [];
     if (params) {
@@ -54,9 +56,25 @@ export class App extends React.Component {
       );
     }
 
+    if (message === 'showAssetTree') {
+      return (
+        <AssetTree 
+          reference='metadata'
+          readOnly={true} 
+          checkable={true}
+          onCheck={(values) => { 
+            callback&&callback(values); 
+          }}
+          {...this.props} 
+        /> 
+      );
+    }
+
     return (
       <AppContext.Provider value={{
-        env: params?.env
+        env: params?.env,
+        setGlobalState,
+        onGlobalStateChange
       }}>
         <Router basename={window.__POWERED_BY_QIANKUN__ ? '/data-govern' : '/'}>
           <Switch>

src/model/assetmanage.js

@@ -97,4 +97,8 @@ export function* unloadDataAssets(payload) {
 
 export function* getDataAssetLocation(payload) {
   return yield call(service.getDataAssetLocation, payload);
+}
+
+export function* createDataAssetByMetadataIds(payload) {
+  return yield call(service.createDataAssetByMetadataIds, payload);
 }
\ No newline at end of file

src/service/dataassetmanager.js

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

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Row, Col, Typography } from 'antd';
 
 import { highlightSearchContentByTerms } from '../../../../util';
+import MetadataInfo from './MetadataInfo';
 import './AssetItem.less';
 
 const AssetItem = (props) => {
@@ -51,7 +52,10 @@ const AssetItem = (props) => {
                 return (
                   <Col className='mb-3' key={_index} md={8}>
                     <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
-                    { `${element.name||''}: `}{highlightSearchContentByTerms(element.value||'', terms)}
+                    { `${element.name||''}: `}
+                    {
+                      (element.name==='资产项')?<MetadataInfo config={false} value={element.value||''} />:highlightSearchContentByTerms(element.value||'', terms)
+                    }
                     </Typography.Paragraph>
                   </Col>
                 );

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

 import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, Space, Button } from 'antd';
-
 import { showMessage } from '../../../../util';
 import { dispatch } from '../../../../model';
+import { AppContext } from '../../../../App';
+import MetadataInfo from './MetadataInfo';
 
 import './AssetEdit.less';
 
@@ -133,19 +134,34 @@ const AssetEdit = (props) => {
       }
     >
       <Form {...formItemLayout} form={form}>
-        { (elements||[]).map((element, index) => {
-          return ( 
-            element.manualMaintain === '是' ? (
-              <Form.Item 
-                label={element.name}
-                name={element.name}
-                key={index}
-              >
-                <Input  />
-              </Form.Item>
-            ) : null
-          )
-        })}
+        <AppContext.Consumer>
+        {
+        value => {
+          value?.onGlobalStateChange((state, prev) => {
+            if (state.message === 'data-govern-show-metadata-list-callback-message') {
+              form?.setFieldsValue({ '资产项': state.data });
+            }
+          });
+
+          return (
+            <>
+            { (elements||[]).map((element, index) => {
+              return ( 
+                element.manualMaintain==='是' && (
+                  <Form.Item 
+                    label={element.name}
+                    name={element.name}
+                    key={index}
+                  >
+                  { (element.name==='资产项') ? <MetadataInfo /> : <Input  /> }
+                  </Form.Item>
+                )
+              )
+            })}
+            </>
+          );
+        }}
+        </AppContext.Consumer>
       </Form>
     </Modal>
   );

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

 import React from 'react';
 import { Row, Col, Typography } from 'antd';
 
+import MetadataInfo from './MetadataInfo';
 import './AssetItem.less';
 
 const AssetItem = (props) => {
@@ -25,7 +26,8 @@ const AssetItem = (props) => {
                 return (
                   <Col className='mb-3' key={_index} md={8}>
                     <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
-                    { `${element.name||''}: ${element.value||''}` }
+                    { `${element.name||''}: `}
+                    { element.name==='资产项'?<MetadataInfo config={false} value={element.value||''} />:`${element.value||''}` }
                     </Typography.Paragraph>
                   </Col>
                 );

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

@@ -13,7 +13,7 @@ import './AssetTree.less';
 
 const AssetTree = (props) => {
 
-  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId } = props; 
+  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId, reference='' } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState([]);
@@ -32,8 +32,8 @@ const AssetTree = (props) => {
 
   const [modal, contextHolder] = Modal.useModal();
   
-  const timestamp = getQueryParam(AnchorTimestamp, props.location.search);
-  const id = getQueryParam(AnchorId, props.location.search);
+  const timestamp = getQueryParam(AnchorTimestamp, props.location?.search);
+  const id = getQueryParam(AnchorId, props.location?.search);
 
   useEffect(() => {
     if ((id||'') !== '') {
@@ -432,7 +432,8 @@ const AssetTree = (props) => {
     });
 
   const classes = classNames('asset-tree', className, {
-    'asset-tree-read-only': readOnly
+    'asset-tree-read-only': readOnly,
+    'asset-tree-metadata-reference': reference==='metadata'
   });  
 
   return (

src/view/Manage/AssetManage/Component/AssetTree.less

@@ -6,7 +6,7 @@
     padding: 0;
   }
 
-  .yy-tree-list {
+  .yy-tree{
     height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px + 1px - 20px - 42px) !important;
     overflow: auto !important;
   }
@@ -17,8 +17,15 @@
 }
 
 .asset-tree-read-only {
-  .yy-tree-list {
+  .yy-tree {
     height: calc(100vh - @header-height - @pm-4 - 20px - 42px) !important;;
     overflow: auto !important;
   }
+}
+
+.asset-tree-metadata-reference {
+  .yy-tree {
+    height: 400px !important;
+    overflow: auto !important;
+  }
 }
\ No newline at end of file

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

+import React from 'react';
+import { Button } from 'antd';
+import { SettingFilled } from '@ant-design/icons';
+
+import { AppContext } from '../../../../App';
+
+const MetadataInfo = ({ value = '', config = true }) => {
+
+  const metadata = ((value||'')===''?{}:JSON.parse(value));
+
+  return (
+    <AppContext.Consumer>
+    {
+      value => <span>
+        <a onClick={() => {
+          value?.setGlobalState({
+            message: 'data-govern-show-metadata-message',
+            data: metadata
+          })
+        }} style={{ marginRight: 5 }}>{metadata.tableName||''}</a>
+        {
+          config && <Button icon={<SettingFilled />} onClick={() => {
+            value?.setGlobalState({
+              message: 'data-govern-show-metadata-list-message'
+            })
+          }} />
+        }
+      </span>
+    }
+    </AppContext.Consumer>
+  );
+}
+
+export default MetadataInfo;
\ No newline at end of file