推荐修改

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

@@ -328,7 +328,7 @@ const ImportActionIndex = (props) => {
     })
 
     setFilterData(__filterData);
-
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelerData])
 
   useEffect(() => {
@@ -346,6 +346,7 @@ const ImportActionIndex = (props) => {
   
       setFilterData(__filterData);
     }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keywordCondition])
   
   const isEditing = (record) => record.name === editingKey;

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

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Radio, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination, Space } from 'antd';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination, Space } from 'antd';
 import { CloseOutlined, CheckOutlined, PlusOutlined, MinusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -8,10 +8,11 @@ import { useClickAway } from 'ahooks';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
-import { dispatch, dispatchLatest } from '../../../../model'; 
+import { dispatchLatest } from '../../../../model'; 
 import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
 import { AppContext } from '../../../../App';
 import DebounceInput from './DebounceInput';
+import SuggestTable from './SuggestTable';
 
 import './ImportActionTable.less';
 
@@ -638,11 +639,11 @@ const ImportActionTable = (props) => {
 
   };
 
-  const onSuggestChange = (e) => {
+  const onSuggestChange = (record) => {
 
     form.resetFields();
     form.setFieldsValue({ 
-      ...suggests[e.target.value]
+      ...record
     });
 
     setSuggests([]);
@@ -1096,27 +1097,6 @@ const ImportActionTable = (props) => {
     setKeywordCondition({ keyword: value||'', needFilter: true });
   }
 
-  const sourceOnClick = (id) => {
-    const timestamp = new Date().getTime();
-
-    const tempArray = id.split('=');
-
-    if (tempArray.length>=3) {
-
-      dispatch({
-        type: 'datamodel.getParent',
-        payload: {
-          id
-        },
-        callback: data => {
-          window.open(`/center-home/menu/metasearch?id=${data._id}&did=${tempArray[1]||''}&timestamp=${timestamp}`);
-        }
-      })
-    } else {
-      window.open(`/center-home/menu/datastandard?id=${id}&timestamp=${timestamp}`);
-    }
-  }
-
   const loadMoreSuggests = (event) => {
     event.stopPropagation();
 
@@ -1221,7 +1201,9 @@ const ImportActionTable = (props) => {
               size='small'
               rowKey='iid'
               pagination={false}
-              scroll={{ x: 1500 }}
+              scroll={{
+                x: 'max-content'
+              }}
               sticky
               expandable={{
                 columnWidth: 0,
@@ -1232,39 +1214,14 @@ const ImportActionTable = (props) => {
                     {
                       suggests && suggests.length>0 && (
                         <React.Fragment>
-                        {/* <Divider orientation="left">智能推荐</Divider> */}
-                          <Radio.Group onChange={onSuggestChange} className='mb-3 ml-7'>
-                          {
-                            suggests && suggests.map((suggest, index) => {
-                              return (
-                                <Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
-                                {`中文名称: ${suggest.cnName||''}`}
-                                {` 英文名称: ${suggest.name||''}`}
-                                {` 描述: ${suggest.remark||''}`}
-                                {' 匹配度: '}
-                                <span style={{ color: '#f50' }}>{`${suggest.recommendedStats?.score}%`}</span>
-                                { index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
-                                {` 使用次数: ${suggest.recommendedStats?.referencesCount}`}
-                                {' 来源: '} 
-                                <a 
-                                  href='#' 
-                                  onClick={() => {
-                                    sourceOnClick(suggest.recommendedStats?.idInSource||'');
-                                  }}
-                                >
-                                {`${suggest.recommendedStats?.pathInSource||''}`}</a>
-                                </Radio>
-                              )
-                            })
-                          }
-                          </Radio.Group>
+                          <SuggestTable suggests={suggests} onSelect={onSuggestChange} />
                         </React.Fragment>
                       )
                     }
                     </React.Fragment>
                   }
                   {
-                    suggestHaveMore && <div className='flex' style={{ justifyContent: 'center' }}>
+                    suggestHaveMore && <div className='flex mt-3' style={{ justifyContent: 'center' }}>
                       <Button onClick={loadMoreSuggests}>加载更多</Button>
                     </div> 
                   }

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

@@ -216,7 +216,6 @@ const ModelTable = (props) => {
       ellipsis: true,
       sorter: true,
       sortDirections: ['ascend', 'descend'],
-      width: 200,
       render: (text, _, __) => {
         return (
           <Tooltip title={text||''}>

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

+import React, { useState } from 'react';
+import { Table, Tooltip } from 'antd';
+import { Resizable } from 'react-resizable';
+
+import { isSzseEnv } from '../../../../util';
+import { dispatch } from '../../../../model'; 
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+const SuggestTable = (props) => {
+
+  const { suggests, onSelect } = props;
+
+  const cols = [
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '描述',
+      dataIndex: 'remark',
+      width: 360,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '匹配度',
+      dataIndex: 'score',
+      width: 100,
+      render: (_, record, index) => {
+        return (
+          <React.Fragment>
+            <span style={{ color: '#f50' }}>{`${record.recommendedStats?.score}%`}</span>
+            { index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: '使用次数',
+      dataIndex: 'referencesCount',
+      width: 80,
+      render: (_, record) => {
+        return (
+          <span>{record.recommendedStats?.referencesCount}</span>
+        );
+      }
+    },
+    {
+      title: '来源',
+      dataIndex: 'source',
+      ellipsis: true,
+      render: (_, record) => {
+        return (
+          <Tooltip title={record.recommendedStats?.pathInSource||''}>
+          <a 
+          href='#' 
+          onClick={(e) => {
+            e.stopPropagation();
+            sourceOnClick(record.recommendedStats?.idInSource||'');
+          }}
+        >
+        {record.recommendedStats?.pathInSource||''}</a>
+        </Tooltip>
+        );
+      }
+    },
+  ];
+
+  const [ columns, setColumns ] = useState(cols);
+
+  const sourceOnClick = (id) => {
+    const timestamp = new Date().getTime();
+
+    const tempArray = id.split('=');
+
+    if (tempArray.length>=3) {
+
+      dispatch({
+        type: 'datamodel.getParent',
+        payload: {
+          id
+        },
+        callback: data => {
+          window.open(`/center-home/menu/metasearch?id=${data._id}&did=${tempArray[1]||''}&timestamp=${timestamp}`);
+        }
+      })
+    } else {
+      window.open(`/center-home/menu/datastandard?id=${id}&timestamp=${timestamp}`);
+    }
+  }
+
+  const onTableSelect = (record, selected, selectedRows, nativeEvent) => {
+    onSelect && onSelect(record);
+  }
+
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const rowSelection = {
+    type: 'radio',
+    onSelect: onTableSelect,
+  };
+
+  return (
+    <Table
+      rowSelection={rowSelection}
+      dataSource={suggests||[]}
+      pagination={false}
+      rowClassName={(record, index) => {
+        return 'pointer';
+      }}
+      components={{
+        header: {
+          cell: ResizeableHeaderCell,
+        }
+      }}
+      columns={
+        columns.map((col, index) => ({
+          ...col,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        }))
+      }
+      onRow={(record, index) => {
+        return {
+          onClick: (e) => {
+            onSelect && onSelect(record);
+          }
+        }
+      }}
+      scroll={{
+        x: 'max-content'
+      }}
+    />
+  );
+}
+
+export default SuggestTable;
\ No newline at end of file