标签

src/service/dataassetmanager.js

@@ -113,7 +113,7 @@ export function getMetadataModelTree() {
 }
 
 export function getAttributesByMetadataModel(payload) {
-  return GetJSON(`/metadatarepo/rest/model/getAttributes/${payload.model||''}`);
+  return GetJSON("/dataassetmanager/eleAndAttrApi/getModelAttributes", payload);
 }
 
 export function loadElementWithoutCustom() {

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

@@ -60,7 +60,7 @@ const AttributeRelationModal = (props) => {
     dispatchLatest({
       type: 'assetmanage.getAttributesByMetadataModel',
       payload: {
-        model
+        modelName: model
       },
       callback: data => {
         setAttributes(data||[]);

src/view/Manage/Model/Component/ModelTable.jsx

@@ -17,6 +17,7 @@ const ModelTable = (props) => {
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
+  const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
   const [ subData, setSubData ] = useState([]);
 
   const moreMenu = (record) => {
@@ -123,16 +124,24 @@ const ModelTable = (props) => {
       width: 100,
       ellipsis: true,
     },
-    // {
-    //   title: '标签',
-    //   dataIndex: 'tag',
-    //   width: 250,
-    //   render: (_,__) => {
-    //     return (
-    //       <Tag />
-    //     );
-    //   }
-    // },
+    {
+      title: '标签',
+      dataIndex: 'tag',
+      width: 200,
+      onCell: (record) => ({ 
+        onMouseEnter: event => {
+          setMouseEnterKey(record.id);
+        }, 
+        onMouseLeave: event => {
+          setMouseEnterKey(null);
+        },
+      }),
+      render: (_,record) => {
+        return (
+          record.id===mouseEnterKey?<Tag styleType='complex' />:<Tag />
+        );
+      }
+    },
     {
       title: '操作',
       key: 'action',
@@ -202,7 +211,7 @@ const ModelTable = (props) => {
           </div>
         )
       }
-    }
+    },
   ];
 
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
@@ -482,10 +491,10 @@ const ModelTable = (props) => {
         dataSource={modelId?(subData||[]):(_data||[])}
         pagination={false}
         size={modelId?'small':'default'}
-        onRow={(record) => {
+        onRow={(record, index) => {
           return {
             id: `data-model-${record?.id}`,
-            style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' }
+            style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
           }
         }}
         expandable={expandable}

src/view/Manage/Tag/index.jsx

 import React, { useEffect, useState } from 'react';
-import { Button, Space } from 'antd';
+import { Button, Space, Tag, Modal } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 
 import AddTagModal from './Component/AddTagModal';
 import { dispatch } from '../../../model';
 
-const Tag = (props) => {
-  const { id = '619dd97e9e14e63b24b1dbc2-1', type = 'dataModel', creator = 'demotest' } = props;
+const TagColumn = (props) => {
+  const { id = '619dd97e9e14e63b24b1dbc2-1', type = 'dataModel', creator = 'demotest', styleType = 'simple' } = props;
 
   const [ ownTags, setOwnTags ] = useState([]);
   const [ addTagModalVisible, setAddTagModalVisible ] = useState(false);
+  const [modal, contextHolder] = Modal.useModal();
 
   useEffect(() => {
     getTags();
@@ -42,35 +44,96 @@ const Tag = (props) => {
     refresh && getTags();
   }
 
+  const handleClose = (index) => {
+    const _tag = ownTags[index];
+
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要删除该标签吗?',
+      onOk: () => {
+        dispatch({
+          type: 'tag.deleteTagResource',
+          payload: {
+            esIds: _tag.esId
+          },
+          callback: () => {
+            getTags();
+          }
+        })
+      }
+    });
+
+  }
+
+  let tagsContent = '';
+  (ownTags||[]).forEach((item, index) => {
+    if (index === 0) {
+      tagsContent = (item.name||'');
+    } else {
+      tagsContent += ',' + (item.name||'');
+    }
+  })
+
   return (
-    <div className='tag'>
-      <Space>
+    <React.Fragment>
+    {
+      (styleType==='simple') && <div 
+        className='textOverflow' 
+        style={{ 
+          fontSize: 13, 
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          wordBreak: 'break-all'
+        }}
+      >
+      { tagsContent }
+      </div>
+    }
+    {
+      (styleType==='complex') && <div> 
+        <div>
         {
           (ownTags||[]).map((item, index) => {
             return (
-              <Button key={index} size='small'>
+              <Tag 
+                key={index} 
+                closable
+                onClose={e => {
+                  e.preventDefault();
+                  handleClose(index);
+                }}
+                style={{ marginTop: 5 }}
+                color={item.type==='public'?'#2db7f5':'volcano'}
+              >
               { item.name||'' }
-              </Button>
+              </Tag>
             );
           })
         }
+        </div>
+        <div style={{ marginTop: 5 }}>
         <Button 
           size='small' 
-          type='dashed'
+          type='text'
+          icon={<PlusOutlined />}
           onClick={onAddBtnClick}
         >
-          新建
+          新增标签
         </Button>
-        <AddTagModal 
-          visible={addTagModalVisible}  
-          id={id}
-          type={type}
-          creator={creator}
-          onCancel={onAddTagModalCancel}  
-        />
-      </Space>
-    </div>
+        </div>
+      </div>
+    }
+    <AddTagModal 
+      visible={addTagModalVisible}  
+      id={id}
+      type={type}
+      creator={creator}
+      onCancel={onAddTagModalCancel}  
+    />
+    {contextHolder}  
+    </React.Fragment>
   );
 }
 
-export default Tag;
+export default TagColumn;
\ No newline at end of file