feat: 添加行业分类Cascader组件
- 新增 IndustryCascader 组件,支持多级行业分类选择 - 集成 IndustryContext 全局行业数据管理 - 支持懒加载和搜索功能 - 提供清晰的行业选择路径展示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
75
src/views/Community/components/IndustryCascader.js
Normal file
75
src/views/Community/components/IndustryCascader.js
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
// src/views/Community/components/IndustryCascader.js
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Card, Form, Cascader } from 'antd';
|
||||||
|
import { useIndustry } from '../../../contexts/IndustryContext';
|
||||||
|
import { logger } from '../../../utils/logger';
|
||||||
|
|
||||||
|
const IndustryCascader = ({ onFilterChange, loading }) => {
|
||||||
|
const [industryCascaderValue, setIndustryCascaderValue] = useState([]);
|
||||||
|
|
||||||
|
// 使用全局行业数据
|
||||||
|
const { industryData, loadIndustryData, loading: industryLoading } = useIndustry();
|
||||||
|
|
||||||
|
// Cascader 获得焦点时加载数据
|
||||||
|
const handleCascaderFocus = async () => {
|
||||||
|
if (!industryData || industryData.length === 0) {
|
||||||
|
logger.debug('IndustryCascader', 'Cascader 获得焦点,开始加载行业数据');
|
||||||
|
await loadIndustryData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cascader 选择变化
|
||||||
|
const handleIndustryCascaderChange = (value, selectedOptions) => {
|
||||||
|
setIndustryCascaderValue(value);
|
||||||
|
|
||||||
|
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('IndustryCascader', 'Cascader 选择变化', {
|
||||||
|
value,
|
||||||
|
classification,
|
||||||
|
industryCode,
|
||||||
|
path: selectedOptions.map(o => o.label).join(' > ')
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 清空
|
||||||
|
onFilterChange('industry_classification', '');
|
||||||
|
onFilterChange('industry_code', '');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="industry-cascader" title="行业分类" style={{ marginBottom: 16 }}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Form.Item label="选择行业分类体系和具体行业">
|
||||||
|
<Cascader
|
||||||
|
options={industryData || []}
|
||||||
|
value={industryCascaderValue}
|
||||||
|
onChange={handleIndustryCascaderChange}
|
||||||
|
onFocus={handleCascaderFocus}
|
||||||
|
changeOnSelect
|
||||||
|
placeholder={industryLoading ? "加载中..." : "请选择行业分类体系和具体行业"}
|
||||||
|
disabled={loading || industryLoading}
|
||||||
|
loading={industryLoading}
|
||||||
|
allowClear
|
||||||
|
expandTrigger="hover"
|
||||||
|
displayRender={(labels) => labels.join(' > ')}
|
||||||
|
showSearch={{
|
||||||
|
filter: (inputValue, path) =>
|
||||||
|
path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
|
||||||
|
}}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IndustryCascader;
|
||||||
Reference in New Issue
Block a user