模型规范

src/model/datamodel.js

@@ -77,6 +77,10 @@ export function* getAllConstraintsAndTemplates() {
   return { constraints, templates }; 
 }
 
+export function* getAllConstraints() {
+  return yield call(datamodelerService.constraints);
+}
+
 export function* getAllTemplates() {
   return yield call(datamodelerService.templates);
 }

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/ImportAction.jsx

@@ -30,7 +30,7 @@ const ImportAction = (props) => {
         cnName: '',
         name: '',
         remark: '',
-        easyDataModelerModelingTemplate: {}
+        easyDataModelerModelingTemplate: ''
       });
     }
 
@@ -87,6 +87,7 @@ const ImportAction = (props) => {
 
         setModelerData(newModelerData)
         onChange && onChange(newModelerData);
+        validateDataModel(newModelerData);
       }
     })
   }
@@ -196,11 +197,15 @@ const ImportAction = (props) => {
     })
   }
 
-  const onIndexChange = (data) => {
+  const onIndexChange = (data, validate=false) => {
     const newModelerData = {...modelerData, easyDataModelerIndices: data};
 
     setModelerData(newModelerData);
     onChange && onChange(newModelerData);
+
+    if (validate) {
+      validateDataModel(newModelerData);
+    }
   }
 
   const getIndicesAfterTableChange = (newModelerData) => {
@@ -228,8 +233,9 @@ const ImportAction = (props) => {
   return (
     <>
       {
-        <div className='d-flex mb-5'>
-          <Select value={constraint.name?constraint.name:null} placeholder='请选择规则' style={{ marginLeft: 'auto', minWidth: 100 }} onChange={onConstraintChange} disabled={ action==='detail' } >
+        <div className='d-flex mb-5' style={{ alignItems: 'center' }}>
+          <span style={{ marginLeft: 'auto' }}>规范:</span>
+          <Select className='ml-3' value={constraint.name?constraint.name:null} placeholder='请选择规范' style={{ minWidth: 100 }} onChange={onConstraintChange} disabled={ action==='detail' } >
           {
             (constraints||[]).map((constraint, index) => {
               return (
@@ -245,6 +251,7 @@ const ImportAction = (props) => {
         editable={action!=='detail'} 
         modelerData={modelerData||{}} 
         templates={templates}
+        validateReports={validateReports}
         onTemplateChange={onTemplateChange}
       /> 
       <ImportActionTable 
@@ -260,6 +267,7 @@ const ImportAction = (props) => {
         modelerData={modelerData||{}} 
         constraint={constraint} 
         template={template}
+        validateReports={validateReports}
         onChange={onIndexChange} 
         editable={action!=='detail'} 
       />

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Row, Col, Descriptions, Select, AutoComplete } from 'antd';
 
 import { dispatchLatest } from '../../../../model'; 
@@ -26,10 +26,32 @@ const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps })
 }
 
 const ImportActionHeader = (props) => {
-  const { editable, form, modelerData, templates, onTemplateChange } = props;
+  const { editable, form, modelerData, templates, onTemplateChange, validateReports } = props;
 
+  const [ causes, setCauses ] = useState([]);
   const [ options, setOptions ] = useState([]);
 
+  useEffect(() => {
+
+    const causes = [];
+    (validateReports||[]).forEach(report => {
+    
+      if (report.type === 'DataModel') {
+        (report.reportItems||[]).forEach((item) => {
+          causes.push(item.cause||'');
+        })
+      }
+    });
+
+    if (editable) {
+      form.setFields([{ name: 'name', errors: causes }]);
+    } else {
+      setCauses(causes);
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateReports])
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -141,7 +163,23 @@ const ImportActionHeader = (props) => {
     ) : (
       <Descriptions>
         <Descriptions.Item label="中文名称">{modelerData.cnName||''}</Descriptions.Item>
-        <Descriptions.Item label="英文名称">{modelerData.name||''}</Descriptions.Item>
+        <Descriptions.Item label="英文名称">
+        {
+          <div>
+            <div>{modelerData.name||''}</div>
+            {
+              (causes||[]).map((cause, index) => {
+                return (
+                  <div key={index} style={{ color: '#ff4d4f' }}>
+                  {cause}
+                  </div>
+                )
+              })
+            }
+          </div>
+        }
+        </Descriptions.Item>
+
         <Descriptions.Item label="数据表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
         <Descriptions.Item label="描述">{modelerData.remark||''}</Descriptions.Item>
       </Descriptions>

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

@@ -259,7 +259,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 };
 
 const ImportActionIndex = (props) => {
-  const { modelerData, onChange, editable, constraint, template } = props;
+  const { modelerData, onChange, editable, constraint, template, validateReports } = props;
 
   const [ attributes, setAttributes ] = useState([]);
   const [ data, setData ] = useState([]);
@@ -503,10 +503,77 @@ const ImportActionIndex = (props) => {
     },
   ]
 
+  const validateColumn = {
+    title: '规范',
+    dataIndex: 'validate',
+    width: 180,
+    render: (text, record, index) => {
+      let shortCauses = []; 
+      let causes = [];
+      (validateReports||[]).forEach((report) => {
+        if (report.type==='Index' && report.iid === record.name) {
+          (report.reportItems||[]).forEach((item) => {
+            shortCauses.push(item.shortCause||'');
+            causes.push(item.cause||'');
+          })
+        }
+      });
+
+      return (
+        <div className='d-flex' key={index} style={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+          {
+            shortCauses && shortCauses.map((shortCause, index) => {
+              return (
+                <div className='textOverflow' style={{ width: 130, color: '#f5222d' }} title={shortCause} key={index}>
+                  <span>{shortCause||''}</span>
+                </div>
+              );
+            })
+          }
+          </div>
+          {
+            (causes||[]).length>0 && <Popover
+              content={
+                <div style={{ maxWidth: 200, maxHeight: 200, wordWrap: 'break-word', overflow: 'auto'  }}>
+                {
+                  causes && causes.map((cause, index) => {
+                    return (
+                      <Typography.Paragraph key={index} >
+                      {cause||''}
+                      </Typography.Paragraph>
+                    )
+                  })
+                }
+                </div>
+              }
+              title="规则详情"
+              trigger="click"
+            >     
+              <a href="">详情</a>     
+            </Popover>
+          }
+        </div>
+      )
+    }
+  };
+
+  const includeValidateColumn = [
+    ...columns,
+    validateColumn
+  ]
+
+  const includeValidateEditableColumn = [
+    ...editableColumn,
+    validateColumn
+  ]
+
   const mergedColumns = () => {
+    const hasValidateReports = (validateReports||[]).filter(report => report.type==='Index').length>0;
+
     if (editable) {
 
-      let _columns = editableColumn;
+      let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
 
       return _columns.map((col) => {
         if (!col.editable) {
@@ -527,7 +594,7 @@ const ImportActionIndex = (props) => {
       });
     }
 
-    return columns;
+    return hasValidateReports ? includeValidateColumn : columns;
   }
 
   const moveRow = useCallback(
@@ -577,7 +644,7 @@ const ImportActionIndex = (props) => {
           />
         </div>
         { 
-          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!==null || keyword!=='' } >新增行</Button>
+          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!==null || keyword!=='' } >新增索引</Button>
         }
       </div>
       <DndProvider backend={HTML5Backend} >

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

@@ -305,8 +305,24 @@ const ImportActionTable = (props) => {
       })
 
       const newData = [...data];
+  
       const index = newData.findIndex((item) => editingKey === item.iid);
   
+      //判断字段名称是否唯一
+      let _index;
+      if (index === -1) {
+        _index = (data||[]).findIndex(item => item.name === row.name);
+      } else {
+        const newDataExcludeSelf = [...data];
+        newDataExcludeSelf.splice(index, 1);  
+        _index = (newDataExcludeSelf||[]).findIndex(item => item.name === row.name);
+      }
+
+      if (_index !== -1) {
+        form.setFields([{ name: 'name', errors: ['字段名称不能重复'] }]);
+        return;
+      }
+
       if (index === -1) {
         
         newData.splice(0, 0, row);
@@ -527,7 +543,7 @@ const ImportActionTable = (props) => {
       let shortCauses = []; 
       let causes = [];
       (validateReports||[]).forEach((report) => {
-        if (report.iid === record.iid) {
+        if (report.type==='DataModelAttribute' && report.iid === record.iid) {
           (report.reportItems||[]).forEach((item) => {
             shortCauses.push(item.shortCause||'');
             causes.push(item.cause||'');
@@ -585,9 +601,11 @@ const ImportActionTable = (props) => {
   ]
 
   const mergedColumns = () => {
+    const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
+
     if (editable) {
 
-      let _columns = (validateReports||[]).length>0 ? includeValidateEditableColumn: editableColumn;
+      let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
 
       return _columns.map((col) => {
         if (!col.editable) {
@@ -608,7 +626,7 @@ const ImportActionTable = (props) => {
       });
     }
 
-    return (validateReports||[]).length>0 ? includeValidateColumn : columns;
+    return hasValidateReports ? includeValidateColumn : columns;
   }
 
   const moveRow = useCallback(
@@ -658,7 +676,7 @@ const ImportActionTable = (props) => {
           />
         </div>
         { 
-          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新增行</Button>
+          editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新增字段</Button>
         }
       </div>
       <DndProvider backend={HTML5Backend} >

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Row, Col, Button, Input, Space } from 'antd';
+import { Row, Col, Button, Input, Space, Popover } from 'antd';
 import copy from "copy-to-clipboard";  
 
 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 ImportModal from './Component/ImportModal';
 import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
@@ -234,6 +235,13 @@ 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>
                 </Space>
               </div>
               <div