表单设计器 k-form-design

简介

基于vue和ant-design-vue实现的表单设计器，使用了最新的前端技术栈，让表单开发更简单高效

• 预览地址

简介

• 可视化配置页面
• 提供栅格、表格等布局
• 表单边距、布局等属性设置
• 提供预览、保存、生成json、生成可执行代码等操作
• 支持表单验证
• 快速获取表单数据
• 提供高级组件

组件

• KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）
• KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）

安装依赖

# 使用yarn 
yarn add k-form-design

# 使用npm 
npm i k-form-design --save

引入组件

// 在main.js引入

import { KFormDesign, KFormBuild } from "k-form-design";
import "k-form-design/lib/k-form-design.css";

Vue.use(KFormDesign);
Vue.use(KFormBuild);

表单设计器使用

建议将表单设计器组件放到全屏组件或页面使用，如果是ant-design的Modal或者Drawer组件，使用className给容器添加类名，并设置width:100vw;height:100vh;

表单设计器save事件，点击保存时触发

<template>
  <div>
    <k-form-design @save="handleSave" />
  </div>
</template>
<script>
export default {
  methods: {
    handleSave(values) {
      this.$message.success("触发保存方法");
      console.log(values);
    }
  }
};
</script>

使用表格布局时，在设计界面右键可以添加行列和合并单元格

API

k-form-design组件

k-form-build组件

说明：submit事件可以通过表单设计器的提交按钮触发，也可以给组件绑定ref，通过函数触发，代码如下：

// jsonData 设计器生成的json数据
<k-form-build
  :value="jsonData"
  ref="KFormBuild"
  @submit="handleSubmit"
/>
   
// 触发submit事件
this.$refs.KFormBuild.handleSubmit()

// 获取表单数据
handleSubmit (getData){
  getData.then(values=>{
      // 表单验证通过，并拿到values值
      console.log(value)
    }).catch(err=>{
      // 表单验证未通过
      console.log(err)
    })
}

上传接口api

文件上传响应数据

{
  "code": 0, // 判断文件上传是否成功，结果为0成功，否则上传失败
  "data":
    {
      "fileId": "文件ID",
      "url": "文件下载地址"
    }
}

图片上传响应数据

{
  "code": 0, // 判断图片上传是否成功，结果为0成功，否则上传失败
  "data":
    {
      "url": "图片url"
    }
}

License

MIT Copyright (c) 2019-present kchengz