9.10 数据录入组件
概述
数据录入组件覆盖表单场景：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 路径