对比范围

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

 import React from 'react'
-import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio, Switch, TimePicker, Tooltip } from 'antd'
+import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio, Switch, TimePicker, Tooltip, TreeSelect } from 'antd'
 import { useClickAway } from 'ahooks'
 import moment from 'moment'
+import produce from 'immer'
 
 import { dispatch } from '../../../model'
 import Table from '../../../util/Component/Table'
@@ -14,9 +15,10 @@ const FC = (props) => {
   const [loading, setLoading] = React.useState(false)
   const [task, setTask] = React.useState()
 
-  const basicFormRef = React.useRef(null)
-  const strategyRef = React.useRef(null)
-  const scheduleFormRef = React.useRef(null)
+  const basicFormRef = React.useRef()
+  const rangeRef = React.useRef()
+  const strategyRef = React.useRef()
+  const scheduleFormRef = React.useRef()
 
   const title = React.useMemo(() => {
     if (type === 'add') return '新增任务'
@@ -132,6 +134,8 @@ const FC = (props) => {
       <Spin spinning={loading || waiting}>
         <Header title='基本信息' />
         <BasicForm ref={basicFormRef} type={type} task={task} />
+        <Header title='对比范围' />
+        <Range ref={rangeRef} />
         <Header title='对比策略' />
         <Strategy ref={strategyRef} type={type} task={task} />
         <Header title='调度配置' />
@@ -354,6 +358,108 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
   )
 })
 
+const Range = React.forwardRef(function ({ type, task }, ref) {
+  const [ranges, setRanges] = React.useState()
+  const [isAdding, setAdding] = React.useState(false)
+  const [loadingModelTree, setLoadingModelTree] = React.useState(false)
+  const [modelTreeData, setModelTreeData] = React.useState()
+
+  const [form] = Form.useForm()
+
+  React.useEffect(() => {
+    getModelTree()
+  }, [])
+
+  const [modelTreeData1, modelTreeList] = React.useMemo(() => {
+    if (modelTreeData) {
+      const newTreeList = []
+
+      const newTreeData = produce(modelTreeData, draft => {
+        const setNode = (g) => {
+          g.key = g.id
+          g.title = g.name
+          g.value = g.id
+          g.children?.forEach((child) => {
+            setNode(child)
+          })
+        }
+
+        for (let item of draft??[]) {
+          setNode(item)
+        }
+      })
+
+      newTreeList.push(treeData)
+      generateList(treeData?.children, newTreeList)
+
+      return [
+        [
+          newTreeData
+        ],
+        newTreeList
+      ] 
+    }
+
+    return [[], []]
+  }, [modelTreeData])
+
+  const getModelTree = () => {
+    setLoadingModelTree(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: (data) => {
+        setLoadingModelTree(false)
+        setModelTreeData(data?.subCatalogs)
+      },
+      erorr: () => {
+        setLoadingModelTree(false)
+      }
+    })
+  }
+
+  const onAddClick = () => {
+    setAdding(true)
+  }
+
+  return (
+    <div>
+      {
+        type !== 'detail' && <div className='mb-3'>
+          <Button onClick={onAddClick}>新建</Button>
+        </div>
+      }
+      {
+        isAdding && <Form
+          form={form}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}
+          autoComplete="off"
+          // onValuesChange={onValuesChange}
+        >
+          <Row gutter={15}>
+            <Col span={12}>
+              <Form.Item
+                label="数据模型范围"
+                name="modelCatalogId"
+                style={{ marginBottom }}
+                rules={[{ required: true, message: '请选择任务分组!' }]}
+              >
+                <TreeSelect
+                  loading={loadingModelTree}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  treeData={treeData1}
+                  placeholder="请选择分组"
+                  treeDefaultExpandAll
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      }
+    </div>
+  )
+})  
+
 const Strategy = React.forwardRef(function ({ type, task }, ref) {
   const [loadingPropertyTypes, setLoadingPropertyTypes] = React.useState(false)
   const [propertyTypes, setPropertyTypes] = React.useState()