# EpSelect 下拉选择

基于 el-select 封装，支持接口获取选项、自定义 label 等功能。

## 基本用法

```vue
<template>
  <EpSelect v-model="value" :options="options" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
]
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| v-model | 绑定值 ^el^ | `string \| number \| array` | - |
| options | 选项列表 ^el^ | `array` | `[]` |
| api | 选项接口地址 | `string \| (reqData) => Promise` | - |
| method | 请求方法 | `string` | `'post'` |
| reqData | 请求体数据 | `object` | `{}` |
| reqParams | URL 参数 | `object` | `{}` |
| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
| reqAfter | 响应后处理 | `(res) => options` | - |
| labelKey | label 字段名 | `string` | `'label'` |
| valueKey | value 字段名 | `string` | `'value'` |
| formatLabel | 自定义 label 格式化 | `(item) => string` | - |
| disabledOption | 禁用选项判断 | `(item) => boolean` | - |
| lazy | 延迟加载（api模式） | `boolean` | `false` |
| codeInLabel | 下拉label 中显示 code ,当为boolean默认是valueKey| `boolean \| string` | - |
| clearable | 是否可清空 ^el^ | `boolean` | `true` |

> ^el^ 表示继承自 [el-select](https://element-plus.org/zh-CN/component/select.html#select-attributes) 的属性

## 在 Form 中使用

```tsx
const formItemList = [
  {
    prop: 'status',
    label: '状态',
    type: 'EpSelect',
    props: {
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
]
```

## 接口获取选项

```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    api: '/test',
    valueKey: 'code',
    labelKey: 'name',
  },
}
```

## 远程搜索
```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    api: '/test',
    valueKey: 'code',
    labelKey: 'name',
    remote: true,
    filterable: true,
  },
}

```

## 带描述
- 适用于有code，但配置为remote/lazy，导致没有name的情况
```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    api: '/test',
    valueKey: 'code',
    labelKey: 'name',
    lazy: true,
    desc: '描述信息'
  },
}
```

## 自定义 label 格式

```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    api: '/test',
    valueKey: 'code',
    labelKey: 'name',
    formatLabel: (item) => `${item.name} (${item.code})`,
  },
}
```

## 监听变化

```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    options: [],
  },
  onChange: (value, item) => {
    // value: 选中的值
    // item: 选中的选项对象
    formData.testName = item?.name
  },
}
```

## codeInLabel 模式

下拉同时显示 code 和 label：

```tsx
{
  prop: 'testCode',
  label: '测试',
  type: 'EpSelect',
  props: {
    api: '/test',
    valueKey: 'code',
    labelKey: 'name',
    codeInLabel: true, // 显示为 "name code"
    // codeInLabel: 'testCode', // 显示为 "name testCode字段值"
  },
}
```

## 常用场景

```tsx
// 公司 - 简单接口选择
{
  prop: 'companyCode',
  label: '公司',
  type: 'EpSelect',
  props: {
    api: '/api-pms-order/api/common/queryAllCompany',
    method: 'post',
    labelKey: 'name',
    valueKey: 'code',
  },
}

// 币种 - 简单接口选择
{
  prop: 'currencyCode',
  label: '币种',
  type: 'EpSelect',
  props: {
    api: '/api-finance-base/api/finance/base/currency/queryList',
    method: 'post',
    labelKey: 'name',
    valueKey: 'code',
  },
}

// 账套 - 简单接口选择
{
  prop: 'accountSetCode',
  label: '账套',
  type: 'EpSelect',
  props: {
    api: '/api-globalization/api/accountSet/queryLatestVerAccountSet',
    labelKey: 'accountSetName',
    valueKey: 'accountSetCode',
  },
}

// 仓库 - 远程搜索（数据量大，输入关键词搜索）
{
  prop: 'warehouseCode',
  label: '仓库',
  type: 'EpSelect',
  props: {
    api: '/api-wms/api/warehouse/search/list',
    method: 'post',
    remote: true,
    filterable: true,
    reqData: {
      statusList: [1],
      name: '$query',
      pageNum: 1,
      pageSize: 20,
    },
    labelKey: 'name',
    valueKey: 'code',
  },
}

// 人员 - 远程搜索 + 自定义格式（同时展示编码和名称）
{
  prop: 'personAccount',
  label: '人员',
  type: 'EpSelect',
  props: {
    api: '/api-u/api/saas/user/personInfoManage/queryPersonInfoPage',
    method: 'post',
    remote: true,
    filterable: true,
    reqData: {
      page: 1,
      pageSize: 20,
      searchText: '$query',
    },
    labelKey: 'name',
    valueKey: 'account',
    formatLabel: (item) => `${item.account || ''} ${item.name || ''}`,
  },
}
```

> `reqData` 中 `$query` 为占位符，组件会自动替换为用户输入的搜索关键词。