@52css/json-form

JsonForm json表单

开发中台大部分都是和表单交互，如何通过简单、通用配置得到易交互的表单呢？

如何通用？

目前市面上的UI框架很多，例如 element-plus、ant-design-vue、arco-design、tdesign，各自有相应的api，如何通用的？

所有的属性我们使用html标签已有特有属性，我们主要符合html标准，再各自统一就可以达到我们的目的。 映射太复杂，直接type是相应组件。例如 t-input-number 对应的 type 就是 input-number

如何简单？

我们目前常用有3个场景

• 新建表单
• 编辑表单
• 搜索（查询表单 + 表格展示）

以下表单元素fields 命名成 inputs

新建表单

• inputs (表单元素)
• request (请求)

编辑表单

• model (数据)
• inputs (表单元素)
• request (请求)

搜索

• inputs (表单元素)
• request (请求)
• columns (表格展示)

考虑兼容性

• 提交表单有默认值，可以inputField 增加 value 为默认值
• select 常见不单提交value，还有label 或 其他属性？可以inputField 增加 outputs
• inputField 定义成数组还是对象？对象只要不是“数字”是可以排序的，目前提交都不是数字，可以使用对象
• 如果提交的key不是原始类型，例如提交是 test.id , 可以对key兼容处理支持 test.id: field配置
• 如果必填，可以设置 label 后面加 *，也可以inputField 增加 required 属性
• 常用的input，可以设置 inputField 支持 string
• 常用是计算方式，可以修改成 getter 函数，对于 inputs 就是普通函数，如果数据是异步获取, 可以修改成异步函数
• 增加自定义slot，优先级高于定义类型

通过以上考虑，可以定义类型

export type CommonValue = string | number | boolean;

export interface CommonField {
  required?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  label?: string;
  outputs?: Record<string, any>;
}

export interface CommonOption {
  label: string;
  value: CommonValue;
}

export interface TextField extends CommonField {
  type: "text";
  placeholder?: string;
  maxlength?: number;
  clearable?: boolean;
  value?: CommonValue;
}

export interface CheckboxField extends CommonField {
  type: "checkbox";
  options: CommonOption[];
  value?: CommonValue[];
}

export type Inputs = Record<string, string | TextField | CheckboxField>;

export interface JsonFormProps {
  inputs: Inputs;
  request: Request;
  model?: Record<string, any>;
}

const inputs: Inputs = {
  input1: "普通输入框",
  input2: "支持必填*",
  input3: {
    type: "input",
    label: "通过type生成",
  },
  input4: {
    type: "input",
    label: "支持默认值",
    value: "默认值",
  },
  input5: {
    type: "input",
    label: "支持禁用",
    disabled: true,
  },
  input6: {
    type: "input",
    label: "禁用是同步函数",
    disabled: () => !!disabled.value,
  },
  input7: {
    type: "input",
    label: "禁用是异步函数",
    disabled: async () => !!disabled.value,
  },
  input8: '自定义插槽',
  "obj.input9": {
    type: "input",
    label: "支持对象属性",
  },
};

框架支持

• 支持tdesign、element-plus、ant-design-vue、acro-design
  • 支持tdesign
  • 支持element-plus
  • 支持ant-design-vue
  • 支持acro-design
• 支持组件动态注入
• 支持插入场景（页面、抽屉、弹窗）
• 支持表单形式（普通表单、步骤条、左边导航、头部导航）
  • 普通表单
  • 左边导航表单（每个表单提交）
  • 头部导航表单（一次性提交）
  • 步骤条表单（每次校验，可以分布提交，也可以一次性提交）
  • 普通列表（搜索 + 表格）
  • 多选列表（搜索 + 表格）
  • 单选列表（搜索 + 表格）
  • 树形列表（搜索 + 表格）

Prop支持

• 支持自定义slot
• 支持layout 布局, 可设置horizontal, vertical, inline
• 支持span分栏（全局和单个）
• 支持disabled禁用(全局和单个)
• 支持container控制插入元素
  • none 插入到页面
  • dialog 插入到弹窗
  • drawer 插入到抽屉

Inputs支持

• 支持attrValue.if, 控制显示隐藏
• 支持attrValue=字符串，转换成input对象
• 支持attrValue.label，带星号必填，其他转换成label
• 支持attrValue.*
  • 支持string
  • 支持function转换成getter function
  • 支持async function 转换成 响应式数据
• 支持attrValue.type=tabs，嵌套表单，支持错误校验
• 支持attrValue.on，支持事件绑定, 支持的(model: Model, ...args) => void 其他默认参数
  • onBlur
  • onChange
  • onClear
  • onClick
  • onCompositionend
  • onCompositionstart
  • onEnter
  • onFocus
  • onKeydown
  • onKeypress
  • onKeyup
  • onMouseenter
  • onMouseleave
  • onPaste
  • onValidate
  • onWheel
• 支持attrValue.outputs控制输出转换
  • 支持outputValue是string，例如配置 label, 即输出选中项的label值到model的outputs的key上
  • 支持outputValue是function，例如配置 (_m: Model, _val: string, content:any) => content.option.label, 即输出选中项的content.option.label值到model的outputs的key上
• 支持attrValue.type=title实现标题
• 支持attrValue.type=steps，步骤表单
• 支持attrValue.request
  • 新建表单 request, 提交调用request, 成功提示操作成功
  • 编辑表单 request + model, 渲染页面，调用数据接口设置model，提交调用request, 成功提示操作成果
  • 列表，初始化调用request + columns，渲染表格
• 支持attrValue.type=card 分组表单

Form表单映射

属性	tdesign	element-plus	ant-design	acro-design
绑定数据(model)	data	model	model	model
对齐方式(layout-horizontal)	label-align(right) + layout(vertical)	label-position(right) + inline(false)	layout(horizontal)	layout(horizontal)
对齐方式(layout-vertical)	label-align(top) + layout(vertical)	label-position(top) + inline(false)	layout(vertical)	layout(vertical)
对齐方式(layout-inline)	label-align(right) + layout(inline)	label-position(right) + inline(true)	layout(inline)	layout(inline)

FormItem表单映射

属性	tdesign	element-plus	ant-design	acro-design
绑定属性	data	prop	name	field

Input表单映射

属性	tdesign	element-plus	ant-design	acro-design
prefix属性	label	prefix	prefix	prefix

Tabs表单映射

属性	tdesign	element-plus	ant-design	acro-design
placement属性	placement	tab-position	-	-