任务详情

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

 import React from 'react'
 
-import { Space, Button, Select, Input, Tooltip, Modal } from 'antd'
+import { Space, Button, Select, Input, Tooltip, Modal, Row, Typography } from 'antd'
 import { defaultPage } from '../../../util/hooks/page'
 import Table from '../../../util/Component/Table'
 import { dispatch } from '../../../model'
-import { paginate, showMessage } from '../../../util'
+import { generateUUID, paginate, showMessage } from '../../../util'
 import UpdateTask from './update-task'
 
 import '../AssetTask/index.less'
@@ -70,6 +70,19 @@ const FC = (props) => {
     {
       title: '任务名称',
       dataIndex: 'jobName',
+      render: (text, record) => (
+        <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>
+            <a onClick={() => {
+              setUpdateTaskParams({
+                visible: true,
+                type: 'detail',
+                item: record, 
+              })
+            }}>{text}</a>
+          </Typography.Text>
+        </Tooltip>
+      )
     },
     {
       title: '任务描述',
@@ -80,23 +93,66 @@ const FC = (props) => {
       dataIndex: 'jobStatusType',
       render: (_, record) => record.jobStatusType?.name
     },
-    // {
-    //   title: '对比范围',
-    //   dataIndex: 'compareRange',
-    // },
+    {
+      title: '对比范围',
+      dataIndex: 'jobCatalogItems',
+      render: (_, record) => {
+        return (
+          <Tooltip title={
+            <div>
+              {
+                (record.jobCatalogItems??[]).map(item => (
+                  <Row key={generateUUID()}>
+                  {`【模型】${(item.modelCatalogNameList??[]).join('/')} -【元数据】${(item.metadataCatalogNameList??[]).join('/')}`}
+                  </Row>
+                ))
+              }
+            </div>
+          }>
+            <Typography.Text ellipsis={true}>
+            {
+              (record.jobCatalogItems??[]).map(item => `【模型】${(item.modelCatalogNameList??[]).join('/')} -【元数据】${(item.metadataCatalogNameList??[]).join('/')}`).toString()
+            }
+            </Typography.Text>
+          </Tooltip>
+        )
+      }
+    },
     {
       title: '模型状态',
       dataIndex: 'modelStatusTypes',
       render: (_, record) => (record.modelStatusTypes??[]).map(item => item.name).toString()
     },
-    // {
-    //   title: '对比策略',
-    //   dataIndex: 'strategyItemPropertyTypes',
-    // },
-    // {
-    //   title: '调度配置',
-    //   dataIndex: 'jobSchedule',
-    // },
+    {
+      title: '对比策略',
+      dataIndex: 'strategyItemPropertyTypes',
+      render: (_, record) => {
+        return (
+          <Tooltip title={
+            <div>
+              {
+                (record.strategyItemPropertyTypes??[]).map(item => (
+                  <Row key={generateUUID()}>
+                  {`${item.modelType?.cnName??''}${item.operatorType?.name??''}${item.metadataType?.cnName??''}`}
+                  </Row>
+                ))
+              }
+            </div>
+          }>
+            <Typography.Text ellipsis={true}>
+            {
+              (record.strategyItemPropertyTypes??[]).map(item => `${item.modelType?.cnName??''}${item.operatorType?.name??''}${item.metadataType?.cnName??''}`).toString()
+            }
+            </Typography.Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '调度配置',
+      dataIndex: 'jobSchedule',
+      render: (_, record) => record.jobSchedule?.scheduleName
+    },
     {
       title: '负责人',
       dataIndex: 'ownerName',

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

@@ -14,6 +14,7 @@ const FC = (props) => {
   const [waiting, setWaiting] = React.useState(false)
   const [loading, setLoading] = React.useState(false)
   const [task, setTask] = React.useState()
+  const [animating, setAnimating] = React.useState(true)
 
   const basicFormRef = React.useRef()
   const rangeRef = React.useRef()
@@ -29,6 +30,14 @@ const FC = (props) => {
   }, [type])
 
   React.useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        setAnimating(false)
+      }, 300)
+    }
+  }, [visible])
+
+  React.useEffect(() => {
     if (visible && item?.id) {
       getTask()
     }
@@ -52,6 +61,7 @@ const FC = (props) => {
   }
 
   const close = (refresh = false) => {
+    setAnimating(true)
     setWaiting(false)
     setLoading(false)
     setTask()
@@ -141,20 +151,24 @@ const FC = (props) => {
       visible={visible}
       footer={(type==='detail') ? null : footer}
       width='90%'
-      bodyStyle={{ padding: '15px 15px 0px 15px', overflowX: 'auto', maxHeight: '80vh' }}
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
       title={title}
       centered destroyOnClose
       onCancel={() => { close() }}
     >
       <Spin spinning={loading || waiting}>
-        <Header title='基本信息' />
-        <BasicForm ref={basicFormRef} type={type} task={task} />
-        <Header title='对比范围' />
-        <Range ref={rangeRef} type={type} task={task} />
-        <Header title='对比策略' />
-        <Strategy ref={strategyRef} type={type} task={task} />
-        <Header title='调度配置' />
-        <ScheduleForm ref={scheduleFormRef} type={type} task={task} />
+        {
+          !animating && <React.Fragment>
+            <Header title='基本信息' />
+            <BasicForm ref={basicFormRef} type={type} task={task} />
+            <Header title='对比范围' />
+            <Range ref={rangeRef} type={type} task={task} />
+            <Header title='对比策略' />
+            <Strategy ref={strategyRef} type={type} task={task} />
+            <Header title='调度配置' />
+            <ScheduleForm ref={scheduleFormRef} type={type} task={task} />
+          </React.Fragment>
+        }
       </Spin>
     </Modal>
   )
@@ -1095,32 +1109,38 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
   return (
     <Spin spinning={loadingPropertyTypes}>
       <div>
-        <Space className='mb-3'>
-          <Button onClick={onAddClick}>新建</Button>
-          <Tooltip title={(selectedRows??[]).length===0?'请先选择对比策略':''}>
-            <Button disabled={(selectedRows??[]).length===0} onClick={onBatchDeleteClick}>删除</Button>
-          </Tooltip>
-        </Space>
+        {
+          type !== 'detail' && <Space className='mb-3'>
+            <Button onClick={onAddClick}>新建</Button>
+            <Tooltip title={(selectedRows??[]).length===0?'请先选择对比策略':''}>
+              <Button disabled={(selectedRows??[]).length===0} onClick={onBatchDeleteClick}>删除</Button>
+            </Tooltip>
+          </Space>
+        }
         <div ref={tableRef}>
         <Form onValuesChange={onValuesChange} form={form} component={false}>
           <Table
             rowKey={(record) => record?.modelType?.name}
-            extraColWidth={32}
+            extraColWidth={type!=='detail'?32:0}
             columns={mergedColumns??[]}
             dataSource={tableData??[]}
             bodyCell={EditableCell}
-            rowSelection={{
+            rowSelection={type!=='detail' ? {
               selectedRowKeys: (selectedRows??[]).map(item => item.modelType?.name),
               onChange: (selectedRowKeys, selectedRows) => {
                 setSelectedRows(selectedRows)
               },
-            }}
+            } : null}
             onRowClick={(event, record) => {
+              if (type === 'detail') return
+
               event.stopPropagation()
               onEditClick(record)
             }}
             pagination={false}
             shouldRowContextMenu={(record) => {
+              if (type === 'detail') return false
+
               setRightRow(record)
               return true
             }}