合并逐条勾选

src/view/Manage/Model/Component/VersionCompare.jsx

@@ -3,9 +3,9 @@ import { Form, Select, Spin, Tooltip, Checkbox, Typography, Space, Button, Row,
 
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import { formatVersionDate, showMessage } from '../../../../util';
-import VersionCompareHeader from './VersionCompareHeader';
-import VersionCompareTable from './VersionCompareTable';
-import VersionCompareIndex from './VersionCompareIndex';
+import VersionCompareHeader, { VersionCompareSelectedHeader } from './VersionCompareHeader';
+import VersionCompareTable, { VersionCompareSelectedTable } from './VersionCompareTable';
+import VersionCompareIndex, { VersionCompareSelectedIndex } from './VersionCompareIndex';
 import VersionDdlAlter from './version-ddl-alter';
 
 import './VersionCompare.less';
@@ -226,7 +226,7 @@ const VersionCompare = (props) => {
 
 export default VersionCompare;
 
-export const CompareDetail = ({ data, showIndex=true }) => {
+export const CompareDetail = ({ data, showIndex=true, checkable=false }) => {
   const [selectedColumnTitles, setSelectedColumnTitles] = React.useState()
 
   return (
@@ -252,6 +252,13 @@ export const CompareDetail = ({ data, showIndex=true }) => {
           />
           { showIndex && <VersionCompareIndex data={data} direction='right'/> }
         </div>
+        {
+          checkable && <div style={{ width: 44, flex: 'none' }}>
+            <VersionCompareSelectedHeader data={data} />
+            <VersionCompareSelectedTable data={data} />
+            { showIndex && <VersionCompareSelectedIndex data={data} /> }
+          </div>
+        }
       </div> 
     }
     </>

src/view/Manage/Model/Component/VersionCompare.less

 .model-version-compare {
+  position: relative;
+
   .yy-typography .delete, .delete {
     color: red !important;
     text-decoration: line-through !important;

src/view/Manage/Model/Component/VersionCompareHeader.jsx

 
-import { Typography, Tooltip } from 'antd';
+import { Typography, Tooltip, Checkbox } from 'antd';
 
 const { Text, Paragraph, Title } = Typography;
 
@@ -47,3 +47,28 @@ const VersionCompareHeader = (props) => {
 }
 
 export default VersionCompareHeader;
+
+export const VersionCompareSelectedHeader = (props) => {
+
+  const { data } = props;
+
+  return (
+    <div>
+      <div style={{ height: 36 }} />
+      {
+        (data?.heads?.tableHead||[]).map((item, index) => {
+          let columnValue = {};
+          if ((data?.left?.tableValue||[]).length > index) {
+            columnValue = data?.left?.tableValue[index];
+          }
+
+          return (
+            <div index={index} style={{ height: 22, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+              { (columnValue.state&&columnValue.state!=='EQUAL') && <Checkbox /> }
+            </div>
+          );
+        })
+      }
+    </div>
+  )
+}

src/view/Manage/Model/Component/VersionCompareIndex.jsx

 import { useEffect, useState } from 'react';
-import { Typography, Tooltip, Table } from 'antd';
+import { Typography, Tooltip, Table, Checkbox } from 'antd';
 
 const { Text, Paragraph, Title } = Typography;
 
@@ -78,3 +78,29 @@ const VersionCompareIndex = (props) => {
 }
 
 export default VersionCompareIndex;
+
+export const VersionCompareSelectedIndex= (props) => {
+
+  const { data } = props;
+
+  return (
+    <div>
+      <div style={{ height: 87 }} />
+      {
+        (data?.left?.indexValue||[]).map((item, index) => {
+          let showCheckbox = false;
+          (item??[]).forEach(_item => {
+            if (_item.state && _item.state !== 'EQUAL') {
+              showCheckbox = true
+            }
+          });
+          return (
+            <div index={index} style={{ height: 51, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+              { showCheckbox && <Checkbox /> }
+            </div>
+          );
+        })
+      }
+    </div>
+  )
+}
\ No newline at end of file

src/view/Manage/Model/Component/VersionCompareTable.jsx

 import React from 'react';
-import { Typography, Table, Tooltip } from 'antd';
+import { Typography, Table, Tooltip, Checkbox } from 'antd';
 
 import FilterColumnAction from './FilterColumnAction';
 
@@ -88,3 +88,29 @@ const VersionCompareTable = (props) => {
 }
 
 export default VersionCompareTable;
+
+export const VersionCompareSelectedTable = (props) => {
+
+  const { data } = props;
+
+  return (
+    <div>
+      <div style={{ height: 87 }} />
+      {
+        (data?.left?.columnValue||[]).map((item, index) => {
+          let showCheckbox = false;
+          (item??[]).forEach(_item => {
+            if (_item.state && _item.state !== 'EQUAL') {
+              showCheckbox = true
+            }
+          });
+          return (
+            <div index={index} style={{ height: 51, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+              { showCheckbox && <Checkbox /> }
+            </div>
+          );
+        })
+      }
+    </div>
+  )
+}
\ No newline at end of file

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

@@ -153,12 +153,15 @@ export const Diff = ({ item }) => {
         <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
           <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
             <span>基线版本</span>
+          </div>
+        </div>
+        {/* <div style={{ width: 44, flex: 'none' }} /> */}
+        <div style={{ position: 'absolute', right: 0, top: 0 }}>
           <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>
             仅显示差异
           </Checkbox>
         </div>
       </div>
-      </div>
 
       <div className='py-5'>    
         <Spin spinning={loading} >