# 开标信息编辑功能说明

## 📝 功能概述

开标会议信息现已支持完整的编辑功能，用户可以自定义开标时间、地点、参会人员等信息。

## ✨ 新增功能

### 1. **编辑开标时间** 📅

**日期选择**:
- 使用日期选择器选择开标日期
- 格式：YYYY-MM-DD
- 宽度：200px

**时间选择**:
- 使用时间选择器选择开标时间
- 格式：HH:mm:ss
- 宽度：150px

### 2. **编辑开标地点** 📍

**可编辑字段**:
- **地址**: 文本输入框（300px）
- **联系电话**: 文本输入框（200px）
- **备注**: 多行文本框（2行，300px）

**删除的功能**:
- ❌ 查看地图按钮
- ❌ 一键导航按钮

### 3. **编辑参会人员** 👥

**编辑功能**:
- 每个参会人员可编辑姓名和电话
- 姓名输入框：120px
- 电话输入框：150px

**删除功能**:
- 每个参会人员旁边有"删除"按钮
- 点击删除会弹出确认对话框
- 确认后删除该参会人员

**添加功能**:
- 底部有"添加参会人员"按钮
- 点击后添加新的空白参会人员
- 默认角色为"参会人员"

## 🎨 界面布局

### 开标时间区域
```
📅 开标时间
├─ 日期: [日期选择器: 2024-12-15]
├─ 时间: [时间选择器: 09:30:00]
├─ 倒计时: [还剩6天2小时15分钟]
└─ 状态: [🟡 待开标]
```

### 开标地点区域
```
📍 开标地点
├─ 地址: [输入框: XX市公共资源交易中心3楼开标室A]
├─ 联系电话: [输入框: 0791-88888888]
└─ 备注: [文本框: 需携带法人授权委托书原件及身份证]
```

### 参会人员区域
```
👥 参会人员
├─ 投标代表: [姓名: 张三] [电话: 13800138000] [删除]
├─ 技术负责人: [姓名: 李四] [电话: 13900139000] [删除]
├─ 备选人员: [姓名: 王五] [电话: 13700137000] [删除]
└─ [+ 添加参会人员]
```

## 💻 代码实现

### 模板结构

```vue
<!-- 开标时间 -->
<div class="info-item">
  <span class="label">日期:</span>
  <el-date-picker
    v-model="biddingInfo.dateValue"
    type="date"
    format="YYYY-MM-DD"
  />
</div>

<div class="info-item">
  <span class="label">时间:</span>
  <el-time-picker
    v-model="biddingInfo.timeValue"
    format="HH:mm:ss"
  />
</div>

<!-- 开标地点 -->
<div class="info-item">
  <span class="label">地址:</span>
  <el-input
    v-model="biddingInfo.location.address"
    placeholder="请输入开标地址"
  />
</div>

<!-- 参会人员 -->
<div 
  v-for="(person, index) in biddingInfo.attendees" 
  :key="index"
  class="info-item editable-person"
>
  <span class="label">{{ person.role }}:</span>
  <div class="person-inputs">
    <el-input v-model="person.name" placeholder="姓名" />
    <el-input v-model="person.phone" placeholder="电话" />
    <el-button @click="removePerson(index)">删除</el-button>
  </div>
</div>

<el-button @click="addPerson">
  添加参会人员
</el-button>
```

### 数据结构

```javascript
const biddingInfo = ref({
  dateValue: '2024-12-15',  // 日期选择器绑定值
  timeValue: '09:30:00',    // 时间选择器绑定值
  countdown: '还剩6天2小时15分钟',
  statusText: '待开标',
  
  location: {
    address: 'XX市公共资源交易中心3楼开标室A',
    phone: '0791-88888888',
    note: '需携带法人授权委托书原件及身份证'
  },
  
  attendees: [
    { role: '投标代表', name: '张三', phone: '13800138000' },
    { role: '技术负责人', name: '李四', phone: '13900139000' },
    { role: '备选人员', name: '王五', phone: '13700137000' }
  ]
})
```

### 核心方法

#### 1. 添加参会人员
```javascript
const addPerson = () => {
  biddingInfo.value.attendees.push({
    role: '参会人员',
    name: '',
    phone: ''
  })
  ElMessage.success('已添加参会人员，请填写信息')
}
```

#### 2. 删除参会人员
```javascript
const removePerson = (index) => {
  ElMessageBox.confirm('确定要删除这个参会人员吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    biddingInfo.value.attendees.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
```

## 🎨 样式实现

```scss
.info-item {
  &.editable-person {
    .person-inputs {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }
  }
}
```

