# CSelect 下拉选择组件

## 功能说明

CSelect 是一个下拉选择组件，用于在表单中提供选项选择功能。组件支持两种选择模式：下拉选择模式和跳转页面选择模式。

## 引用方式

```js
import { CSelect } from '@components/forms/select';
```

## 组件参数

- `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用
- `options` (Array，必填)：选择菜单选项数组，每个选项应包含 name 和 value/id 属性
- `placeholder` (String，可选)：输入框占位提示文本
- `readOnly` (Boolean，可选)：只读模式，默认为 false
- `selectByPage` (String，可选)：选择菜单模式
  - 不设置：下拉选择模式
  - `on`：跳转页面选择模式
- `onOpenSelectorPage` (Function，可选)：页面跳转模式下，发起选择的回调函数

## 使用示例

### 基础用法（下拉选择模式）

```html
<template>
  <CForm :form="form">
    <CFormItem name="gender" label="性别">
      <CSelect :options="genderOptions" placeholder="请选择性别" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CSelect } from '@components/forms/select';

export default {
  components: {
    CForm,
    CFormItem,
    CSelect
  },
  data() {
    return {
      form: {
        gender: ''
      },
      genderOptions: [
        { name: '男', value: 'male' },
        { name: '女', value: 'female' }
      ]
    };
  }
};
</script>
```

### 跳转页面选择模式

```html
<template>
  <CForm :form="form">
    <CFormItem name="city" label="城市">
      <CSelect 
        selectByPage="on" 
        :onOpenSelectorPage="handleOpenCitySelector" 
        placeholder="请选择城市" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CSelect } from '@components/forms/select';

export default {
  components: {
    CForm,
    CFormItem,
    CSelect
  },
  data() {
    return {
      form: {
        city: ''
      }
    };
  },
  methods: {
    handleOpenCitySelector() {
      // 跳转到城市选择页面
      this.$router.push({
        path: '/pages/city-selector/index',
        query: {
          callback: 'onCitySelected'
        }
      });
      
      // 在全局注册回调函数，用于接收选择结果
      this.$app.onCitySelected = (city) => {
        this.form.city = city.value;
      };
    }
  }
};
</script>
```

### 只读模式

```html
<CFormItem name="gender" label="性别">
  <CSelect 
    :options="genderOptions" 
    placeholder="请选择性别" 
    :readOnly="true" 
  />
</CFormItem>
```

## 注意事项

1. 组件支持两种选项数据格式：
   - 使用 `value` 作为选项值：`{ name: '选项名', value: '选项值' }`
   - 使用 `id` 作为选项值：`{ name: '选项名', id: '选项值' }`
2. 当选项数量较多时，建议使用跳转页面选择模式（`selectByPage="on"`）
3. 在跳转页面选择模式下，需要提供 `onOpenSelectorPage` 回调函数来处理页面跳转逻辑
4. 注意：URL 跳转模式已废弃，不再支持直接传入 URL 字符串作为 `selectByPage` 的值
5. 在只读模式下，下拉箭头图标将被隐藏，且无法触发选择操作