完成操作记录页面开发

electron/main.js

@@ -145,10 +145,8 @@ ipcMain.handle('open-file-position', (event, message) => {
 
 // 主窗口给消息窗口notifyWindow发送消息
 ipcMain.handle('notify', (event, messageObj) => {
-  // if (!mainWindow.isVisible()) { // 在主窗口不可见时才给消息窗口返送消息
   notifyWindow.show();
   notifyWindow.webContents.send('on-notify', messageObj);
-  // }
 });
 // 消息窗口给主窗口发送重新同步文件的命令
 ipcMain.handle('re-sync-file', (event, messageObj) => {

src/components/FileStatus/FileStatus.tsx

@@ -140,7 +140,7 @@ function LoadDesc(props: LoadDescProps) {
   const [resultText, icon] = useMemo(() => {
     if (loadingState === TaskStatus.FINISH) {
       return [
-        '成功!',
+        `${keywords}成功!`,
         <CheckCircleFilled
           className={classNames(styles.stateIcon, styles.success)}
         />,
@@ -148,7 +148,7 @@ function LoadDesc(props: LoadDescProps) {
     }
     if (loadingState === TaskStatus.FAILED) {
       return [
-        '失败!',
+        `${keywords}失败!`,
         <CloseCircleFilled
           className={classNames(styles.stateIcon, styles.error)}
         />,
@@ -166,7 +166,6 @@ function LoadDesc(props: LoadDescProps) {
       ) : (
         <>
           {icon}
-          {keywords}
           {resultText}
         </>
       )}

src/layouts/indexLayout.less

@@ -1,23 +1,31 @@
 .app {
   height: 100%;
   padding-top: @app-header-height;
+  overflow: hidden;
 }
 .main {
-  display: flex;
-  flex-direction: row;
+  // display: flex;
+  // flex-direction: row;
   height: 100%;
 
   .content {
-    flex: 1;
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+    width: calc(100% - 48px);
     background-color: #f6f6f6;
   }
 }
 
 .nav {
+  display: inline-block;
+  vertical-align: top;
   width: 48px;
   padding: 24px 0 0 8px;
-  box-shadow: 0.5px 0px 0px 0px #EEF2F5;
+  box-shadow: 0.5px 0px 0px 0px #eef2f5;
   z-index: 1;
+  height: 100%;
+  flex: none;
   .navItem {
     display: block;
     width: 32px;
@@ -36,6 +44,5 @@
     &.active {
       border-color: rgba(120, 80, 255, 0.5);
     }
-    
   }
-}
+}

src/pages/log/index.tsx

@@ -1,30 +1,45 @@
 import React from 'react';
 import { Form, Table, Input, Button, Space } from 'antd';
-import ProTable, { ProColumns } from '@ant-design/pro-table';
+import ProTable, { ProColumns, ProTableProps } from '@ant-design/pro-table';
 import styles from './log.less';
+import { useCallback } from 'react';
+import { fetchApi } from '@/utils/request';
+import { DATA } from '@/services/API';
+import { throttle } from 'lodash';
 
 enum LogActionType {
-  Download,
-  Delete,
-  Upload,
+  Download = 'DOWNLOAD',
+  Delete = 'DELETE',
+  Upload = 'UPLOAD',
 }
 
-const tableColumns: Array<ProColumns<any>> = [
+const tableColumns: Array<ProColumns<DATA.LogItem>> = [
   { dataIndex: 'archName', title: '名称' },
-  { dataIndex: 'folderName', title: '所属文件夹', search: false },
-  { dataIndex: 'size', title: '大小', search: false },
+  { dataIndex: 'folderName', title: '所属文件夹', search: false, width: 400 },
+  // { dataIndex: 'size', title: '大小', search: false },
   {
     dataIndex: 'actionType',
     title: '操作类型',
     search: false,
+    width: 200,
     valueEnum: {
       [LogActionType.Download]: '下载',
       [LogActionType.Delete]: '删除',
       [LogActionType.Upload]: '上传',
     },
+    filters: true,
+    onFilter: (v, record) => record.actionType === v,
+  },
+  { dataIndex: 'operator', title: '操作人', search: false, width: 200 },
+  {
+    dataIndex: 'createTime',
+    valueType: 'dateTime',
+    width: 200,
+    title: '操作时间',
+    search: false,
+    sorter: (a, b) => a.timestamp - b.timestamp,
+    defaultSortOrder: 'descend',
   },
-  { dataIndex: 'operator', title: '操作人' },
-  { dataIndex: 'operateTime', title: '操作时间', search: false },
   // {
   //   search: false,
   //   render() {
@@ -38,14 +53,35 @@ const tableColumns: Array<ProColumns<any>> = [
 ];
 
 export default function LogView() {
+  const fetchLog = useCallback(
+    throttle(async ({ archName }) => {
+      const res = await fetchApi<DATA.LogItem[]>(
+        'file/queryProjArchiveLogTbByCondition',
+        { archName },
+      );
+      if (res.data) {
+        res.data.forEach((item) => {
+          item.timestamp = new Date(item.createTime).getTime();
+        });
+      }
+      return {
+        success: res.requestIsSuccess,
+        data: res.data || [],
+      };
+    }, 5000),
+    [],
+  );
+
   return (
     <div className={styles.logView}>
-      <ProTable
+      <ProTable<DATA.LogItem>
+        rowKey="id"
         className={styles.tableWrapper}
         tableClassName={styles.table}
         columns={tableColumns}
         toolBarRender={false}
-        pagination={false}
+        request={fetchLog}
+        scroll={{ y: 'calc(100% - 47px)' }}
       />
     </div>
   );

src/pages/log/log.less

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
   padding: 12px;
 }
 
@@ -15,10 +16,28 @@
 }
 
 .tableWrapper {
+  height: 100%;
+  width: 100%;
   flex: 1;
   display: flex;
   flex-direction: column;
   :global {
+    .ant-card {
+      height: calc(100% - 44px) !important;
+    }
+    .ant-card-body,
+    .ant-table-wrapper,
+    .ant-spin-nested-loading,
+    .ant-spin-container,
+    .ant-table-container {
+      height: 100%;
+    }
+    .ant-table-pagination.ant-pagination {
+      padding: 0 10px;
+    }
+    .ant-table {
+      height: calc(100% - 56px);
+    }
     .ant-pro-table-search {
       flex: none;
       background-color: transparent;

src/services/API.d.ts

@@ -92,4 +92,20 @@ declare namespace DATA {
      */
     notifyMessage: string;
   }
+
+  export interface LogItem {
+    actionType: string; // "DOWNLOAD"
+    archId: string; // "419204528580485120"
+    archName: string; // "本地上传001"
+    createTime: string; // "2021-07-14T16:51:33+08:00"
+    timestamp: number; // 前端自建
+    createUserId: string; // "330031270501289985"
+    extension: string; // "txt"
+    folderName: string; // "财务审批"
+    id: string; // "421725357130276864"
+    ipfsCid: string; // "QmeAnrtkYVUMFvD6tY2a2QqE696uKQS4MXFbgj1S1PP7RX"
+    projId: string; // "330800853156257792"
+    relativePath: string; // ""
+    version: number; // 3
+  }
 }

src/utils/hooks.ts

@@ -133,7 +133,8 @@ export function useNotificationMessages() {
         }),
       ]);
       const finalList = headList.data
-        ?.concat(hisList.data || [])
+        ?.reverse()
+        .concat((hisList.data || []).reverse())
         .reduce((arr, notifyMessage) => {
           const message = transformNotifyMessage(notifyMessage);
           if (!message) return arr;

src/utils/request.ts

@@ -1,3 +1,4 @@
+import { API } from '@/services/API';
 import { isClient } from '@/services/system';
 import { message } from 'antd';
 import { request } from 'umi';