# 9.10 数据录入组件

:::tip 概述
表单录入类公共组件：Select/BasicSelect（异步数据源下拉）、TableSelect（表格选择器）、Upload（上传）、Editor（富文本）、Cropper（裁剪）、ChinaArea/Region（行政区划）、Password、numberInput、priceInput、importFile（导入）。
:::

## 组件清单

| 组件 | 职责 |
|---|---|
| Select（components/Select） | 下拉封装：支持 `options` 直配与 `request` 异步取数（可 cache/cacheKey 缓存） |
| TableSelect | 表格选择器（选人/选部门等弹出表格单/多选） |
| Upload | 文件/图片上传（对接两段式契约） |
| Editor | 富文本（TinyMCE / vue-quill 双引擎） |
| Cropper | 图片裁剪（配合 Upload 完成头像类流程） |
| ChinaArea / Region | 省市区级联（对接 city 模块级联数据） |
| Password | 密码输入 |
| numberInput / priceInput | 数字/金额输入（精度与范围控制） |
| importFile | 导入文件交互（example 页以异步组件方式引用） |

## Select 的两种数据来源（components/Select/src/props.ts）

```typescript
// ① options 直配 —— example 查询表单的实际用法（querySchemas.ts 节选）
{
  field: 'status',
  component: 'Select',
  label: '案例状态',
  componentProps: {
    placeholder: '请输入案例状态',
    clearable: true,
    options: [
      { label: '在用', value: 1 },
      { label: '停用', value: 2 },
    ],
  },
}

// ② request 异步取数 —— 组件内置 request 函数 prop（Promise<Option[]>），支持 cache/cacheKey
```

字典类选项经 request 函数调 `/api/dict/item/getDictItemList/{code}` 获取（与后端 SerializeMaps 同编码），不硬编码业务枚举；example 的查询配置为演示简化直接内联了 options。

## 上传与两段式契约

选择文件 → 调上传接口拿 temp 结果（fileUrl/filePath）→ 表单字段持有 → 保存记录时后端转正。前端不关心物理路径（见 [7.5 前端文件组件](/zh/tools/file-components.html)）。

## 行政区划

ChinaArea/Region 消费 city 模块级联接口，三级选择后取编码组合——地址类字段配套（gin_user 的 province_code/city_code/district_code 即此形态）。

## 使用规约

- 业务页面不裸写 el-upload/手写上传逻辑，一律公共组件
- 组件 props 与后端字段语义对齐（modelValue 映射 dto json 名）
- 页面私有的复合控件放 views 下 components/，不进全局

## 相关

- [5.11 字典模块](/zh/core/dict.html)
- [9.9 表格与页面组件](/zh/frontend/table-components.html)