表单设计器的开发简介

1.项目结构

magix-composer

项目的编译环境

https://github.com/thx/magix-composer
report-designer

项目源码

https://github.com/xinglie/report-designer

基础框架与语法

基础框架：（Magix）https://github.com/thx/magix/tree/v5
前端语法： https://github.com/thx/magix-composer/issues/1

项目运行

安装依赖库

npm i

安装构建工具（gulp）

npm i gulp -g

安装web服务器（anywhere）（可选，但建议）

npm i anywhere -g

2.开发模块结构

元素定义

/tmpl/elements/index.ts

语言定义

/tmpl/i18n/zh-cn.ts

面板属性类型定义

/tmpl/designer/props.ts

常量定义

/tmpl/designer/const.ts

样式定义

/tmpl/assets/index.less

3.元素修改

修改元素

直接修改元素的html，
例如：{{=props.ename}}

新增属性面板类型

Checkbox

新增属性面板类型属性

/tmpl/panels/props/element.html
Readonly

4.开发新元素

datetime-picker 为例

5.后端接口

字段、字段绑定值来源、模板、保存