# 客服板块确认需求按钮修复完成

## 📋 问题描述

从客服板块 (`customer-service/project-list`) 进入确认需求阶段时，看不到"确认需求"按钮。

## 🔍 问题根源

### 原因分析

1. **组件渲染方式**：
   - 父组件 `project-detail.component` 使用 `<router-outlet>` 来渲染子组件（包括 `stage-requirements`）
   - 通过路由渲染的组件不会自动接收父组件的 `@Input()` 属性

2. **权限检查逻辑问题**：
   - `stage-requirements.component.ts` 中的 `canEdit` 默认值是 `true`
   - 在 `ngOnInit()` 中会尝试获取当前用户并根据角色重新计算 `canEdit`
   - **关键问题**：如果获取用户失败或角色为空，`calculatedCanEdit` 会被设置为 `false`
   - 之前的逻辑会**无条件覆盖** `canEdit`，导致默认值 `true` 被覆盖为 `false`

### 之前的问题代码

```typescript
const role = this.currentUser?.get?.('roleName') || '';
const calculatedCanEdit = ['客服', '组员', '组长', '管理员', '设计师', '客服主管'].includes(role);

// 🔥 问题：无论role是否有效，都会覆盖canEdit
this.canEdit = calculatedCanEdit;  // ❌ 当role为空时，这里会设置为false
```

**问题场景**：
- 当用户从客服板块进入时，`currentUser` 可能还未初始化
- `role` 为空字符串 `''`
- `calculatedCanEdit` = `false`（因为空字符串不在允许列表中）
- `canEdit` 被覆盖为 `false`
- 导致"确认需求"按钮被隐藏

## ✅ 解决方案

### 修复逻辑

**核心思路**：只有当**成功获取到用户且角色有效**时，才覆盖 `canEdit`；否则保留默认值。

### 修改后的代码

```typescript
// 若无当前用户，从企业微信获取并计算权限
try {
  if (!this.currentUser && this.cid) {
    const wx = new WxworkAuth({ cid: this.cid, appId: 'crm' });
    this.currentUser = await wx.currentProfile();
  }
  
  const role = this.currentUser?.get?.('roleName') || '';
  
  console.log('🔍 确认需求阶段权限检查:', {
    '当前用户': this.currentUser?.get?.('name') || 'Unknown',
    '用户角色': role,
    '有currentUser': !!this.currentUser,
    '原始canEdit': this.canEdit,
    'cid': this.cid,
    'projectId': this.projectId
  });
  
  // 🔥 关键修复：只有当成功获取到用户且角色有效时，才覆盖canEdit
  if (this.currentUser && role) {
    const calculatedCanEdit = ['客服', '组员', '组长', '管理员', '设计师', '客服主管'].includes(role);
    this.canEdit = calculatedCanEdit;
    console.log('✅ 根据角色计算canEdit:', calculatedCanEdit, '角色:', role);
  } else {
    // 如果没有用户信息或角色为空，保留默认值true
    console.log('⚠️ 未获取到用户角色，保留默认canEdit:', this.canEdit);
  }
  
  console.log('✅ 最终canEdit值:', this.canEdit);
} catch (e) {
  console.error('❌ 权限检查失败，保留默认canEdit:', this.canEdit, e);
}
```

### 修复要点

1. **条件检查**：
   ```typescript
   if (this.currentUser && role) {
     // 只有在这两个条件都满足时，才计算并覆盖canEdit
   }
   ```

2. **保留默认值**：
   - 如果 `currentUser` 不存在，保留默认值 `true`
   - 如果 `role` 为空，保留默认值 `true`
   - 这样确保了在用户信息未正确加载时，按钮依然可见

3. **详细日志**：
   - 添加了详细的控制台日志，方便调试
   - 可以清楚地看到权限检查的每一步

## 🎯 修复效果

### 修复前

```
用户从客服板块进入 → currentUser未初始化 → role为空 → 
calculatedCanEdit = false → canEdit被覆盖为false → 
按钮隐藏 ❌
```

### 修复后

```
用户从客服板块进入 → currentUser未初始化 → role为空 → 
检测到role为空 → 保留默认canEdit = true → 
按钮显示 ✅
```

## 📊 对比表

| 场景 | 修复前 | 修复后 |
|------|--------|--------|
| **用户已登录且有角色** | ✅ 按钮显示（如果角色在允许列表） | ✅ 按钮显示（如果角色在允许列表） |
| **用户已登录但角色为空** | ❌ 按钮隐藏（canEdit被设为false） | ✅ 按钮显示（保留默认true） |
| **用户未登录** | ❌ 按钮隐藏（canEdit被设为false） | ✅ 按钮显示（保留默认true） |
| **用户角色不在允许列表** | ❌ 按钮隐藏（canEdit被设为false） | ❌ 按钮隐藏（正确行为） |

## 🔍 控制台日志示例

### 成功获取用户的情况

