规范版本对比

src/view/Manage/ModelConfig/Component/rule-catalog-compare.jsx

+import React from 'react'
+import { Row, Col, Select, Space, Tooltip, Spin, Typography } from 'antd'
+
+import { dispatch } from '../../../../model'
+
+import '../../Model/Component/VersionCompare.less'
+
+const FC = ({ item }) => {
+  const [versions, setVersions] = React.useState()
+  const [basicVersion, setBasicVersion] = React.useState()
+  const [incVersion, setIncVersion] = React.useState()
+  const [loading, setLoading] = React.useState(false)
+  const [compareData, setCompareData] = React.useState()
+  const [loadingCompare, setLoadingCompare] = React.useState(false)
+
+  React.useEffect(() => {
+    if (item?.id) {
+      getVersions()
+    }    
+  }, [item])
+
+  const [basicVersions, incVersions] = React.useMemo(() => {
+    let newBasicVersions = [], newIncVersions = []
+    for (const [index,item] of (versions??[]).entries()) {
+      let name = `${item.name??''}_${new Date(item.createdTs).toLocaleString()}`
+      if (index === 0) {
+        name = name+'(当前版本)'
+      }
+
+      newBasicVersions.push({ id: item.id, name });
+    }
+    const index = newBasicVersions.findIndex(item => item.id === basicVersion)
+    if (index !== -1) {
+      newIncVersions = newBasicVersions.slice(0, index)
+    }
+
+    return [newBasicVersions, newIncVersions]
+  }, [versions, basicVersion])
+
+  const getVersions = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getRuleCatalogVersionList',
+      payload: {
+        catalogId: item?.id,
+      },
+      callback: data => {
+        setLoading(false)
+        setVersions(data)
+        if ((data??[]).length >= 2) {
+          setBasicVersion(data[1].id)
+          setIncVersion(data[0].id)
+          getCompare()
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onBasicChange = (value) => {
+    setBasicVersion(value)
+    setIncVersion()
+    setCompareData(null)
+  }
+
+  const onIncChange = (value) => {
+    setIncVersion(value)
+    getCompare()
+  }
+
+  const getCompare = () => {
+    setBasicVersion(prevBasicVersion => {
+      setIncVersion(prevIncVersion => {
+        setLoadingCompare(true)
+        dispatch({
+          type: 'datamodel.compareRuleCatalogVersion',
+          payload: {
+            leftVersionId: prevBasicVersion,
+            rightVersionId: prevIncVersion
+          },
+          callback: data => {
+            setLoadingCompare(false)
+            setCompareData(data)
+          },
+          error: () => {
+            setLoadingCompare(false)
+          }
+        })
+
+        return prevIncVersion
+      })
+
+      return prevBasicVersion
+    })
+  }
+
+  return (
+    <div className='model-version-compare'>
+      <Row gutter={15}>
+        <Col span={12}>
+          <Space size={8}>
+            <span>基线版本:</span>
+            <Select
+              loading={loading}
+              value={basicVersion}
+              allowClear
+              onChange={onBasicChange}
+              style={{ width: 300 }}
+            >
+            {
+              basicVersions?.map((item, index) => <Select.Option
+                disabled={index===0} 
+                key={index} 
+                value={item.id}>
+                  <Tooltip title={(index===0)?'最近版本只能在增量版本中被选中':''}>
+                  {item.name}
+                  </Tooltip>
+                </Select.Option>
+              )  
+            }
+            </Select>
+          </Space>
+        </Col>
+        <Col span={12}>
+          <Space size={8}>
+            <span>增量版本:</span>
+            <Select
+              loading={loading}
+              value={incVersion}
+              allowClear
+              onChange={onIncChange}
+              style={{ width: 300 }}
+            >
+            {
+              incVersions?.map((item, index) => <Select.Option
+                key={index} 
+                value={item.id}>
+                {item.name}
+                </Select.Option>
+              )  
+            }
+            </Select>
+          </Space>
+        </Col>
+      </Row>
+    
+      <div className='py-3'>    
+        <Spin spinning={loadingCompare} >
+        {
+          compareData && <div className='flex'>
+            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 7.5 }}>
+              <Basic 
+                title='基本信息'
+                header={compareData?.headers?.ruleHeader} 
+                data={compareData?.left?.ruleValue} 
+              /> 
+            </div>
+            <div style={{ flex: 1, paddingLeft: 7.5}}>
+              <Basic 
+                title='基本信息'
+                header={compareData?.headers?.ruleHeader} 
+                data={compareData?.right?.ruleValue} 
+              /> 
+            </div>
+          </div>     
+        }
+        </Spin>
+      </div>
+    </div>
+  )
+}
+
+export default FC
+
+export const Basic = ({ header, data, title }) => {
+  return (
+    <Typography>
+      <div className='mb-3'>
+        <Typography>
+          <Typography.Title level={5}>{title}</Typography.Title>
+        </Typography>
+      </div>
+      {
+        header?.map((item, index) => {
+          let columnValue = undefined
+          if ((data??[]).length>index) {
+            columnValue = data[index]
+          }
+
+          let stateClassName = ''
+          if (columnValue?.state==='ADD' || columnValue?.state==='UPDATE') {
+            stateClassName = 'add'
+          } else if (columnValue?.state === 'DELETE') {
+            stateClassName = 'delete'
+          }
+
+          return (
+            <Typography.Paragraph>
+              <Tooltip key={index} title={columnValue.value||''}>
+                <Typography.Text ellipsis={true}>
+                {item??''}:&nbsp;<Typography.Text className={stateClassName}>{columnValue.value||''}</Typography.Text>
+                </Typography.Text>
+              </Tooltip>
+            </Typography.Paragraph>
+          );
+        })
+      }
+    </Typography>
+  )
+}
\ No newline at end of file

