分支模型设置

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

+import React from 'react'
+import { Modal, Button, Row, Col, Spin, Tree, Input, Pagination, Tooltip, Typography, Space, Select, } from 'antd'
+import { useDebounceEffect } from "ahooks"
+
+import { dispatch } from '../../../../model'
+import Table from '../../ResizeableTable'
+import produce from 'immer'
+import { paginate } from '../../../../util'
+
+import './branch-select-model.less'
+
+const FC = ({ visible, items, type, onCancel }) => {
+  const [animated, setAnimated] = React.useState(true)
+  const basicRef = React.useRef()
+
+  React.useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        setAnimated(false)
+      }, 300)
+    }
+  }, [visible])
+
+  const close = (val = null) => {
+    setAnimated(true)
+    onCancel?.(val)
+  }
+
+  const save = () => {
+    close(basicRef.current.selectedRows??[])
+  }
+
+  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='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Basic ref={basicRef} type={type} items={items} />
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({ type, items }, ref) {
+  const [args, setArgs] = React.useState({
+    keyword: undefined,
+  })
+  const [pagination, setPagination] = React.useState({
+    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)
+
+  React.useImperativeHandle(ref, () => ({
+    selectedRows
+  }), [selectedRows])
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  React.useEffect(() => {
+    if (node) {
+      setArgsByParams({ keyword: '', page: 1 })
+    }
+  }, [node])
+
+  React.useEffect(() => {
+    if (items) {
+      setSelectedRows((prev) => {
+        return items
+      })
+    }
+  }, [items])
+
+  useDebounceEffect(() => {
+    if (rootNode) {
+      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])
+
+  const setArgsByParams = React.useCallback((params) => {
+    setArgs((prev) => {
+      return {...prev, ...params}
+    })
+  }, [])
+
+  const [tableData, total] = React.useMemo(() => {
+    let newData= [...data??[]]
+    if (selectedType === 'selected') {
+      newData = (newData??[]).filter(item => (selectedRows??[]).findIndex(_item => _item.id === item.id) !== -1)
+    } else if (selectedType === 'unselected') {
+      newData = (newData??[]).filter(item => (selectedRows??[]).findIndex(_item => _item.id === item.id) === -1)
+    }
+
+    return [paginate(newData, pagination.page, pagination.size), (newData??[]).length]
+  }, [data, pagination, selectedType, selectedRows])
+
+  const columns = [
+    {
+      title: '模型名称',
+      dataIndex: 'name',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '描述',
+      dataIndex: 'remark',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '创建人',
+      dataIndex: 'editor',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+  ]
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: (data) => {
+        setLoadingTreeData(false)
+        setRootNode(data)
+
+        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)
+        if ((newTreeData??[]).length > 0) {
+          setNode(newTreeData[0])
+        }
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    })  
+  }
+
+  const getDataModels = () => {
+    setLoading(true)
+    
+    if (args.keyword) {
+      dispatch({
+        type: 'datamodel.searchModel',
+        payload: {
+          term: args.keyword,
+        },
+        callback: (data) => {
+          setLoading(false)
+          //只显示已上线的模型
+          setData((data??[]).filter(item => item.state?.id === '4'))
+        },
+        error: () => {
+          setLoading(false)
+        }
+      })
+    } else {
+      dispatch({
+        type: 'datamodel.getCurrentDataModelCatalog',
+        payload: {
+          easyDataModelerCatalogId: node?.id,
+        },
+        callback: (data) => {
+          setLoading(false)
+          //只显示已上线的模型
+          const newData = (data?.easyDataModelerDataModels??[]).filter(item => item.state?.id === '4')
+          setData(newData)
+
+          //目录选中schema时，右侧列表默认全部选中
+          if (node?.type === 'schema') {
+            setSelectedRows(prev => {
+              const newSelectedRows = [...prev??[]];
+              //去重
+              (newData??[]).map(item => {
+                const index = (prev??[]).findIndex(_item => item.id === _item.id)
+                if (index === -1) {
+                  newSelectedRows.push(item)
+                }
+              });
+              
+              return newSelectedRows
+            })
+          }
+        },
+        error: () => {
+          setLoading(false)
+        }
+      })
+    }
+  }
+
+  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>
+        <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>
+        </Col>
+        <Col span={20}>
+          <div
+            style={{
+              display: 'flex',
+              padding: '0px 0px 15px',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+            }}>
+              <Space>
+                <Select value={selectedType} onChange={(val) => setSelectedType(val)} style={{ width: 100 }}>
+                  <Select.Option value='all'>所有</Select.Option>
+                  <Select.Option value='selected'>已选</Select.Option>
+                  <Select.Option value='unselected'>未选</Select.Option>
+                </Select>
+                <Input size="middle"
+                  placeholder="请输入关键字搜索"
+                  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 }}
+                />
+              </Space>
+          </div>
+          <Table
+            size='small'
+            extraColWidth={32}
+            rowKey='id'
+            loading={loading}
+            columns={columns}
+            dataSource={tableData??[]}
+            pagination={false}
+            rowSelection={{
+              preserveSelectedRowKeys: true,
+              selectedRowKeys: (selectedRows??[]).map(item => item.id),
+              onChange: (selectedRowKeys, selectedRows) => {
+                //这里要注意 回填选中表的时候 如果表信息没有获取 selectedRows中会有undefined信息 selectedRowKeys正常
+                //所以要特殊处理一下
+                setSelectedRows(prevSelectedRows => {
+                  const newSelectedRows = []
+                  for (const key of selectedRowKeys??[]) {
+                    const index = selectedRows.findIndex(item => item?.id === key)
+                    if (index !== -1) {
+                      newSelectedRows.push(selectedRows[index])
+                    } else {
+                      const _index = (prevSelectedRows??[]).findIndex(item => item?.id === key)
+                      if (_index !== -1) {
+                        newSelectedRows.push(prevSelectedRows[_index])
+                      }
+                    }
+                  }
+
+                  return newSelectedRows
+                })
+              },
+            }}
+            scroll={{ y: 'calc(80vh - 170px)' }}
+          />
+          {
+            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>
+  )
+})
\ No newline at end of file

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/update-branch.jsx

