查看规范

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

@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 
 import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
+import Rule from '../../ModelConfig/Component/rule-readonly';
 
 import DebounceInput from './DebounceInput';
 
@@ -55,6 +56,9 @@ const ImportActionHeader = (props) => {
   const [ dataTypeList, setDataTypeList ] = useState(null);
   const [ bindingLoadRangeList, setBindingLoadRangeList ] = useState(null);
   const [isCollapse, setCollapse] = useState(true)
+  const [ruleParams, setRuleParams] = useState({
+    visible: false
+  })
 
   useEffect(() => {
     getDataTypeList();
@@ -331,6 +335,9 @@ const ImportActionHeader = (props) => {
                   <ConstraintSelect 
                     constraints={constraints} 
                     onChange={onConstraintChange}
+                    onDetail={() => {
+                      setRuleParams({ visible: true })
+                    }} 
                   />
                 </Form.Item>
               </Col>
@@ -357,7 +364,9 @@ const ImportActionHeader = (props) => {
             <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
             <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} >{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
             <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据平台</div>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>规范</div>} >{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>规范</div>} >
+              {modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}
+            </Descriptions.Item>
             <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{modelerData.tableType}</Descriptions.Item>
           </Descriptions>          
         ) 
@@ -479,19 +488,26 @@ const ImportActionHeader = (props) => {
           }
         </React.Fragment>
       }
+      <Rule
+        {...ruleParams}
+        onCancel={() => {
+          setRuleParams({ visible: false })
+        }}
+      />
     </div>
   )
 }
 
 export default ImportActionHeader;
 
-const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
-
+const ConstraintSelect = ({ value = {}, constraints = [], onChange, onDetail, ...restProps }) => {
   return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
       <Select 
-      onChange={onChange} 
+        onChange={(val) => { onChange?.(val) }} 
         value={value?.id} 
         placeholder='请选择规范'
+        style={{ flex: 1 }}
         {...restProps}
       >
       {
@@ -502,6 +518,8 @@ const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps
         })
       }
       </Select>
+      <Button className='ml-3' onClick={() => { onDetail?.() }}>查看</Button>
+    </div>
   )
 }
 

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

@@ -21,7 +21,7 @@ const nodeItems = [
 ]        
 
 const FC = (props) => {
-  const { node } = props
+  const { node, readonly } = props
   const [args, setArgs] = React.useState(() => ({
     statusId: undefined,
     alertTypeId: undefined,
@@ -127,7 +127,7 @@ const FC = (props) => {
       {
         title: '操作',
         key: 'action',
-        width: 200,
+        width: readonly ? 80 : 200,
         render: (text, record) => {
           return (  
             <div style={{ display: 'flex', alignItems: 'center'  }}>
@@ -148,6 +148,8 @@ const FC = (props) => {
               >
               规则详情
               </PermissionButton>
+              {
+                !readonly && <React.Fragment>
                   <div style={{ margin: '0 5px' }}>
                     <Divider type='vertical' />
                   </div>
@@ -181,6 +183,8 @@ const FC = (props) => {
                   >
                   删除
                   </PermissionButton>
+                </React.Fragment>
+              }
             </div>
           )
         }
@@ -341,14 +345,17 @@ const FC = (props) => {
       </div>
       <div className='d-flex py-3' style={{ justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #EFEFEF' }}>
         <Space>
-          <PermissionButton 
+          {
+            !readonly && <PermissionButton 
               onClick={onAddClick} 
               // permissionKey='新增'
               defaultPermission={true}
             >
             新建
             </PermissionButton>
-          <PermissionButton 
+          }
+          {
+            !readonly && <PermissionButton 
               onClick={onBatchDeteteClick} 
               // permissionKey='删除'
               defaultPermission={true}
@@ -357,6 +364,7 @@ const FC = (props) => {
             >
             删除
             </PermissionButton>
+          }
           <PermissionButton 
             onClick={onExportClick} 
             defaultPermission={true}

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

+import React from "react"
+import { Modal } from "antd"
+
+import RuleCURD from './rule'
+
+const FC = (props) => {
+  const { visible, onCancel } = props
+
+  const close = () => {
+    onCancel?.()
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      footer={null}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title='规范详情'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <RuleCURD readonly={true} />
+    </Modal>
+  )
+}
+
+export default FC
\ No newline at end of file

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

@@ -11,7 +11,7 @@ import Version from './rule-catalog-version'
 import { showMessage } from '../../../../util'
 
 const FC = (props) => {
-  const { onClick } = props
+  const { onClick, readonly } = props
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [selectedNode, setSelectedNode] = React.useState()
@@ -165,7 +165,8 @@ const FC = (props) => {
 
   return (
     <div>
-      <div className='px-3' style={{ 
+      {
+        !readonly && <div className='px-3' style={{ 
           display: 'flex',
           width: '100%',
           height: 40,
@@ -185,6 +186,7 @@ const FC = (props) => {
             </Tooltip>
           </Space>
         </div>  
+      }
       <div className='p-3'>
         <Spin spinning={loading}>
           <Tree
@@ -194,7 +196,7 @@ const FC = (props) => {
             treeData={treeData}
             onSelect={onTreeSelect}
             selectedKeys={(selectedNode?.id)?[selectedNode?.id]:undefined}
-            shouldRowContextMenu={() => true}
+            shouldRowContextMenu={() => !readonly}
             menuData={[
               { id: 'edit', title: '编辑目录' },
               { id: 'up', title: '上移目录' },

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

@@ -10,6 +10,7 @@ import Separate from '../../AssetManage/Component/Separate'
 import '../../AssetManage/index.less'
 
 const FC = (props) => {
+  const { readonly = false } = props
   const [node, setNode] = React.useState()
 
   const onTreeClick = (value) => {
@@ -23,7 +24,7 @@ const FC = (props) => {
         <Tree onClick={onTreeClick} {...props} />
       </div>
       <div className='middle'>
-        <List node={node} />
+        <List node={node} {...props} />
       </div>
     </div>
   )