# 项目管理模块集成示例

## 在 BiddingView.vue 中集成项目详情组件

### 步骤 1: 导入组件

在 `BiddingView.vue` 的 `<script setup>` 部分添加导入:

```javascript
import ProjectDetail from '@/components/project/ProjectDetail.vue'
```

### 步骤 2: 修改模板

找到 `project-ongoing` 部分,修改为:

```vue
<!-- 进行中项目 -->
<div v-if="activeNav === 'project-ongoing'" class="panel">
  <div class="panel-header">
    <h3>进行中项目</h3>
    <div class="header-actions">
      <el-input 
        v-model="projectSearch" 
        placeholder="搜索项目名称..." 
        style="width: 200px; margin-right: 12px;"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="showCreateProjectDialog = true">
        <el-icon><Plus /></el-icon>
        创建项目
      </el-button>
    </div>
  </div>
  
  <!-- 项目列表 -->
  <div v-if="!selectedProject" class="project-list">
    <div 
      v-for="project in filteredOngoingProjects" 
      :key="project.id"
      class="project-card"
      @click="viewProjectDetail(project)"
    >
      <div class="project-card-header">
        <div class="project-title">
          <h4>{{ project.name }}</h4>
          <el-tag :type="getProgressTagType(project.progress)" size="small">
            {{ project.progress }}
          </el-tag>
        </div>
        <div class="project-meta">
          <span class="meta-item">
            <el-icon><Clock /></el-icon>
            创建时间：{{ project.createTime }}
          </span>
        </div>
      </div>
      <div class="project-progress-bar">
        <div class="progress-info">
          <span>当前进度</span>
          <span>{{ getProgressPercentage(project.progress) }}%</span>
        </div>
        <el-progress 
          :percentage="getProgressPercentage(project.progress)" 
          :color="getProgressColor(project.progress)"
          :show-text="false"
        />
      </div>
    </div>
  </div>

  <!-- 项目详情 - 使用新组件 -->
  <ProjectDetail 
    v-else 
    :project="selectedProject" 
    @back="selectedProject = null"
    @update="handleProjectUpdate"
  />
</div>
```

### 步骤 3: 添加处理函数

在 `<script setup>` 部分添加:

```javascript
// 项目详情处理
const handleProjectUpdate = () => {
  ElMessage.success('项目信息已更新')
  // 可以在这里重新加载项目数据
  // loadProjectData(selectedProject.value.id)
}
```

## 完整示例代码

