62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
# 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)
|