springboot+activiti7+react实现模仿钉钉功能的审批流(六、实现类似钉钉的表单设计器)

springboot+activiti7+react实现模仿钉钉功能的审批流(六、实现类似钉钉的表单设计器)_第1张图片

 主要就是维护一个和表单类型关联的字段列表,字段属性参考了antd的组件属性,表结构:

springboot+activiti7+react实现模仿钉钉功能的审批流(六、实现类似钉钉的表单设计器)_第2张图片

内容实例,form_id关联act_business_form

springboot+activiti7+react实现模仿钉钉功能的审批流(六、实现类似钉钉的表单设计器)_第3张图片

人员列表的数据:

{"type":"Detail","disabled":true,"required":false,"placeholder":"","actionName":"添加","forms":[{"label":"部门","itemProps":{"type":"Input","disabled":true,"required":false,"placeholder":"请输入"},"key":"601b7e39-4231-418e-9da9-ff40906bee25"},{"label":"姓名","itemProps":{"type":"Input","disabled":true,"required":false,"placeholder":"请输入"},"key":"79ed3d6a-24f5-43e2-b73d-6c634db50947"}],"showTable":false}

前端技术实现主要是拖拽组件 react-dnd,这里的操作都在前端了,后端只负责保存。

样式布局:直接拿了钉钉的样式和布局

你可能感兴趣的:(activiti,bpmn)