表单设计器 antv-form-design

<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/vueComponent/ant-design-vue">
    <img src="https://img.shields.io/badge/Ant%20Design%20Vue-1.5.1-blue" alt="ant-design-vue">
  </a>
</p>

<h1>本项目在[email protected]版本基础上进行了二次封装，详细文档请参考k-form-design</h1>

自定义部分

• 1、封装了用户选择组件，部门选择组件
• 2、select、checkbox、redio等组件支持字典配置、远端数据
• 3、label新增了标题增强，可以直接写html

基本使用

方式1：main.js内引入

// 在main.js或使用的页面内引入
// 文件上传和图片上传附带参数已在项目内封装，可以不传
// KFormDesign.setFormDesignConfig({
//   uploadFile: "",
//   uploadImage: "",
//   uploadFileName: "",
//   uploadImageName: "",
//   uploadFileData: { data: 1545 },
//   uploadImageData: { data: 1545 },
//   uploadFileHeaders: { data: 1545 },
//   uploadImageHeaders: { data: 1545 },
// });
import KFormDesign from 'antv-form-design'
import 'antv-form-design/lib/antv-form-design.css'

KFormDesign.setFormDesignConfig({
  request: {//必须参数
    domianURL: "http://127.0.0.1:8092", //请求路径
    staticDomainURL: "http://127.0.0.1/sys/common/static", //静态资源路径
    token://因为在项目中使用了请求，需要把token传到组件内
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzEwODcwODcsInVzZXJuYW1lIjoiYWRtaW4ifQ.xLbjkVK6sRC66F5Vod0q5u246eMgczvH8o_DAsSDujg" 
  }
});
Vue.use(KFormDesign);

使用组件

<template>
  <div>
   <k-form-design />
  </div>
</template>

方式2：使用的页面内直接使用

<template>
  <div>
    <k-form-design/>
  </div>
</template>
<script>
import { KFormDesign, setFormDesignConfig } from 'antv-form-design'
import 'antv-form-design/lib/antv-form-design.css'
export default {
  name: "Process",
  components: {
    KFormDesign
  },
  mounted(){
    KFormDesign.setFormDesignConfig({
      request: {//必须参数
        domianURL: "http://127.0.0.1:8092", //请求路径
        staticDomainURL: "http://127.0.0.1/sys/common/static", //静态资源路径
        token://因为在项目中使用了请求，需要把token传到组件内
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzEwODcwODcsInVzZXJuYW1lIjoiYWRtaW4ifQ.xLbjkVK6sRC66F5Vod0q5u246eMgczvH8o_DAsSDujg" 
      }
    });
  }
};
</script>

---- 组件变动
- 1、新增自定义组件 用户选择框 用户组件设置当前用户为默认值方式 ${username}返回值为用户username
- 2、新增自定义组件 部门选择框 部门组件设置当前用户为默认值方式 ${departName}、${departCode}返回值为部门编码,${id}返回值为部门id
- 3、下拉、复选框、单选等组件字典设置修改为自定义、字典（对应字典表code）、远端数据(表名：数据库表，值、标签：数据库字段名)
- 4、时间框 设置默认当前时间 ${currentDate} 不支持范围选择
- 5、组件新增标签增强属性 需要lable换行或者自定义添加样式可以使用该属性 例如 "数字<br/>输入框" "数字&nbsp;输入框" 目前动态表格不支持此属性

简介

设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速

注：该项目不兼容vue3.0项目，暂无后续兼容vue3.0的计划

• 项目文档k-form-design Github Pages
• 项目文档k-form-design Gitee Pages 较快

特性

• 可视化配置页面
• 提供栅格、表格等布局
• 布局嵌套使用
• 提供预览、保存、生成json、生成可执行代码等操作
• 支持表单验证
• 快速获取表单数据
• 自定义组件插入
• 自定义主题色

组件

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

安装

# 使用yarn 
yarn add antv-form-design

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

引入组件

// 在main.js引入

import KFormDesign from 'form-design-antv'
import 'form-design-antv/lib/form-design-antv.css'
Vue.use(KFormDesign)

使用组件2

<template>
  <div>
   <k-form-design />
  </div>
</template>