79 lines
3.3 KiB
JavaScript
79 lines
3.3 KiB
JavaScript
// src/views/Community/components/IndustryCascader.js
|
|
import React, { useState, useCallback } from 'react';
|
|
import { Card, Form, Cascader } from 'antd';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { fetchIndustryData, selectIndustryData, selectIndustryLoading } from '../../../store/slices/industrySlice';
|
|
import { logger } from '../../../utils/logger';
|
|
|
|
const IndustryCascader = ({ onFilterChange, loading }) => {
|
|
const [industryCascaderValue, setIndustryCascaderValue] = useState([]);
|
|
|
|
// 使用 Redux 获取行业数据
|
|
const dispatch = useDispatch();
|
|
const industryData = useSelector(selectIndustryData);
|
|
const industryLoading = useSelector(selectIndustryLoading);
|
|
|
|
// Cascader 获得焦点时加载数据
|
|
const handleCascaderFocus = useCallback(async () => {
|
|
if (!industryData || industryData.length === 0) {
|
|
logger.debug('IndustryCascader', 'Cascader 获得焦点，开始加载行业数据');
|
|
await dispatch(fetchIndustryData());
|
|
}
|
|
}, [dispatch, industryData]);
|
|
|
|
// 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;
|