模型标签过滤

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

@@ -134,7 +134,7 @@ const ModelNameColumn = (props) => {
 }
 
 const ModelTable = (props) => {
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds, visibleColNames } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds, visibleColNames, tagSelectOptions } = props;
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
@@ -360,6 +360,25 @@ const ModelTable = (props) => {
     }
   })
 
+  const tableData = useMemo(() => {
+    if ((tagSelectOptions??[]).length === 0) {
+      return data
+    } else if (resoureTagMap) {
+      const ids = []
+      for (const key in resoureTagMap) {
+        for (const item of resoureTagMap[key]) {
+          const index = (tagSelectOptions??[]).filter(_item => item.tagId === _item.id)
+          if (index !== -1) {
+            ids.push(key)
+            break
+          }
+        }
+      }
+
+      return (data??[]).filter(item => ids.indexOf(item.id) !== -1)
+    }
+  }, [data, tagSelectOptions, resoureTagMap])
+
   const getResourceTag = () => {
     const ids = (data??[]).map(item => item.id);
     if (ids.length > 0) {
@@ -585,7 +604,7 @@ const ModelTable = (props) => {
         <Paragraph style={{ overflow: 'hidden' }}>
           <Text className='title-color'  ellipsis={true}>
             总数：
-            <Text className='text-color'>{(data||[]).length}</Text>
+            <Text className='text-color'>{(tableData||[]).length}</Text>
           </Text>
         </Paragraph>
         <Paragraph style={{ overflow: 'hidden', marginLeft: 20 }}>
@@ -603,7 +622,7 @@ const ModelTable = (props) => {
         // rows={Array.from({ length: 10000 }).map((_, i) => ({
         //   name: `test${i}`,
         // }))}
-        rows={data||[]}
+        rows={tableData||[]}
         rowHeight={51}
         rowClassName={(row) => {
           return (row.id === anchorId)?'anchor':''

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

 import React, { useEffect } from 'react'
-import { Tooltip, Tag, Typography, Space, Button, Modal, Spin } from 'antd'
+import { Tooltip, Tag, Typography, Space, Button, Modal, Spin, Select, } from 'antd'
 import {
   EllipsisOutlined,
   PlusOutlined,
 } from '@ant-design/icons'
+import produce from 'immer'
+
 import DataQuality, { DataQualityFeighTagSelect } from '../../../QianKun/data-quality'
 import { showMessage } from '../../../../util'
 import { dispatch } from '../../../../model'
@@ -214,7 +216,73 @@ export function TagCell({ value, readonly = false, onChange, onAdd }) {
   )
 }
 
-export function TagSelectPopup({ visible, type, items, onCancel, onChange }) {
+export function TagSelect({ options, onChange }) {
+  const [popupParams, setPopupParams] = React.useState({
+    visible: false,
+    value: undefined
+  })
+
+  return (
+    <React.Fragment>
+      <Select
+        mode='multiple'
+        placeholder='请选择标签'
+        tagRender={(props) => {
+          const { value } = props
+          const index = (options??[]).findIndex(item => item.value === value)
+          if (index !== -1) {
+            return <TagRender data={options[index]} {...props} />
+          }
+
+          return <React.Fragment></React.Fragment>
+        }}
+        onDropdownVisibleChange={(open) => {
+          if (open) {
+            setPopupParams({
+              visible: true,
+              value: options
+            })
+          }
+        }}
+        open={false}
+        style={{ width: 300 }}
+        value={(options??[]).map(item => item.value)}
+        options={options}
+        allowClear
+        onChange={(newValue) => {
+          const newOptions = (options??[]).filter(item => newValue.indexOf(item.value) !== -1)
+
+          onChange?.(newOptions)
+        }}
+        maxTagCount='responsive'
+      />
+
+      <TagSelectPopup
+        tagSearchType='tag-search'
+        value={options}
+        onCancel={(value) => {
+          setPopupParams({
+            visible: false,
+            value: undefined
+          })
+        }}
+        onChange={(value) => {
+          const newOptions = produce(value??[], (draft) => {
+            draft?.forEach(item => {
+              item.value = item.id
+              item.label = item.name
+            })
+          })
+
+          onChange?.(newOptions)
+        }}
+        {...popupParams}
+      />
+    </React.Fragment>
+  )
+}
+
+export function TagSelectPopup({ visible, type, tagSearchType, items, onCancel, onChange }) {
   const [waiting, setWaiting] = React.useState(false)
   const [selectedRows, setSelectedRows] = React.useState([])
   const [showDataQuality, setShowDataQuality] = React.useState(false)
@@ -241,6 +309,14 @@ export function TagSelectPopup({ visible, type, items, onCancel, onChange }) {
         showMessage('warn', '请先选择标签')
         return
       }
+
+      if (tagSearchType === 'tag-search') {
+        onChange?.(selectedRows)
+        close()
+
+        return
+      }
+
       setWaiting(true)
       dispatch({
         type: 'tag.addTags',

src/view/Manage/Model/index.jsx

@@ -22,6 +22,7 @@ import DebounceInput from './Component/DebounceInput';
 import ColSettingModal from './Component/ColSettingModal';
 import PermissionButton from '../../../util/Component/PermissionButton';
 import SelectSearchProperties from './Component/select-search-properties';
+import { TagSelect } from './Component/tag-help';
 
 import './index.less';
 
@@ -68,6 +69,7 @@ class Model extends React.Component {
       permissions: [],
       selectSearchPropertiesVisible: false,
       searchProperties: [],
+      tagSelectOptions: [],
     }
   }
   
@@ -656,6 +658,12 @@ class Model extends React.Component {
             </Space>
 
             <Space>   
+              <TagSelect
+                options={this.state.tagSelectOptions}
+                onChange={(val) => {
+                  this.setState({ tagSelectOptions: val })
+                }}
+              />
               <InputDebounce 
                 placeholder="通过模型名称全文搜索" 
                 allowClear 
@@ -675,6 +683,7 @@ class Model extends React.Component {
               catalogId={catalogId} 
               view={currentView}
               data={filterTableData} 
+              tagSelectOptions={this.state.tagSelectOptions}
               modelState={currentModelState}
               offset={offset}
               keyword={keyword}