模型当前目录搜索

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

@@ -7,9 +7,9 @@ import Table from '../../ResizeableTable'
 import produce from 'immer'
 import { paginate } from '../../../../util'
 
-import './branch-select-model.less'
+import { ModelTree } from './model-compare-select-model'
 
-const FC = ({ visible, items, type, onCancel }) => {
+const FC = ({ visible, items, onCancel }) => {
   const [animated, setAnimated] = React.useState(true)
   const basicRef = React.useRef()
 
@@ -51,14 +51,18 @@ const FC = ({ visible, items, type, onCancel }) => {
       centered destroyOnClose
       onCancel={() => { close() }}
     >
-      { !animated && <Basic ref={basicRef} type={type} items={items} /> }
+      { !animated && <Basic ref={basicRef} items={items} /> }
     </Modal>
   )
 }
 
 export default FC
 
-const Basic = React.forwardRef(function ({ type, items }, ref) {
+const Basic = React.forwardRef(function ({ items }, ref) {
+  const [treeStates, setTreeStates] = React.useState({
+    type: 'dir',
+    node: undefined,
+  })
   const [args, setArgs] = React.useState({
     keyword: undefined,
   })
@@ -66,78 +70,33 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
     page: 1,
     size: 20,
   })
-  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
-  const [treeData, setTreeData] = React.useState()
-  const [node, setNode] = React.useState()
-  const [rootNode, setRootNode] = React.useState()
 
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [selectedRows, setSelectedRows] = React.useState()
   const [expandedKeys, setExpandedKeys] = React.useState([])
   const [autoExpandParent, setAutoExpandParent] = React.useState(false)
-
   const [selectedType, setSelectedType] = React.useState('all')
 
-  const prevNodeRef = React.useRef()
-  const mountRef = React.useRef(true)
+  const { node } = treeStates
 
   React.useImperativeHandle(ref, () => ({
     selectedRows
   }), [selectedRows])
 
   React.useEffect(() => {
-    getTreeData()
-  }, [])
-
-  React.useEffect(() => {
-    if (node) {
-      setArgsByParams({ keyword: '' })
-    }
-  }, [node])
-
-  React.useEffect(() => {
     setPagination({...pagination, page: 1})
   }, [selectedType, node])
 
   React.useEffect(() => {
-    if (items) {
-      setSelectedRows((prev) => {
-        return items
-      })
-    }
+    setSelectedRows(items)
   }, [items])
 
   useDebounceEffect(() => {
-    if (rootNode) {
+    if (node) {
       getDataModels()
     }
-  }, [rootNode, args], { wait: 300 })
-
-  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])
+  }, [node, args], { wait: 300 })
 
   const setArgsByParams = React.useCallback((params) => {
     setArgs((prev) => {
@@ -195,26 +154,6 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
     },
   ]
 
-  const getTreeData = () => {
-    setLoadingTreeData(true)
-    dispatch({
-      type: 'datamodel.refreshDataModelCatalog',
-      callback: (data) => {
-        setLoadingTreeData(false)
-        setRootNode(data)
-
-        const newTreeData = data?.subCatalogs??[]
-        setTreeData(newTreeData)
-        if ((newTreeData??[]).length > 0) {
-          setNode(newTreeData[0])
-        }
-      },
-      error: () => {
-        setLoadingTreeData(false)
-      }
-    })  
-  }
-
   const getDataModels = () => {
     setLoading(true)
     
@@ -223,10 +162,12 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
         type: 'datamodel.searchModel',
         payload: {
           term: args.keyword,
+          catalogId: node?.id,
         },
         callback: (data) => {
           setLoading(false)
-          setData((data??[]).filter(item => item.supportBranching))
+          //只显示已上线且不是衍生表的模型
+          setData((data??[]).filter(item => item.state?.id === '4' && !item.inherited))
         },
         error: () => {
           setLoading(false)
@@ -267,40 +208,20 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
     }
   }
 
-  const onTreeExpand = (expandedKeys) => {
-    setExpandedKeys(expandedKeys)
-    setAutoExpandParent(false)
-  }
-
-  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
-    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
-      return
-    }
-
-    setNode(selectedNodes[0])
-  }
-
   const onChange = (val) => {
     setSelectedRows(val)
   }
 
   return (
     <div className='branch-select-model'>
-      <Row>
+      <Row gutter={10}>
         <Col span={4}>
-          <Spin spinning={loadingTreeData}>
-            <Tree
-              className='tree'
-              showLine 
-              showIcon={false} 
-              autoExpandParent={autoExpandParent}
-              treeData={treeData1}
-              selectedKeys={node?[node.id]:[]}
-              expandedKeys={expandedKeys}
-              onSelect={onTreeSelect}
-              onExpand={onTreeExpand}
-            />
-          </Spin>
+          <ModelTree 
+            showTypeOptions={false}
+            states={treeStates}
+            setStates={(val) => setTreeStates(val)}
+            treeHeight='calc(80vh - 75px)'
+          />
         </Col>
         <Col span={20}>
           <div
@@ -321,13 +242,6 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
                   value={args.keyword}
                   bordered={true} allowClear
                   onChange={(e) => {
-                    if (e.target.value) {
-                      prevNodeRef.current = node
-                      setNode()
-                    } else {
-                      setNode(prevNodeRef.current)
-                    }
-                  
                     setArgsByParams({ keyword: e.target.value, page: 1 })
                   }} 
                   style={{ width: 200 }}

src/view/Manage/Model/Component/branch-select-model.less

-.branch-select-model {
-  .tree {
-    height: calc(80vh - 30px);
-    overflow: auto;
-  }
-}
\ No newline at end of file

src/view/Manage/Model/Component/model-compare-select-model.jsx

@@ -237,7 +237,9 @@ const Basic = React.forwardRef(function ({}, ref) {
 
   const getModelsByKeywordAndCatalog = () => {
     let params = { term: args.keyword }
-    if (type === 'state') {
+    if (type === 'dir') {
+      params = {...params, catalogId: node?.id }
+    } else if (type === 'state') {
       params = {...params, stateId: node?.id }
     } else if (type === 'branch') {
       params = {...params, branchId: node?.id }
@@ -262,74 +264,72 @@ const Basic = React.forwardRef(function ({}, ref) {
   }
 
   return (
-    <div className='branch-select-model'>
-      <Row>
-        <Col span={4}>
-          <ModelTree 
-            states={treeStates}
-            setStates={(val) => setTreeStates(val)}
-          />
-        </Col>
-        <Col span={20}>
-          <div
+    <Row gutter={10}>
+      <Col span={4}>
+        <ModelTree 
+          states={treeStates}
+          setStates={(val) => setTreeStates(val)}
+        />
+      </Col>
+      <Col span={20}>
+        <div
+          style={{
+            display: 'flex',
+            padding: '0px 0px 15px',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}>
+            <Input size="middle"
+              placeholder="请输入关键字搜索"
+              value={args.keyword}
+              bordered={true} allowClear
+              onChange={(e) => {
+                setArgsByParams({ keyword: e.target.value })
+                setPagination({ ...pagination, page: 1 })
+              }} 
+              style={{ width: 200 }}
+            />
+        </div>
+        <Table
+          size='small'
+          extraColWidth={32}
+          rowKey='id'
+          loading={loading}
+          columns={columns}
+          dataSource={tableData??[]}
+          pagination={false}
+          rowSelection={{
+            type: 'radio',
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            },
+          }}
+          scroll={{ y: 'calc(80vh - 170px)' }}
+        />
+        {
+          total!==0 && <Pagination
             style={{
-              display: 'flex',
-              padding: '0px 0px 15px',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-            }}>
-              <Input size="middle"
-                placeholder="请输入关键字搜索"
-                value={args.keyword}
-                bordered={true} allowClear
-                onChange={(e) => {
-                  setArgsByParams({ keyword: e.target.value })
-                  setPagination({ ...pagination, page: 1 })
-                }} 
-                style={{ width: 200 }}
-              />
-          </div>
-          <Table
-            size='small'
-            extraColWidth={32}
-            rowKey='id'
-            loading={loading}
-            columns={columns}
-            dataSource={tableData??[]}
-            pagination={false}
-            rowSelection={{
-              type: 'radio',
-              selectedRowKeys: (selectedRows??[]).map(item => item.id),
-              onChange: (selectedRowKeys, selectedRows) => {
-                setSelectedRows(selectedRows)
-              },
+              textAlign: 'center',
+              marginTop: 15,
+            }}
+            showSizeChanger
+            onChange={(page,size) => {
+              setPagination({page, size})
             }}
-            scroll={{ y: 'calc(80vh - 170px)' }}
+            current={pagination.page}
+            pageSize={pagination.size}
+            defaultCurrent={1}
+            total={total}
+            showTotal={(total) => `共${total??0}项`}
           />
-          {
-            total!==0 && <Pagination
-              style={{
-                textAlign: 'center',
-                marginTop: 15,
-              }}
-              showSizeChanger
-              onChange={(page,size) => {
-                setPagination({page, size})
-              }}
-              current={pagination.page}
-              pageSize={pagination.size}
-              defaultCurrent={1}
-              total={total}
-              showTotal={(total) => `共${total??0}项`}
-            />
-          }
-        </Col>
-      </Row>
-    </div>
+        }
+      </Col>
+    </Row>
   )
 })
 
-const ModelTree = ({ states, setStates }) => {
+export const ModelTree = ({ states, setStates, showTypeOptions = true, treeHeight }) => {
   const { type, node, rootNode } = states
   const [loading, setLoading] = React.useState(false)
   const [treeData, setTreeData] = React.useState()
@@ -493,24 +493,26 @@ const ModelTree = ({ states, setStates }) => {
 
   return (
     <Spin spinning={loading}>
-      <div className='flex' style={{ alignItems: 'center' }}>
-        <span>模型视角：</span>
-        <Select
-          style={{ width: 100 }}
-          value={type}
-          onChange={(val) => {
-            setStates({ ...states, type: val })
-          }}
-        >
-        {
-          viewModes.map(item => (
-            <Select.Option key={item.key} value={item.key}>{item.name}</Select.Option>
-          ))
-        }    
-        </Select>
-      </div>
       {
-        type !== 'state' && <div style={{ marginTop: 10 }}>
+        showTypeOptions && <div className='flex' style={{ alignItems: 'center', marginBottom: 10 }}>
+          <span>模型视角：</span>
+          <Select
+            style={{ width: 100 }}
+            value={type}
+            onChange={(val) => {
+              setStates({ ...states, type: val })
+            }}
+          >
+          {
+            viewModes.map(item => (
+              <Select.Option key={item.key} value={item.key}>{item.name}</Select.Option>
+            ))
+          }    
+          </Select>
+        </div>
+      }
+      {
+        type !== 'state' && <div style={{ marginBottom: 10 }}>
           <AutoComplete
             allowClear
             value={keyword}
@@ -518,7 +520,7 @@ const ModelTree = ({ states, setStates }) => {
             onSelect={onAutoCompleteSelect}
             onSearch={onAutoCompleteSearch}
             onClear={() => { setKeyword() }}
-            style={{ width: '95%' }}
+            style={{ width: '100%' }}
           >
           {
             (options||[]).map((item, index) => {
@@ -543,7 +545,7 @@ const ModelTree = ({ states, setStates }) => {
         expandedKeys={expandedKeys}
         onSelect={onTreeSelect}
         onExpand={onTreeExpand}
-        style={{ marginTop: 10, height: 'calc(80vh - 115px)', overflow: 'auto' }}
+        style={{ height: treeHeight?treeHeight:'calc(80vh - 115px)', overflow: 'auto' }}
       />
     </Spin>
   )