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 真实模式）

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）

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

图片裁剪（头像场景）

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

edit.vue 表单模式

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

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

开发规约

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

3.2 KiB Raw Permalink Blame History Unescape Escape