# 更新日志

## v1.0.0 (2024-12-04)

### 新增功能
- ✨ 创建通用的弹窗选择组件 `SelectTableList`
- 🎯 支持单选和多选模式
- 🏷️ 可配置显示字段和值字段
- 🔄 支持字段映射，自动填充表单数据
- 🎨 支持禁用和只读状态
- 🧹 支持清空功能
- 📡 完整的事件回调系统
- 📚 完整的 TypeScript 类型定义
- 📖 详细的使用文档和示例

### 文件结构
```
src/components/SelectTableList/
├── index.vue          # 主组件文件
├── index.ts           # 导出文件
├── types.ts           # 类型定义
├── example.vue        # 使用示例
├── README.md          # 使用文档
└── CHANGELOG.md       # 更新日志
```

### 主要特性

#### 1. 基础功能
- 基于 Element Plus 输入框和弹窗
- 集成 TableList 组件的所有功能
- 支持搜索、分页、排序等

#### 2. 选择模式
- **单选模式**: 选择单个数据项
- **多选模式**: 支持选择多个数据项

#### 3. 字段映射
- 自动将选中数据的字段映射到表单字段
- 支持自定义映射关系
- 多选模式下只取第一行的映射值

#### 4. 状态控制
- **正常状态**: 可正常选择和清空
- **只读状态**: 显示值但不可操作
- **禁用状态**: 完全不可操作

#### 5. 事件系统
- `change`: 选择变化时触发
- `clear`: 清空时触发
- `selection-confirm`: 确认选择时触发
- 完整的数据回传

### 使用示例

#### 基础用法
```vue
<SelectTableList
  v-model="value"
  v-model:displayValue="displayValue"
  :table-config="tableConfig"
  placeholder="请选择数据"
/>
```

#### 高级用法
```vue
<SelectTableList
  v-model="workCenter"
  v-model:displayValue="workCenterLabel"
  :table-config="tableConfig"
  :multiple="false"
  :field-mapping="{
    workCenterCode: 'code',
    workCenterName: 'name'
  }"
  @change="handleChange"
/>
```

### 集成到现有项目

已成功将 `editForm.vue` 中的工作中心选择功能迁移到新的通用组件：

1. **移除原有代码**:
   - 删除了手动实现的弹窗逻辑
   - 删除了复杂的选择和确认方法
   - 简化了事件处理

2. **使用新组件**:
   - 用 `SelectTableList` 替换原有的输入框和弹窗
   - 保持了所有原有功能
   - 代码更加简洁和可维护

### 技术栈
- Vue 3 Composition API
- TypeScript
- Element Plus
- TableList 组件

### 兼容性
- 支持所有现代浏览器
- 兼容 Vue 3 项目
- 需要 Element Plus 和 TableList 组件依赖