查看规范

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();
@@ -330,7 +334,10 @@ const ImportActionHeader = (props) => {
                 >
                   <ConstraintSelect 
                     constraints={constraints} 
-                    onChange={onConstraintChange} 
+                    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,29 +488,38 @@ 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 (
-    <Select 
-      onChange={onChange} 
-      value={value?.id} 
-      placeholder='请选择规范'
-      {...restProps}
-    >
-    {
-      (constraints||[]) && constraints.map((constraint, index) => {
-        return (
-          <Option key={index} value={constraint.id} >{constraint.cnName||''}</Option>
-        );
-      })
-    }
-    </Select>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Select 
+        onChange={(val) => { onChange?.(val) }} 
+        value={value?.id} 
+        placeholder='请选择规范'
+        style={{ flex: 1 }}
+        {...restProps}
+      >
+      {
+        (constraints||[]) && constraints.map((constraint, index) => {
+          return (
+            <Option key={index} value={constraint.id} >{constraint.cnName||''}</Option>
+          );
+        })
+      }
+      </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,39 +148,43 @@ const FC = (props) => {
               >
               规则详情
               </PermissionButton>
-              <div style={{ margin: '0 5px' }}>
-                <Divider type='vertical' />
-              </div>
-              <PermissionButton 
-                type='link'
-                size='small'
-                onClick={() => {
-                  setUpdateRuleParams({
-                    visible: true,
-                    item: record,
-                  })
-                }}
-                style={{ padding: 0 }}
-                // permissionKey='编辑'
-                // permissions={permissions}
-                defaultPermission={true}
-              >
-              编辑
-              </PermissionButton>
-              <div style={{ margin: '0 5px' }}>
-                <Divider type='vertical' />
-              </div>
-              <PermissionButton
-                type='link'
-                size='small'
-                onClick={() => { onDeteteClick(record); }}
-                style={{ padding: 0 }}
-                // permissionKey='删除'
-                // permissions={permissions}
-                defaultPermission={true}
-              >
-              删除
-              </PermissionButton>
+              {
+                !readonly && <React.Fragment>
+                  <div style={{ margin: '0 5px' }}>
+                    <Divider type='vertical' />
+                  </div>
+                  <PermissionButton 
+                    type='link'
+                    size='small'
+                    onClick={() => {
+                      setUpdateRuleParams({
+                        visible: true,
+                        item: record,
+                      })
+                    }}
+                    style={{ padding: 0 }}
+                    // permissionKey='编辑'
+                    // permissions={permissions}
+                    defaultPermission={true}
+                  >
+                  编辑
+                  </PermissionButton>
+                  <div style={{ margin: '0 5px' }}>
+                    <Divider type='vertical' />
+                  </div>
+                  <PermissionButton
+                    type='link'
+                    size='small'
+                    onClick={() => { onDeteteClick(record); }}
+                    style={{ padding: 0 }}
+                    // permissionKey='删除'
+                    // permissions={permissions}
+                    defaultPermission={true}
+                  >
+                  删除
+                  </PermissionButton>
+                </React.Fragment>
+              }
             </div>
           )
         }
@@ -341,22 +345,26 @@ const FC = (props) => {
       </div>
       <div className='d-flex py-3' style={{ justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #EFEFEF' }}>
         <Space>
-          <PermissionButton 
-            onClick={onAddClick} 
-            // permissionKey='新增'
-            defaultPermission={true}
-          >
-          新建
-          </PermissionButton>
-          <PermissionButton 
-            onClick={onBatchDeteteClick} 
-            // permissionKey='删除'
-            defaultPermission={true}
-            disabled={(selectedRows??[]).length===0}
-            tip={(selectedRows??[]).length===0?'请先选择规则':''} 
-          >
-          删除
-          </PermissionButton>
+          {
+            !readonly && <PermissionButton 
+              onClick={onAddClick} 
+              // permissionKey='新增'
+              defaultPermission={true}
+            >
+            新建
+            </PermissionButton>
+          }
+          {
+            !readonly && <PermissionButton 
+              onClick={onBatchDeteteClick} 
+              // permissionKey='删除'
+              defaultPermission={true}
+              disabled={(selectedRows??[]).length===0}
+              tip={(selectedRows??[]).length===0?'请先选择规则':''} 
+            >
+            删除
+            </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,26 +165,28 @@ const FC = (props) => {
 
   return (
     <div>
-      <div className='px-3' style={{ 
-        display: 'flex',
-        width: '100%',
-        height: 40,
-        alignItems: 'center',
-        borderBottom: '1px solid #EFEFEF',
-       }}>
-        <Space>
-          <PermissionButton 
-            defaultPermission={true} 
-            tip="新增目录"
-            type="text" 
-            icon={<PlusOutlined />} 
-            onClick={onAddClick} 
-          />
-          <Tooltip title="刷新目录">
-            <Button type="text" icon={<ReloadOutlined />} onClick={onRefreshClick} />
-          </Tooltip>
-        </Space>
-      </div>
+      {
+        !readonly && <div className='px-3' style={{ 
+          display: 'flex',
+          width: '100%',
+          height: 40,
+          alignItems: 'center',
+          borderBottom: '1px solid #EFEFEF',
+         }}>
+          <Space>
+            <PermissionButton 
+              defaultPermission={true} 
+              tip="新增目录"
+              type="text" 
+              icon={<PlusOutlined />} 
+              onClick={onAddClick} 
+            />
+            <Tooltip title="刷新目录">
+              <Button type="text" icon={<ReloadOutlined />} onClick={onRefreshClick} />
+            </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>
   )