分支模型与基线变更同步

src/model/datamodel.js

@@ -636,6 +636,10 @@ export function* behindAlarmInBranch(payload) {
   return yield call(datamodelerService.behindAlarmInBranch, payload)
 }
 
+export function* syncBranch(payload) {
+  return yield call(datamodelerService.syncBranch, payload)
+}
+
 export function* getCooperationUsers() {
   return yield call(datamodelerService.getCooperationUsers)
 }

src/service/datamodeler.js

@@ -583,6 +583,10 @@ export function behindAlarmInBranch(payload) {
   return GetJSON("/datamodeler/easyDataModelerBranching/easyDataModelerDataModelBehindAlarmInBranch", payload)
 }
 
+export function syncBranch(payload) {
+  return PostJSON("/datamodeler/easyDataModelerBranching/syncWithForkedEasyDataModelerDataModel", payload)
+}
+
 /*approval*/
 export function getApprovalUsers(payload) {
   return GetJSON("/baseservice/sync/getUserByUserName", payload)

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

@@ -11,6 +11,7 @@ import ExpandedModelTable from "./ExpandedModelTable";
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import PermissionRcItem from '../../../../util/Component/PermissionRcItem';
 import TagCell from './tag-help';
+import BranchModelSync from './branch-model-sync';
 
 import './ModelTable.less';
 import 'react-contexify/dist/ReactContexify.css';
@@ -136,7 +137,7 @@ const ModelNameColumn = (props) => {
 }
 
 const ModelTable = (props) => {
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds, visibleColNames, tagSelectOptions, batchAddTagChange, onMerge, onAuthTransfer, onAuthShare } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds, visibleColNames, tagSelectOptions, batchAddTagChange, onMerge, onSyncSuccess, onAuthTransfer, onAuthShare } = props;
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
@@ -144,6 +145,10 @@ const ModelTable = (props) => {
   const [ scrollRowIndex, setScrollRowIndex ] = useState();
   const [resoureTagMap, setResourceTagMap] = useState();
   const [behindAlramData, setBehindAlarmData] = useState();
+  const [branchModelSyncParams, setBranchModelSyncParams] = useState({
+    visible: false,
+    item: undefined,
+  });
 
   const expandedDataMapRef = useRef(new Map());
   const shouldScrollRef = useRef(false);
@@ -179,7 +184,15 @@ const ModelTable = (props) => {
           <div className='flex' style={{ alignItems: 'center' }}>
             {
               view === 'branch' && (behindAlramData??[]).findIndex(item => item.id === props.row.id) !== -1 && <Tooltip title='基线模型有变更'>
-                <Button size='small' type='text' icon={<ExclamationCircleFilled className='pointer' style={{ fontSize: 18, color: '#E94848' }} />} />
+                <Button size='small' type='text' icon={<ExclamationCircleFilled className='pointer' style={{ fontSize: 18, color: '#E94848' }} />} onClick={() => {
+                  const index = (behindAlramData??[]).findIndex(item => item.id === props.row.id)
+                  if (index !== -1) {
+                    setBranchModelSyncParams({
+                      visible: true,
+                      item: {...props.row, ...behindAlramData[index]}
+                    })
+                  }
+                }} />
               </Tooltip>
             }
             <ModelNameColumn text={props.row.name} record={props.row} detailItem={detailItem} />
@@ -793,6 +806,21 @@ const ModelTable = (props) => {
         }
 
       </RcMenu>
+      
+      <BranchModelSync
+        {...branchModelSyncParams}
+        onCancel={(refresh) => {
+          setBranchModelSyncParams({
+            visible: false,
+            item: undefined,
+          })
+
+          if (refresh) {
+            getBehindAlarmInBranch()
+            onSyncSuccess?.()
+          }
+        }}
+      />
       { contextHolder }
     </div>
   );

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

+import React from 'react'
+import { Modal, Button, Spin, Form, Checkbox, Typography, Tooltip, Row, Col, Tree, } from 'antd'
+
+import { dispatch } from '../../../../model'
+import VersionCompareHeader from './VersionCompareHeader'
+import VersionCompareTable from './VersionCompareTable'
+import VersionCompareIndex from './VersionCompareIndex'
+import { defaultColumnTitles } from './VersionCompare'
+import FilterColumnAction from './FilterColumnAction'
+
+import './VersionCompare.less'
+import { formatDate } from '../../../../util'
+
+const FC = (props) => {
+  const { item, visible, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+
+  const close = (val) => {
+    setWaiting(false)
+    onCancel?.(val)
+  }
+
+  const save = () => {
+    setWaiting(true)
+    dispatch({
+      type: 'datamodel.syncBranch',
+      payload: {
+        params: {
+          id: item?.id,
+        }
+      },
+      callback: data => {
+        close(true)        
+      },
+      error: () => {
+        setWaiting(false)
+      }
+    })
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        disabled={waiting}
+        onClick={() => save()}
+      >同步</Button>
+    ]
+  }, [close, save, waiting])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', height: '80vh', overflow: 'auto' }}
+      title='基线模型变更提醒'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <Diff item={item} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+const Diff = ({ item }) => {
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [onlyShowChange, setOnlyShowChange] = React.useState(true)
+  const [attrSelectedTitles, setAttrSelectedTitles] = React.useState(defaultColumnTitles)
+  const [attrColumns, setAttrColumns] = React.useState()
+
+  React.useEffect(() => {
+    if (item) {
+      getDiffForked()
+    }
+  }, [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: item?.id,
+        includeSame: !onlyShowChange,
+        isComparatorOnLeft: true,
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <div className='model-version-compare'>
+      <div className='flex'>
+        <div style={{ flex: 1, paddingRight: 10, overflow: 'hidden'}}>
+          {`基线版本：${item?.forkedName??''}${item?.forkedLastModifiedTs?` V_${formatDate(item?.forkedLastModifiedTs)}`:''}`}
+        </div>
+        <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+          <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <span>{`分支版本：${item?.name??''}${item?.modifiedTs?` V_${formatDate(item?.modifiedTs)}`:''}`}</span>
+            <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>
+              仅显示差异
+            </Checkbox>
+          </div>
+        </div>
+      </div>
+
+      <div className='py-5'>    
+        <Spin spinning={loading} >
+        {
+          data && <div className='flex'>
+            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={data} />
+              <VersionCompareTable data={data} columns={attrFilterColumns} />
+              <VersionCompareIndex data={data} />
+            </div>
+            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={data} direction='right' />
+              <VersionCompareTable data={data} columns={attrFilterColumns} direction='right' />
+              <VersionCompareIndex data={data} direction='right'/>
+            </div>
+          </div>
+        }
+        </Spin>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -360,6 +360,10 @@ class Model extends React.Component {
     }
   }
 
+  onSyncSuccess = () => {
+    this.onTableChange()
+  }
+
   onBatchMerge = () => {
     const { tableData, selectModelerIds } = this.state
     this.setState({
@@ -862,9 +866,10 @@ class Model extends React.Component {
               onItemAction={this.onTableItemAction} 
               onAutoCreateTable={this.onAutoCreateTable}
               onHistory={this.onHistory}
-              onMerge={this.onMerge}
               onAuthTransfer={this.onAuthTransfer}
               onAuthShare={this.onAuthShare}
+              onMerge={this.onMerge}
+              onSyncSuccess={this.onSyncSuccess}
               {...this.props} />
           </Spin> 
           </div>