Skip to content

S
szse
Commit ce68e3de by zhaochengxiang
Options

模型校验规范

parent 666a8e31
Showing with 54 additions and 179 deletions
src/view/Manage/Model/Component/ImportActionHeader.jsx
import React, { useState, useEffect, useMemo, useRef } from 'react'; import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd'; 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 { DownOutlined, UpOutlined, ExclamationCircleFilled, WarningFilled } from '@ant-design/icons';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util'; import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
...@@ -868,9 +868,11 @@ const ItemTitle = ({ name, cnName, validateReports }) => { ...@@ -868,9 +868,11 @@ const ItemTitle = ({ name, cnName, validateReports }) => {
) )
} }
export const ValidateTip = ({ validateReports, type, propertyName }) => { export const ValidateTip = ({ validateReports, type, propertyName, iid }) => {
const reports = useMemo(() => { const reports = useMemo(() => {
const index = (validateReports??[]).findIndex(item => item.type === type) const index = (validateReports??[]).findIndex(item => (
(item.type === type) && (!item.iid || item.iid === iid)
))
if (index !== -1) { if (index !== -1) {
const items = (validateReports[index].reportItems??[]).filter(item => item.checkRule?.ruleTemplate?.checkProperty?.originalPropertyEnName === propertyName) const items = (validateReports[index].reportItems??[]).filter(item => item.checkRule?.ruleTemplate?.checkProperty?.originalPropertyEnName === propertyName)
...@@ -916,7 +918,7 @@ export const ValidateTip = ({ validateReports, type, propertyName }) => { ...@@ -916,7 +918,7 @@ export const ValidateTip = ({ validateReports, type, propertyName }) => {
(reports??[]).map((item, index) => ( (reports??[]).map((item, index) => (
<Row key={index}> <Row key={index}>
<Space> <Space>
{ (item.alertTypeId === 'enforced') ? <WarningOutlined style={{ color: '#E94848' }} /> : <ExclamationCircleOutlined style={{ color: '#F7AB00' }} /> } { (item.alertTypeId === 'enforced') ? <WarningFilled style={{ color: '#E94848' }} /> : <ExclamationCircleFilled style={{ color: '#F7AB00' }} /> }
<span>{item.tip}</span> <span>{item.tip}</span>
</Space> </Space>
</Row> </Row>
...@@ -925,7 +927,7 @@ export const ValidateTip = ({ validateReports, type, propertyName }) => { ...@@ -925,7 +927,7 @@ export const ValidateTip = ({ validateReports, type, propertyName }) => {
</div> </div>
}> }>
{ {
(reports??[]).findIndex(item => item.alertTypeId === 'enforced') !== -1 ? <WarningOutlined style={{ color: '#E94848' }} /> : <ExclamationCircleOutlined style={{ color: '#F7AB00' }} /> (reports??[]).findIndex(item => item.alertTypeId === 'enforced') !== -1 ? <WarningFilled style={{ color: '#E94848' }} /> : <ExclamationCircleFilled style={{ color: '#F7AB00' }} />
} }
</Tooltip> </Tooltip>
} }
......
src/view/Manage/Model/Component/ImportActionIndex.jsx
...@@ -11,6 +11,7 @@ import DebounceInput from './DebounceInput'; ...@@ -11,6 +11,7 @@ import DebounceInput from './DebounceInput';
import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help'; import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util'; import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util';
import { EditModelContext } from './ContextManage'; import { EditModelContext } from './ContextManage';
import { ValidateTip } from './ImportActionHeader';
const { Option } = Select; const { Option } = Select;
...@@ -666,9 +667,12 @@ const ImportActionIndex = (props) => { ...@@ -666,9 +667,12 @@ const ImportActionIndex = (props) => {
ellipsis: true, ellipsis: true,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, termsRef.current)}</span> <ValidateTip type='Index' propertyName='name' validateReports={validateReports} iid={record.name} />
</Tooltip> <Tooltip title={text||''}>
<span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -772,79 +776,10 @@ const ImportActionIndex = (props) => { ...@@ -772,79 +776,10 @@ const ImportActionIndex = (props) => {
}, },
] ]
const validateColumn = {
title: '规范',
dataIndex: 'validate',
width: 180,
ellipsis: true,
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 (
<Tooltip key={index} title={shortCause}>
<div className='textOverflow' style={{ width: 130, color: '#f5222d' }} title={shortCause} key={index}>
<span>{shortCause||''}</span>
</div>
</Tooltip>
);
})
}
</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="规则详情"
>
<a href="#">详情</a>
</Popover>
}
</div>
)
}
};
const includeValidateColumn = [
...columns,
validateColumn
]
const includeValidateEditableColumn = [
...editableColumn,
validateColumn
]
const mergedColumns = () => { const mergedColumns = () => {
const hasValidateReports = (validateReports||[]).filter(report => report.type==='Index').length>0;
if (editable) { if (editable) {
let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn; let _columns = editableColumn;
return _columns.map((col) => { return _columns.map((col) => {
if (!col.editable) { if (!col.editable) {
...@@ -866,7 +801,7 @@ const ImportActionIndex = (props) => { ...@@ -866,7 +801,7 @@ const ImportActionIndex = (props) => {
}); });
} }
return hasValidateReports ? includeValidateColumn : columns; return columns;
} }
const moveRow = useCallback( const moveRow = useCallback(
......
src/view/Manage/Model/Component/ImportActionTable.jsx
...@@ -17,6 +17,7 @@ import DebounceInput from './DebounceInput'; ...@@ -17,6 +17,7 @@ import DebounceInput from './DebounceInput';
import SuggestTable from './SuggestTable'; import SuggestTable from './SuggestTable';
import { AttentionSvg, UnAttentionSvg } from './ModelSvg'; import { AttentionSvg, UnAttentionSvg } from './ModelSvg';
import { EditModelContext } from './ContextManage'; import { EditModelContext } from './ContextManage';
import { ValidateTip } from './ImportActionHeader';
import './ImportActionTable.less'; import './ImportActionTable.less';
import 'react-contexify/dist/ReactContexify.css'; import 'react-contexify/dist/ReactContexify.css';
...@@ -312,13 +313,14 @@ export const ImportActionTable = (props) => { ...@@ -312,13 +313,14 @@ export const ImportActionTable = (props) => {
ellipsis: true, ellipsis: true,
require: true, require: true,
fixed: 'left', fixed: 'left',
render: (text, _, __) => { render: (text, record, __) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<span> <ValidateTip type='DataModelAttribute' propertyName='cnName' validateReports={validateReports} iid={record.iid} />
{highlightSearchContentByTerms(text, termsRef.current)} <Tooltip title={text||''}>
</span> <span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip> </Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -331,9 +333,12 @@ export const ImportActionTable = (props) => { ...@@ -331,9 +333,12 @@ export const ImportActionTable = (props) => {
require: true, require: true,
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, termsRef.current)}</span> <ValidateTip type='DataModelAttribute' propertyName='name' validateReports={validateReports} iid={record.iid} />
</Tooltip> <Tooltip title={text||''}>
<span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -436,13 +441,14 @@ export const ImportActionTable = (props) => { ...@@ -436,13 +441,14 @@ export const ImportActionTable = (props) => {
ellipsis: true, ellipsis: true,
require: true, require: true,
width: 200, width: 200,
render: (text, _, __) => { render: (text, record, __) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<Typography.Text ellipsis={true}> <ValidateTip type='DataModelAttribute' propertyName='remark' validateReports={validateReports} iid={record.iid} />
{highlightSearchContentByTerms(text, termsRef.current)} <Tooltip title={text||''}>
</Typography.Text> <span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip> </Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -468,13 +474,14 @@ export const ImportActionTable = (props) => { ...@@ -468,13 +474,14 @@ export const ImportActionTable = (props) => {
editable: true, editable: true,
ellipsis: true, ellipsis: true,
width: 200, width: 200,
render: (text, _, __) => { render: (text, record, __) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<Typography.Text ellipsis={true}> <ValidateTip type='DataModelAttribute' propertyName='definition' validateReports={validateReports} iid={record.iid} />
{highlightSearchContentByTerms(text, termsRef.current)} <Tooltip title={text||''}>
</Typography.Text> <span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip> </Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -484,13 +491,14 @@ export const ImportActionTable = (props) => { ...@@ -484,13 +491,14 @@ export const ImportActionTable = (props) => {
editable: true, editable: true,
ellipsis: true, ellipsis: true,
width: 100, width: 100,
render: (text, _, __) => { render: (text, record, __) => {
return ( return (
<Tooltip title={text||''}> <React.Fragment>
<Typography.Text ellipsis={true}> <ValidateTip type='DataModelAttribute' propertyName='valueRange' validateReports={validateReports} iid={record.iid} />
{highlightSearchContentByTerms(text, termsRef.current)} <Tooltip title={text||''}>
</Typography.Text> <span>{highlightSearchContentByTerms(text, termsRef.current)}</span>
</Tooltip> </Tooltip>
</React.Fragment>
) )
} }
}, },
...@@ -1026,79 +1034,9 @@ export const ImportActionTable = (props) => { ...@@ -1026,79 +1034,9 @@ export const ImportActionTable = (props) => {
}, },
] ]
const validateColumn = {
title: '规范',
dataIndex: 'validate',
//小屏幕下隐藏规范, 给编辑多点空间
width: (tableWidth<1300 && editable)?0:200,
fixed: 'right',
render: (text, record, index) => {
let shortCauses = [];
let causes = [];
(validateReports||[]).forEach((report) => {
if (report.type==='DataModelAttribute' && report.iid === record.iid) {
(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 (
<Tooltip title={shortCause}>
<div className='textOverflow' style={{ width: 130, color: '#f5222d' }} key={index}>
<span>{shortCause||''}</span>
</div>
</Tooltip>
);
})
}
</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="规则详情"
>
<a href="#">详情</a>
</Popover>
}
</div>
)
}
};
const includeValidateColumn = [
...cols,
validateColumn
]
const includeValidateEditableColumn = [
...editableColumn,
validateColumn
]
const mergedColumns = () => { const mergedColumns = () => {
const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
if (editable) { if (editable) {
let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn; let _columns = editableColumn;
_columns = _columns.map((col) => { _columns = _columns.map((col) => {
if (!col.editable) { if (!col.editable) {
...@@ -1140,10 +1078,10 @@ export const ImportActionTable = (props) => { ...@@ -1140,10 +1078,10 @@ export const ImportActionTable = (props) => {
setColumns(_columns); setColumns(_columns);
} else { } else {
let _columns = hasValidateReports ? includeValidateColumn: cols; let _columns = cols;
if (action === 'flow') { if (action === 'flow') {
_columns = hasValidateReports ? includeValidateEditableColumn: editableColumn; _columns = editableColumn;
} }
// _columns = _columns.filter((col) => col.dataIndex!=='needAttention'); // _columns = _columns.filter((col) => col.dataIndex!=='needAttention');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment