分支新增模型

src/view/Manage/Model/Component/branch-add-model.jsx

+import React from "react"
+import { Modal, Button, Tree, Spin, } from "antd"
+import produce from "immer"
+
+import { dispatch } from '../../../../model'
+
+const FC = ({ visible, onCancel }) => {
+  const basicRef = React.useRef()
+
+  const close = (val = null) => {
+    onCancel?.(val)
+  }
+
+  const save = () => {
+    
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key='cancel'
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key='save' type='primary'
+        onClick={() => save()}
+      >保存</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      title='选择物理平台'
+      visible={visible}
+      footer={footer}
+      width={400}
+      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Basic ref={basicRef} />
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({}, ref) {
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+  const [node, setNode] = React.useState()
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.id;
+          g.title = g.name;
+          g.children = [];
+          
+          (g.subCatalogs??[]).forEach((child) => {
+            setNode(child)
+            g.children.push(child)
+          });
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+
+      return newTreeData
+    }
+
+    return undefined
+  }, [treeData])
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: (data) => {
+        setLoadingTreeData(false)
+
+        const newTreeData = produce(data?.subCatalogs??[], draft => {
+          const setNode = (g) => {
+            g.key = g.id;
+            g.title = g.name;
+            g.children = [];
+            
+            (g.subCatalogs??[]).forEach((child) => {
+              setNode(child)
+              g.children.push(child)
+            });
+          }
+  
+          draft.forEach((child) => {
+            setNode(child)
+          })
+        })
+        setTreeData(newTreeData)
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    })  
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      return
+    }
+
+    setNode(selectedNodes[0])
+  }
+
+  return (
+    <Spin spinning={loadingTreeData}>
+      <Tree
+        className='tree'
+        showLine 
+        showIcon={false} 
+        autoExpandParent={autoExpandParent}
+        treeData={treeData1}
+        selectedKeys={node?[node.id]:[]}
+        expandedKeys={expandedKeys}
+        onSelect={onTreeSelect}
+        onExpand={onTreeExpand}
+      />
+    </Spin>
+  )
+})
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -23,6 +23,7 @@ import ColSettingModal from './Component/ColSettingModal';
 import PermissionButton from '../../../util/Component/PermissionButton';
 import SelectSearchProperties from './Component/select-search-properties';
 import { TagSelect, TagSelectPopup } from './Component/tag-help';
+import BranchAddModel from './Component/branch-add-model'
 
 import './index.less';
 
@@ -77,6 +78,9 @@ class Model extends React.Component {
       },
       batchAddTagChange: false,
       rootNode: undefined,
+      branchAddParams: {
+        visible: false,
+      },
     }
   }
   
@@ -657,7 +661,17 @@ class Model extends React.Component {
             <Space>
               <PermissionButton 
                 defaultPermission={canAdd} 
-                onClick={() => { this.setState({ importModalVisible: true }); }}
+                onClick={() => { 
+                  if (currentView === 'branch') {
+                    this.setState({ 
+                      branchAddParams: {
+                        visible: true,
+                      }
+                    }); 
+                  } else {
+                    this.setState({ importModalVisible: true }); 
+                  }
+                }}
               >
                 新建
               </PermissionButton>
@@ -680,7 +694,8 @@ class Model extends React.Component {
                 送审
               </PermissionButton>
 
-              <PermissionButton 
+              {
+                currentView !== 'branch' && <PermissionButton 
                   defaultPermission={canChangeCatalog} 
                   tip={(selectModelerIds||[]).length===0?'请先选择模型':''}
                   onClick={this.onRecatalogBtnClick} 
@@ -688,6 +703,7 @@ class Model extends React.Component {
                 >
                   变更目录
                 </PermissionButton>
+              }
             
               <PermissionButton 
                 defaultPermission={canDelete} 
@@ -698,7 +714,8 @@ class Model extends React.Component {
                 删除
               </PermissionButton>
 
-              <Tooltip title={this.state.canBatchAddTag?((selectModelerIds||[]).length===0?'请先选择已发布的模型':''):'只有已发布的模型才能打标签'}>
+              {
+                currentView !== 'branch' &&  <Tooltip title={this.state.canBatchAddTag?((selectModelerIds||[]).length===0?'请先选择已发布的模型':''):'只有已发布的模型才能打标签'}>
                   <Button 
                     onClick={() => {
                       this.setState({
@@ -713,25 +730,29 @@ class Model extends React.Component {
                     添加标签
                   </Button>
                 </Tooltip>
+              }
              
               <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
             </Space>
 
             <Space>   
-              <TagSelect
+              {
+                currentView !== 'branch' && <TagSelect
                   options={this.state.tagSelectOptions}
                   onChange={(val) => {
                     this.setState({ tagSelectOptions: val })
                   }}
                 />
+              }
+  
               <InputDebounce 
-                placeholder="通过模型名称全文搜索" 
+                placeholder={currentView==='branch'?'模型关键字':"通过模型名称全文搜索"} 
                 allowClear 
                 value={keyword}
                 onChange={(value) => { this.onSearchInputChange(value); }} 
                 style={{ width: inputWidth, marginLeft: 'auto' }}
               />
-              <Button onClick={this.onSearchPropertiesClick}>筛选</Button>
+              { currentView !== 'branch' && <Button onClick={this.onSearchPropertiesClick}>筛选</Button> }
             </Space>
 
           </div>
@@ -824,6 +845,17 @@ class Model extends React.Component {
           onCancel={this.onSearchPropertiesCancel}
         />
 
+        <BranchAddModel
+          {...this.state.branchAddParams}
+          onCancel={(val) => {
+            this.setState({
+              branchAddParams: {
+                visible: false,
+              }
+            })
+          }}
+        />
+
         <TagSelectPopup
           {...this.state.tagSelectPopupParams}
           type='model'