feat: 添加修改行业分类不展示的问题

2025-10-24 13:30:52 +08:00
parent 801113b7e5
commit 3f881d000b
2 changed files with 160 additions and 41 deletions
--- a/src/contexts/IndustryContext.js
+++ b/src/contexts/IndustryContext.js
@@ -1,12 +1,17 @@
 // src/contexts/IndustryContext.js
-// 行业分类数据全局上下文 - 直接使用静态数据
+// 行业分类数据全局上下文 - 使用API获取 + 缓存机制

-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
 import { industryData as staticIndustryData } from '../data/industryData';
+import { industryService } from '../services/industryService';
 import { logger } from '../utils/logger';

 const IndustryContext = createContext();

+// 缓存配置
+const CACHE_KEY = 'industry_classifications_cache';
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 1天（24小时）
+
 /**
 * useIndustry Hook
 * 在任何组件中使用行业数据
@@ -19,28 +24,148 @@ export const useIndustry = () => {
    return context;
 };

+/**
+ * 从 localStorage 读取缓存
+ */
+const loadFromCache = () => {
+    try {
+        const cached = localStorage.getItem(CACHE_KEY);
+        if (!cached) return null;
+
+        const { data, timestamp } = JSON.parse(cached);
+        const now = Date.now();
+
+        // 检查缓存是否过期（1天）
+        if (now - timestamp > CACHE_DURATION) {
+            localStorage.removeItem(CACHE_KEY);
+            logger.debug('IndustryContext', '缓存已过期，清除缓存');
+            return null;
+        }
+
+        logger.debug('IndustryContext', '从缓存加载行业数据', {
+            count: data?.length || 0,
+            age: Math.round((now - timestamp) / 1000 / 60) + ' 分钟前'
+        });
+        return data;
+    } catch (error) {
+        logger.error('IndustryContext', 'loadFromCache', error);
+        return null;
+    }
+};
+
+/**
+ * 保存到 localStorage
+ */
+const saveToCache = (data) => {
+    try {
+        localStorage.setItem(CACHE_KEY, JSON.stringify({
+            data,
+            timestamp: Date.now()
+        }));
+        logger.debug('IndustryContext', '行业数据已缓存', {
+            count: data?.length || 0
+        });
+    } catch (error) {
+        logger.error('IndustryContext', 'saveToCache', error);
+    }
+};
+
 /**
 * IndustryProvider 组件
- * 提供全局行业数据管理 - 直接使用静态数据，无需加载
+ * 提供全局行业数据管理 - 使用API获取 + 缓存机制
 */
 export const IndustryProvider = ({ children }) => {
-    // 直接使用静态数据，无需状态管理
-    const industryData = staticIndustryData;
+    const [industryData, setIndustryData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const hasLoadedRef = useRef(false);
+    const isLoadingRef = useRef(false);

-    logger.debug('IndustryContext', '使用静态行业数据', {
-        count: industryData?.length || 0
+    /**
+     * 加载行业数据
+     */
+    const loadIndustryData = async () => {
+        // 防止重复加载（处理 StrictMode 双重调用）
+        if (hasLoadedRef.current || isLoadingRef.current) {
+            logger.debug('IndustryContext', '跳过重复加载', {
+                hasLoaded: hasLoadedRef.current,
+                isLoading: isLoadingRef.current
+            });
+            return industryData;
+        }
+
+        try {
+            isLoadingRef.current = true;
+            setLoading(true);
+            setError(null);
+
+            logger.debug('IndustryContext', '开始加载行业数据');
+
+            // 1. 先尝试从缓存加载
+            const cachedData = loadFromCache();
+            if (cachedData && cachedData.length > 0) {
+                setIndustryData(cachedData);
+                hasLoadedRef.current = true;
+                return cachedData;
+            }
+
+            // 2. 缓存不存在或过期，调用 API
+            logger.debug('IndustryContext', '缓存无效，调用API获取数据');
+            const response = await industryService.getClassifications();
+
+            if (response.success && response.data && response.data.length > 0) {
+                setIndustryData(response.data);
+                saveToCache(response.data);
+                hasLoadedRef.current = true;
+
+                logger.debug('IndustryContext', 'API数据加载成功', {
+                    count: response.data.length
                });

-    const value = {
-        industryData,              // 行业数据（静态）
-        loading: false,            // 静态数据无需加载
-        error: null,               // 静态数据无错误
-        loadIndustryData: () => {  // 兼容旧接口，返回数据
-            return Promise.resolve(industryData);
-        },
-        refreshIndustryData: () => { // 兼容旧接口，返回数据
-            return Promise.resolve(industryData);
+                return response.data;
+            } else {
+                throw new Error('API返回数据为空');
            }
+        } catch (err) {
+            // 3. API 失败，回退到静态数据
+            logger.warn('IndustryContext', 'API加载失败，使用静态数据', {
+                error: err.message
+            });
+
+            setError(err.message);
+            setIndustryData(staticIndustryData);
+            hasLoadedRef.current = true;
+
+            return staticIndustryData;
+        } finally {
+            setLoading(false);
+            isLoadingRef.current = false;
+        }
+    };
+
+    /**
+     * 刷新行业数据（清除缓存并重新加载）
+     */
+    const refreshIndustryData = async () => {
+        logger.debug('IndustryContext', '刷新行业数据，清除缓存');
+        localStorage.removeItem(CACHE_KEY);
+        hasLoadedRef.current = false;
+        isLoadingRef.current = false;
+        return loadIndustryData();
+    };
+
+    // 组件挂载时自动加载数据
+    useEffect(() => {
+        loadIndustryData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const value = {
+        industryData,
+        loading,
+        error,
+        loadIndustryData,
+        refreshIndustryData
    };

    return (
--- a/src/views/Community/components/EventFilters.js
+++ b/src/views/Community/components/EventFilters.js
@@ -1,6 +1,6 @@
 // src/views/Community/components/EventFilters.js
 import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, DatePicker, Button, Select, Form, Input, Cascader } 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';
@@ -12,7 +12,9 @@ const { Option } = Select;

 const EventFilters = ({ filters, onFilterChange, loading }) => {
    const [form] = Form.useForm();
-    const [industryOptions, setIndustryOptions] = useState([]);
+
+    // 使用全局行业数据
+    const { industryData, loading: industryLoading, loadIndustryData } = useIndustry();

    // 初始化表单值
    useEffect(() => {
@@ -25,25 +27,14 @@ const EventFilters = ({ filters, onFilterChange, loading }) => {
        form.setFieldsValue(initialValues);
    }, [filters, form]);

-    // 加载申银万国行业分类树形数据
-    const loadIndustryClassifications = async () => {
-        try {
-            const response = await industryService.getClassifications();
-            if (response.success && response.data) {
-                setIndustryOptions(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();
        }
    };

-    useEffect(() => {
-        loadIndustryClassifications();
-    }, []);
-
    const handleDateRangeChange = (dates) => {
        if (dates && dates.length === 2) {
            const dateRange = `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}`;
@@ -92,14 +83,14 @@ const EventFilters = ({ filters, onFilterChange, loading }) => {
    };

    // 行业级联选择变化
-    const handleIndustryChange = (value, selectedOptions) => {
+    const handleIndustryChange = (value) => {
        if (!value || value.length === 0) {
            onFilterChange('industry_code', '');
            return;
        }

        // 获取选中的节点
-        const selectedNode = findNodeByPath(industryOptions, value);
+        const selectedNode = findNodeByPath(industryData || [], value);

        if (!selectedNode) {
            // 如果找不到节点，使用最后一个值
@@ -163,17 +154,20 @@ const EventFilters = ({ filters, onFilterChange, loading }) => {
                {/* 行业分类级联选择器 - 替换原来的 5 个独立 Select */}
                <Row gutter={16}>
                    <Col span={24}>
-                        <Form.Item label="申银万国行业分类" name="industry_cascade">
+                        <Form.Item label="行业" name="industry_cascade">
                            <Cascader
-                                options={industryOptions}
+                                options={industryData || []}
                                onChange={handleIndustryChange}
-                                placeholder="请选择行业（支持选择任意级别）"
+                                onFocus={handleCascaderFocus}
+                                placeholder={industryLoading ? "加载中..." : "请选择行业（支持选择任意级别）"}
                                changeOnSelect
+                                expandTrigger="hover"
                                showSearch={{
                                    filter: (inputValue, path) =>
                                        path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
                                }}
-                                disabled={loading}
+                                disabled={loading || industryLoading}
+                                loading={industryLoading}
                                allowClear
                                style={{ width: '100%' }}
                                displayRender={(labels) => labels.join(' / ')}