@@ -2,10 +2,11 @@ import React from 'react'
 import { Modal, Button, Spin, Form, Input, Select, } from 'antd'
 import { useDebounceEffect } from 'ahooks'
 import { SettingOutlined } from '@ant-design/icons'
+import produce from 'immer'
 
 import { dispatch } from '../../../../model'
 import { AppContext } from '../../../../App'
-import produce from 'immer'
+import SelectModel from './branch-select-model'
 
 const FC = (props) => {
   const { visible, type, item, onCancel} = props
@@ -92,7 +93,7 @@ const Basic = React.forwardRef(function ({ type, item }, ref) {
       let rows = await form.validateFields()
       if (type === 'add') {
         rows = {...rows, easyDataModelerMemberShip: {
-          easyDataModelerMemberShip: [
+          easyDataModelerMembers: [
             {
               admin: true,
               id: app?.user?.userId,
@@ -183,6 +184,7 @@ const Basic = React.forwardRef(function ({ type, item }, ref) {
       </Form.Item>
       <Form.Item
         label='模型设置'
+        name='forked'
         style={{ marginBottom }}
       >
         <ModelConfigItem />
@@ -224,12 +226,37 @@ const UsersItem = ({ loading, users, value, onChange }) => {
   )
 } 
 
-const ModelConfigItem = () => {
+const ModelConfigItem = ({ value, onChange }) => {
+  const [selectModelParams, setSelectModelParams] = React.useState({
+    visible: false,
+    items: undefined,
+  })
   const onConfigClick = () => {
-
+    setSelectModelParams({
+      visible: true,
+      items: (value??[]).map(item => ({
+        id: item
+      })),
+    })
   }
 
   return (
+    <span>
+      <span className='mr-3'>{`共${(value??[]).length}个`}</span>
       <Button icon={<SettingOutlined />} onClick={onConfigClick} />
+      <SelectModel 
+        {...selectModelParams}
+        onCancel={(val) => {
+          setSelectModelParams({
+            visible: false,
+            items: undefined,
+          })
+          
+          if (val) {
+            onChange?.(val.map(item => item.id))
+          }
+        }}
+      />
+    </span>
   )
 }
\ No newline at end of file