# SelectTableList 通用弹窗选择组件

一个基于 Element Plus 和 TableList 的通用弹窗选择组件，支持单选和多选模式。

## 功能特性

- 🎯 支持单选和多选模式
- 🏷️ 可配置显示字段和值字段
- 🔄 支持字段映射，自动填充表单数据
- 🎨 支持禁用和只读状态
- 🧹 支持清空功能
- 📡 完整的事件回调
- 🎭 基于 TableList 组件，继承所有表格功能

## 基础用法

```vue
<template>
  <SelectTableList
    v-model="selectedValue"
    v-model:displayValue="displayValue"
    :table-config="tableConfig"
    placeholder="请选择数据"
    @change="handleChange"
  />
</template>

<script setup>
import SelectTableList from '@/components/SelectTableList/index.vue'

const selectedValue = ref('')
const displayValue = ref('')

const tableConfig = {
  searchForm: {
    items: [
      {
        field: 'name',
        label: '名称',
        type: 'input',
        placeholder: '请输入名称'
      }
    ]
  },
  table: {
    columns: [
      { prop: 'name', label: '名称' },
      { prop: 'code', label: '编码' }
    ]
  },
  api: {
    getList: async (params) => {
      // 调用接口获取数据
      return await api.getData(params)
    }
  }
}

const handleChange = (data) => {
  console.log('选择变化:', data)
}
</script>
```

## 高级用法

### 多选模式

```vue
<SelectTableList
  v-model="selectedValues"
  v-model:displayValue="displayValue"
  :table-config="tableConfig"
  :multiple="true"
  label-key="name"
  value-key="id"
  placeholder="请选择多个数据"
/>
```

### 字段映射

```vue
<SelectTableList
  v-model="workCenter"
  v-model:displayValue="workCenterLabel"
  :table-config="tableConfig"
  :field-mapping="{
    workCenterCode: 'code',
    workCenterName: 'name'
  }"
  @change="handleWorkCenterChange"
/>
```

### 事件处理

```vue
<SelectTableList
  v-model="selectedValue"
  :table-config="tableConfig"
  @change="handleChange"
  @clear="handleClear"
  @selection-confirm="handleConfirm"
/>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 绑定的值 | any | - |
| displayValue | 显示的文本 | string | - |
| placeholder | 占位符文本 | string | '请选择' |
| title | 弹窗标题 | string | '选择数据' |
| width | 弹窗宽度 | string | '900px' |
| height | 弹窗高度 | string | '600px' |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| multiple | 是否多选 | boolean | false |
| labelKey | 显示字段名 | string | 'id' |
| valueKey | 值字段名 | string | 'id' |
| fieldMapping | 字段映射关系 | Record<string, string> | - |
| tableConfig | 表格配置 | TableListConfig | 必填 |

### Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| update:modelValue | 值变化时触发 | (value: any) |
| update:displayValue | 显示文本变化时触发 | (value: string) |
| change | 选择变化时触发 | (data: SelectionChangeData) |
| clear | 清空时触发 | (data: ClearData) |
| selection-confirm | 确认选择时触发 | (data: SelectionConfirmData) |

### Methods

| 方法名 | 说明 | 参数 |
|--------|------|------|
| openSelector | 打开选择器 | - |
| clearSelection | 清空选择 | - |

## 类型定义

### SelectionChangeData

```typescript
interface SelectionChangeData {
  selectedRows: any[]      // 选中的行数据
  selectedValues: any[]    // 选中的值
  selectedLabels: string[] // 选中的标签
  mode: 'single' | 'multiple' // 选择模式
}
```

### ClearData

```typescript
interface ClearData {
  field: string           // 字段名
  clearedFields: string[] // 被清空的字段列表
}
```

### SelectionConfirmData

```typescript
interface SelectionConfirmData {
  selectedRows: any[]           // 选中的行数据
  selectedValues: any[]         // 选中的值
  selectedLabels: string[]      // 选中的标签
  mappedFields?: Record<string, any> // 映射的字段值
  mode: 'single' | 'multiple'   // 选择模式
}
```

## 使用场景

1. **工作中心选择** - 在表单中选择工作中心，自动填充编码和名称
2. **用户选择** - 在分配任务时选择用户，支持多选
3. **产品选择** - 在订单中选择产品，自动填充产品信息
4. **部门选择** - 在审批流程中选择部门

## 注意事项

1. `tableConfig` 是必填属性，需要配置完整的表格信息
2. 字段映射只在单选模式下生效，多选模式只取第一行的映射值
3. 组件基于 TableList，支持 TableList 的所有功能
4. 在只读或禁用状态下，选择器不会响应点击事件