资产打标签

craco.config.js

@@ -48,6 +48,19 @@ module.exports = {
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
+    proxy: {
+      '/api': {
+          target: 'http://139.198.127.28:18189',
+          changeOrigin: true,
+      },
+      '/data-quality': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+      },
+    },
+    client: {
+      overlay: false,
+    },
     // historyApiFallback: true,
     // hot: false,
     // watchContentBase: false,

package.json

@@ -29,6 +29,7 @@
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
     "local-storage": "^2.0.0",
+    "qiankun": "2.10.13",
     "react": "^17.0.1",
     "react-contexify": "^5.0.0",
     "react-contextmenu": "2.14.0",
@@ -77,6 +78,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://192.168.0.111:8189",
   "homepage": "http://myhost/data-govern"
 }

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

@@ -11,6 +11,7 @@ import Separate from './Separate';
 import AssetTagModal from './AssetTagModal';
 import { AnchorId, AnchorDirId, AssetManageReference } from '../../../../util/constant';
 import PermissionButton from '../../../../util/Component/PermissionButton';
+import DataQuality, { DataQualityFeignTagList } from '../../../QianKun/data-quality'
 
 import { CancelSvg, EditSvg, SaveSvg, FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
@@ -29,6 +30,10 @@ const AssetAction = (props) => {
   const { assets, attributes, attributesFoldMap } = assetParams;
   const [ assetTagModalVisible, setAssetTagModalVisible ] = useState(false);
   const [ selectTag, setSelectTag ] = useState({});
+  const [tagListParams, setTagListParams] = useState({
+    type: 'dataAsset',
+    id: undefined
+  })
 
   useEffect(() => {
     if (action === 'add') {
@@ -48,6 +53,9 @@ const AssetAction = (props) => {
       } else {
         setMetadataId('');
         setAssetParams({...assetParams, ...{assets: {}, attributes: []}});
+        setTagListParams(prev => {
+          return {...prev, id: undefined}
+        })
         getElements();
       }
     }    
@@ -181,6 +189,9 @@ const AssetAction = (props) => {
         })
 
         setAssetParams({ assets: data, attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
+        setTagListParams(prev => {
+          return {...prev, id: data?.id}
+        })
 
         let _fieldsValue = {};
         (data.elements||[]).forEach(element => {
@@ -385,7 +396,7 @@ const AssetAction = (props) => {
         top: 0,
         bottom: 0,
         backgroundColor: '#fff',
-        zIndex: fullScreen?100:0,
+        // zIndex: fullScreen?100:0,
       }}
     >
       {
@@ -458,13 +469,13 @@ const AssetAction = (props) => {
                       </div>
                     </Descriptions.Item>
                     <Descriptions.Item label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>资产标签</div>} style={{ paddingBottom: 15 }}>
-                      <AppContext.Consumer>
-                      {
-                        value => {
-                          return (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} creator={value?.user?.userName||''} onAssetTag={onAssetTag} />:<Tag id={id} creator={value?.user?.userName||''} />
-                        } 
-                      }
-                      </AppContext.Consumer>
+                    <DataQuality 
+                        type={DataQualityFeignTagList}
+                        data={{
+                          type: 'dataAsset',
+                          id: assets?.id
+                        }}
+                      />
                     </Descriptions.Item>
                     <Descriptions.Item 
                       label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>关联关系</div>} 

src/view/QianKun/data-quality.jsx

+import React from 'react'
+import { loadMicroApp } from 'qiankun'
+import { AppContext } from '../../App'
+
+export const DataQualityFeignTagCell = 'data-quality-feign-tag-cell'
+export const DataQualityFeignTagList = 'data-quality-feign-tag-list'
+
+const FC = ({ type, data }) => {
+  const containerRef = React.useRef()
+  const microApp = React.useRef()
+  const app = React.useContext(AppContext)
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      microApp.current = loadMicroApp(
+        { 
+          name: 'data-quality', 
+          entry: '/data-quality/',
+          container: containerRef.current,
+          props: { 
+            type,
+            data,
+            user: app?.user
+          },
+        },
+      );
+    }
+
+    return () => {
+      microApp.current?.unmount()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      microApp.current?.update?.({ type, data })
+    }, 200)
+  }, [type, data])
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+  );
+}
+
+export default FC
\ No newline at end of file