## 🔄 已删除的功能

### 地图导航功能
```javascript
// ❌ 已删除
const viewMap = () => {
  ElMessage.info('打开地图查看开标地点')
}

const navigate = () => {
  ElMessage.info('启动导航到开标地点')
}
```

**删除原因**:
- 简化界面，减少不必要的功能
- 用户可以直接复制地址使用第三方地图应用

## 📊 组件导入变更

### 新增导入
```javascript
import { ElMessageBox } from 'element-plus'
import { Delete, Plus } from '@element-plus/icons-vue'
```

### 删除导入
```javascript
// ❌ 已删除
import { Location, Position } from '@element-plus/icons-vue'
```

## 🎯 使用场景

### 场景 1: 修改开标时间
项目经理收到通知，开标时间延期。

**操作步骤**:
1. 点击日期选择器，选择新的日期
2. 点击时间选择器，选择新的时间
3. 系统自动更新倒计时

### 场景 2: 更新开标地点
开标地点临时变更。

**操作步骤**:
1. 在地址输入框中修改新地址
2. 更新联系电话
3. 在备注中添加变更说明

### 场景 3: 调整参会人员
技术负责人临时有事，需要更换。

**操作步骤**:
1. 找到"技术负责人"行
2. 修改姓名和电话
3. 或点击"删除"按钮移除
4. 点击"添加参会人员"添加新人员

### 场景 4: 增加参会人员
需要增加一名备用人员。

**操作步骤**:
1. 点击"添加参会人员"按钮
2. 填写新人员的姓名
3. 填写新人员的电话

## ⚠️ 注意事项

### 1. 数据验证
建议添加数据验证：

```javascript
const addPerson = () => {
  // 检查是否有未填写完整的人员
  const hasEmpty = biddingInfo.value.attendees.some(
    p => !p.name || !p.phone
  )
  
  if (hasEmpty) {
    ElMessage.warning('请先完成当前人员信息的填写')
    return
  }
  
  biddingInfo.value.attendees.push({
    role: '参会人员',
    name: '',
    phone: ''
  })
}
```

### 2. 电话号码格式
建议添加电话号码格式验证：

```javascript
const validatePhone = (phone) => {
  const phoneReg = /^1[3-9]\d{9}$/
  return phoneReg.test(phone)
}
```

### 3. 最少参会人员
建议至少保留一名参会人员：

```javascript
const removePerson = (index) => {
  if (biddingInfo.value.attendees.length <= 1) {
    ElMessage.warning('至少需要保留一名参会人员')
    return
  }
  // ... 删除逻辑
}
```

### 4. 保存提示
修改后建议添加保存按钮：

```vue
<el-button type="primary" @click="saveBiddingInfo">
  保存修改
</el-button>
```

## 🚀 后续优化建议

### 1. 角色选择
为参会人员添加角色下拉选择：

```vue
<el-select v-model="person.role" placeholder="选择角色">
  <el-option label="投标代表" value="投标代表" />
  <el-option label="技术负责人" value="技术负责人" />
  <el-option label="备选人员" value="备选人员" />
  <el-option label="其他" value="其他" />
</el-select>
```

### 2. 批量导入
支持从 Excel 批量导入参会人员：

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

### 3. 历史记录
记录开标信息的修改历史：

```javascript
const history = ref([])

const saveBiddingInfo = () => {
  history.value.push({
    time: new Date(),
    data: JSON.parse(JSON.stringify(biddingInfo.value))
  })
}
```

### 4. 自动提醒
根据开标时间自动设置提醒：

```javascript
watch(() => biddingInfo.value.dateValue, (newDate) => {
  // 自动设置提前1天、3小时、30分钟的提醒
  setReminders(newDate)
})
```

## 📸 效果对比

### 修改前
```
📍 开标地点
地址: XX市公共资源交易中心3楼开标室A
联系电话: 0791-88888888
导航: [查看地图] [一键导航]  ← 删除
备注: 需携带法人授权委托书原件及身份证

👥 参会人员
投标代表: 张三 (13800138000)  ← 不可编辑
技术负责人: 李四 (13900139000)
备选人员: 王五 (13700137000)
```

### 修改后
```
📍 开标地点
地址: [输入框]  ← 可编辑
联系电话: [输入框]
备注: [文本框]

👥 参会人员
投标代表: [姓名] [电话] [删除]  ← 可编辑、可删除
技术负责人: [姓名] [电话] [删除]
备选人员: [姓名] [电话] [删除]
[+ 添加参会人员]  ← 可添加
```

---

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