模型对比范围多选

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

@@ -97,7 +97,7 @@ const FC = (props) => {
           payload: {
             data: {
               ...basicRows,
-              jobCatalogItems: rangeRows,
+              ...rangeRows,
               strategyItemPropertyTypes: strategyRows,
               jobSchedule: scheduleRows,
             }
@@ -116,7 +116,7 @@ const FC = (props) => {
             data: {
               ...task, 
               ...basicRows,
-              jobCatalogItems: rangeRows,
+              ...rangeRows,
               strategyItemPropertyTypes: strategyRows,
               jobSchedule: scheduleRows,
             }
@@ -390,28 +390,26 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
 const ModelRangeItem = ({ value, onChange }) => {
   const [loading, setLoading] = React.useState(false)
   const [treeData, setTreeData] = React.useState()
-  const [treeSelectedKey, setTreeSelectedKey] = React.useState()
+  const [treeSelectedKeys, setTreeSelectedKeys] = React.useState()
 
   React.useEffect(() => {
     getTreeData()
   }, [])
 
   React.useEffect(() => {
-    if (treeSelectedKey) {
-      const treeIndex = (treeList??[]).findIndex(item => item.key === treeSelectedKey)
-
-      if (treeIndex !== -1) {
-        onChange?.({
-          modelCatalogIdList: treeList[treeIndex].ids??[],
-          modelCatalogNameList: treeList[treeIndex].names??[]
+    const newData = []
+    for (const key of treeSelectedKeys??[]) {
+      const index = (treeList??[]).findIndex(item => item.key === key)
+      if (index !== -1) {
+        newData.push({
+          modelCatalogIdList: treeList[index].ids??[],
+          modelCatalogNameList: treeList[index].names??[]
         })
-      } else {
-        onChange?.()
       }
-    } else {
-      onChange?.()
     }
-  }, [treeSelectedKey])
+
+    onChange?.(newData)
+  }, [treeSelectedKeys])
 
   const generateList = (data, list, ids, names) => {
     (data||[]).forEach(node => {
@@ -474,17 +472,18 @@ const ModelRangeItem = ({ value, onChange }) => {
     })
   }
 
-  const onTreeSelect = (selectedKeys) => {
-    setTreeSelectedKey(selectedKeys)
+  const onTreeChange = (selectedKeys) => {
+    setTreeSelectedKeys(selectedKeys)
   }
 
   return (
     <TreeSelect
+      multiple
       loading={loading}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       treeData={treeData1}
-      value={treeSelectedKey?[treeSelectedKey]:undefined}
-      onSelect={onTreeSelect}
+      value={treeSelectedKeys??[]}
+      onChange={onTreeChange}
       placeholder="请选择模型范围"
     />
   )
@@ -496,7 +495,7 @@ const MetadataRangeItem = ({ value, onChange }) => {
   const [currentDomainId, setCurrentDomainId] = React.useState()
   const [loadingTreeData, setLoadingTreeData] = React.useState(false)
   const [treeData, setTreeData] = React.useState()
-  const [treeSelectedKey, setTreeSelectedKey] = React.useState()
+  const [treeSelectedKeys, setTreeSelectedKeys] = React.useState()
 
   React.useEffect(() => {
     getDomains()
@@ -509,28 +508,31 @@ const MetadataRangeItem = ({ value, onChange }) => {
   }, [currentDomainId])
 
   React.useEffect(() => {
-    if (currentDomainId && treeSelectedKey) {
+    if (currentDomainId) {
+      const newData = []
+
       const domainIndex = (domains??[]).findIndex(item => item.domainId === currentDomainId)
-      const treeIndex = (treeList??[]).findIndex(item => item.key === treeSelectedKey)
-
-      if (domainIndex !== -1 && treeIndex !== -1) {
-        onChange?.({
-          metadataCatalogIdList: [
-            `${domains[domainIndex].domainId}`,
-            ...treeList[treeIndex].ids??[],
-          ],
-          metadataCatalogNameList: [
-            domains[domainIndex].domainName,
-            ...treeList[treeIndex].names??[],
-          ]
-        })
-      } else {
-        onChange?.()
+      for (const key of treeSelectedKeys??[]) {
+        const index = (treeList??[]).findIndex(item => item.key === key)
+        if (domainIndex!==-1 && index !== -1) {
+          newData.push({
+            metadataCatalogIdList: [
+              `${domains[domainIndex].domainId}`,
+              ...treeList[index].ids??[],
+            ],
+            metadataCatalogNameList: [
+              domains[domainIndex].domainName,
+              ...treeList[index].names??[]
+            ]
+          })
+        }
       }
+
+      onChange?.(newData)
     } else {
       onChange?.()
     }
-  }, [currentDomainId, treeSelectedKey])
+  }, [currentDomainId, treeSelectedKeys])
 
   const generateList = (data, list, ids, names) => {
     (data||[]).forEach(node => {
@@ -591,7 +593,6 @@ const MetadataRangeItem = ({ value, onChange }) => {
             item.title = item.catalogName
             item.value = `${item.catalogId}`
             item.idStr = `${item.catalogId}`
-            item.disabled = true
             item.children = []
 
             for (let child of item.scopes??[]) {
@@ -599,7 +600,6 @@ const MetadataRangeItem = ({ value, onChange }) => {
               child.title = child.scopeName
               child.value = `${item.catalogId}-${child.scopeId}`
               child.idStr = `${child.scopeId}`
-              child.disabled = true
               item.children.push(child)
             }
           }
@@ -616,11 +616,11 @@ const MetadataRangeItem = ({ value, onChange }) => {
   const onDomainChange = (val) => {
     setCurrentDomainId(val)
     setTreeData()
-    setTreeSelectedKey()
+    onChange?.()
   }
 
-  const onTreeSelect = (selectedKeys) => {
-    setTreeSelectedKey(selectedKeys)
+  const onTreeChange = (selectedKeys) => {
+    setTreeSelectedKeys(selectedKeys)
   }
 
   const updateTreeData = (list, key, children) =>
@@ -692,7 +692,6 @@ const MetadataRangeItem = ({ value, onChange }) => {
               value: item._id,
               scopeId: node?.scopeId,
               idStr: item._id,
-              disabled: true,
               ...item
             }))
 
@@ -709,8 +708,6 @@ const MetadataRangeItem = ({ value, onChange }) => {
       }
     });
 
-  console.log('treeSelectedKey', treeSelectedKey)
-
   return (
     <Row gutter={15}>
       <Col span={6}>
@@ -725,9 +722,10 @@ const MetadataRangeItem = ({ value, onChange }) => {
       </Col>
       <Col span={18}>
         <TreeSelect
+          multiple
           loading={loadingTreeData}
-          value={treeSelectedKey?[treeSelectedKey]:undefined}
-          onSelect={onTreeSelect}
+          value={treeSelectedKeys??[]}
+          onChange={onTreeChange}
           dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
           treeData={treeData}
           loadData={onLoadData}
@@ -753,7 +751,10 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
   }), [ranges, isAdding])
 
   React.useEffect(() => {
-    setRanges(task?.jobCatalogItems)
+    setRanges({
+      jobMetadataCatalogItems: task?.jobMetadataCatalogItems??[],
+      jobModelCatalogItems: task?.jobModelCatalogItems??[],
+    })
   }, [task])
 
   const onAddClick = () => {
@@ -763,21 +764,14 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
   }
 
   const onOkClick = async () => {
-    rangesRef.current = ranges??[]
     if (!isAdding) return 
 
     try {
       const rows = await form.validateFields()
-
-      let newRanges = [...ranges??[]]
-      newRanges = [...newRanges, {
-        ...rows.modelRange,
-        ...rows.metadataRange,
-      }]
-
-      setRanges(newRanges)
-      rangesRef.current = newRanges
-      
+      setRanges({
+        ...ranges,
+        ...rows,
+      })
       setAdding(false)
     } catch(e) {
       throw new Error()
@@ -789,11 +783,13 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
   }
 
   const onRangeDeleteClick = (index) => {
-    const newRanges = [...ranges??[]]
-    newRanges.splice(index, 1)
-    setRanges(newRanges)
+    // const newRanges = [...ranges??[]]
+    // newRanges.splice(index, 1)
+    // setRanges(newRanges)
   }
 
+  rangesRef.current = ranges
+
   return (
     <div>
       {
@@ -812,7 +808,7 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
             <Col span={10}>
               <Form.Item
                 label="数据模型范围"
-                name="modelRange"
+                name="jobModelCatalogItems"
                 rules={[{ required: true, message: '请选择模型范围!' }]}
               >
                 <ModelRangeItem />
@@ -821,7 +817,7 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
             <Col span={10}>
               <Form.Item
                 label="元数据范围"
-                name="metadataRange"
+                name="jobMetadataCatalogItems"
                 rules={[{ required: true, message: '请选择元数据范围!' }]}
               >
                 <MetadataRangeItem />
@@ -837,18 +833,18 @@ const Range = React.forwardRef(function ({ type, task }, ref) {
         </Form>
       }
       {
-        (ranges??[]).map((item, index) => {
-          return (
-            <Row className={type==='detail'?'mb-2':'mb-1'} key={generateUUID()} align='middle' gutter={15}>
-              <Col span={type==='detail'?24:12}>
-              {`【模型】${(item.modelCatalogNameList??[]).join('/')} -【元数据】${(item.metadataCatalogNameList??[]).join('/')}`}
-              </Col>
-              {
-                type !== 'detail' && <Button type='link' onClick={() => onRangeDeleteClick(index)}>删除</Button>
-              }
-            </Row>
-          )
-        })
+        // (ranges??[]).map((item, index) => {
+        //   return (
+        //     <Row className={type==='detail'?'mb-2':'mb-1'} key={generateUUID()} align='middle' gutter={15}>
+        //       <Col span={type==='detail'?24:12}>
+        //       {`【模型】${(item.modelCatalogNameList??[]).join('/')} -【元数据】${(item.metadataCatalogNameList??[]).join('/')}`}
+        //       </Col>
+        //       {
+        //         type !== 'detail' && <Button type='link' onClick={() => onRangeDeleteClick(index)}>删除</Button>
+        //       }
+        //     </Row>
+        //   )
+        // })
       }
     </div>
   )