# 投标单位报价编辑功能说明

## 📝 功能概述

开标记录中的"所有投标单位报价"表格现已支持完整的编辑功能，用户可以添加、编辑、删除投标单位信息，并标记我方单位。

## ✨ 新增功能

### 1. **编辑投标单位信息** ✏️

**可编辑字段**:
- **排名**: 数字输入框（1-99）
- **投标单位**: 文本输入框
- **报价金额**: 数字输入框（精度2位小数，步长1000）
- **工期(天)**: 数字输入框（1-999）

### 2. **添加投标单位** ➕

**操作方式**:
- 点击表格右上角的"添加投标单位"按钮
- 自动添加新行，排名自动递增
- 填写单位名称、报价金额、工期

**默认值**:
```javascript
{
  rank: 自动递增,
  company: '',
  price: 0,
  workDays: 60,
  isOur: false
}
```

### 3. **删除投标单位** 🗑️

**操作方式**:
- 点击每行的"删除"按钮
- 弹出确认对话框
- 确认后删除该投标单位
- 自动重新排序（rank 重新计算）

### 4. **标记为我方** 🏷️

**操作方式**:
- 点击"标记为我方"按钮
- 自动清除其他单位的我方标记
- 标记当前单位为我方
- 我方单位名称和报价高亮显示

**视觉效果**:
- 单位名称：紫色加粗（#7c3aed）
- 报价金额：红色加粗（#ef4444）
- 按钮文字：显示"我方"并禁用

### 5. **保存开标记录** 💾

**操作方式**:
- 点击"保存开标记录"按钮
- 验证所有单位信息是否完整
- 保存成功后触发更新事件

**验证规则**:
- 单位名称不能为空
- 报价金额必须大于0

## 🎨 界面布局

### 表格头部
```
所有投标单位报价                [+ 添加投标单位]
```

### 表格内容
```
┌────┬──────────────┬────────┬────────┬──────────────┐
│排名│ 投标单位      │报价金额│工期(天)│ 操作          │
├────┼──────────────┼────────┼────────┼──────────────┤
│ 1  │[输入框]      │[数字]  │[数字]  │[标记][删除]  │
│ 2  │[输入框]      │[数字]  │[数字]  │[标记][删除]  │
│ 3  │[输入框]★     │[数字]★ │[数字]  │[我方][删除]  │
└────┴──────────────┴────────┴────────┴──────────────┘
★ = 我方单位高亮显示
```

### 操作按钮
```
[✓ 保存开标记录]  [📥 下载开标记录表]
```

## 💻 代码实现

### 模板结构

```vue
<div class="bidders-table">
  <!-- 表头 -->
  <div class="table-header">
    <h4>所有投标单位报价</h4>
    <el-button @click="addBidder">添加投标单位</el-button>
  </div>

  <!-- 可编辑表格 -->
  <el-table :data="biddingInfo.record.allBidders">
    <!-- 排名 -->
    <el-table-column label="排名">
      <template #default="{ row }">
        <el-input-number v-model="row.rank" />
      </template>
    </el-table-column>

    <!-- 投标单位 -->
    <el-table-column label="投标单位">
      <template #default="{ row }">
        <el-input 
          v-model="row.company"
          :class="{ 'our-company-input': row.isOur }"
        />
      </template>
    </el-table-column>

    <!-- 报价金额 -->
    <el-table-column label="报价金额">
      <template #default="{ row }">
        <el-input-number 
          v-model="row.price"
          :class="{ 'our-price-input': row.isOur }"
        />
      </template>
    </el-table-column>

    <!-- 工期 -->
    <el-table-column label="工期(天)">
      <template #default="{ row }">
        <el-input-number v-model="row.workDays" />
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-button 
          @click="markAsOur($index)"
          :disabled="row.isOur"
        >
          {{ row.isOur ? '我方' : '标记为我方' }}
        </el-button>
        <el-button @click="removeBidder($index)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 操作按钮 -->
<div class="record-actions">
  <el-button type="success" @click="saveBiddingRecord">
    保存开标记录
  </el-button>
  <el-button type="primary" @click="downloadRecord">
    下载开标记录表
  </el-button>
</div>
```

### 核心方法

#### 1. 添加投标单位
```javascript
const addBidder = () => {
  const newRank = biddingInfo.value.record.allBidders.length + 1
  biddingInfo.value.record.allBidders.push({
    rank: newRank,
    company: '',
    price: 0,
    workDays: 60,
    isOur: false
  })
  ElMessage.success('已添加投标单位，请填写信息')
}
```

#### 2. 删除投标单位
```javascript
const removeBidder = (index) => {
  ElMessageBox.confirm('确定要删除这个投标单位吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    biddingInfo.value.record.allBidders.splice(index, 1)
    // 重新排序
    biddingInfo.value.record.allBidders.forEach((bidder, idx) => {
      bidder.rank = idx + 1
    })
    ElMessage.success('删除成功')
  })
}
```

