82 lines
3.2 KiB
Markdown
82 lines
3.2 KiB
Markdown
# 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 路径
|