筛选年度条件更换组件

This commit is contained in:
linxd
2025-07-03 11:03:41 +08:00
parent 739b021334
commit bec7492f4a
3 changed files with 82 additions and 57 deletions

View File

@ -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': '合格',

View File

@ -1,37 +1,25 @@
import React, { useState, useEffect } from 'react';
import {
Button,
Table,
Input,
Select,
Form,
Tooltip,
Tag,
DatePicker,
message
} from 'antd';
import { Button, Table, Input, Select, Form, Tooltip, Tag, DatePicker, message } from 'antd';
import type { TablePaginationConfig } from 'antd';
import {
SearchOutlined,
DeleteOutlined,
ExportOutlined
} from '@ant-design/icons';
import { 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' })}>
<Input placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseInput' }) + intl.formatMessage({ id: 'dataStatistics.common.supplierName' })} allowClear />
<Form.Item
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' })}>
<Select placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) + intl.formatMessage({ id: 'dataStatistics.common.year' })} allowClear style={{ width: 120 }}>
{EvaluateYears.map(option => (
<Option key={option.value} value={option.value}>{option.label}</Option>
<Form.Item
name="evaluateYear"
getValueProps={(value) => ({
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' })}>
<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="evaluateResult" label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateResult' })}>
<Select placeholder={intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) + intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateLevel' })} allowClear style={{ width: 120 }}>
<Form.Item
name="evaluateResult"
label={intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateResult' })}
>
<Select
placeholder={
intl.formatMessage({ id: 'dataStatistics.common.pleaseSelect' }) +
intl.formatMessage({ id: 'dataStatistics.evaluate.evaluateLevel' })
}
allowClear
style={{ width: 120 }}
>
{evaluateRules.map((rule) => (
<Option key={rule.id} value={rule.levelName}>
{rule.levelName}

View File

@ -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,