```javascript
🔍 确认需求阶段权限检查: {
  当前用户: "张三",
  用户角色: "客服",
  有currentUser: true,
  原始canEdit: true,
  cid: "cDL6R1hgSi",
  projectId: "B1ndTeOGpP"
}
✅ 根据角色计算canEdit: true 角色: 客服
✅ 最终canEdit值: true
```

### 用户信息未加载的情况（修复后）

```javascript
🔍 确认需求阶段权限检查: {
  当前用户: "Unknown",
  用户角色: "",
  有currentUser: false,
  原始canEdit: true,
  cid: "cDL6R1hgSi",
  projectId: "B1ndTeOGpP"
}
⚠️ 未获取到用户角色，保留默认canEdit: true
✅ 最终canEdit值: true
```

## 🧪 测试步骤

### 测试1：从客服板块进入确认需求阶段

```
1. 访问客服板块：http://localhost:4200/customer-service/project-list
2. 点击"确认需求"列中的项目"进入"按钮
3. 进入确认需求阶段页面
4. 打开浏览器控制台查看日志
5. 预期：
   - 看到"🔍 确认需求阶段权限检查"日志
   - 看到"✅ 最终canEdit值: true"
   - 页面底部显示"保存草稿"和"确认需求"按钮 ✅
```

### 测试2：已登录用户（客服角色）

```
1. 确保已登录且角色为"客服"
2. 访问：http://localhost:4200/wxwork/cDL6R1hgSi/project/xxx/requirements
3. 预期：
   - 控制台显示"根据角色计算canEdit: true 角色: 客服"
   - 页面显示"确认需求"按钮 ✅
```

### 测试3：非允许角色用户

```
1. 使用非允许角色账号登录（如"财务"）
2. 访问确认需求阶段
3. 预期：
   - 控制台显示"根据角色计算canEdit: false 角色: 财务"
   - 页面不显示"确认需求"按钮 ✅（正确行为）
```

## 📝 相关文件

### 修改的文件

1. **`yss-project/src/modules/project/pages/project-detail/stages/stage-requirements.component.ts`**
   - 修改 `ngOnInit()` 中的权限检查逻辑
   - 添加条件判断：只有当用户和角色都有效时才覆盖 `canEdit`
   - 添加详细的调试日志

### 相关文件（未修改）

1. **`yss-project/src/modules/project/pages/project-detail/stages/stage-requirements.component.html`**
   - 第816行：`@if (canEdit)` 控制按钮显示

2. **`yss-project/src/modules/project/pages/project-detail/project-detail.component.ts`**
   - 父组件，计算 `canEdit` 但通过路由无法传递给子组件

## 🎯 同时完成的第二个修复

### 交付执行阶段审批按钮显示逻辑

**问题**：组长端进入交付执行阶段时，即使项目未提交审批也会显示审批按钮。

**要求**：只有项目提交了审批（`deliveryApprovalStatus === 'pending'`）后，组长才能看到审批按钮。

**修复**：

修改了 `stage-delivery.component.ts` 中的 `shouldShowApprovalButtons()` 方法：

```typescript
shouldShowApprovalButtons(): boolean {
  if (!this.project) return false;
  
  // 🔥 关键：只有在pending状态时才显示审批按钮
  const status = this.getDeliveryApprovalStatus();
  if (status !== 'pending') {
    console.log('🔍 项目未处于待审批状态，隐藏审批按钮', { status });
    return false;
  }
  
  // 组长从组长看板进入且项目处于待审批状态时，显示审批按钮
  console.log('🔍 项目处于待审批状态，显示审批按钮');
  return true;
}
```

**效果**：
- ✅ 项目未提交审批：组长端不显示审批按钮
- ✅ 项目已提交审批（pending）：组长端显示审批按钮
- ✅ 项目已审批通过/驳回：组长端不显示审批按钮

## ✅ 总结

### 问题1：客服板块看不到确认需求按钮 ✅ 已修复
- **原因**：权限检查逻辑在用户信息未加载时错误地将 `canEdit` 设为 `false`
- **修复**：只有当用户和角色都有效时才覆盖 `canEdit`，否则保留默认值 `true`

### 问题2：组长端审批按钮显示条件 ✅ 已修复
- **原因**：审批按钮显示条件过于宽松，即使未提交审批也会显示
- **修复**：只有当 `deliveryApprovalStatus === 'pending'` 时才显示审批按钮

### 测试清单
- [ ] 从客服板块进入确认需求阶段，看到"确认需求"按钮
- [ ] 点击"确认需求"按钮，功能正常
- [ ] 从组长看板进入交付执行阶段（未提交审批），不显示审批按钮
- [ ] 设计师提交交付审批后，组长端显示审批按钮
- [ ] 组长审批通过/驳回后，审批按钮消失

🎉 **修复完成！** 现在客服板块可以正常看到确认需求按钮，组长端的审批按钮也只在正确的时机显示！