筛选年度条件更换组件

src/dicts/dataStatistics.ts

@@ -22,13 +22,6 @@ export const SupplierTypeText = {
   'FOREIGN': '境外',
 };
 
-// 评价年度列表
-export const EvaluateYears = [
-  { label: '2023年', value: '2023' },
-  { label: '2022年', value: '2022' },
-  { label: '2021年', value: '2021' },
-];
-
 // 年审结果字典
 export const AnnualReviewResultText = {
   '1': '合格',

src/pages/dataStatistics/supplierEvaluateStatistics/supplierEvaluateStatistics.tsx

@@ -1,37 +1,25 @@
 import React, { useState, useEffect } from 'react';
-import {
+import { Button, Table, Input, Select, Form, Tooltip, Tag, DatePicker, message } from 'antd';
-  Button,
-  Table,
-  Input,
-  Select,
-  Form,
-  Tooltip,
-  Tag,
-  DatePicker,
-  message
-} from 'antd';
 import type { TablePaginationConfig } from 'antd';
-import {
+import { SearchOutlined, DeleteOutlined, ExportOutlined } from '@ant-design/icons';
-  SearchOutlined,
-  DeleteOutlined,
-  ExportOutlined
-} from '@ant-design/icons';
 import { useIntl } from 'umi';
-import { EvaluateLevelText, EvaluateLevelColor, EvaluateYears } from '@/dicts/dataStatistics';
+import { EvaluateLevelText, EvaluateLevelColor } from '@/dicts/dataStatistics';
 import { getSupplierEvaluateStatistics } from '@/servers/api/dataStatistics';
 import { getAllEvaluateRules } from '@/servers/api/supplierEvaluate';
 import './supplierEvaluateStatistics.less';
 import { downloadFile } from '@/utils/download';
+import moment from 'moment';
 
 const { Option } = Select;
-const { RangePicker } = DatePicker;
 
 const SupplierEvaluateStatistics: React.FC = () => {
   const intl = useIntl();
   const [loading, setLoading] = useState<boolean>(false);
   const [form] = Form.useForm();
 
-  const [statisticsData, setStatisticsData] = useState<DataStatistics.EvaluateStatisticsRecord[]>([]);
+  const [statisticsData, setStatisticsData] = useState<DataStatistics.EvaluateStatisticsRecord[]>(
+    [],
+  );
   const [pagination, setPagination] = useState<TablePaginationConfig>({
     current: 1,
     pageSize: 10,
@@ -40,9 +28,13 @@ const SupplierEvaluateStatistics: React.FC = () => {
     showQuickJumper: true,
     showTotal: (total) => intl.formatMessage({ id: 'dataStatistics.common.total' }, { total }),
   });
-  const [searchParams, setSearchParams] = useState<DataStatistics.EvaluateStatisticsSearchParams>({});
+  const [searchParams, setSearchParams] = useState<DataStatistics.EvaluateStatisticsSearchParams>(
+    {},
+  );
   // 评价等级列表
-  const [evaluateRules, setEvaluateRules] = useState<SupplierEvaluateRuleManage.EvaluateRuleItem[]>([]);
+  const [evaluateRules, setEvaluateRules] = useState<SupplierEvaluateRuleManage.EvaluateRuleItem[]>(
+    [],
+  );
 
   // 准入单位下拉选项 - 假数据
   const companyOptions = [
@@ -59,7 +51,9 @@ const SupplierEvaluateStatistics: React.FC = () => {
       if (response.success && response.data) {
         setEvaluateRules(response.data);
       } else {
-        message.error(response.message || intl.formatMessage({ id: 'dataStatistics.evaluate.getRulesFailed' }));
+        message.error(
+          response.message || intl.formatMessage({ id: 'dataStatistics.evaluate.getRulesFailed' }),
+        );
       }
     } catch (error) {
       console.error('获取评价规则列表失败:', error);
@@ -105,7 +99,9 @@ const SupplierEvaluateStatistics: React.FC = () => {
           total: response.data.total,
         });
       } else {
-        message.error(response.message || intl.formatMessage({ id: 'dataStatistics.evaluate.getDataFailed' }));
+        message.error(
+          response.message || intl.formatMessage({ id: 'dataStatistics.evaluate.getDataFailed' }),
+        );
       }
     } catch (error) {
       console.error('获取评价统计数据失败:', error);
@@ -128,7 +124,9 @@ const SupplierEvaluateStatistics: React.FC = () => {
   // 获取评级标签
   const getLevelTag = (level: string) => {
     const color = EvaluateLevelColor[level as keyof typeof EvaluateLevelColor] || 'default';
-    const text = EvaluateLevelText[level as keyof typeof EvaluateLevelText] || intl.formatMessage({ id: 'dataStatistics.evaluate.unknownLevel' });
+    const text =
+      EvaluateLevelText[level as keyof typeof EvaluateLevelText] ||
+      intl.formatMessage({ id: 'dataStatistics.evaluate.unknownLevel' });
     return <Tag color={color}>{text}</Tag>;
   };
 
@@ -190,7 +188,8 @@ const SupplierEvaluateStatistics: React.FC = () => {
       dataIndex: 'evaluateYear',
       key: 'evaluateYear',
       width: 100,
-      render: (year: string | null) => year ? intl.formatMessage({ id: 'dataStatistics.common.yearFormat' }, { year }) : '-'
+      render: (year: string | null) =>
+        year ? intl.formatMessage({ id: 'dataStatistics.common.yearFormat' }, { year }) : '-',
     },
     {
       title: intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateLevel' }),
@@ -222,25 +221,67 @@ const SupplierEvaluateStatistics: React.FC = () => {
           layout="inline"
           className="filter-form"
         >
-          <Form.Item name="supplierName" label={intl.formatMessage({ id: 'dataStatistics.common.supplierName' })}>
+          <Form.Item
-            <Input placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseInput' }) + intl.formatMessage({ id: 'dataStatistics.common.supplierName' })} allowClear />
+            name="supplierName"
+            label={intl.formatMessage({ id: 'dataStatistics.common.supplierName' })}
+          >
+            <Input
+              placeholder={
+                intl.formatMessage({ id: 'dataStatistics.common.pleaseInput' }) +
+                intl.formatMessage({ id: 'dataStatistics.common.supplierName' })
+              }
+              allowClear
+            />
           </Form.Item>
-          <Form.Item name="evaluateYear" label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateYear' })}>
+          <Form.Item
-            <Select placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) + intl.formatMessage({ id: 'dataStatistics.common.year' })} allowClear style={{ width: 120 }}>
+            name="evaluateYear"
-              {EvaluateYears.map(option => (
+            getValueProps={(value) => ({
-                <Option key={option.value} value={option.value}>{option.label}</Option>
+              value: value ? moment(value) : undefined,
+            })}
+            normalize={(value) => value && value.format('YYYY')}
+            label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateYear' })}
+          >
+            <DatePicker
+              style={{ width: '100%' }}
+              format="YYYY"
+              placeholder={
+                intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) +
+                intl.formatMessage({ id: 'dataStatistics.common.year' })
+              }
+              picker="year"
+            />
+          </Form.Item>
+          <Form.Item
+            name="accessUnit"
+            label={intl.formatMessage({ id: 'dataStatistics.common.accessUnit' })}
+          >
+            <Select
+              placeholder={
+                intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) +
+                intl.formatMessage({ id: 'dataStatistics.common.accessUnit' })
+              }
+              allowClear
+              style={{ width: 200 }}
+            >
+              {companyOptions.map((option) => (
+                <Option key={option.value} value={option.value}>
+                  {option.label}
+                </Option>
               ))}
             </Select>
           </Form.Item>
-          <Form.Item name="accessUnit" label={intl.formatMessage({ id: 'dataStatistics.common.accessUnit' })}>
+          <Form.Item
-            <Select placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) + intl.formatMessage({ id: 'dataStatistics.common.accessUnit' })} allowClear style={{ width: 200 }}>
+            name="evaluateResult"
-              {companyOptions.map(option => (
+            label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateResult' })}
-                <Option key={option.value} value={option.value}>{option.label}</Option>
+          >
-              ))}
+            <Select
-            </Select>
+              placeholder={
-          </Form.Item>
+                intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) +
-          <Form.Item name="evaluateResult" label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateResult' })}>
+                intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateLevel' })
-            <Select placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) + intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateLevel' })} allowClear style={{ width: 120 }}>
+              }
+              allowClear
+              style={{ width: 120 }}
+            >
               {evaluateRules.map((rule) => (
                 <Option key={rule.id} value={rule.levelName}>
                   {rule.levelName}

src/pages/dataStatistics/supplierExitStatistics/supplierExitStatistics.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Table, Space, Input, Select, Form, Tooltip, Tag, DatePicker, message } from 'antd';
+import { Button, Table, Input, Select, Form, Tooltip, DatePicker, message } from 'antd';
 import type { TablePaginationConfig } from 'antd';
 import { SearchOutlined, DeleteOutlined, ExportOutlined } from '@ant-design/icons';
 import { useIntl } from 'umi';
@@ -9,7 +9,6 @@ import './supplierExitStatistics.less';
 import { downloadFile } from '@/utils/download';
 
 const { Option } = Select;
-const { RangePicker } = DatePicker;
 
 const SupplierExitStatistics: React.FC = () => {
   const intl = useIntl();
@@ -35,14 +34,6 @@ const SupplierExitStatistics: React.FC = () => {
     { label: '东莞市制造业有限公司', value: '东莞市制造业有限公司' },
   ];
 
-  // 年度下拉选项
-  const yearOptions = [
-    { label: '2023年', value: '2023' },
-    { label: '2022年', value: '2022' },
-    { label: '2021年', value: '2021' },
-    { label: '2020年', value: '2020' },
-  ];
-
   // 获取数据
   const fetchStatisticsData = async (
     current = 1,