使用

文档链接： x-render.gitee.io/form-render

Schema协议

Data Entry

Input

input: {
    type: "string",
    max: 20,
    min: 1,
    pattern: "//",
    placeholder: "请输入"
}

Textarea

"textarea": {
    "title": "简单文本编辑框",
    "type": "string",
    "format": "textarea"
},

Select

单选

select: {
  title: '业务类型',
  type: 'string',
  enum: ['1', '2'],
  enumNames: ['聚合服务商', 'SAAS服务商'],
  widget: 'select',
}

多选

multiSelect: {
  title: '业务类型',
  type: 'array',
  enum: ['1', '2'],
  enumNames: ['聚合服务商', 'SAAS服务商'],
  widget: 'multiSelect',
  items: {
      type: "string"
  }
}

Date

日期选择

"date": {
    "title": "日期选择",
    "type": "string",
    "format": "date"
},

日期时间选择

"dateTime": {
    "title": "日期时间选择",
    "type": "string",
    "format": "dateTime"
},

时间选择

"time": {
    "title": "时间选择",
    "type": "string",
    "format": "time"
},

日期范围

"dateRange": {
    "title": "日期范围",
    "type": "range",
    "format": "date",
    "placeholder": [
      "开始时间",
      "结束时间"
    ]
},

时间范围

"timeRange": {
    "title": "时间范围",
    "type": "range",
    "format": "time"
},

日期时间范围

"dateTimeRange": {
    "title": "日期范围",
    "type": "range",
    "format": "dateTime",
    "placeholder": [
      "开始时间",
      "结束时间"
    ]
},

Number

"number": {
    "title": "数字输入框",
    "description": "1 - 1000",
    "type": "number",
    "min": 1,
    "max": 1000
},

Rate

"rate": {
    "title": "评价",
    "type": "number",
    "widget": "rate"
}

CheckBox

单个

"checkbox": {
    "title": "是否通过",
    "type": "boolean"
},

一组

"boxes": {
    "title": "多选",
    "description": "checkbox",
    "type": "array",
    "items": {
      "type": "string"
    },
    "enum": [
      "A",
      "B",
      "C",
      "D"
    ],
    "enumNames": [
      "杭州",
      "武汉",
      "湖州",
      "贵阳"
    ],
    "widget": "checkboxes"
},

Radio

"radio": {
    "title": "单选",
    "type": "string",
    "enum": [
      "a",
      "b",
      "c"
    ],
    "enumNames": [
      "早",
      "中",
      "晚"
    ],
    "widget": "radio"
},

Switch

"switch": {
    "title": "开关控制",
    "type": "boolean",
    "widget": "switch"
}

List

列表的展示对于简单需求占位太多，复杂需求定制不够一直是痛点。所以我们给出了四种展示，充分满足从极简到复杂的所有需求

1. 默认展示使用 widget: 'list0'，卡片类型，用于展示数量不太多但结构复杂的 list

const schema = {
  type: 'object',
  properties: {
    listName2: {
      title: '对象数组',
      description: '对象数组嵌套功能',
      type: 'array',
      // widget: 'list0',
      items: {
        type: 'object',
        properties: {
          input1: {
            title: '简单输入框',
            type: 'string',
            required: true,
          },
          select1: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
          },
          obj: {
            title: '对象',
            type: 'object',
            properties: {
              input1: {
                title: '简单输入框',
                type: 'string',
                required: true,
              },
              select1: {
                title: '单选',
                type: 'string',
                enum: ['a', 'b', 'c'],
                enumNames: ['早', '中', '晚'],
              },
            },
          },
        },
      },
    },
  },
};

2. widget: 'list1' 用于展示每行只有 1-3 个简单元素的情况

const schema = {
  type: 'object',
  properties: {
    listName2: {
      title: '对象数组',
      description: '对象数组嵌套功能',
      type: 'array',
      widget: 'list1',
      items: {
        type: 'object',
        properties: {
          input1: {
            title: '简单输入框',
            type: 'string',
            required: true,
          },
          select1: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
          },
        },
      },
    },
  },
};

3. widget: 'list2' 用于展示每行只有 3 - n 个简单元素的情况，特别是数据量很大需要分页的

4. widget: 'list3' 用于展示存在列表套列表，列表套对象等复杂元素的情况

高级用法

表单监听(watch)

const watch = {
    // # 为全局
    "#": (val) => {
      console.log("表单的时时数据为：", val);
    },
    input2: (val) => {
      alert(val)
      if (val !== undefined) {
        form.onItemChange("input2", val);
      }
    }
};

return (
    <div>
      <FormRender
        form={form}
        schema={schema}
        onFinish={onFinish}
        watch={watch}
      />
      <Button type="primary" onClick={form.submit}>
        提交
      </Button>
    </div>
);