资产项

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

-import React from 'react';
-import { Button } from 'antd';
-import { SettingFilled } from '@ant-design/icons';
+import React from 'react'
+import { Button, Tooltip } from 'antd'
+import { SettingFilled } from '@ant-design/icons'
 
-import { highlightSearchContentByTerms } from '../../../../util';
-import { AppContext } from '../../../../App';
+import { highlightSearchContentByTerms, IsArr } from '../../../../util'
+import { AppContext } from '../../../../App'
+import { MetadataColumnTooltipTitle } from '../../AssetResourceManage/table'
 
 const MetadataInfo = ({ value = '', config = true, terms = [] }) => {
-  
-  let metadata = {};
-  try {
-    metadata = JSON.parse(value);
-  } catch(error) {
-    metadata = value;
-  }
+  const app = React.useContext(AppContext)
+  const decodeData = React.useMemo(() => {
+    if (value) {
+      try {
+        return JSON.parse(value)
+      } catch(error) {
+        return value
+      }
+    }
+
+    return []
+  }, [value])
 
   return (
-    <AppContext.Consumer>
+    <div className='flex'>
     {
-      value => <div className='flex'>
-        {
-          (typeof metadata==='string') ? <span style={{ marginRight: 5 }}>{highlightSearchContentByTerms(metadata||'', terms)}</span> : <div className='flex' style={{ flexDirection: 'column' }}>
-            <a onClick={() => {
-              value?.setGlobalState && value?.setGlobalState({
-                message: 'data-govern-show-metadata-message',
-                data: metadata
-              })
-            }} style={{ marginRight: 5, marginTop: config?5:0 }}>{highlightSearchContentByTerms(metadata?.tableName||'',terms)}
-            </a>
-            {
-              (metadata?.columnItems||[]).map((item, index) => {
-
-                let _content = '';
-                if ((item.metadataColumnCnName||'')!=='') {
-                  _content = item.metadataColumnCnName + '/';
-                }
-
-                _content += item.metadataColumnName||'';
-
-                return <span key={index}>{highlightSearchContentByTerms(_content,terms)}</span>
-              })
-            }
-          </div>
-        }
+      (typeof decodeData === 'string') ? <span style={{ marginRight: 5 }}>
+        {highlightSearchContentByTerms(decodeData, terms)}
+      </span> : (IsArr(decodeData) ? <div className='flex' style={{ flexDirection: 'column' }}>
         {
-          config && <Button icon={<SettingFilled />} onClick={() => {
-            value?.setGlobalState && value?.setGlobalState({
-              message: 'data-govern-show-metadata-list-message',
-              data: (typeof metadata==='string') ? {} : metadata 
-            })
-          }} />
+          (decodeData??[]).map((item, index) => <span key={index}>
+              <Tooltip
+                overlayClassName='tooltip-common'
+                title={<MetadataColumnTooltipTitle data={[item]} />}
+              >
+                <a 
+                  onClick={() => {
+                    app?.setGlobalState?.({
+                      message: 'data-govern-show-metadata-message',
+                      data: item
+                    })
+                  }}
+                  style={{ marginRight: 5, marginTop: config?5:0 }}
+                >
+                {highlightSearchContentByTerms(item.enName, terms)}
+                </a>
+              </Tooltip>
+              {
+                config && <Button type='text' icon={<SettingFilled />} onClick={() => {
+                  app?.setGlobalState?.({
+                    message: 'data-govern-show-metadata-list-message',
+                    data: (typeof decodeData==='string') ? {} : item 
+                  })
+                }} />
+              }
+            </span>
+          )
         }
-      </div>
+      </div> : null)
     }
-    </AppContext.Consumer>
-  );
+    </div>
+  )
 }
 
-export default MetadataInfo;
+export default MetadataInfo
\ No newline at end of file

src/view/Manage/AssetResourceManage/table.jsx

@@ -9,7 +9,7 @@ import LocalStorage from 'local-storage'
 import { defaultPage, usePage } from '../../../util/hooks/page'
 import Table from '../../../util/Component/Table'
 import { dispatch } from '../../../model'
-import { getAssetRange, getAssetType, getQueryParam, isSzseEnv, showMessage, showNotifaction } from '../../../util'
+import { getAssetRange, getAssetType, getQueryParam, IsArr, isSzseEnv, showMessage, showNotifaction } from '../../../util'
 import { ResourceManageReference } from '../../../util/constant'
 import PermissionButton from '../../../util/Component/PermissionButton'
 import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
@@ -1384,7 +1384,7 @@ const ExpandedRow = ({ id, columns, onRowClick, onSyncClick }) => {
   )
 }
 
-const MetadataColumnTooltipTitle = ({ data }) => {
+export const MetadataColumnTooltipTitle = ({ data }) => {
   const [currentMetadataId, setMetadataId] = React.useState()
   const [loading, setLoading] = React.useState(false)
   const [columnData, setColumnData] = React.useState() 
@@ -1527,14 +1527,14 @@ const MetadataColumn = ({ data }) => {
         <Typography.Text ellipsis={true}>
         {decodeData}
         </Typography.Text>
-      </Tooltip> : (Array.isArray(decodeData) ? <Tooltip 
+      </Tooltip> : ((IsArr(decodeData) ? <Tooltip 
           overlayClassName='tooltip-common'
           title={<MetadataColumnTooltipTitle data={decodeData} />}
         >
           <Typography.Text ellipsis={true}>
           {(decodeData??[]).map(item => item.enName).toString()}
           </Typography.Text>
-        </Tooltip> : null
+        </Tooltip> : null)
       )
     }
     </React.Fragment>