丰富三方评价审批页面

src/pages/supplier/ViewReviewPage/components/EvaluationApproval.tsx

@@ -1,21 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { history, useLocation, useIntl } from 'umi';
-import {
-  Card,
-  Form,
-  Input,
-  Select,
-  Button,
-  Table,
-  Space,
-  Row,
-  Col,
-  Tooltip,
-  message,
-  Divider,
-} from 'antd';
-import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
+import { useIntl } from 'umi';
+import { Form, Input, Select, Button, Table, Tooltip, message } from 'antd';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
 import { getEvaluateSupplierList, getAllEvaluateRules } from '@/servers/api/supplierEvaluate';
+import type { TablePaginationConfig } from 'antd';
 import GlobalModal from '../GlobalModal/index';
 
 const EvaluationApproval: React.FC<{
@@ -23,11 +11,27 @@ const EvaluationApproval: React.FC<{
   record: any;
 }> = ({ visible, record = {} }) => {
   const intl = useIntl();
-  const supplierDetailModal = useSupplierDetailModal();
+  const { Option } = Select;
   const [resultData, setResultData] = useState<SupplierEvaluateResult.EvaluateSupplierItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [visibleGlobalModal, setVisibleGlobalModal] = useState(false);
   const [id, setId] = useState('');
+  const [form] = Form.useForm();
+  const [evaluateRules, setEvaluateRules] = useState<SupplierEvaluateRuleManage.EvaluateRuleItem[]>(
+    [],
+  );
+  const [pagination, setPagination] = useState<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total) =>
+      intl.formatMessage({ id: 'supplierEvaluateResult.pagination.total' }, { total }),
+  });
+  const [searchParams, setSearchParams] =
+    useState<SupplierEvaluateResult.EvaluateSupplierSearchParams>({});
+
   const columns = [
     {
       title: intl.formatMessage({ id: 'supplierEvaluateResult.column.index' }),
@@ -76,27 +80,49 @@ const EvaluationApproval: React.FC<{
     },
   ];
   // 获取评价规则列表
-  const fetchResultDetailList = async () => {
+  const fetchResultDetailList = async (
+    current = 1,
+    pageSize = 10,
+    params: SupplierEvaluateResult.EvaluateSupplierSearchParams = searchParams,
+  ) => {
     // 确保有评价任务ID
     if (!record?.id) {
       message.error(intl.formatMessage({ id: 'supplierEvaluateResult.message.missingTaskId' }));
       return;
+    }
+     // 更新搜索参数状态
+     if (params !== searchParams) {
+      setSearchParams(params);
     }
     setLoading(true);
     try {
-      // 构建请求参数
-      const requestParams: SupplierEvaluateResult.EvaluateSupplierRequest = {
+       // 构建请求参数
+       const requestParams: SupplierEvaluateResult.EvaluateSupplierRequest = {
         basePageRequest: {
-          pageNo: 1,
-          pageSize: 999,
+          pageNo: current,
+          pageSize: pageSize,
         },
         evaluateTaskId: record.id,
       };
+
+      // 添加搜索条件
+      if (params.supplierName) {
+        requestParams.supplierName = params.supplierName;
+      }
+      if (params.levelName) {
+        requestParams.levelName = params.levelName;
+      }
       // 调用接口获取数据
       const response = await getEvaluateSupplierList(requestParams);
       if (response.data && response.success) {
-        const { records } = response.data;
+        const { records, total, current: currentPage, size } = response.data;
         setResultData(records);
+        setPagination({
+          ...pagination,
+          current: currentPage,
+          pageSize: size,
+          total,
+        });
       } else {
         message.error(
           response.message ||
@@ -110,21 +136,97 @@ const EvaluationApproval: React.FC<{
       setLoading(false);
     }
   };
+  // 获取评价规则列表
+  const fetchEvaluateRules = async () => {
+    try {
+      const response = await getAllEvaluateRules();
+      if (response.success && response.data) {
+        setEvaluateRules(response.data);
+      } else {
+        message.error(
+          response.message ||
+            intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchRulesFailed' }),
+        );
+      }
+    } catch (error) {
+      console.error('获取评价规则列表失败:', error);
+      message.error(intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchRulesFailed' }));
+    }
+  };
   useEffect(() => {
     if (visible) {
-      fetchResultDetailList();
+      fetchEvaluateRules();
+      fetchResultDetailList(pagination.current, pagination.pageSize, {});
     }
   }, [visible, record]);
+  // 处理表格分页变化
+  const handleTableChange = (newPagination: TablePaginationConfig) => {
+    fetchResultDetailList(newPagination.current, newPagination.pageSize, searchParams);
+  };
+
+  // 处理搜索
+  const handleSearch = (values: any) => {
+    fetchResultDetailList(1, pagination.pageSize, values);
+  };
+
+  // 处理重置
+  const handleReset = () => {
+    form.resetFields();
+    fetchResultDetailList(1, pagination.pageSize, {});
+  };
   return (
     <div>
       <div className="content-area">
+        <div className="filter-action-row">
+          <Form form={form} layout="inline" onFinish={handleSearch} className="filter-form">
+            <Form.Item
+              name="supplierName"
+              label={intl.formatMessage({ id: 'supplierEvaluateResult.form.supplierName' })}
+            >
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'supplierEvaluateResult.form.placeholder.supplierName',
+                })}
+                allowClear
+              />
+            </Form.Item>
+            <Form.Item
+              name="levelName"
+              label={intl.formatMessage({ id: 'supplierEvaluateResult.form.levelName' })}
+            >
+              <Select
+                placeholder={intl.formatMessage({
+                  id: 'supplierEvaluateResult.form.placeholder.levelName',
+                })}
+                allowClear
+                style={{ width: 150 }}
+              >
+                {evaluateRules.map((rule) => (
+                  <Option key={rule.id} value={rule.levelName}>
+                    {rule.levelName}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item className="filter-btns">
+              <Button type="primary" icon={<SearchOutlined />} onClick={() => form.submit()}>
+                {intl.formatMessage({ id: 'supplierEvaluateResult.button.search' })}
+              </Button>
+              <Button type="primary" danger icon={<DeleteOutlined />} onClick={handleReset}>
+                {intl.formatMessage({ id: 'supplierEvaluateResult.button.reset' })}
+              </Button>
+            </Form.Item>
+          </Form>
+          <div className="right-buttons">返回</div>
+        </div>
         <Table
           columns={columns}
           rowKey="id"
           dataSource={resultData}
           loading={loading}
           scroll={{ x: 1100 }}
-          pagination={false}
+          pagination={pagination}
+          onChange={handleTableChange}
         />
       </div>
       <GlobalModal