Noosphere Possibilities Maximized

    antv-form-design

    1.0.4 • Public • Published

    表单设计器 antv-form-design

    vue ant-design-vue

    本项目在k-form-design@3.7.91版本基础上进行了二次封装,详细文档请参考k-form-design

    ## 自定义部分 - 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的计划

    特性

    • 可视化配置页面
    • 提供栅格、表格等布局
    • 布局嵌套使用
    • 提供预览、保存、生成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)

    使用组件

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

    Install

    npm i antv-form-design

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    27.1 MB

    Total Files

    100

    Last publish

    Collaborators

    • contorl