feat: 审核添加状态过滤

react-ui/src/enums/index.ts

@@ -191,3 +191,9 @@ export enum ApprovalStatus {
   Agree = 1,
   Reject = 2,
 }
+
+export const approvalStatusOptions = [
+  { label: '待审核', value: ApprovalStatus.Pending },
+  { label: '通过', value: ApprovalStatus.Agree },
+  { label: '拒绝', value: ApprovalStatus.Reject },
+];

react-ui/src/pages/System/Approval/index.less

@@ -13,10 +13,17 @@
     background-size: 100% 100%;
   }
 
-  &__table {
+  &__content {
     height: calc(100% - 60px);
     padding: 20px 30px 0;
     background-color: white;
     border-radius: 10px;
   }
+
+  &__table {
+    height: calc(100% - 32px - 28px);
+    margin-top: 28px;
+    background-color: white;
+    border-radius: 10px;
+  }
 }

react-ui/src/pages/System/Approval/index.tsx

@@ -1,15 +1,22 @@
 /*
  * @Author: 赵伟
  * @Date: 2024-04-16 13:58:08
- * @Description: 开发环境列表
+ * @Description: 审核列表
  */
 
-import { ApprovalStatus } from '@/enums';
+import { ApprovalStatus, approvalStatusOptions } from '@/enums';
 import { getApprovalListReq } from '@/services/message';
 import { openAntdModal } from '@/utils/modal';
 import { to } from '@/utils/promise';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
-import { Button, Table, Typography, type TablePaginationConfig, type TableProps } from 'antd';
+import {
+  Button,
+  Select,
+  Table,
+  Typography,
+  type TablePaginationConfig,
+  type TableProps,
+} from 'antd';
 import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import ApprovalModal from './components/ApprovalModal';
@@ -41,9 +48,12 @@ const approvalTypeOptions = [
   { label: '模型', value: ApprovalType.Model },
 ];
 
+const statusOptions = [{ label: '全部', value: '' }, ...approvalStatusOptions];
+
 function ApprovalList() {
   const [tableData, setTableData] = useState<ApprovalData[]>([]);
   const [total, setTotal] = useState(0);
+  const [status, setStatus] = useState('');
   const [pagination, setPagination] = useState<TablePaginationConfig>({
     current: 1,
     pageSize: 10,
@@ -54,6 +64,7 @@ function ApprovalList() {
     const params: Record<string, any> = {
       current: pagination.current,
       pageSize: pagination.pageSize,
+      status: status,
     };
     const [res] = await to(getApprovalListReq(params));
     if (res) {
@@ -61,7 +72,7 @@ function ApprovalList() {
       setTableData(rows);
       setTotal(total);
     }
-  }, [pagination]);
+  }, [pagination, status]);
 
   useEffect(() => {
     getApprovalList();
@@ -163,21 +174,34 @@ function ApprovalList() {
       <div className={styles['approval-list__header']}>
         <div>审核管理</div>
       </div>
-      <div className={classNames('vertical-scroll-table', styles['approval-list__table'])}>
-        <Table
-          dataSource={tableData}
-          columns={columns}
-          scroll={{ y: 'calc(100% - 55px)' }}
-          pagination={{
-            ...pagination,
-            total: total,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            showTotal: () => `共${total}条`,
-          }}
-          onChange={handleTableChange}
-          rowKey="id"
-        />
+      <div className={styles['approval-list__content']}>
+        <div className={styles['approval-list__filter']}>
+          <span>状态：</span>
+          <Select
+            style={{ width: 100 }}
+            placeholder="请选择"
+            onChange={(value) => setStatus(value ?? '')}
+            options={statusOptions}
+            value={status}
+            allowClear
+          ></Select>
+        </div>
+        <div className={classNames('vertical-scroll-table', styles['approval-list__table'])}>
+          <Table
+            dataSource={tableData}
+            columns={columns}
+            scroll={{ y: 'calc(100% - 55px)' }}
+            pagination={{
+              ...pagination,
+              total: total,
+              showSizeChanger: true,
+              showQuickJumper: true,
+              showTotal: () => `共${total}条`,
+            }}
+            onChange={handleTableChange}
+            rowKey="id"
+          />
+        </div>
       </div>
     </div>
   );