规范详情调整

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

-import React, { useEffect, useState } from 'react';
-import { Table } from 'antd';
-
-import { dispatch } from '../../../../model';
-
-const ConstraintDetail = () => {
-
-  const [ constraints, setConstraints ] = useState([]);
-  const [ expandedRowKeys, setExpandedRowKeys ] = useState([]);
-
-  useEffect(() => {
-    dispatch({
-      type: 'datamodel.getAllConstraints',
-      callback: data => {
-        setConstraints(data||[]);
-        if ((data||[]).length > 0) {
-          setExpandedRowKeys([data[0].id||'']);
-        }
-      }
-    })
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const columns = [
-    {
-      title: '中文名称',
-      dataIndex: 'cnName',
-      ellipsis: true,
-      width: 150,
-    },
-    {
-      title: '英文名称',
-      dataIndex: 'name',
-      ellipsis: true,
-      width: 150,
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-      ellipsis: true,
-    }
-  ];
-
-  return (
-    <div style={{ width: 600, maxHeight: 600, wordWrap: 'break-word', overflow: 'auto'  }}>
-      <Table
-        columns={columns}
-        dataSource={constraints||[]}
-        rowKey='id'
-        size='small'
-        expandable={{
-          expandedRowRender: record => {
-            return (
-              <>
-              {
-                record.allRules && record.allRules.map((rule, index) => {
-                  return (
-                    <div key={index}>
-                    {`中文名称: ${rule.name||''}  描述: ${rule.desc||''}`}
-                    </div>
-                  )
-                })
-              }
-              </>
-            )
-          },
-          rowExpandable: record => ((record.allRules||[]).length>0),
-          expandedRowKeys,
-          onExpand: (expanded, record) => {
-            const newExpandedKeys = [...expandedRowKeys];
-            if (expanded) {
-              newExpandedKeys.push(record.id||'');
-            } else {
-              const index = newExpandedKeys.indexOf(record.id||'');
-              newExpandedKeys.splice(index, 1);
-            }
-
-            setExpandedRowKeys([...newExpandedKeys]);
-          }
-        }}
-        pagination={false}
-      />
-    </div>
-  )
-}
-
-export default ConstraintDetail;
\ No newline at end of file

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

+import React, { useEffect, useState } from 'react';
+import { Modal, Button, Table, Input } from 'antd';
+
+import { dispatch } from '../../../../model';
+import './ConstraintDetailModal.less';
+
+const ConstraintDetailModal = (props) => {
+  const { onCancel, visible } = props;
+  const [loading, setLoading] = useState(false);
+  const [rules, setRules] = useState([]);
+  const [keyword, setKeyword] = useState('');
+
+  useEffect(() => {
+    if (visible) {
+      setLoading(true);
+      dispatch({
+        type: 'datamodel.getAllConstraints',
+        callback: data => {
+          setLoading(false);
+          const _rules = [];
+          (data||[]).forEach(constraint => {
+            (constraint.allRules||[]).forEach(rule => {
+              _rules.push({...constraint, ...{ ruleName: rule.name||'', ruleDesc: rule.desc||'' }});
+            });
+          });
+
+          setRules(_rules);
+        },
+        error: () => {
+          setLoading(false);
+        }
+      })
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      render: (_, __, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+    },
+    {
+      title: '规范名称',
+      dataIndex: 'name',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '规范中文名称',
+      dataIndex: 'cnName',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '前置依赖',
+      dataIndex: 'ruleName',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '描述',
+      dataIndex: 'ruleDesc',
+      ellipsis: true,
+    }
+  ]
+
+  const onSearchInputChange = (e) => {
+    setKeyword(e.target.value||'');
+  }
+
+  return (
+    <Modal 
+      className='constraint-detail-modal'
+      forceRender
+      visible={visible}
+      title='规范详情'
+      width={1000}
+      onCancel={() => {
+        onCancel && onCancel();
+      }}
+      footer={
+        [
+          <Button
+            key="1" 
+            type="primary"
+            onClick={() => {
+              onCancel && onCancel();
+            }}
+          >
+          取消
+          </Button>
+        ]
+      }
+    >
+      <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
+        <span className='mr-3'>前置依赖搜索:</span>
+        <Input 
+          placeholder="请输入前置依赖名称" 
+          allowClear 
+          value={keyword}
+          onChange={onSearchInputChange} 
+          style={{ width: 230 }}
+        />
+      </div>
+      <Table
+        loading={loading}
+        columns={columns} 
+        rowKey={'ruleName'}
+        dataSource={(rules||[]).filter(item => (item.ruleName||'').indexOf(keyword)!==-1)}
+        pagination={false} 
+        sticky
+      />
+    </Modal>
+  );
+}
+
+export default ConstraintDetailModal;
\ No newline at end of file

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

+.constraint-detail-modal {
+  .yy-table {
+    max-height: 600px !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

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

@@ -261,6 +261,7 @@ const TemplateCURDModal = (props) => {
           rowKey={'id'}
           dataSource={templates||[]}
           pagination={false} 
+          sticky
         />
       </>
     }

src/view/Manage/Model/index.jsx

@@ -6,7 +6,7 @@ import ModelTree from './Component/ModelTree';
 import ModelTable from './Component/ModelTable';
 import WordTemplateModal from './Component/WordTemplateModal';
 import TemplateCURDModal from './Component/TemplateCURDModal';
-import ConstraintDetail from './Component/ConstraintDetail';
+import ConstraintDetailModal from './Component/ConstraintDetailModal';
 import ImportModal from './Component/ImportModal';
 import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
@@ -19,6 +19,7 @@ class Model extends React.Component {
     this.state = {
       wordTemplateModalVisible: false,
       templateCURDModalVisible: false,
+      constraintDetailModalVisible: false,
       importModalVisible: false,
       exportDDLModalVisible: false,
       catalogId: '',
@@ -87,6 +88,10 @@ class Model extends React.Component {
     this.setState({ templateCURDModalVisible: true });
   }
 
+  onConstraintDetailClick = () => {
+    this.setState({ constraintDetailModalVisible: true });
+  }
+
   setFilterData = () => {
     const { keyword, tableData } = this.state;
 
@@ -198,6 +203,10 @@ class Model extends React.Component {
     refresh && this.onTableChange();
   }
 
+  onConstraintDetailModalCancel = () => {
+    this.setState({ constraintDetailModalVisible: false });
+  }
+
   onImportModalCancel = (refresh = false) => {
     this.setState({ importModalVisible: false });
     refresh && this.onTableChange();
@@ -208,7 +217,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible } = this.state;
+    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible, wordTemplateModalVisible, constraintDetailModalVisible } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3' }}>
@@ -240,13 +249,7 @@ class Model extends React.Component {
                 <Space>
                   <Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button>
                   <Button type="primary" onClick={this.onTemplateCURDClick}>字段追加配置</Button>
-                  <Popover 
-                    placement="bottomRight" 
-                    content={<ConstraintDetail />} 
-                    title='规范详情'
-                    trigger="hover">
-                    <Button type="primary">规范详情</Button>
-                  </Popover>
+                  <Button type="primary" onClick={this.onConstraintDetailClick}>规范详情</Button>
                 </Space>
               </div>
               <div
@@ -286,6 +289,11 @@ class Model extends React.Component {
           onCancel={this.onTemplateCURDModalCancel}
         />
 
+        <ConstraintDetailModal 
+          visible={constraintDetailModalVisible}
+          onCancel={this.onConstraintDetailModalCancel}
+        />
+
         <ImportModal 
           visible={importModalVisible} 
           action={importModalAction}