#### 3. 标记为我方
```javascript
const markAsOur = (index) => {
  // 先清除所有的我方标记
  biddingInfo.value.record.allBidders.forEach(bidder => {
    bidder.isOur = false
  })
  // 标记当前为我方
  biddingInfo.value.record.allBidders[index].isOur = true
  ElMessage.success('已标记为我方')
}
```

#### 4. 保存开标记录
```javascript
const saveBiddingRecord = () => {
  // 验证数据
  const hasEmpty = biddingInfo.value.record.allBidders.some(
    b => !b.company || b.price <= 0
  )
  
  if (hasEmpty) {
    ElMessage.warning('请完整填写所有投标单位信息')
    return
  }
  
  ElMessage.success('开标记录已保存')
  emit('update')
}
```

## 🎨 样式实现

### 表头样式
```scss
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
```

### 我方单位高亮
```scss
// 单位名称高亮
:deep(.our-company-input) {
  .el-input__inner {
    color: #7c3aed;  // 紫色
    font-weight: 600;
  }
}

// 报价金额高亮
:deep(.our-price-input) {
  input {
    color: #ef4444;  // 红色
    font-weight: 600;
  }
}
```

### 数字输入框
```scss
:deep(.el-input-number) {
  width: 100%;  // 填满单元格
}
```

## 🎯 使用场景

### 场景 1: 录入开标结果
开标会议结束后，需要录入所有投标单位的报价信息。

**操作步骤**:
1. 点击"添加投标单位"按钮8次（假设8家单位）
2. 依次填写每家单位的名称、报价、工期
3. 找到我方单位，点击"标记为我方"
4. 点击"保存开标记录"

### 场景 2: 修正错误信息
发现某家单位的报价录入错误。

**操作步骤**:
1. 找到对应的单位行
2. 修改报价金额
3. 点击"保存开标记录"

### 场景 3: 删除无效单位
某家单位临时弃标，需要删除。

**操作步骤**:
1. 找到对应的单位行
2. 点击"删除"按钮
3. 确认删除
4. 系统自动重新排序
5. 点击"保存开标记录"

### 场景 4: 调整排名
根据最终评分调整排名顺序。

**操作步骤**:
1. 修改各单位的排名数字
2. 点击"保存开标记录"

## ⚠️ 注意事项

### 1. 数据验证
保存时会验证：
- 单位名称不能为空
- 报价金额必须大于0

### 2. 自动排序
删除单位后会自动重新排序，确保排名连续。

### 3. 唯一我方
同时只能有一个单位被标记为"我方"，标记新的会自动清除旧的。

### 4. 报价格式
报价金额支持两位小数，步长为1000元。

## 🚀 后续优化建议

### 1. 批量导入
支持从 Excel 批量导入投标单位信息：

```vue
<el-upload
  accept=".xlsx,.xls"
  :on-change="importBidders"
>
  <el-button>批量导入</el-button>
</el-upload>
```

### 2. 自动排序
根据报价金额自动排序：

```javascript
const autoSort = () => {
  biddingInfo.value.record.allBidders.sort((a, b) => a.price - b.price)
  biddingInfo.value.record.allBidders.forEach((bidder, idx) => {
    bidder.rank = idx + 1
  })
}
```

### 3. 数据导出
导出为 Excel 格式：

```javascript
const exportToExcel = () => {
  // 使用 xlsx 库导出
  const data = biddingInfo.value.record.allBidders.map(b => ({
    '排名': b.rank,
    '投标单位': b.company,
    '报价金额': b.price,
    '工期': b.workDays
  }))
  // ... 导出逻辑
}
```

### 4. 历史对比
对比上次开标记录：

```javascript
const compareWithHistory = () => {
  // 显示与历史记录的差异
}
```

### 5. 价格区间验证
验证报价是否在合理区间：

```javascript
const validatePrice = (price) => {
  const controlPrice = biddingInfo.value.record.controlPrice
  if (price > controlPrice) {
    ElMessage.warning('报价超过控制价')
  }
}
```

## 📸 效果对比

### 修改前
```
所有投标单位报价

排名 | 投标单位 | 报价金额 | 工期
-----|----------|----------|------
  1  | XX公司   | ¥2,650,000 | 55
  2  | XX公司   | ¥2,750,000 | 60
  3  | 我方     | ¥2,850,000 | 60  ← 只读显示
```

### 修改后
```
所有投标单位报价              [+ 添加投标单位]

排名 | 投标单位 | 报价金额 | 工期 | 操作
-----|----------|----------|------|-------------
 [1] | [输入框] | [数字]   | [60] | [标记][删除]
 [2] | [输入框] | [数字]   | [60] | [标记][删除]
 [3] | [输入框]★| [数字]★  | [60] | [我方][删除]  ← 可编辑

[✓ 保存开标记录]  [📥 下载开标记录表]
```

## 🔄 按钮变更

### 删除的按钮
- ❌ "查看详细记录"

### 新增的按钮
- ✅ "添加投标单位"
- ✅ "保存开标记录"
- ✅ "标记为我方"
- ✅ "删除"（每行）

---

**版本**: v1.5.0  
**更新时间**: 2024-12-08  
**功能状态**: ✅ 已实现  
**适用模块**: BiddingInfo.vue
