# 9.10 数据录入组件

:::tip 概述
数据录入组件覆盖表单场景：Form（querySchemas 驱动）、Select（下拉）、ChinaArea/Region（级联区划）、Cropper（裁剪）、Password（密码强度）、numberInput/priceInput（数字/价格）等。
:::

## 录入组件清单

| 组件 | 职责 | 对接 |
|------|------|------|
| Form | 表单封装（FormSchema 配置驱动） | querySchemas.ts / edit.vue |
| Select | 下拉封装 | 字典驱动 options |
| ChinaArea | 中国省市区级联 | 对接 /api/area 接口（级联懒加载） |
| Region | 行政区划组件 | 同上 |
| Cropper / vue-cropper | 图片裁剪 | 头像上传（裁剪→上传→转正） |
| Password | 密码输入（强度显示） | 登录/改密/重置密码 |
| numberInput | 数字输入 | 金额外的数字字段 |
| priceInput | 价格输入 | 金额字段（精度处理） |
| TableSelect | 表格选择器 | 关联数据选择（如选用户/选分类） |
| Authority | 权限包装 | 权限控制容器 |
| CheckToken | 令牌检查 | 登录态相关 |

## FormSchema 驱动（querySchemas 真实模式）

```ts
export const schemas: FormSchema[] = [
  {
    field: 'name',          // 字段名 ↔ PageReq json 字段（驼峰）
    component: 'Input',     // 字符串 → 后端 LikeFields
    label: '案例名称',
    componentProps: { placeholder: '请输入案例名称', clearable: true },
  },
  {
    field: 'type',
    component: 'Select',    // 选择 → 后端 EqFields
    label: '案例类型',
    componentProps: {
      placeholder: '请选择案例类型',
      clearable: true,
      options: [ /* 字典驱动时改为 getDictItemList 结果 */ ],
    },
  },
];
```

组件类型与后端筛选的对应（三件套）：Input → LikeFields；Select/InputNumber → EqFields。

## 区划级联（ChinaArea/Region）

```text
数据源：GET /api/area/getParent（省份）→ /api/city/getCityList/:parentCode（级联懒加载）
大表纪律：级联按 parent_code 拉单级子集，勿全量拉取
存储：user 表四级编码列（province/city/district/street_code）
提交：名称串或编码数组（后端 ResolveCityCodes/ResolveCityNames 互转）
```

## 图片裁剪（头像场景）

```text
选择图片 → Cropper 裁剪 → 裁剪结果 blob → POST /api/upload/uploadFile（type=image）
→ 返回 temp URL → 表单 avatar 字段 → 保存资料时后端转正
```

## edit.vue 表单模式

```text
新增/编辑共用 edit.vue：
  新增：空表单 → exampleAdd(data)
  编辑：Detail 回显 → 全量表单 → exampleUpdate(data)（全量 PUT 语义）

字段对齐：表单 model ↔ AddReq/UpdateReq 结构体（驼峰 json）
校验：required 对齐后端 v 标签（前端提示 + 后端 gvalid 双层）
```

## 开发规约

+ 筛选表单用 querySchemas 配置（勿手写搜索区）
+ 下拉选项优先字典驱动（getDictItemList）；静态 options 仅示例/特殊场景
+ 编辑表单全量提交（基座 Update 是全量表单语义；零值字段也要带）
+ 图片/文件字段持 URL（上传组件产出），后端 FileFields 转正
+ 敏感字段（密码）用 Password 组件；提交前确认后端 bcrypt 路径