src/view/Manage/ModelConfig/Component/rule-catalog-history.jsx

+import React from 'react';
+import { Timeline, Spin } from 'antd';
+
+import { dispatch } from '../../../../model'
+import Update from './update-rule-catalog'
+
+const FC = ({ item }) => {
+  const [versions, setVersions] = React.useState()
+  const [loading, setLoading] = React.useState(false)
+  const [updateParams, setUpdateParams] = React.useState({
+    visible: false,
+    type: undefined,
+    item: undefined,
+  });
+
+  React.useEffect(() => {
+    if (item?.id) {
+      getVersions()
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item])
+
+  const getVersions = () => {
+    setLoading(true);
+    dispatch({
+      type: 'datamodel.getRuleCatalogVersionList',
+      payload: {
+        catalogId: item?.id,
+      },
+      callback: data => {
+        setLoading(false)
+        setVersions(data)
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <Spin spinning={loading}>
+        <Timeline style={{ padding: 24 }}>
+        {
+          (versions??[]).map((version, index) => {
+            return <Timeline.Item key={index} >
+              <div>
+                <a
+                  onClick={() => {
+                    setUpdateParams({
+                      visible: true,
+                      type: 'detail',
+                      item: version
+                    })
+                  }}
+                >
+                  {version.name}
+                </a>
+                <div className='mt-2'>
+                {`${version.ownerName} ${new Date(version.createdTs).toLocaleString()}`}
+                </div>
+              </div>
+            </Timeline.Item>
+          })
+        }
+        </Timeline>
+      </Spin>
+      <Update 
+        {...updateParams}
+        onCancel={() => {
+          setUpdateParams({
+            visible: false,
+            type: undefined,
+            item: undefined,
+          })
+        }}
+      />
+    </React.Fragment>
+  );
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/ModelConfig/Component/rule-catalog-version.jsx

+import React from 'react'
+import { Drawer, Tabs } from 'antd'
+
+import History from './rule-catalog-history'
+import Compare from './rule-catalog-compare'
+
+const FC = ({ visible, item, onCancel }) => {
+  const close = () => {
+    onCancel?.()
+  }
+
+  return (
+    <Drawer 
+      title=''
+      placement="right"
+      closable={true}
+      width={'90%'}
+      onClose={close}
+      visible={visible}
+      destroyOnClose
+    >
+      <Tabs defaultActiveKey="1" type="card" size='small'>
+        <Tabs.TabPane tab="版本历史" key="1">
+          <History item={item} />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="版本对比" key="2">
+          <Compare item={item} />
+        </Tabs.TabPane>
+      </Tabs>
+    </Drawer>
+  );
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/ModelConfig/Component/rule-tree.jsx

@@ -7,6 +7,7 @@ import { dispatch } from '../../../../model'
 import Tree from '../../../../util/Component/Tree'
 import PermissionButton from '../../../../util/Component/PermissionButton'
 import Update from './update-rule-catalog'
+import Version from './rule-catalog-version'
 import { showMessage } from '../../../../util'
 
 const FC = (props) => {
@@ -17,7 +18,11 @@ const FC = (props) => {
   const [updateParams, setUpdateParams] = React.useState({
     visible: false,
     type: undefined,
-    node: undefined,
+    item: undefined,
+  })
+  const [versionParams, setVersionParams] = React.useState({
+    visible: false,
+    item: undefined
   })
 
   const [modal, contextHolder] = Modal.useModal()
@@ -147,6 +152,11 @@ const FC = (props) => {
           })
         }
       })
+    } else if (key === 'version') {
+      setVersionParams({
+        visible: true,
+        item: node,
+      })
     }
   }
 
@@ -179,6 +189,7 @@ const FC = (props) => {
               { id: 'up', title: '上移目录' },
               { id: 'down', title: '下移目录' },
               { id: 'delete', title: '删除目录' },
+              { id: 'version', title: '历史版本' },
             ]}
             onMenuItemClick={onMenuItemClick}
           />
@@ -196,6 +207,15 @@ const FC = (props) => {
           refresh && getTreeData()
         }}
       /> 
+      <Version
+        {...versionParams}
+        onCancel={() => {
+          setVersionParams({
+            visible: false,
+            item: undefined,
+          })
+        }}
+      />
       {contextHolder}
     </div>
   )