基本信息校验规范

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

 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip, Checkbox } from 'antd';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd';
+import { DownOutlined, UpOutlined, ExclamationCircleOutlined, WarningOutlined } from '@ant-design/icons';
 import { Subject } from 'rxjs';
 
-import { highlightSearchContentByTerms, generateUUID } from '../../../../util';
+import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
 
 import DebounceInput from './DebounceInput';
@@ -51,7 +51,6 @@ export const ImportActionHeaderSubject = new Subject();
 const ImportActionHeader = (props) => {
   const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms, supportedPartitionTypes } = props;
 
-  const [ causes, setCauses ] = useState([]);
   const [ options, setOptions ] = useState([]);
 
   const [ autoTranslate, setAutoTranslate ] = useState(false);
@@ -85,27 +84,6 @@ const ImportActionHeader = (props) => {
 
   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])
-
-  useEffect(() => {
-
     setAutoTranslate((modelerData.name||'')==='');
     if (modelerData) {
       form?.setFieldsValue(modelerData);
@@ -350,7 +328,7 @@ const ImportActionHeader = (props) => {
           <Row gutter={10}>
             <Col xs={24} sm={24} lg={12} xl={8}>                
                 <Form.Item
-                label="中文名称"
+                  label={<ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} />}
                   name="cnName"
                   rules={[{ required: true, message: '请输入中文名称!' }]}
                 >
@@ -359,11 +337,14 @@ const ImportActionHeader = (props) => {
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
               <Form.Item
-                label="英文名称"
+                label={<ItemTitle name='name' cnName='英文名称' validateReports={validateReports} />}
                 name="name"
                 rules={[{ required: true, message: '请输入英文名称!' }]}
               >
-                <AutoComplete options={options} onSearch={onSearch} />
+                <AutoComplete 
+                  options={options} 
+                  onSearch={onSearch} 
+                /> 
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
@@ -380,7 +361,7 @@ const ImportActionHeader = (props) => {
             </Col>
             <Col xs={24} sm={24} lg={12} xl={8}>
               <Form.Item
-                label="数据内容"
+                label={<ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} />}
                 name="remark"
                 rules={[{ required: true, message: '请输入数据内容!' }]}
                 style={{ marginBottom: 15 }}
@@ -527,25 +508,10 @@ const ImportActionHeader = (props) => {
       ) : (
         <React.Fragment>
           <Descriptions column={3}>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
-            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>
-            {
-              <div>
-                <div>{highlightSearchContentByTerms(modelerData.name||'', terms)}</div>
-                {
-                  (causes||[]).map((cause, index) => {
-                    return (
-                      <div key={index} style={{ color: '#ff4d4f' }}>
-                      {cause||''}
-                      </div>
-                    )
-                  })
-                }
-              </div>
-            }
-            </Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} /></div>} >{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='name' cnName='英文名称' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.name||'', 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>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
+            <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>} >{modelerData.tableType}</Descriptions.Item>
           </Descriptions>  
           {
@@ -892,3 +858,77 @@ const UpdateSelect = ({ value = '', onChange, ...restProps }) => {
     </Select>
   );
 }
+
+const ItemTitle = ({ name, cnName, validateReports }) => {
+  return (
+    <Space size={2}>
+      {cnName}
+      <ValidateTip validateReports={validateReports} type='DataModel' propertyName={name} />
+    </Space>
+  )
+}
+
+export const ValidateTip = ({ validateReports, type, propertyName }) => {
+  const reports = useMemo(() => {
+    const index = (validateReports??[]).findIndex(item => item.type === type)
+    if (index !== -1) {
+      const items = (validateReports[index].reportItems??[]).filter(item => item.checkRule?.ruleTemplate?.checkProperty?.originalPropertyEnName === propertyName)
+
+      return items.map(item => {
+        const [preCheckProperty, checkProperty] = [item.checkRule?.ruleTemplate?.preCheckProperty, item.checkRule?.ruleTemplate?.checkProperty]
+        let tip = ''
+        if (preCheckProperty) {
+          tip = `${preCheckProperty?.propertyCnName??''} ${preCheckProperty.expressionTypeCnName??''} ${preCheckProperty.verifyExpression?.cnName??''}`
+          if (IsArr(preCheckProperty?.verifyExpression?.value)) {
+            tip = `${tip} ${preCheckProperty?.verifyExpression?.value.join(';')}`
+          } else {
+            tip = `${tip} ${preCheckProperty?.verifyExpression?.value}`
+          }
+        }
+
+        if (checkProperty) {
+          tip = tip?`${tip} `:''
+          tip = `${tip}${checkProperty?.propertyCnName??''} ${checkProperty.expressionTypeCnName??''} ${checkProperty.verifyExpression?.cnName??''}`
+          if (IsArr(checkProperty?.verifyExpression?.value)) {
+            tip = `${tip} ${checkProperty?.verifyExpression?.value.join(';')}`
+          } else {
+            tip = `${tip} ${checkProperty?.verifyExpression?.value}`
+          }
+        }
+
+        return ({
+          alertTypeName: item.checkRule?.alertTypeName,
+          alertTypeId: item.checkRule?.alertTypeId,
+          tip
+        })
+      })
+    }
+
+    return []
+  }, [validateReports, type, propertyName])
+
+  return (
+    <React.Fragment>
+    {
+      (reports??[]).length === 0 ? null : <Tooltip title={
+        <div>
+        {
+          (reports??[]).map((item, index) => (
+            <Row key={index}>
+              <Space>
+                { (item.alertTypeId === 'enforced') ? <WarningOutlined style={{ color: '#E94848' }} /> : <ExclamationCircleOutlined style={{ color: '#F7AB00' }} /> }
+                <span>{item.tip}</span>
+              </Space>
+            </Row>
+          ))
+        }
+        </div>
+      }>
+        {
+          (reports??[]).findIndex(item => item.alertTypeId === 'enforced') !== -1 ? <WarningOutlined style={{ color: '#E94848' }} /> : <ExclamationCircleOutlined style={{ color: '#F7AB00' }} />
+        }  
+      </Tooltip>
+    }
+    </React.Fragment>
+  )
+}
\ No newline at end of file