批量合并到基线

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,66 +123,79 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
   const [attrColumns, setAttrColumns] = React.useState()
 
   React.useEffect(() => {
-    if ((items??[]).length>0) {
+    if (item) {
       getDiffForked()
     }
-  }, [items, onlyShowChange])
+  }, [item, onlyShowChange])
+
+  React.useEffect(() => {
+    if (data) {
+      const newAttrOptionColumns = [];
+      (data?.heads?.columnHead||[]).forEach((item, index) => {
+        newAttrOptionColumns.push({
+          title: item||'',
+          dataIndex: `column${index}`,
+          render: (attrValue, record, index) => {
+  
+            let stateClassName = '';
+            if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
+              stateClassName = 'add';
+            } else if (attrValue?.state === 'DELETE') {
+              stateClassName = 'delete';
+            }
+  
+            return (
+              <Typography.Paragraph>
+                <Tooltip title={attrValue?.value||''}>
+                  <Typography.Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Typography.Text>
+                </Tooltip>
+              </Typography.Paragraph>
+            );
+          },
+          width: (item==='序号')?60: 150,
+          ellipsis: true,
+          option: true,
+        });
+      });
+
+      const newAttrColumns = [...newAttrOptionColumns, { 
+        title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
+        dataIndex: 'columnFilter',
+        render: (_, record, index) => {
+          return '';
+        },
+        width: 40,
+        ellipsis: true,
+        option: false
+      }];
+
+      setAttrColumns(newAttrColumns)
+    }
+  }, [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 getDiffForked = () => {
     setLoading(true)
     dispatch({
       type: 'datamodel.getBranchDiffForked',
       payload: {
-        id: items[0].id,
+        id: item?.id,
         includeSame: !onlyShowChange,
       },
       callback: data => {
         setLoading(false)
         setData(data)
-        const newAttrOptionColumns = [];
-        (data?.heads?.columnHead||[]).forEach((item, index) => {
-          newAttrOptionColumns.push({
-            title: item||'',
-            dataIndex: `column${index}`,
-            render: (attrValue, record, index) => {
-    
-              let stateClassName = '';
-              if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
-                stateClassName = 'add';
-              } else if (attrValue?.state === 'DELETE') {
-                stateClassName = 'delete';
-              }
-    
-              return (
-                <Typography.Paragraph>
-                  <Tooltip title={attrValue?.value||''}>
-                    <Typography.Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Typography.Text>
-                  </Tooltip>
-                </Typography.Paragraph>
-              );
-            },
-            width: (item==='序号')?60: 150,
-            ellipsis: true,
-            option: true,
-          });
-        })
-
-        const newAttrColumns = [...newAttrOptionColumns, { 
-          title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
-          dataIndex: 'columnFilter',
-          render: (_, record, index) => {
-            return '';
-          },
-          width: 40,
-          ellipsis: true,
-          option: false
-        }];
-
-        setAttrColumns(newAttrColumns)
       },
       error: () => {
         setLoading(false)
@@ -141,25 +203,21 @@ export const Diff = React.forwardRef(function ({ items }, ref) {
     })
   }
 
-  const onOnlyShowChange = (e) => {
-    setOnlyShowChange(e.target.checked)
-  }
-
-  const onFilterChange = (values) => {
-    setAttrSelectedTitles(values)
-  }
-
   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