模型对比范围

src/view/Manage/ModelCompare/task-manage.jsx

@@ -5,7 +5,7 @@ import { defaultPage } from '../../../util/hooks/page'
 import Table from '../../../util/Component/Table'
 import { dispatch } from '../../../model'
 import { generateUUID, paginate, showMessage, showNotifaction } from '../../../util'
-import UpdateTask from './update-task'
+import UpdateTask, { Range } from './update-task'
 import ColConfig from './col-config'
 
 import '../AssetTask/index.less'
@@ -108,29 +108,12 @@ const FC = (props) => {
       dataIndex: 'jobCatalogItems',
       render: (_, record) => {
         return (
-          <Tooltip title={
-            <div>
-              {
-                record?.jobModelCatalogItems?.map((item, index) => <Row key={generateUUID()}>
-                    <Typography.Text>
-                      {`【模型】${(item.modelCatalogNameList??[]).join('/')}`}
-                    </Typography.Text>
-                  </Row>
-                )
-              }
-              {
-                record?.jobMetadataCatalogItems?.map((item, index) => <Row key={generateUUID()}>
-                    <Typography.Text>
-                      {`【元数据】${(item.metadataCatalogNameList??[]).join('/')}`}
-                    </Typography.Text>
-                  </Row>
-                )
-              }
-            </div>
-          }>
+          <Tooltip title={<Range task={record} type='detail' />}>
             <Typography.Text ellipsis={true}>
-            { record?.jobModelCatalogItems?.map((item, index) => `【模型】${(item.modelCatalogNameList??[]).join('/')}`).toString() }
-            { record?.jobMetadataCatalogItems?.map((item, index) => `【元数据】${(item.metadataCatalogNameList??[]).join('/')}`).toString() }
+            { (record?.jobModelCatalogItems??[]).length > 0 && '【模型范围】' }
+            { record?.jobModelCatalogItems?.map((item, index) => `${(item.modelCatalogNameList??[]).join('/')}`).toString() }
+            { (record?.jobModelCatalogItems??[]).length > 0 && '【元数据范围】' }
+            { record?.jobMetadataCatalogItems?.map((item, index) => `${(item.metadataCatalogNameList??[]).join('/')}`).toString() }
             </Typography.Text>
           </Tooltip>
         )

src/view/Manage/ModelCompare/update-task.jsx

@@ -3,6 +3,7 @@ import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Che
 import { useClickAway } from 'ahooks'
 import moment from 'moment'
 import produce from 'immer'
+import { CloseOutlined } from '@ant-design/icons';
 
 import { dispatch } from '../../../model'
 import Table, { generateId } from '../../../util/Component/Table'
@@ -736,7 +737,7 @@ const MetadataRangeItem = ({ value, onChange }) => {
   )
 }
 
-const Range = React.forwardRef(function ({ type, task }, ref) {
+export const Range = React.forwardRef(function ({ type, task }, ref) {
   const [ranges, setRanges] = React.useState()
   const [isAdding, setAdding] = React.useState(false)
 
@@ -832,36 +833,60 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
           </Row>
         </Form>
       }
-      {
-        ranges?.jobModelCatalogItems?.map((item, index) => <Row key={generateUUID()}>
-            <Typography.Text>
-              {`【模型】${(item.modelCatalogNameList??[]).join('/')}`}
-              {
-                type !== 'detail' && <Button type='link' onClick={() => {
+      <Row gutter={10}>
+        <Col flex='0 0 110px'>
+        {
+          (ranges?.jobModelCatalogItems??[]).length > 0 && <span>【模型范围】</span>
+        }
+        </Col>
+        <Col flex='1' style={{ overflow: 'hidden' }}>
+          {
+            type === 'detail' ? <span>{ranges?.jobModelCatalogItems?.map((item) => (item.modelCatalogNameList??[]).join('/')).toString()}</span> : <Space wrap>
+            {
+              ranges?.jobModelCatalogItems?.map((item, index) => <Tooltip title={(item.modelCatalogNameList??[]).join('/')}>
+                <Button key={generateUUID()} size='small' onClick={() => {
                   const newJobModelCatalogItems = [...ranges?.jobModelCatalogItems??[]]
                   newJobModelCatalogItems.splice(index, 1)
                   setRanges({...ranges, jobModelCatalogItems: newJobModelCatalogItems})
-                }}>删除</Button>
-              }
-            </Typography.Text>
-          </Row>
-        )
-      }
-      {
-        ranges?.jobMetadataCatalogItems?.map((item, index) => <Row key={generateUUID()}>
-            <Typography.Text>
-              {`【元数据】${(item.metadataCatalogNameList??[]).join('/')}`}
-              {
-                type !== 'detail' && <Button type='link' onClick={() => {
-                  const newJobMetadataCatalogItems = [...ranges?.jobMetadataCatalogItems??[]]
-                  newJobMetadataCatalogItems.splice(index, 1)
-                  setRanges({...ranges, jobMetadataCatalogItems: newJobMetadataCatalogItems})
-                }}>删除</Button>
-              }
-            </Typography.Text>
-          </Row>
-        )
-      }
+                }}>
+                  <Typography.Text ellipsis={true} style={{ maxWidth: 600 }}>
+                    {(item.modelCatalogNameList??[]).join('/')}
+                  </Typography.Text>
+                  <CloseOutlined />
+                </Button>
+              </Tooltip>
+            )}
+            </Space>
+          }
+        </Col>
+      </Row>
+      <Row className='mt-2' gutter={10}>
+        <Col flex='0 0 110px'>
+        {
+          (ranges?.jobMetadataCatalogItems??[]).length > 0 && <span>【元数据范围】</span>
+        }
+        </Col>
+        <Col flex='1' style={{ overflow: 'hidden' }}>
+        {
+          type === 'detail' ? <span>{ranges?.jobMetadataCatalogItems?.map((item) => (item.metadataCatalogNameList??[]).join('/')).toString()}</span> : <Space wrap>
+          {
+            ranges?.jobMetadataCatalogItems?.map((item, index) => <Tooltip title={(item.metadataCatalogNameList??[]).join('/')}>
+              <Button key={generateUUID()} size='small' onClick={() => {
+                const newJobMetadataCatalogItems = [...ranges?.jobMetadataCatalogItems??[]]
+                newJobMetadataCatalogItems.splice(index, 1)
+                setRanges({...ranges, jobMetadataCatalogItems: newJobMetadataCatalogItems})
+              }}>
+                <Typography.Text ellipsis={true} style={{ maxWidth: 600 }}>
+                  {(item.metadataCatalogNameList??[]).join('/')}
+                </Typography.Text>
+                <CloseOutlined />
+              </Button>
+            </Tooltip>
+          )}
+          </Space>
+        }
+        </Col>
+      </Row>
     </div>
   )
 })