暂存评价任务新增

src/components/SupplierSelector/SupplierSelector.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Input, Select, Row, Col, Table, Button, Form, Tooltip, message } from 'antd';
 import { RightOutlined, LeftOutlined } from '@ant-design/icons';
 import { getSupplierPage } from '@/servers/api/supplier';
+import CategorySelector from '@/components/CategorySelector/CategorySelector';
 import './SupplierSelector.less';
 
 const { Option } = Select;
@@ -11,16 +12,10 @@ const { Option } = Select;
  * @interface SupplierSelectorProps
  * @property {Function} [onSelect] - 当选择供应商发生变化时的回调函数
  * @property {any[]} [selectedSuppliers] - 初始已选择的供应商列表
- * @property {string[]} [deptList] - 部门列表，用于筛选供应商
- * @property {boolean} [showDeptFilter] - 是否显示部门筛选，默认显示
- * @property {boolean} [showCompanyFilter] - 是否显示公司名称筛选，默认不显示
  */
 interface SupplierSelectorProps {
   onSelect?: (selected: any[]) => void;
   selectedSuppliers?: any[];
-  deptList?: string[];
-  showDeptFilter?: boolean;
-  showCompanyFilter?: boolean;
 }
 
 /**
@@ -60,9 +55,6 @@ interface SupplierItem {
 const SupplierSelector: React.FC<SupplierSelectorProps> = ({
   onSelect,
   selectedSuppliers: initialSelectedSuppliers = [],
-  deptList = [],
-  showDeptFilter = true,
-  showCompanyFilter = false
 }) => {
   // 表单实例，用于管理查询条件
   const [form] = Form.useForm();
@@ -85,6 +77,12 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
   // 最终已选择的供应商列表
   const [chosenSuppliers, setChosenSuppliers] = useState<SupplierItem[]>(initialSelectedSuppliers);
 
+  // 查询参数
+  const [queryParams, setQueryParams] = useState({
+    pageNo: 1,
+    pageSize: 10
+  });
+
   /**
    * 监听初始已选供应商变化，更新内部状态
    */
@@ -139,79 +137,69 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
 
   /**
    * 获取供应商列表数据
-   * @param {any} values - 查询条件
-   * @param {number} pageNo - 页码
-   * @param {number} pageSize - 每页数量
    */
-  const getTableList = async (values: any = {}, pageNo: number = 1, pageSize: number = 10) => {
+  const fetchTableData = async () => {
+    if (loading) return;
+
     setLoading(true);
     try {
-      // 整理查询参数
-      const params = {
-        ...values,
-        pageNo,
-        pageSize,
-        deptList: deptList.length > 0 ? deptList : undefined
-      };
-
       // 调用API获取供应商列表
-      const response = await getSupplierPage(params);
+      const response = await getSupplierPage(queryParams);
 
       if (response && response.code === 200) {
         // 请求成功，更新数据和分页信息
         setTableListData(response.data.records || []);
         setPagination({
-          current: pageNo,
-          pageSize,
+          current: queryParams.pageNo,
+          pageSize: queryParams.pageSize,
           total: response.data.total || 0
         });
       } else {
         // 请求失败，显示错误信息
         message.error(response?.message || '获取供应商列表失败');
-
-        // 使用mock数据作为备用
-        setTableListData([
-          { id: '1', name: '供应商A', deptName: '采购部', companyName: '公司A', categoryName: '润滑油' },
-          { id: '2', name: '供应商B', deptName: '技术部', companyName: '公司B', categoryName: '燃油' },
-          { id: '3', name: '供应商C', deptName: '质量部', companyName: '公司C', categoryName: '备件' },
-          { id: '4', name: '供应商D', deptName: '采购部', companyName: '公司D', categoryName: '计算机' },
-          { id: '5', name: '供应商E', deptName: '技术部', companyName: '公司E', categoryName: '通信设备' },
-        ]);
-        setPagination({ current: 1, pageSize: 10, total: 5 });
+        setTableListData([]);
+        setPagination({ current: 1, pageSize: 10, total: 0 });
       }
     } catch (error) {
       // 处理异常情况
       console.error('获取供应商列表出错:', error);
       message.error('获取供应商列表失败，请稍后重试');
-
-      // 使用mock数据作为备用
-      setTableListData([
-        { id: '1', name: '供应商A', deptName: '采购部', companyName: '公司A', categoryName: '润滑油' },
-        { id: '2', name: '供应商B', deptName: '技术部', companyName: '公司B', categoryName: '燃油' },
-        { id: '3', name: '供应商C', deptName: '质量部', companyName: '公司C', categoryName: '备件' },
-        { id: '4', name: '供应商D', deptName: '采购部', companyName: '公司D', categoryName: '计算机' },
-        { id: '5', name: '供应商E', deptName: '技术部', companyName: '公司E', categoryName: '通信设备' },
-      ]);
-      setPagination({ current: 1, pageSize: 10, total: 5 });
+      setTableListData([]);
+      setPagination({ current: 1, pageSize: 10, total: 0 });
     } finally {
       setLoading(false);
     }
   };
 
   /**
-   * 组件初始化时加载数据
+   * 当查询参数变化时，加载数据
+   */
+  useEffect(() => {
+    fetchTableData();
+  }, [queryParams]);
+
+  /**
+   * 组件初始挂载时，加载一次数据
    */
   useEffect(() => {
     const values = form.getFieldsValue();
-    getTableList(values, 1, 10);
-  }, [deptList]);
+    setQueryParams(prev => ({
+      ...prev,
+      ...values,
+      pageNo: 1
+    }));
+  }, []); // 空依赖数组，只在组件挂载时执行一次
 
   /**
    * 处理查询表单提交
    * @param {any} values - 表单值
    */
   const handleSearch = (values: any) => {
-    getTableList(values, 1, pagination.pageSize);
+    setQueryParams(prev => ({
+      ...prev,
+      ...values,
+      pageNo: 1
+    }));
   };
 
   /**
@@ -220,7 +208,11 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
   const handleReset = () => {
     form.resetFields();
     const values = form.getFieldsValue();
-    getTableList(values, 1, pagination.pageSize);
+    setQueryParams(prev => ({
+      ...prev,
+      ...values,
+      pageNo: 1
+    }));
   };
 
   /**
@@ -228,8 +220,11 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
    * @param {any} paginationInfo - 分页信息
    */
   const handleTableChange = (paginationInfo: any) => {
-    const values = form.getFieldsValue();
-    getTableList(values, paginationInfo.current, paginationInfo.pageSize);
+    setQueryParams(prev => ({
+      ...prev,
+      pageNo: paginationInfo.current,
+      pageSize: paginationInfo.pageSize
+    }));
   };
 
   // 表格列定义
