Просмотр исходного кода

📝 docs(silver-jobs): 添加银龄岗公司选择问题修复方案文档

- 详细描述公司选择框无法正确获取已认证公司列表的问题
- 分析前端API调用、后端路由和数据库实体可能存在的问题
- 提供前端组件修改、后端数据验证和API测试的完整修复方案
- 包含调试步骤和修复验证清单

✨ feat(silver-jobs): 优化银龄岗管理页面公司选择功能

- 调整Select组件属性,修改optionFilterProp为label以支持搜索
- 增加公司数据加载状态显示和无数据提示
- 扩大分页大小(pageSize)从100到1000以获取更多公司数据
- 增强错误处理和用户提示信息
- 添加详细的控制台调试日志

🔧 chore(silver-jobs): 改进公司数据加载逻辑

- 优化fetchCertifiedCompanies函数,增加数据检查和日志输出
- 调整Select组件选项生成方式,使用options属性替代手动渲染Option
- 改进网络错误和API错误的区分处理
- 当无已认证公司时显示友好提示信息
yourname 7 месяцев назад
Родитель
Сommit
2bad8d6155
2 измененных файлов с 212 добавлено и 15 удалено
  1. 182 0
      docs/silver-jobs-company-select-issue-fix.md
  2. 30 15
      src/client/admin/pages/SilverJobs.tsx

+ 182 - 0
docs/silver-jobs-company-select-issue-fix.md

@@ -0,0 +1,182 @@
+# 银龄岗管理页面公司选择问题修复方案
+
+## 问题描述
+在后端银龄岗管理页面新建岗位弹窗中,公司名称选择框无法正确获取或显示已认证的公司列表。
+
+## 问题分析结果
+
+### 1. 系统结构分析 ✅
+- **前端API调用**:使用 `silverCompaniesClient.certified.$get()` 调用 `/api/v1/silver-companies/certified`
+- **后端API路由**:路径正确注册为 `/api/v1/silver-companies/certified`
+- **数据库实体**:`isCertified` 字段类型为 `tinyint(1)`,符合要求
+
+### 2. 可能的问题点
+
+#### 2.1 前端问题
+1. **Select组件使用方式**:当前使用 `filterOption` 但数据可能为空
+2. **数据加载时机**:在弹窗打开时才加载数据,可能导致延迟
+3. **错误处理**:网络请求失败时没有友好提示
+
+#### 2.2 后端问题
+1. **数据库数据**:可能缺少已认证的公司数据
+2. **认证状态值**:检查 `isCertified` 是否为1而非true
+
+### 3. 修复方案
+
+#### 3.1 前端修复 (SilverJobs.tsx)
+
+**需要修改的位置:**
+- 第593-613行:公司名称选择框
+- 第252-277行:fetchCertifiedCompanies 函数
+
+**具体修改内容:**
+
+```typescript
+// 1. 修改公司名称选择框的Select组件
+<Form.Item
+  name="companyId"
+  label="公司名称"
+  rules={[{ required: true, message: '请选择公司名称' }]}
+>
+  <Select
+    placeholder="请选择或搜索公司名称"
+    loading={companiesLoading}
+    showSearch
+    optionFilterProp="label"  // 关键修改点
+    notFoundContent={companiesLoading ? "加载中..." : "暂无已认证公司"}
+    options={certifiedCompanies.map(company => ({
+      label: company.name,
+      value: company.id,
+      key: company.id
+    }))}
+  />
+</Form.Item>
+
+// 2. 优化fetchCertifiedCompanies函数
+const fetchCertifiedCompanies = async () => {
+  setCompaniesLoading(true);
+  try {
+    const response = await silverCompaniesClient.certified.$get({
+      query: {
+        page: 1,
+        pageSize: 1000  // 增加数量限制
+      }
+    });
+
+    if (response.status === 200) {
+      const result = await response.json();
+      setCertifiedCompanies(result.data || []);
+      
+      // 如果数据为空,给出提示
+      if (!result.data || result.data.length === 0) {
+        message.info('暂无已认证的公司,请先完成公司认证');
+      }
+    } else {
+      const error = await response.json();
+      message.error(error.message || '获取已认证公司列表失败');
+      setCertifiedCompanies([]);
+    }
+  } catch (error) {
+    console.error('获取已认证公司列表失败:', error);
+    message.error('获取已认证公司列表失败,请检查网络连接');
+    setCertifiedCompanies([]);
+  } finally {
+    setCompaniesLoading(false);
+  }
+};
+
+// 3. 添加调试信息
+const fetchCertifiedCompanies = async () => {
+  setCompaniesLoading(true);
+  console.log('开始获取已认证公司列表...');
+  
+  try {
+    const response = await silverCompaniesClient.certified.$get({
+      query: {
+        page: 1,
+        pageSize: 100
+      }
+    });
+    
+    console.log('API响应状态:', response.status);
+    
+    if (response.status === 200) {
+      const result = await response.json();
+      console.log('获取到的公司数据:', result);
+      setCertifiedCompanies(result.data || []);
+    } else {
+      const error = await response.json();
+      console.error('API错误:', error);
+      message.error(error.message || '获取已认证公司列表失败');
+      setCertifiedCompanies([]);
+    }
+  } catch (error) {
+    console.error('网络错误:', error);
+    message.error('获取已认证公司列表失败');
+    setCertifiedCompanies([]);
+  } finally {
+    setCompaniesLoading(false);
+  }
+};
+```
+
+#### 3.2 后端数据验证
+
+**执行SQL检查数据库状态:**
+```sql
+-- 检查已认证的公司数量
+SELECT COUNT(*) as certified_count FROM silver_companies WHERE is_certified = 1;
+
+-- 查看已认证的公司详细信息
+SELECT id, name, is_certified FROM silver_companies WHERE is_certified = 1 LIMIT 10;
+```
+
+#### 3.3 API测试验证
+
+**使用curl测试API:**
+```bash
+# 测试认证公司API
+curl -X GET 'https://your-domain.com/api/v1/silver-companies/certified?page=1&pageSize=10' \
+  -H 'Authorization: Bearer YOUR_TOKEN'
+
+# 或者直接访问
+curl -X GET 'https://d8d-ai-vscode-8080-152-136-template-9-group.r.d8d.fun/api/v1/silver-companies/certified?page=1&pageSize=10'
+```
+
+### 4. 调试步骤
+
+#### 4.1 前端调试
+1. 打开浏览器开发者工具 (F12)
+2. 在Network标签页查看 `/api/v1/silver-companies/certified` 的请求
+3. 检查响应状态码和数据格式
+4. 在Console查看 `console.log` 输出的调试信息
+
+#### 4.2 后端调试
+1. 检查数据库中是否有已认证的公司
+2. 验证API路由是否正确响应
+3. 查看服务器日志是否有错误信息
+
+### 5. 验证修复
+
+**验证清单:**
+- [ ] API调用返回200状态码
+- [ ] 返回的数据中包含已认证的公司
+- [ ] 前端Select组件正确显示公司列表
+- [ ] 可以正常选择公司名称
+- [ ] 新建岗位时公司ID正确保存
+
+### 6. 预期结果
+修复后,在新建岗位弹窗中:
+1. 公司名称下拉框会显示所有已认证的公司
+2. 支持搜索和选择功能
+3. 如果没有已认证公司,会显示友好提示
+
+## 实施建议
+
+1. **优先级1**:先验证数据库中是否有已认证公司数据
+2. **优先级2**:测试API是否能正确返回数据
+3. **优先级3**:修复前端组件使用问题
+4. **优先级4**:添加完整的错误处理和用户提示
+
+## 联系方式
+如有问题,请联系开发团队进行协助。

