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）

// ① 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 前端文件组件）。

行政区划

ChinaArea/Region 消费 city 模块级联接口，三级选择后取编码组合——地址类字段配套（gin_user 的 province_code/city_code/district_code 即此形态）。

使用规约

业务页面不裸写 el-upload/手写上传逻辑，一律公共组件
组件 props 与后端字段语义对齐（modelValue 映射 dto json 名）
页面私有的复合控件放 views 下 components/，不进全局

2.6 KiB Raw Blame History Unescape Escape