@@ -253,12 +248,8 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
           {categoryName || '-'}
         </Tooltip>
       ),
-    }
-  ];
-
-  // 如果显示部门筛选，添加部门列
-  if (showDeptFilter) {
-    columns.push({
+    },
+    {
       title: '部门',
       dataIndex: 'deptName',
       ellipsis: true,
@@ -267,49 +258,27 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
           {deptName || '-'}
         </Tooltip>
       )
-    });
-  }
-
-  // 如果显示公司名称筛选，添加公司名称列
-  if (showCompanyFilter) {
-    columns.push({
-      title: '公司名称',
-      dataIndex: 'companyName',
-      ellipsis: true,
-      render: (companyName: string) => (
-        <Tooltip placement="topLeft" title={companyName}>
-          {companyName || '-'}
-        </Tooltip>
-      ),
-    });
-  }
+    }
+  ];
 
   return (
     <div className="supplier-selector">
       {/* 查询表单 */}
-      <Form layout="inline" form={form} onFinish={handleSearch} style={{ marginBottom: 16 }}>
+      <Form layout="inline" form={form} onFinish={handleSearch} style={{ marginBottom: 30 }}>
         <Form.Item name="name" label="供应商名称">
           <Input placeholder="供应商名称" allowClear />
         </Form.Item>
 
-        {showDeptFilter && (
-          <Form.Item name="deptId" label="部门">
-            <Select placeholder="请选择部门" allowClear style={{ width: 150 }}>
-              <Option value="1">采购部</Option>
-              <Option value="2">技术部</Option>
-              <Option value="3">质量部</Option>
-            </Select>
-          </Form.Item>
-        )}
+        <Form.Item name="deptId" label="部门">
+          <Select placeholder="请选择部门" allowClear style={{ width: 150 }}>
+            <Option value="1">采购部</Option>
+            <Option value="2">技术部</Option>
+            <Option value="3">质量部</Option>
+          </Select>
+        </Form.Item>
 
-        {showCompanyFilter && (
-          <Form.Item name="companyName" label="公司名称">
-            <Input placeholder="公司名称" allowClear />
-          </Form.Item>
-        )}
-
-        <Form.Item name="categoryName" label="所属品类">
-          <Input placeholder="所属品类" allowClear />
+        <Form.Item name="categoryId" label="所属品类">
+          <CategorySelector multiple={false} style={{ width: 150 }} />
         </Form.Item>
 
         <Form.Item>
@@ -340,8 +309,6 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
             loading={loading}
             pagination={pagination}
             onChange={handleTableChange}
-            scroll={{ y: 300 }}
-            size="middle"
           />
         </Col>
 
@@ -376,8 +343,6 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
             dataSource={chosenSuppliers}
             rowKey="id"
             pagination={false}
-            scroll={{ y: 300 }}
-            size="middle"
           />
         </Col>
       </Row>