```vue
<template>
  <div class="bidding-system">
    <!-- 侧边栏保持不变 -->
    <aside class="bidding-sidebar">
      <!-- ... 侧边栏内容 ... -->
    </aside>

    <div class="bidding-content">
      <header class="content-header">
        <!-- ... 头部内容 ... -->
      </header>

      <div class="content-main">
        <!-- 进行中项目 -->
        <div v-if="activeNav === 'project-ongoing'" class="panel">
          <div class="panel-header">
            <h3>进行中项目</h3>
            <div class="header-actions">
              <el-input 
                v-model="projectSearch" 
                placeholder="搜索项目名称..." 
                style="width: 200px; margin-right: 12px;"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" @click="showCreateProjectDialog = true">
                <el-icon><Plus /></el-icon>
                创建项目
              </el-button>
            </div>
          </div>
          
          <!-- 项目列表 -->
          <div v-if="!selectedProject" class="project-list">
            <div 
              v-for="project in filteredOngoingProjects" 
              :key="project.id"
              class="project-card"
              @click="viewProjectDetail(project)"
            >
              <div class="project-card-header">
                <div class="project-title">
                  <h4>{{ project.name }}</h4>
                  <el-tag :type="getProgressTagType(project.progress)" size="small">
                    {{ project.progress }}
                  </el-tag>
                </div>
                <div class="project-meta">
                  <span class="meta-item">
                    <el-icon><Clock /></el-icon>
                    创建时间：{{ project.createTime }}
                  </span>
                </div>
              </div>
              <div class="project-progress-bar">
                <div class="progress-info">
                  <span>当前进度</span>
                  <span>{{ getProgressPercentage(project.progress) }}%</span>
                </div>
                <el-progress 
                  :percentage="getProgressPercentage(project.progress)" 
                  :color="getProgressColor(project.progress)"
                  :show-text="false"
                />
              </div>
            </div>
          </div>

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

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ProjectDetail from '@/components/project/ProjectDetail.vue'

// 导航状态
const activeNav = ref('kb-overview')
const selectedProject = ref(null)
const projectSearch = ref('')

// 项目数据
const ongoingProjects = ref([
  {
    id: 1,
    name: '某数据中心发电机组采购项目',
    client: 'XX科技有限公司',
    status: 'ongoing',
    progress: '文件提交',
    createTime: '2024-11-01 10:30:00'
  },
  {
    id: 2,
    name: 'XX医院应急电源系统项目',
    client: 'XX市人民医院',
    status: 'ongoing',
    progress: '开标',
    createTime: '2024-11-05 14:20:00'
  },
  {
    id: 3,
    name: '工业园区配电工程项目',
    client: 'XX工业园管委会',
    status: 'won',
    progress: '结果公示',
    createTime: '2024-10-15 09:15:00'
  }
])

// 过滤项目
const filteredOngoingProjects = computed(() => {
  if (!projectSearch.value) return ongoingProjects.value
  return ongoingProjects.value.filter(p => 
    p.name.includes(projectSearch.value)
  )
})

// 查看项目详情
const viewProjectDetail = (project) => {
  selectedProject.value = project
}

// 项目更新处理
const handleProjectUpdate = () => {
  ElMessage.success('项目信息已更新')
}

// 辅助函数
const getProgressTagType = (progress) => {
  const typeMap = {
    '信息提取': 'info',
    '文件准备': 'warning',
    '文件提交': 'warning',
    '开标': '',
    '评标': '',
    '结果公示': 'success'
  }
  return typeMap[progress] || 'info'
}

const getProgressPercentage = (progress) => {
  const percentageMap = {
    '信息提取': 16,
    '文件准备': 33,
    '文件提交': 50,
    '开标': 66,
    '评标': 83,
    '结果公示': 100
  }
  return percentageMap[progress] || 0
}

const getProgressColor = (progress) => {
  const percentage = getProgressPercentage(progress)
  if (percentage >= 80) return '#10b981'
  if (percentage >= 50) return '#3b82f6'
  if (percentage >= 30) return '#f59e0b'
  return '#ef4444'
}
</script>
```

## 测试步骤

1. **启动开发服务器**
   ```bash
   cd frontend
   npm run dev
   ```

2. **访问页面**
   - 打开浏览器访问 `http://localhost:5173`
   - 进入招标助手系统
   - 点击左侧导航"项目管理" → "进行中项目"

3. **测试功能**
   - 点击任意项目卡片进入详情
   - 切换不同 Tab 查看各个模块
   - 测试文件提交模块的检查清单
   - 测试开标信息模块的报价对比表
   - 测试结果公示模块的三种结果类型切换

## 注意事项

1. **确保依赖已安装**
   ```bash
   npm install element-plus @element-plus/icons-vue
   ```

2. **检查路径**
   - 确保组件路径正确: `@/components/project/ProjectDetail.vue`
   - 如果使用相对路径,根据实际情况调整

3. **样式冲突**
   - 新组件的样式使用了 `scoped`,不会影响现有样式
   - 如有冲突,可以调整组件内的样式

4. **数据对接**
   - 当前使用模拟数据
   - 实际使用时需要对接后端 API
   - 参考 `src/api/project.js` 中的接口定义

## 后续优化建议

1. **性能优化**
   - 使用虚拟滚动处理大量项目列表
   - 懒加载项目详情数据

2. **用户体验**
   - 添加加载状态提示
   - 添加错误处理和重试机制
   - 实现数据缓存

3. **功能扩展**
   - 添加项目搜索和筛选
   - 实现项目排序功能
   - 添加批量操作功能

4. **移动端适配**
   - 优化移动端布局
   - 添加触摸手势支持
