导入日志增加文件列 增加刷新

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

 import React, { useState, useEffect } from 'react';
-import { Button, Upload, Drawer, Table, Pagination, Divider, Form } from 'antd';
+import { Button, Upload, Drawer, Table, Pagination, Divider, Form, Tooltip, Typography } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import { Resizable } from 'react-resizable';
+import ResizeObserver from 'rc-resize-observer';
 
 import { dispatch, dispatchLatest } from '../../../../model';
 import { showMessage, formatDate } from '../../../../util';
 
+const { Text } = Typography;
+
+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 ImportStockWordModal = (props) => {
   const { onCancel, onSuccess, visible, catalogId } = props;
   const [ fileList, setFileList ] = useState([]);
@@ -16,7 +50,7 @@ const ImportStockWordModal = (props) => {
   const { pageNum, pageSize } = pagination;
   const [ total, setTotal ] = useState(0);
 
-  const columns = [
+  const cols = [
     {
       title: '序号',
       dataIndex: 'key',
@@ -26,9 +60,20 @@ const ImportStockWordModal = (props) => {
       width: 60,
     },
     {
+      title: '导入文件名',
+      dataIndex: 'fileName',
+      width: 200,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return <Tooltip title={text||''}>
+          <Text ellipsis={true}>{text||''}</Text>
+        </Tooltip>
+      }
+    },
+    {
       title: '开始时间',
       dataIndex: 'startTime',
-      width: 200,
+      width: 170,
       ellipsis: true,
       render: (_, record, __) => {
         return formatDate(record.startTime);
@@ -37,7 +82,7 @@ const ImportStockWordModal = (props) => {
     {
       title: '结束时间',
       dataIndex: 'endTime',
-      width: 200,
+      width: 170,
       ellipsis: true,
       render: (_, record, __) => {
         return formatDate(record.endTime);
@@ -65,6 +110,8 @@ const ImportStockWordModal = (props) => {
     }
   ]
 
+  const [ columns, setColumns ] = useState(cols);
+
   useEffect(() => {
 
     if (visible) {
@@ -96,6 +143,10 @@ const ImportStockWordModal = (props) => {
     })
   }
 
+  const onRefreshClick = () => {
+    getLogs();
+  }
+
   const uploadProps = {
     onRemove: file => {
 
@@ -148,12 +199,36 @@ const ImportStockWordModal = (props) => {
     setFileList([]);
   }
 
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const mergedColumns = () => {
+    return (
+      columns.map((column, index) => { 
+        return {
+          ...column,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        };
+      })
+    );
+  }
+
   return (
     <Drawer 
       forceRender
       visible={ visible }
       title='存量模型导入'
-      width={900}
+      width={1000}
       placement="right"
       closable={ true }
       onClose={() => {
@@ -176,10 +251,18 @@ const ImportStockWordModal = (props) => {
           </Form.Item>
         </Form>
       </div>
-      <Divider orientation="left">导入日志</Divider>
+      <div className='d-flex my-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <h3 style={{ marginBottom: 0 }}>导入日志</h3> 
+        <Button onClick={onRefreshClick}>刷新</Button>
+      </div>
       <Table
         className='mt-3'
-        columns={columns||[]} 
+        components={{
+          header: {
+            cell: ResizeableHeaderCell,
+          }
+        }}
+        columns={mergedColumns()} 
         rowKey={'id'}
         dataSource={logs||[]}
         pagination={false}