模型详情标签

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

@@ -8,8 +8,7 @@ import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import Rule from '../../ModelConfig/Component/rule-readonly';
 import DebounceInput from './DebounceInput';
-import DataQuality, { DataQualityFeignTagList } from '../../../QianKun/data-quality'
-import TagCell from './tag-help'
+import TagItem from './tag-item'
 
 import './ImportActionHeader.less';
 import { importActionSubject } from './ImportAction';
@@ -432,8 +431,7 @@ const ImportActionHeader = (props) => {
                   label="标签"
                   style={{ marginBottom }}
                 >
-                  <div style={{ width: 360 }}>
-                    <TagCell
+                  <TagItem
                     id={modelerData?.id}
                     type='model'
                     tags={resoureTagMap?.[modelerData?.id]}
@@ -445,7 +443,6 @@ const ImportActionHeader = (props) => {
                       })
                     }}
                   />
-                  </div>
                 </Form.Item>
               </Col> 
             } 

src/view/Manage/Model/Component/tag-item.jsx

+import React, { useEffect } from 'react'
+import { Tooltip, Tag, Typography, Space, Button, Modal, Spin, Select, } from 'antd'
+import {
+  EllipsisOutlined,
+  PlusOutlined,
+} from '@ant-design/icons'
+import produce from 'immer'
+
+import { showMessage } from '../../../../util'
+import { dispatch } from '../../../../model'
+import { AppContext } from '../../../../App'
+import { TagRender, TagSelectPopup } from './tag-help'
+
+const FC = ({ type, id, did, tags, onChange }) => {
+  const [data, setData] = React.useState([])
+  const [tagSelectPopupParams, setTagSelectPopupParams] = React.useState({
+    visible: false,
+    type: undefined,
+    items: undefined,
+  })
+
+  useEffect(() => {
+    setData(tags)
+  }, [tags])
+
+  const storageChange = (e) => {
+    if (e.key === 'tagChangeEvent' && e.id === id) {
+      getTags()
+    }
+  }
+
+  React.useEffect(() => {
+    window?.addEventListener("storage", storageChange)
+    return () => {
+      window?.removeEventListener("storage", storageChange)
+    }
+  }, [type, id])
+
+  const getTags = () => {
+    dispatch({
+      type: 'tag.getResourceTagIn',
+      payload: {
+        params: {
+          resourceIds: id,
+          includeAll: true,
+          includePrivate: true
+        }
+      },
+      callback: data => {
+        setData(data?.data?.[`${id}`]);
+        onChange?.(data?.data?.[`${id}`]);
+      }
+    });
+  }
+
+  return (
+    <React.Fragment>
+      <TagCell 
+        value={data}
+        onChange={(val) => {
+          getTags()
+        }} 
+        onAdd={(val) => {
+          setTagSelectPopupParams({
+            visible: true,
+            type,
+            items: [{ resourceId: id, catalogId: did, type, }]
+          })
+        }}
+      />
+       <TagSelectPopup 
+        onCancel={() => {
+          setTagSelectPopupParams({
+            visible: false,
+            type: undefined,
+            items: undefined
+          })
+        }}
+        onChange={(val) => {
+          getTags()
+        }}
+        {...tagSelectPopupParams}
+      />
+    </React.Fragment>
+  )
+}
+
+export default FC
+
+function TagCell({ value, readonly = false, onChange, onAdd }) {
+  const maxShowCount = 3
+
+  const [haveMore, _value] = React.useMemo(() => {
+    return [(value??[]).length>maxShowCount, (value??[]).slice(0, maxShowCount)]
+  }, [value])
+
+  const onClose = (e, tag) => {
+    e.preventDefault()
+    if (tag?.id) {
+      dispatch({
+        type: 'tag.deleteTags',
+        payload: {
+          tagInResourceIds: tag?.id
+        },
+        callback: () => {
+          showMessage('success', '删除成功');
+          onChange?.()
+        }
+      })
+    }
+  }
+
+  return (
+    <Space size={4}>
+    {
+      _value?.map((item, index) => <TagRender 
+        key={item.id} 
+        data={item} 
+        closable={!readonly&&item?.deleteAble}
+        onClose={(e) => {
+          onClose(e, item)
+        }}
+        style={{ marginRight: 0 }}
+      />)
+    }
+    {
+      haveMore && <Tooltip title={
+        <Space wrap={true}>
+          {
+            value?.map((item, index) => <TagRender 
+              key={item.id} 
+              data={item} 
+              closable={!readonly&&item?.deleteAble}
+              onClose={(e) => {
+                onClose(e, item)
+              }}
+            />)
+          }
+        </Space>
+      }>
+        <Button size='small' icon={<EllipsisOutlined />}></Button>
+      </Tooltip>
+    }
+    {
+      !readonly && <Button size='small' icon={<PlusOutlined />} onClick={(e) => {
+        e.stopPropagation()
+        onAdd?.()
+      }}></Button>
+    }
+    </Space>
+  )
+}
\ No newline at end of file