批量合并到基线

src/view/Manage/Model/Component/merge-to-master.jsx

 import React from 'react'
-import { Modal, Button, Spin, Form, Checkbox, Typography, Tooltip } from 'antd'
+import { Modal, Button, Spin, Form, Checkbox, Typography, Tooltip, Row, Col, Tree, } from 'antd'
 
 import { dispatch } from '../../../../model'
 import VersionCompareHeader from './VersionCompareHeader'
@@ -8,6 +8,7 @@ import VersionCompareIndex from './VersionCompareIndex'
 import { defaultColumnTitles } from './VersionCompare'
 import FilterColumnAction from './FilterColumnAction'
 
+import '../../AssetManage/add-resources.less'
 import './VersionCompare.less'
 
 const FC = (props) => {
@@ -49,16 +50,17 @@ const FC = (props) => {
 
   return (
     <Modal
+      className='add-resources'
       visible={visible}
       footer={footer}
       width='80%'
-      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      bodyStyle={{ padding: '15px', height: '80vh', overflow: 'auto' }}
       title='合并到基线'
       centered destroyOnClose
       onCancel={() => { close() }}
     >
       <Spin spinning={waiting}>
-        <Diff items={items} />
+        <Basic items={items} />
       </Spin>
     </Modal>
   )
@@ -66,7 +68,54 @@ const FC = (props) => {
 
 export default FC
 
-export const Diff = React.forwardRef(function ({ items }, ref) {
+export const Basic = React.forwardRef(function ({ items }, ref) {
+  const [currentItem, setItem] = React.useState()
+
+  React.useEffect(() => {
+    if ((items??[]).length > 0) {
+      setItem(items[0])
+    }
+  }, [items])
+
+  const treeData = React.useMemo(() => {
+    return (items??[]).map(item => ({
+      title: item.name,
+      key: item.id
+    }))
+  }, [items])
+
+  return (
+    <div>
+    {
+      (items??[]).length === 1 && <Diff item={currentItem} />
+    }
+    {
+      (items??[]).length > 1 && <Row gutter={10}>
+        <Col span={4}>
+          <Tree
+            className='tree'
+            selectedKeys={currentItem?[currentItem?.id]:[]}
+            treeData={treeData}
+            onSelect={(vals) => {
+              if ((vals??[]).length > 0) {
+                const filterItems = (items??[]).filter(item => (vals??[]).indexOf(item.id) !== -1)
+                if ((filterItems??[]).length > 0) {
+                  setItem(filterItems[0])
+                }
+              }
+            }}
+          />
+        </Col>
+        <Col span={20}>
+          <Diff item={currentItem} />
+        </Col>
+      </Row>
+    }
+    </div>
+  )
+})
+
+export const Diff = ({ item }) => {
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [onlyShowChange, setOnlyShowChange] = React.useState(true)
@@ -74,26 +123,13 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
   const [attrColumns, setAttrColumns] = React.useState()
 
   React.useEffect(() => {
-    if ((items??[]).length>0) {
+    if (item) {
       getDiffForked()
     }
-  }, [items, onlyShowChange])
-
-  const attrFilterColumns = React.useMemo(() => {
-   return (attrColumns??[]).filter(column => column.option===false || (attrSelectedTitles??[]).indexOf(column.title) !== -1)
-  }, [attrSelectedTitles, attrColumns])
+  }, [item, onlyShowChange])
 
-  const getDiffForked = () => {
-    setLoading(true)
-    dispatch({
-      type: 'datamodel.getBranchDiffForked',
-      payload: {
-        id: items[0].id,
-        includeSame: !onlyShowChange,
-      },
-      callback: data => {
-        setLoading(false)
-        setData(data)
+  React.useEffect(() => {
+    if (data) {
       const newAttrOptionColumns = [];
       (data?.heads?.columnHead||[]).forEach((item, index) => {
         newAttrOptionColumns.push({
@@ -120,7 +156,7 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
           ellipsis: true,
           option: true,
         });
-        })
+      });
 
       const newAttrColumns = [...newAttrOptionColumns, { 
         title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
@@ -134,32 +170,54 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
       }];
 
       setAttrColumns(newAttrColumns)
-      },
-      error: () => {
-        setLoading(false)
     }
-    })
+  }, [data])
+
+  const attrFilterColumns = React.useMemo(() => {
+   return (attrColumns??[]).filter(column => column.option===false || (attrSelectedTitles??[]).indexOf(column.title) !== -1)
+  }, [attrSelectedTitles, attrColumns])
+
+  const onFilterChange = (values) => {
+    setAttrSelectedTitles(values)
   }
 
   const onOnlyShowChange = (e) => {
     setOnlyShowChange(e.target.checked)
   }
 
-  const onFilterChange = (values) => {
-    setAttrSelectedTitles(values)
+  const getDiffForked = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getBranchDiffForked',
+      payload: {
+        id: item?.id,
+        includeSame: !onlyShowChange,
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
   }
 
   return (
     <div className='model-version-compare'>
-      <Form layout='inline'>
-        <Form.Item label='分支版本'>
-        </Form.Item>
-        <Form.Item label='基线版本'>
-        </Form.Item>
-        <Form.Item>
-          <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>仅显示差异</Checkbox>
-        </Form.Item>
-      </Form>
+      <div className='flex'>
+        <div style={{ flex: 1, paddingRight: 10, overflow: 'hidden'}}>
+          分支版本
+        </div>
+        <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+          <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <span>基线版本</span>
+            <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>
+              仅显示差异
+            </Checkbox>
+          </div>
+        </div>
+      </div>
 
       <div className='py-5'>    
         <Spin spinning={loading} >
@@ -181,4 +239,4 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
       </div>
     </div>
   )
-})
\ No newline at end of file
+}
\ No newline at end of file