feat: 调整行业请求数据结构
This commit is contained in:
zdl
@@ -1,10 +1,10 @@
|
||||
// src/views/Community/components/EventFilters.js
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, DatePicker, Button, Select, Form, Input } from 'antd';
|
||||
import { Card, Row, Col, DatePicker, Button, Select, Form, Cascader } from 'antd';
|
||||
import { FilterOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import { industryService } from '../../../services/industryService';
|
||||
import { useIndustry } from '../../../contexts/IndustryContext';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
@@ -12,61 +12,29 @@ const { Option } = Select;
|
||||
|
||||
const EventFilters = ({ filters, onFilterChange, loading }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [industryData, setIndustryData] = useState({
|
||||
classifications: [],
|
||||
level1: [],
|
||||
level2: [],
|
||||
level3: [],
|
||||
level4: []
|
||||
});
|
||||
const [industryCascaderValue, setIndustryCascaderValue] = useState([]);
|
||||
|
||||
// 使用全局行业数据
|
||||
const { industryData, loadIndustryData, loading: industryLoading } = useIndustry();
|
||||
|
||||
// 初始化表单值
|
||||
useEffect(() => {
|
||||
const initialValues = {
|
||||
date_range: filters.date_range ? filters.date_range.split(' 至 ').map(d => moment(d)) : null,
|
||||
sort: filters.sort,
|
||||
importance: filters.importance,
|
||||
industry_classification: filters.industry_classification,
|
||||
industry_code: filters.industry_code
|
||||
importance: filters.importance
|
||||
};
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [filters, form]);
|
||||
|
||||
// 加载行业分类数据
|
||||
const loadIndustryClassifications = async () => {
|
||||
try {
|
||||
const response = await industryService.getClassifications();
|
||||
setIndustryData(prev => ({ ...prev, classifications: response.data }));
|
||||
logger.debug('EventFilters', '行业分类加载成功', {
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('EventFilters', 'loadIndustryClassifications', error);
|
||||
// Cascader 获得焦点时加载数据
|
||||
const handleCascaderFocus = async () => {
|
||||
if (!industryData || industryData.length === 0) {
|
||||
logger.debug('EventFilters', 'Cascader 获得焦点，开始加载行业数据');
|
||||
await loadIndustryData();
|
||||
}
|
||||
};
|
||||
|
||||
// 加载行业层级数据
|
||||
const loadIndustryLevels = async (level, params) => {
|
||||
try {
|
||||
const response = await industryService.getLevels(params);
|
||||
setIndustryData(prev => ({ ...prev, [`level${level}`]: response.data }));
|
||||
// 清空下级
|
||||
for (let l = level + 1; l <= 4; l++) {
|
||||
setIndustryData(prev => ({ ...prev, [`level${l}`]: [] }));
|
||||
}
|
||||
logger.debug('EventFilters', '行业层级数据加载成功', {
|
||||
level,
|
||||
count: response.data?.length || 0
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('EventFilters', 'loadIndustryLevels', error, { level, params });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadIndustryClassifications();
|
||||
}, []);
|
||||
|
||||
const handleDateRangeChange = (dates) => {
|
||||
if (dates && dates.length === 2) {
|
||||
const dateRange = `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}`;
|
||||
@@ -84,54 +52,30 @@ const EventFilters = ({ filters, onFilterChange, loading }) => {
|
||||
onFilterChange('importance', value);
|
||||
};
|
||||
|
||||
// 行业分类体系变化时，加载一级行业
|
||||
const handleIndustryClassificationChange = (value) => {
|
||||
form.setFieldsValue({ industry_code: '' });
|
||||
onFilterChange('industry_classification', value);
|
||||
setIndustryData(prev => ({ ...prev, level1: [], level2: [], level3: [], level4: [] }));
|
||||
if (value) {
|
||||
loadIndustryLevels(1, { classification: value, level: 1 });
|
||||
}
|
||||
};
|
||||
// Cascader 选择变化
|
||||
const handleIndustryCascaderChange = (value, selectedOptions) => {
|
||||
setIndustryCascaderValue(value);
|
||||
|
||||
// 级联选择行业
|
||||
const handleLevelChange = (level, value) => {
|
||||
// 直接从state里查找name
|
||||
let name = '';
|
||||
if (level === 1) {
|
||||
const found = industryData.level1.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 2) {
|
||||
const found = industryData.level2.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 3) {
|
||||
const found = industryData.level3.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
} else if (level === 4) {
|
||||
const found = industryData.level4.find(item => item.code === value);
|
||||
name = found ? found.name : '';
|
||||
if (value && value.length > 0) {
|
||||
// value[0] = 分类体系名称
|
||||
// value[1...n] = 行业代码（一级~四级）
|
||||
const industryCode = value[value.length - 1]; // 最后一级的 code
|
||||
const classification = value[0]; // 分类体系名称
|
||||
|
||||
onFilterChange('industry_classification', classification);
|
||||
onFilterChange('industry_code', industryCode);
|
||||
|
||||
logger.debug('EventFilters', 'Cascader 选择变化', {
|
||||
value,
|
||||
classification,
|
||||
industryCode,
|
||||
path: selectedOptions.map(o => o.label).join(' > ')
|
||||
});
|
||||
} else {
|
||||
// 清空
|
||||
onFilterChange('industry_classification', '');
|
||||
onFilterChange('industry_code', '');
|
||||
}
|
||||
form.setFieldsValue({ [`level${level}`]: value });
|
||||
form.setFieldsValue({ industry_code: value });
|
||||
onFilterChange('industry_code', value);
|
||||
for (let l = level + 1; l <= 4; l++) {
|
||||
form.setFieldsValue({ [`level${l}`]: undefined });
|
||||
}
|
||||
const params = { classification: form.getFieldValue('industry_classification'), level: level + 1 };
|
||||
if (level === 1) params.level1_name = name;
|
||||
if (level === 2) {
|
||||
params.level1_name = form.getFieldValue('level1_name');
|
||||
params.level2_name = name;
|
||||
}
|
||||
if (level === 3) {
|
||||
params.level1_name = form.getFieldValue('level1_name');
|
||||
params.level2_name = form.getFieldValue('level2_name');
|
||||
params.level3_name = name;
|
||||
}
|
||||
if (level < 4 && name) {
|
||||
loadIndustryLevels(level + 1, params);
|
||||
}
|
||||
form.setFieldsValue({ [`level${level}_name`]: name });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -176,75 +120,28 @@ const EventFilters = ({ filters, onFilterChange, loading }) => {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 行业分类级联选择器 - 替换原来的 5 个独立 Select */}
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
<Form.Item label="行业分类" name="industry_classification">
|
||||
<Select
|
||||
placeholder="选择行业分类体系"
|
||||
onChange={handleIndustryClassificationChange}
|
||||
disabled={loading}
|
||||
<Col span={24}>
|
||||
<Form.Item label="行业分类（支持多级联动）">
|
||||
<Cascader
|
||||
options={industryData || []}
|
||||
value={industryCascaderValue}
|
||||
onChange={handleIndustryCascaderChange}
|
||||
onFocus={handleCascaderFocus}
|
||||
changeOnSelect
|
||||
placeholder={industryLoading ? "加载中..." : "请选择行业分类体系和具体行业"}
|
||||
disabled={loading || industryLoading}
|
||||
loading={industryLoading}
|
||||
allowClear
|
||||
>
|
||||
{industryData.classifications.map(item => (
|
||||
<Option key={item.name} value={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="一级行业" name="level1">
|
||||
<Select
|
||||
placeholder="选择一级行业"
|
||||
onChange={value => handleLevelChange(1, value)}
|
||||
disabled={loading || !form.getFieldValue('industry_classification')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level1.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="二级行业" name="level2">
|
||||
<Select
|
||||
placeholder="选择二级行业"
|
||||
onChange={value => handleLevelChange(2, value)}
|
||||
disabled={loading || !form.getFieldValue('level1')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level2.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="三级行业" name="level3">
|
||||
<Select
|
||||
placeholder="选择三级行业"
|
||||
onChange={value => handleLevelChange(3, value)}
|
||||
disabled={loading || !form.getFieldValue('level2')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level3.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item label="四级行业" name="level4">
|
||||
<Select
|
||||
placeholder="选择四级行业"
|
||||
onChange={value => handleLevelChange(4, value)}
|
||||
disabled={loading || !form.getFieldValue('level3')}
|
||||
allowClear
|
||||
>
|
||||
{industryData.level4.map(item => (
|
||||
<Option key={item.code} value={item.code} data-name={item.name}>{item.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
expandTrigger="hover"
|
||||
displayRender={(labels) => labels.join(' > ')}
|
||||
showSearch={{
|
||||
filter: (inputValue, path) =>
|
||||
path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user