# 项目管理组件使用说明

## 组件概述

本目录包含招标助手系统的项目管理功能组件,实现了进行中项目的三个核心功能模块:

1. **文件提交模块** (`FileSubmission.vue`)
2. **开标信息模块** (`BiddingInfo.vue`)
3. **结果公示模块** (`ResultAnnouncement.vue`)
4. **项目详情主组件** (`ProjectDetail.vue`)

## 组件结构

```
components/project/
├── ProjectDetail.vue        # 项目详情主组件
├── FileSubmission.vue       # 文件提交模块
├── BiddingInfo.vue          # 开标信息模块
├── ResultAnnouncement.vue   # 结果公示模块
└── README.md               # 本文件
```

## 使用方法

### 1. 在 BiddingView.vue 中集成

在 `BiddingView.vue` 的项目详情部分引入 `ProjectDetail` 组件:

```vue
<template>
  <div v-if="activeNav === 'project-ongoing'" class="panel">
    <!-- 项目列表 -->
    <div v-if="!selectedProject" class="project-list">
      <!-- 项目卡片列表 -->
    </div>

    <!-- 项目详情 -->
    <ProjectDetail 
      v-else 
      :project="selectedProject" 
      @back="selectedProject = null"
      @update="handleProjectUpdate"
    />
  </div>
</template>

<script setup>
import ProjectDetail from '@/components/project/ProjectDetail.vue'

const selectedProject = ref(null)

const handleProjectUpdate = () => {
  // 刷新项目数据
  console.log('项目已更新')
}
</script>
```

### 2. 单独使用各个子组件

如果需要单独使用某个功能模块:

```vue
<template>
  <!-- 只使用文件提交模块 -->
  <FileSubmission :project="projectData" @update="handleUpdate" />
  
  <!-- 只使用开标信息模块 -->
  <BiddingInfo :project="projectData" @update="handleUpdate" />
  
  <!-- 只使用结果公示模块 -->
  <ResultAnnouncement :project="projectData" @update="handleUpdate" />
</template>

<script setup>
import FileSubmission from '@/components/project/FileSubmission.vue'
import BiddingInfo from '@/components/project/BiddingInfo.vue'
import ResultAnnouncement from '@/components/project/ResultAnnouncement.vue'
</script>
```

## 组件 Props

### ProjectDetail

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| project | Object | 是 | 项目对象 |

### FileSubmission / BiddingInfo / ResultAnnouncement

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| project | Object | 是 | 项目对象 |

## 组件 Events

### ProjectDetail

| 事件名 | 参数 | 说明 |
|--------|------|------|
| back | - | 返回项目列表 |
| update | - | 项目信息已更新 |

### FileSubmission / BiddingInfo / ResultAnnouncement

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update | - | 模块信息已更新 |

## 数据结构

### 项目对象 (Project)

```javascript
{
  id: Number,              // 项目ID
  name: String,            // 项目名称
  client: String,          // 招标单位
  status: String,          // 项目状态: ongoing/pending/won/lost/failed
  progress: String,        // 当前进度: 信息提取/文件准备/文件提交/开标/评标/结果公示
  createTime: String,      // 创建时间
  // ... 其他字段
}
```

## API 接口

项目管理相关的 API 接口已在 `src/api/project.js` 中定义:

```javascript
import { projectApi } from '@/api/project'

// 获取项目详情
const project = await projectApi.getProjectDetail(projectId)

// 更新文件提交信息
await projectApi.updateSubmission(projectId, data)

// 更新开标信息
await projectApi.updateBiddingInfo(projectId, data)

// 更新结果公示
await projectApi.updateResult(projectId, data)
```

## 功能特性

### 文件提交模块

- ✅ 展示商务标、技术标、报价文件详细信息
- ✅ 文件预览、下载、重新生成
- ✅ 关键时间节点时间轴展示
- ✅ 提交前检查清单(7项)
- ✅ 完成度进度条
- ✅ 标记为已提交功能

### 开标信息模块

- ✅ 开标时间倒计时提醒
- ✅ 开标地点地图导航
- ✅ 参会人员信息管理
- ✅ 开标流程时间轴
- ✅ 开标记录详细展示
- ✅ 所有投标单位报价对比表
- ✅ 现场照片/视频上传

### 结果公示模块

- ✅ 三种结果类型切换(中标/未中标/流标)
- ✅ **中标情况**:
  - 公示信息、中标详情
  - 综合得分展示
  - 合同签订信息
  - 项目执行进度跟踪
- ✅ **未中标情况**:
  - 得分差距分析
  - 失败原因总结
  - 改进建议列表
- ✅ **流标情况**:
  - 流标原因分析
  - 后续处理方案
  - 保证金退还状态

## 样式定制

所有组件都使用 SCSS 编写样式,支持自定义主题色:

```scss
// 主色调
$primary-color: #7c3aed;
$success-color: #10b981;
$warning-color: #f59e0b;
$danger-color: #ef4444;

// 可以在组件中覆盖这些变量
```

## 注意事项

1. **Element Plus 依赖**: 组件依赖 Element Plus UI 库,确保已正确安装
2. **图标组件**: 使用 Element Plus Icons,需要单独引入
3. **响应式设计**: 组件已适配不同屏幕尺寸
4. **数据模拟**: 当前使用模拟数据,实际使用时需连接后端 API
5. **权限控制**: 某些操作可能需要权限验证

## 开发计划

- [ ] 添加文件上传进度显示
- [ ] 实现实时倒计时功能
- [ ] 添加数据导出为 Excel 功能
- [ ] 实现地图导航集成
- [ ] 添加消息通知提醒
- [ ] 优化移动端显示

## 更新日志

### v1.0.0 (2024-12-08)
- ✅ 完成文件提交模块
- ✅ 完成开标信息模块
- ✅ 完成结果公示模块
- ✅ 完成项目详情主组件
- ✅ 创建 API 服务文件

## 技术支持

如有问题,请联系开发团队或查看项目文档。