+ 30 - 15
src/client/admin/pages/SilverJobs.tsx

@@ -252,24 +252,39 @@ export const SilverJobsPage: React.FC = () => {
   // 获取已认证公司列表
   const fetchCertifiedCompanies = async () => {
     setCompaniesLoading(true);
+    console.log('开始获取已认证公司列表...');
+    
     try {
       const response = await silverCompaniesClient.certified.$get({
         query: {
           page: 1,
-          pageSize: 100
+          pageSize: 1000
         }
       });
 
+      console.log('认证公司API响应状态:', response.status);
+      
       if (response.status === 200) {
         const result = await response.json();
-        setCertifiedCompanies(result.data || []);
+        console.log('获取到的认证公司数据:', result.data);
+        
+        if (result.data && result.data.length > 0) {
+          setCertifiedCompanies(result.data);
+          console.log('成功加载认证公司数量:', result.data.length);
+        } else {
+          console.log('暂无已认证公司数据');
+          setCertifiedCompanies([]);
+          message.info('暂无已认证的公司,请先完成公司认证');
+        }
       } else {
+        const error = await response.json();
+        console.error('API错误响应:', error);
         setCertifiedCompanies([]);
-        message.error('获取已认证公司列表失败');
+        message.error(error.message || '获取已认证公司列表失败');
       }
     } catch (error) {
-      console.error('获取已认证公司列表失败:', error);
-      message.error('获取已认证公司列表失败');
+      console.error('获取已认证公司列表网络错误:', error);
+      message.error('获取已认证公司列表失败,请检查网络连接');
       setCertifiedCompanies([]);
     } finally {
       setCompaniesLoading(false);
@@ -596,20 +611,20 @@ export const SilverJobsPage: React.FC = () => {
             rules={[{ required: true, message: '请选择公司名称' }]}
           >
             <Select
-              placeholder="请选择公司名称"
+              placeholder="请选择或搜索公司名称"
               loading={companiesLoading}
               showSearch
-              optionFilterProp="children"
+              optionFilterProp="label"
+              notFoundContent={companiesLoading ? "加载中..." : "暂无已认证公司"}
+              options={certifiedCompanies.map(company => ({
+                label: company.name,
+                value: company.id,
+                key: company.id
+              }))}
               filterOption={(input, option) =>
-                (option?.children as string)?.toLowerCase().includes(input.toLowerCase())
+                (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
               }
-            >
-              {(certifiedCompanies || []).map(company => (
-                <Option key={company.id} value={company.id}>
-                  {company.name}
-                </Option>
-              ))}
-            </Select>
+            />
           </Form.Item>
           <Form.Item
             name="location"