高亮

src/App.js

@@ -22,10 +22,11 @@ export default class App extends React.Component {
 
     const { params } = this.props;
 
-    let message = '', id = '';
+    let message = '', id = '', terms = [];
     if (params) {
       message = params.message||'';
       id = params.id||'';
+      terms = params.terms||[];
     }
 
     if (message === 'showDataModelDetail') {
@@ -34,6 +35,7 @@ export default class App extends React.Component {
           modelerId={id} 
           reference='search'
           action='detail'
+          terms={terms}
           visible={true}
         />
       );
@@ -45,6 +47,7 @@ export default class App extends React.Component {
           id={id} 
           reference='search'
           action='detail'
+          terms={terms}
           visible={true}
         />
       );

src/util/index.js

@@ -146,3 +146,41 @@ export const getQueryParam = (param, url) => {
   if (!results[2]) return ''
   return decodeURIComponent(results[2].replace(/\+/g, ' '))
 }
+
+function highlightSearchContent(content) {
+  if (content===null || content==='') return '';
+
+  const startFlag = '<em>';
+  const endFlag = '</em>';
+
+  const start = content.indexOf(startFlag);
+  const end = content.indexOf(endFlag);
+  const beforeStr = content.substr(0, start);
+
+  const middleStr = content.substr(start + startFlag.length, end - start - startFlag.length);
+  const afterStr = content.substr(end + endFlag.length);
+
+  return (
+    <>
+    {
+      start > -1 ? <span>
+        {beforeStr}
+        <span style={{ color: '#f50' }}>{middleStr}</span>
+        {highlightSearchContent(afterStr)}
+      </span> : <span>{content}</span>
+    }
+    </>
+  )
+}
+
+export function highlightSearchContentByTerms(content, terms) {
+  if (content===null || content==='') return '';
+  if ((terms||[]).length===0) return content;
+
+  let processContent = content;
+  (terms||[]).forEach(term => {
+    processContent = processContent.replace(term, `<em>${term}</em>`);
+  })
+
+  return highlightSearchContent(processContent);
+}
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetDetail.jsx

@@ -6,7 +6,7 @@ import { dispatch } from '../../../../model';
 
 const AssetDetail = (props)=>{
   
-  const { onCancel, visible, id, reference=null } = props;
+  const { onCancel, visible, id, reference=null, terms } = props;
   const [ asset, setAsset ] = useState('');
   const [ assetName, setAssetName ] = useState('');
   const [ loading, setLoading ] = useState(false);
@@ -70,7 +70,7 @@ const AssetDetail = (props)=>{
     }
     {
       reference && <Spin spinning={loading}>
-        <AssetDetailItem data={asset} />
+        <AssetDetailItem data={asset} terms={terms} />
       </Spin>
     }
     </>

src/view/Manage/AssetManage/Component/AssetDetailItem.jsx

 import React, { useEffect, useState } from 'react';
 import { Avatar, Row, Col, Typography, Divider } from 'antd';
 
+import { highlightSearchContentByTerms } from '../../../../util';
 import './AssetItem.less';
 
 const colors = [
@@ -17,7 +18,7 @@ const colors = [
 
 const AssetItem = (props) => {
 
-  const { data } = props;
+  const { data, terms } = props;
   const [ typesOfElements, setTypesOfElements ] = useState([]);
 
   useEffect(() => {
@@ -68,7 +69,7 @@ const AssetItem = (props) => {
                   return (
                     <Col className='mt-3' key={_index} md={8}>
                       <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
-                      { `${element.name||''}: ${element.value||''}` }
+                      { `${element.name||''}: `}{highlightSearchContentByTerms(element.value||'', terms)}
                       </Typography.Paragraph>
                     </Col>
                   );

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

@@ -10,7 +10,7 @@ import { dispatchLatest, dispatch } from '../../../../model';
 const { Option } = Select;
 
 const ImportAction = (props) => {
-  const { action, hints, onChange, form, modelerId } = props;
+  const { action, hints, onChange, form, modelerId, terms } = props;
 
   const [ constraints, setConstraints ] = useState([]);
   const [ constraint, setConstraint ] = useState({});
@@ -277,6 +277,7 @@ const ImportAction = (props) => {
         validateReports={validateReports}
         onTemplateChange={onTemplateChange}
         onChange={onHeaderChange}
+        terms={terms}
       /> 
       <ImportActionTable 
         modelerData={modelerData||{}}
@@ -286,6 +287,7 @@ const ImportAction = (props) => {
         supportedDatatypes={supportedDatatypes} 
         onChange={onTableChange} 
         editable={action!=='detail'} 
+        terms={terms}
       />
       <ImportActionIndex 
         modelerData={modelerData||{}} 
@@ -294,6 +296,7 @@ const ImportAction = (props) => {
         validateReports={validateReports}
         onChange={onIndexChange} 
         editable={action!=='detail'} 
+        terms={terms}
       />
     </Spin>
   );

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

 import React, { useState, useEffect } from 'react';
 import { Form, Input, Row, Col, Descriptions, Select, AutoComplete } from 'antd';
 
+import { highlightSearchContentByTerms } from '../../../../util';
 import { dispatch } from '../../../../model'; 
 
 const { Option } = Select;
@@ -26,7 +27,7 @@ const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps })
 }
 
 const ImportActionHeader = (props) => {
-  const { editable, form, modelerData, templates, onTemplateChange, validateReports, onChange } = props;
+  const { editable, form, modelerData, templates, onTemplateChange, validateReports, onChange, terms } = props;
 
   const [ causes, setCauses ] = useState([]);
   const [ options, setOptions ] = useState([]);
@@ -167,11 +168,11 @@ const ImportActionHeader = (props) => {
       </Form> 
     ) : (
       <Descriptions>
-        <Descriptions.Item label="中文名称">{modelerData.cnName||''}</Descriptions.Item>
+        <Descriptions.Item label="中文名称">{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
         <Descriptions.Item label="英文名称">
         {
           <div>
-            <div>{modelerData.name||''}</div>
+            <div>{highlightSearchContentByTerms(modelerData.name||'', terms)}</div>
             {
               (causes||[]).map((cause, index) => {
                 return (
@@ -186,7 +187,7 @@ const ImportActionHeader = (props) => {
         </Descriptions.Item>
 
         <Descriptions.Item label="数据表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
-        <Descriptions.Item label="描述">{modelerData.remark||''}</Descriptions.Item>
+        <Descriptions.Item label="描述">{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
       </Descriptions>
     ) 
   )

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

@@ -6,7 +6,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 
 import './ImportActionIndex.less';
-import { showMessage } from '../../../../util';
+import { showMessage, highlightSearchContentByTerms } from '../../../../util';
 
 const { Option } = Select;
 
@@ -259,7 +259,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 };
 
 const ImportActionIndex = (props) => {
-  const { modelerData, onChange, editable, constraint, template, validateReports } = props;
+  const { modelerData, onChange, editable, constraint, template, validateReports, terms } = props;
 
   const [ attributes, setAttributes ] = useState([]);
   const [ data, setData ] = useState([]);
@@ -425,7 +425,7 @@ const ImportActionIndex = (props) => {
       ellipsis: true,
       render: (text, record, index) => {
         return (
-          <span style={{ fontWeight: 'bold' }} >{text}</span>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
         )
       }
     },
@@ -462,10 +462,12 @@ const ImportActionIndex = (props) => {
 
               const order = record.indexedAttributeOrders[index]||'';
 
-              const _text = `字段: ${item.name||''} 排序:  ${order||''}`;
-              
               return (
-                <Row key={index}><span>{_text}</span></Row>
+                <Row key={index}>
+                  <span>字段: </span>
+                  { highlightSearchContentByTerms(item.name||'', terms) }
+                  <span>{` 排序:  ${order||''}`}</span>
+                </Row>
               )
             })
           }
@@ -473,11 +475,6 @@ const ImportActionIndex = (props) => {
         );
       }
     },
-    {
-      title: '',
-      dataIndex: '',
-      width: 200,
-    }
   ];
 
   const editableColumn = [

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

@@ -5,7 +5,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 
-import { generateUUID } from '../../../../util';
+import { generateUUID, highlightSearchContentByTerms } from '../../../../util';
 import { dispatchLatest } from '../../../../model'; 
 
 import './ImportActionTable.less';
@@ -219,7 +219,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 };
 
 const ImportActionTable = (props) => {
-  const { modelerData, onChange, editable, supportedDatatypes, constraint, template, validateReports, type = 'model' } = props;
+  const { modelerData, onChange, editable, supportedDatatypes, constraint, template, validateReports, type = 'model', terms } = props;
   const [ data, setData ] = useState([]);
 
   const [ form ] = Form.useForm();
@@ -424,6 +424,13 @@ const ImportActionTable = (props) => {
       dataIndex: 'cnName',
       editable: true,
       ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <span>
+          {highlightSearchContentByTerms(text, terms)}
+          </span>
+        )
+      }
     },
     {
       title: '英文名称',
@@ -433,7 +440,7 @@ const ImportActionTable = (props) => {
       ellipsis: true,
       render: (text, record, index) => {
         return (
-          <span style={{ fontWeight: 'bold' }} >{text}</span>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
         )
       }
     },
@@ -529,6 +536,13 @@ const ImportActionTable = (props) => {
       dataIndex: 'remark',
       editable: true,
       ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <span>
+          {highlightSearchContentByTerms(text, terms)}
+          </span>
+        )
+      }
     },
   ];
 

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

@@ -11,7 +11,7 @@ import { dispatchLatest } from '../../../../model';
 import { showMessage } from '../../../../util';
 
 const ImportModal = (props) => {
-  const { catalogId, visible, onCancel, action, addMode, modelerId, reference=null } = props;
+  const { catalogId, visible, onCancel, action, addMode, modelerId, reference=null, terms } = props;
   const [ step, setStep ] = useState(0);
   const [ excelFiles, setExcelFiles ] = useState([]);
   const [ hints, setHints ] = useState([]);
@@ -259,7 +259,7 @@ const ImportModal = (props) => {
       </Modal>
     }
     {
-      reference==='search' && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
+      reference==='search' && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} terms={terms} />
     }
     </>
   )