匹配推荐

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

 import React from 'react'
 import { Modal, Button, Spin, Tooltip, Typography, Space, Input } from "antd"
+import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
 
 import { dispatch } from '../../../../model'
 import Table from '../../../../util/Component/Table'
@@ -21,6 +22,97 @@ const FC = (props) => {
     cnName: undefined,
     triggerType: undefined,
   })
+  const [isCompact, setCompact] = React.useState(true)
+
+  const cols = [
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: 200,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      dataIndex: 'name',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '类型',
+      dataIndex: 'datatype',
+      width: 160,
+      render: (_, record, __) => {
+        if (record?.datatype) {
+
+          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
+
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
+          
+          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
+          }
+
+          return record.datatype.name||'';
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '业务含义',
+      dataIndex: 'remark',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <Typography.Text ellipsis={true}>{text||''}</Typography.Text>
+          </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',
+      render: (_, record) => {
+        return (
+          <SourceComponent data={record.recommendedStats?.sourceInfos||[]} name={record.name||''} onClick={onSourceClick} />
+        );
+      }
+    },
+  ]
 
   React.useEffect(() => {
     if (visible) {
@@ -43,11 +135,14 @@ const FC = (props) => {
     }
   }, [args], { wait:300 })
 
+  const columns = React.useMemo(() => {
+    return isCompact ? [...cols].slice(0, 4) : [...cols]
+  }, [cols, isCompact])
+
   const onSourceClick = (id, name) => {
     const timestamp = new Date().getTime();
     const tempArray = (id??'').split('=');
     if (tempArray.length>=3) {
-
       dispatch({
         type: 'datamodel.getParent',
         payload: {
@@ -64,98 +159,6 @@ const FC = (props) => {
     }
   }
 
-  const cols = React.useMemo(() => {
-    return [
-      {
-        title: '中文名称',
-        dataIndex: 'cnName',
-        width: 200,
-        render: (text, _, __) => {
-          return (
-            <Tooltip title={text||''}>
-              <span>{text||''}</span>
-            </Tooltip>
-          )
-        }
-      },
-      {
-        title: '英文名称',
-        dataIndex: 'name',
-        render: (text, _, __) => {
-          return (
-            <Tooltip title={text||''}>
-              <span>{text||''}</span>
-            </Tooltip>
-          )
-        }
-      },
-      {
-        title: '类型',
-        dataIndex: 'datatype',
-        width: 160,
-        render: (_, record, __) => {
-          if (record?.datatype) {
-  
-            if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
-  
-              return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
-            
-            } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
-              return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
-            }
-  
-            return record.datatype.name||'';
-          }
-  
-          return '';
-        }
-      },
-      {
-        title: '业务含义',
-        dataIndex: 'remark',
-        render: (text, _, __) => {
-          return (
-            <Tooltip title={text||''}>
-              <Typography.Text ellipsis={true}>{text||''}</Typography.Text>
-            </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',
-        render: (_, record) => {
-          return (
-            <SourceComponent data={record.recommendedStats?.sourceInfos||[]} name={record.name||''} onClick={onSourceClick} />
-          );
-        }
-      },
-    ]
-  }, [onSourceClick])
-
   const getSuggests = () => {
     setLoading(true)
     dispatch({
@@ -214,82 +217,98 @@ const FC = (props) => {
     close()
   }
 
-  const footer = React.useMemo(() => {
-    return [
-      <Button key='cancel'
-        onClick={() => close()}
-      >取消</Button>,
-      <Button key='save' type='primary'
-        onClick={() => save()}
-      >确定</Button>
-    ]
-  }, [close, save])
+  // const footer = React.useMemo(() => {
+  //   return [
+  //     <Button key='cancel'
+  //       onClick={() => close()}
+  //     >取消</Button>,
+  //     <Button key='save' type='primary'
+  //       onClick={() => save()}
+  //     >确定</Button>
+  //   ]
+  // }, [close, save])
 
   return (
     <Modal
       visible={visible}
-      footer={footer}
-      width='80%'
-      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
-      title='匹配推荐'
+      footer={null}
+      width={isCompact?'50%':'80%'}
+      bodyStyle={{ padding: '15px' }}
+      title='匹配推荐'       
       centered destroyOnClose
       onCancel={() => { close() }}
     >
-      <div className='mb-3'>
-        <Space>
-          <span>中文名称:</span>
-          <Input size="middle"
-            placeholder="请输入中文名称"
-            value={args.cnName}
-            bordered={true} allowClear
-            onChange={(e) => {
-              setOffset(1)
-              setArgs({...args, cnName: e.target.value, triggerType: 'cnName'})
-            }} 
-            style={{ width: inputWidth }}
-          />
-          <span>英文名称:</span>
-          <Input size="middle"
-            placeholder="请输入英文名称"
-            value={args.name}
-            bordered={true} allowClear
-            onChange={(e) => {
-              setOffset(1)
-              setArgs({...args, name: e.target.value, triggerType: 'name'})
-            }} 
-            style={{ width: inputWidth }}
-          />
-        </Space>
-      </div>
       {
-        !animating && <Spin spinning={loading}>
-          <Table
-            extraColWidth={32}
-            size='small'
-            rowKey='iid'
-            dataSource={suggests||[]}
-            columns={cols}
-            pagination={false}
-            rowClassName={(record, index) => {
-              return 'pointer';
-            }}
-            onRowClick={(event, record) => {
-              setSelectedRows([record])
-            }}
-            rowSelection={{
-              type: 'radio',
-              selectedRowKeys: (selectedRows??[]).map(item => item.iid),
-              onChange: (selectedRowKeys, selectedRows) => {
-                setSelectedRows(selectedRows)
-              },
-            }}
-          />
-          <div className='flex pt-3' style={{ justifyContent: 'center' }}>
-            <Tooltip title={!havaMore?'没有更多推荐字段':''}>
-              <Button onClick={getSuggests} disabled={!havaMore} >加载更多</Button>
-            </Tooltip>
-          </div> 
-        </Spin>
+        !animating && <div>
+          <div className='flex mb-3' style={{ justifyContent: 'space-between' }}>
+            <Space>
+              <span>中文名称:</span>
+              <Input size="middle"
+                placeholder="请输入中文名称"
+                value={args.cnName}
+                bordered={true} allowClear
+                onChange={(e) => {
+                  setOffset(1)
+                  setArgs({...args, cnName: e.target.value, triggerType: 'cnName'})
+                }} 
+                style={{ width: inputWidth }}
+              />
+              <span>英文名称:</span>
+              <Input size="middle"
+                placeholder="请输入英文名称"
+                value={args.name}
+                bordered={true} allowClear
+                onChange={(e) => {
+                  setOffset(1)
+                  setArgs({...args, name: e.target.value, triggerType: 'name'})
+                }} 
+                style={{ width: inputWidth }}
+              />
+            </Space>
+            <Button 
+              icon={isCompact ? <ArrowsAltOutlined /> : <ShrinkOutlined />} 
+              onClick={() => {
+                setCompact(prev => !prev)
+              }}
+            />
+          </div>
+          <Spin spinning={loading}>
+              <div style={{ height: isCompact?'50vh':'80vh', overflow: 'auto' }}>
+                <Table
+                  extraColWidth={32}
+                  size='small'
+                  rowKey='iid'
+                  dataSource={suggests||[]}
+                  columns={columns}
+                  pagination={false}
+                  rowClassName={(record, index) => {
+                    return 'pointer';
+                  }}
+                  onRowClick={(event, record) => {
+                    setSelectedRows([record])
+                    onOk?.(record)
+                    close()
+                  }}
+                  rowSelection={{
+                    type: 'radio',
+                    selectedRowKeys: (selectedRows??[]).map(item => item.iid),
+                    onChange: (selectedRowKeys, selectedRows) => {
+                      setSelectedRows(selectedRows)
+                      if ((selectedRows??[]).length > 0) {
+                        onOk?.(selectedRows[0])
+                        close()
+                      }
+                    },
+                  }}
+                />
+                <div className='flex pt-3' style={{ justifyContent: 'center' }}>
+                  <Tooltip title={!havaMore?'没有更多推荐字段':''}>
+                    <Button onClick={getSuggests} disabled={!havaMore} >加载更多</Button>
+                  </Tooltip>
+                </div> 
+              </div>
+            </Spin>
+        </div>
       }
     </Modal>
   )