模型显示摘要

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

@@ -12,6 +12,69 @@ import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../.
 
 import './ModelTable.less';
 
+const ModelNameColumn = (props) => {
+  const { text, record, detailItem } = props;
+  const [ data, setData ] = useState(record);
+
+  let _textComponent = <span>{text}</span>;
+  if (data.digest) {
+    _textComponent = <Descriptions className='model-table-descritpion' column={1} size='small'>
+      <Descriptions.Item label='模型名称'>
+      { data.digest.name||'' }
+      </Descriptions.Item>
+      <Descriptions.Item label='中文名称'>
+      { data.digest.cnName||'' }
+      </Descriptions.Item>
+      <Descriptions.Item label='描述'>
+      { data.digest.remark||'' }
+      </Descriptions.Item>
+      <Descriptions.Item label='字段'>
+      {
+        (data.digest.attributeDigests||[]).map((item, index) => {
+          if (index > 9) return null;
+          return (
+            <React.Fragment key={index}>
+            { (index > 0) && <br /> }
+            {`${item.name||''} ${item.cnName||''}`}
+            </React.Fragment>
+          )
+        })
+      }
+      {
+        (data.digest.attributeDigests||[]).length>10 && <React.Fragment>
+          <br />
+          ...
+        </React.Fragment>
+      }
+      </Descriptions.Item>
+    </Descriptions>
+  }
+
+  return (
+    <Tooltip 
+      title={_textComponent}
+      onVisibleChange={(visible) => {
+        if (visible && !record.digest) {
+          dispatch({
+            type: 'datamodel.getDataModelDigest',
+            payload: {
+              id: record.id
+            },
+            callback: _data => {
+              record.digest = _data;
+              setData({...record});
+            }
+          })
+        }
+      }}
+    >
+        <a onClick={()=>{detailItem(record);}}>
+      {text||''}
+      </a>
+    </Tooltip>
+  );
+}
+
 const ResizeableHeaderCell = props => {
   const { onResize, width, onClick, ...restProps } = props;
 
@@ -99,64 +162,8 @@ const ModelTable = (props) => {
       ellipsis: true,
       sorter: true,
       sortDirections: ['ascend', 'descend'],
-      onCell: (record, rowIndex) => {
-        // if (!record.digest) {
-        //   dispatch({
-        //     type: 'datamodel.getDataModelDigest',
-        //     payload: {
-        //       id: record.id
-        //     },
-        //     callback: _data => {
-        //       record.digest = _data;
-        //     }
-        //   })
-        // }
-      },
       render: (text, record, index) => {
-
-        let _textComponent = <span>{text}</span>;
-        if (record.digest) {
-          _textComponent = <Descriptions className='model-table-descritpion' column={1} size='small'>
-            <Descriptions.Item label='模型名称'>
-            { record.digest.name||'' }
-            </Descriptions.Item>
-            <Descriptions.Item label='中文名称'>
-            { record.digest.cnName||'' }
-            </Descriptions.Item>
-            <Descriptions.Item label='描述'>
-            { record.digest.remark||'' }
-            </Descriptions.Item>
-            <Descriptions.Item label='字段'>
-            {
-              (record.digest.attributeDigests||[]).map((item, index) => {
-                if (index > 9) return null;
-                return (
-                  <React.Fragment key={index}>
-                  { (index > 0) && <br /> }
-                  {`${item.name||''} ${item.cnName||''}`}
-                  </React.Fragment>
-                )
-              })
-            }
-            {
-              (record.digest.attributeDigests||[]).length>10 && <React.Fragment>
-                <br />
-                ...
-              </React.Fragment>
-            }
-            </Descriptions.Item>
-          </Descriptions>
-        }
-
-        return (
-          <Tooltip 
-            title={_textComponent}
-          >
-            <a onClick={()=>{detailItem(record);}}>
-            {text||''}
-            </a>
-          </Tooltip>
-        );
+        return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
       }
     },
     {