workflow_form_design v1.7.0
表单设计器 workflow_form_design
简介
基于k-form-design二次开发实现的表单设计器,样式使用less作为开发语言,主要功能是能通过简单操作来生成配置表单,生成可保存的JSON数据,并能将JSON还原成表单,使表单开发更简单更快速
特性
- 可视化配置页面
- 提供栅格、表格等布局
- 布局嵌套使用
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
- 快速获取表单数据
- 自定义组件插入
- 自定义主题色
组件
- KFormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置json或页面)
- KFormBuild 表单构建器(根据设计器中获取的配置json数据,快速构建出表单页面)
针对性更改
- KFormBuild新增可传属性textData,数据必传fieldName, fieldWrite, 选传value, userName, department。
- fieldName是属性名,必须和表单设计器中的数据字段相对应,设置才有效果。
- 部分控件支持fieldWrite属性(布尔类型),控制控件是否可写,不可写替换为文本。
- 控件支持fieldHide属性(布尔类型),控制控件是否隐藏。
- value是填充值,和表单设计器设置的默认值是不一样的。
- 新增自定义组件申报人,关联属性userName。
- 新增自定义组件申报科室,关联属性department。
- 新增自定义组件申报时间,该组件会自动获取当前时间。
- 数据举例:[{fieldName: 'attributes', fieldWrite: true, fieldHide: false, value: 'say hello', userName: 'wiphone',
- department: '信息科'}]。
- KFormDesign的文字、HTML控件增加数据字段,方便绑定。
- 栅格布局新增边框配置。
- 基础控件不输入标签输入框自动占位。
- 分割线新增高度设置。
- 输入框/文本框/数字输入框/日期选择框/时间选择框新增边框配置。
- 动态表格支持fieldWrite/fieldHide属性,以及子输入框/文本框/数字输入框/日期选择框/时间选择框支持边框配置。
- 文本格式支持wrapLine属性(布尔类型),切换文本是否可换行。
- 控件增加默认左右缩进10px。
- 显示分割线数据字段。
- 实现多栅格边框不干扰。
- 动态表格新增scrollX属性(布尔类型),控制打印表单时,是否显示下方滚动条。
- 文本格式新增高度/字体大小设置。
- 字体雅黑调整为宋体。
- 部分控件新增字段描述字段,必填,表单不显示。
- 隐藏表格/开关/按钮/警告控件。
- 单选框支持fieldWrite/fieldHide属性。
- 多选框支持fieldWrite/fieldHide属性。
- 下拉框支持fieldWrite/fieldHide属性。
- 新增自定义文字。
- 新增自定义HTML控件。
- 文本高度新增单位选择下拉框。
- 评分新增支持不可写/隐藏属性。
- 级联选择器支持不可写/隐藏属性。
- 树选择器支持不可写/隐藏属性。
- 底部留白。
- k-form-design新增domainUrl属性,接收上传图片/文件主机地址。
- 修改上传图片/文件默认地址。
- 新增为空判断。
- 禁用时间选择器的范围选择。
- 动态表单为空时报错。
- 上传报错取errCode提示。
- 不可写文本默认换行。
- 如果设置不可写则不校验必填。
- 多行文本新增换行样式。
- 新增流程设计显示属性。
- 修复多次拖动model值不变问题。
安装
# 使用yarn
yarn add workflow_form_design
# 使用npm
npm i workflow_form_design
引入组件
// 在main.js引入
import KFormDesign from 'workflow_form_design'
import 'workflow_form_design/lib/k-form-design.css'
Vue.use(KFormDesign)
使用组件
<template>
<div>
<k-form-design />
</div>
</template>
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago