# designform

**Repository Path**: Jing_jun_yang/designform

## Basic Information

- **Project Name**: designform
- **Description**: 表单引擎demo探索，用于深入研究表单引擎实现及原理，探索表单引擎整体架构设计，指导前后端开发人员落地实现。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-01
- **Last Updated**: 2024-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DesignForm 表单设计器使用文档

### 背景介绍

* 释义: 本表单引擎仅为demo,用于个人研究和技术预演论证可行性探讨。
* [DesignForm 背景介绍](表单引擎介绍.md)
* [DesignForm 核心设计思路](核心设计思路.md)

### 快速使用

```jsx
<DesignForm formkey="表单测试4" >
</DesignForm>
```

| 属性            | 注释                                           | 默认值       | 示例值                                                         | 必填 |
| ----------------- | ------------------------------------------------ | -------------- | ---------------------------------------------------------------- | ------ |
| formkey         | 表单key,表单key不能重复                        | ''           | 表单1                                                          | 是   |
| formtype        | 表单类型:0=主表单,1=扩展表单,2=子表单,表单名称 | 1            | 0                                                              | 否   |
| formname        | 表单名称                                       | ''           |                                                                | 否   |
| layout          | 默认布局                                       | 'horizontal' |                                                                | 否   |
| initvalue       | 默认初始值                                     | null         | [{key: '文本控件1',title:'',value:'1',type:'text'}]            | 否   |
| defaulttoolbar  | 默认工具栏控件,默认加载全部控件                | null         | [[{'title': '基础控件',  control: ['Text', 'Blank', 'Label']}] | 否   |
| defaultpackages | 默认编辑器引用的包,请输入需要引用的类应用即可  | null         | {useContext,useRef,Input,Button}                               | 否   |
| 其他属性        | 额外属性等同antd.Form表单属性                  |              |                                                                | 否   |

### 表单控件硬编码方式

硬编码方式使用表单控件示例:

```jsx
//注意: 硬编码控件必须在DesignForm内部
<DesignForm formkey="表单测试4" >
   <DesignControl
     designkey="文本2"
     designdata={{ type: 'Text', title: '', value:info }}
     extprops={{
        onChange: (event) => {
            setInfo(event.target.value);
        },
     }}/>
</DesignForm>
```

| 属性       | 注释                                                                                           | 默认值 | 示例值                                               | 必填 |
| ------------ | ------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------ | ------ |
| designkey  | 表单设计控件key,当前表单内唯一,用于渲染和识别                                                  | null   |                                                      | 是   |
| designdata | 表单设计控件data属性,用于定义控件属性渲染                                                      | null   | designdata={{ type: 'Text', title: '', value:info }} | 是   |
| extprops   | 表单设计控件extProps属性,用于定义控件事件渲染,如onChange/onClick等，请关注antd相应类型控件类型 | null   | extprops={{ onChange:(e)=>{} }}                      | 否   |
| 其他属性   | 额外属性等同antd.Form.Item表单属性                                                             | null   |                                                      | 否   |

* [DesignControl designdata 说明文档](designControl.md)

### 表单方法

| 方法                 | 注释                                                   | 示例                              |
| ---------------------- | -------------------------------------------------------- | ----------------------------------- |
| `getDesignModelJson` | 获取前端表单设计json,一般不会用到                      |                                   |
| `isEditState`        | 获取表单设计状态                                       | true/false                        |
| `setIsEditState`     | 设置表单设计状态                                       | xx.current.setIsEditState(true)   |
| `refreash`           | 刷新表单                                               | xx.current.refreash(）            |
| `controls`           | 获取表单控件集合，可访问任意控件信息，谨慎操作控件信息 | xx.current.controls               |
| `useformData`        | 获取表单基本信息                                       | xx.current.useformData            |
| `getJsonValue`       | 获取表单内容数据                                       | xx.current.getJsonValue()         |
| `setJsonValue`       | 设置表单内容数据                                       | xx.current.setJsonValue(datajson) |

```jsx
const form = useRef(null);
<DesignForm ref={form} formkey="表单测试4" >
</DesignForm>
<Button
    onClick={() => {
        form.current.setJsonValue([{ key: '1648890263927', value: '测试数据加载' }]);
        form.current.getJsonValue();
    }}
>
```

### 扩展表单模式

* 释义: 扩展表单模式，用于兼容旧表单，可以支持用户将已经开发的现有业务表单，快速改造成designForm，为表单赋予动态扩展能力。
* [扩展表单模式 说明文档](旧表单兼容模式.md)

### 高级控件

* 高级控件依然可以采用[DesignControl硬编码方式](designControl.md)使用,默认在表单编辑状态下可编排；也可以在表单编排状态下,动态添加并编排。
* 未来支持: 流程编排控件等等
* [高级控件 使用文档](高级控件使用.md)
* [表格控件 使用文档](表格控件.md)

### 容器控件

* 容器控件依然可以采用[DesignControl硬编码方式](designControl.md)使用,默认在表单编辑状态下可编排；容器可以将任意位置可编排的控件，放置在容器内部；同样容器内部的所有控件，放置到任意位置的外部布局中。
* 未来支持: 绝对定位容器等等
* [容器控件 使用文档](容器使用.md)

### 报表控件

* 报表控件属于高级控件,本质借助echart实现，默认支持[echart](https://echarts.apache.org/examples/zh/index.html)所有option配置方式，通过[低代码](低代码.md)方式实时配置和复用报表。
* [报表控件 使用文档](报表控件.md)

### 数据源

* 释义:数据源可帮助开发人员可以动态添加,开发,管理多种数据源类型，便于表单或控件动态展示数据内容;也可以"引用"系统标准化的数据源解决方案模板，实现快速复用。
* [数据源 使用文档](数据源.md)

### 智能助理

* 释义: 智能助理可帮助开发人员可以动态添加控件和表单的动作（按钮）事件,通过事件定义动态编排表单的流程；也可以“引用”系统标准化的事件解决方案模板，实现快速复用。
* [智能助理 使用文档](智能助理.md)

### 低代码

* 释义: 低代码本质上在于满足快速开发，快速交付的需求；同时在部分编码基础上，提供抽象化的可视化组件。 低代码包含“前端低代码”和“后端低代码”两块内容。
* 未来: 大部分低代码能力在“编辑器”控件里面呈现，包含模型设计（数据库设计）器,前端设计器，后端设计器等。
* [低代码文档](低代码.md)


by 车江毅