匹配推荐

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,51 +22,9 @@ const FC = (props) => {
     cnName: undefined,
     triggerType: undefined,
   })
+  const [isCompact, setCompact] = React.useState(true)
 
-  React.useEffect(() => {
-    if (visible) {
-      setAnimating(true)
-      setArgs({
-        name,
-        cnName,
-        triggerType
-      })
-
-      setTimeout(() => {
-        setAnimating(false)
-      }, 300)
-    }
-  }, [visible])
-
-  useDebounceEffect(()=>{
-    if (args.name || args.cnName) {
-      getSuggests()
-    }
-  }, [args], { wait:300 })
-
-  const onSourceClick = (id, name) => {
-    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/metadetail?mid=${encodeURIComponent(data?._id)}&action=metadetail&type=detail&manager=false&activekey=1&name=${encodeURIComponent(name||'')}`);
-        }
-      })
-    } else {
-      if (checkMenuAdmit('datastandard')) {
-        window.open(`/center-home/menu/datastandard?id=${id}&timestamp=${timestamp}`);
-      }
-    }
-  }
-
-  const cols = React.useMemo(() => {
-    return [
+  const cols = [
     {
       title: '中文名称',
       dataIndex: 'cnName',
@@ -154,7 +113,51 @@ const FC = (props) => {
       }
     },
   ]
-  }, [onSourceClick])
+
+  React.useEffect(() => {
+    if (visible) {
+      setAnimating(true)
+      setArgs({
+        name,
+        cnName,
+        triggerType
+      })
+
+      setTimeout(() => {
+        setAnimating(false)
+      }, 300)
+    }
+  }, [visible])
+
+  useDebounceEffect(()=>{
+    if (args.name || args.cnName) {
+      getSuggests()
+    }
+  }, [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: {
+          id
+        },
+        callback: data => {
+          window.open(`/center-home/metadetail?mid=${encodeURIComponent(data?._id)}&action=metadetail&type=detail&manager=false&activekey=1&name=${encodeURIComponent(name||'')}`);
+        }
+      })
+    } else {
+      if (checkMenuAdmit('datastandard')) {
+        window.open(`/center-home/menu/datastandard?id=${id}&timestamp=${timestamp}`);
+      }
+    }
+  }
 
   const getSuggests = () => {
     setLoading(true)
@@ -214,28 +217,30 @@ 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' }}
+      footer={null}
+      width={isCompact?'50%':'80%'}
+      bodyStyle={{ padding: '15px' }}
       title='匹配推荐'       
       centered destroyOnClose
       onCancel={() => { close() }}
     >
-      <div className='mb-3'>
+      {
+        !animating && <div>
+          <div className='flex mb-3' style={{ justifyContent: 'space-between' }}>
             <Space>
               <span>中文名称:</span>
               <Input size="middle"
@@ -260,27 +265,39 @@ const FC = (props) => {
                 style={{ width: inputWidth }}
               />
             </Space>
+            <Button 
+              icon={isCompact ? <ArrowsAltOutlined /> : <ShrinkOutlined />} 
+              onClick={() => {
+                setCompact(prev => !prev)
+              }}
+            />
           </div>
-      {
-        !animating && <Spin spinning={loading}>
+          <Spin spinning={loading}>
+              <div style={{ height: isCompact?'50vh':'80vh', overflow: 'auto' }}>
                 <Table
                   extraColWidth={32}
                   size='small'
                   rowKey='iid'
                   dataSource={suggests||[]}
-            columns={cols}
+                  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()
+                      }
                     },
                   }}
                 />
@@ -289,7 +306,9 @@ const FC = (props) => {
                     <Button onClick={getSuggests} disabled={!havaMore} >加载更多</Button>
                   </Tooltip>
                 </div> 
+              </div>
             </Spin>
+        </div>
       }
     </Modal>
   )