表单设计器 dlx-form-design

简介

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

目前vue3版本已经在开发中了，预计11月中旬上线测试版本

• 码云

特性

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

组件

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

安装

安装表单设计器

npm i dlx-form-design --save
 
# OR
yarn add dlx-form-design

安装 ant-design-vue UI ，推荐 vue2 版本最新的 1.7.8版本

npm i [email protected] --save

# OR
yarn add [email protected]

引入组件

// 在main.js引入

// 注：useComponents 需放最上面，优先注册懒加载组件
import 'dlx-form-design/packages/core/useComponents'
import DlxFormDesign from 'dlx-form-design/packages/use.js'
import 'dlx-form-design/lib/dlx-form-design.css'

Vue.use(DlxFormDesign)

使用组件

<template>
  <div>
    <dlx-form-design hideResetHint :showHead="true" :columns="columns"/>
  </div>
</template>
<script>
  const data = [];

  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      label: `字段名 ${i}`,
      model: `field${i}`,
      maxLength: 10,
      type: 'varchar'
    });
  }
  export default {
    name: "formDesign",
    data() {
      return {
        columns: data
      }
    }
  }

</script>

调用示例

<template>
  <div id="app">
    <button @click="setData">set</button>
    <div v-show="show">
      <dlx-form-build ref="kfb" :value="configJsonData" />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      show: false,
      configJsonData: {}
    };
  },
  methods: {
    setData() {
      this.configJsonData = {
        list: [
          {
            type: "input",
            label: "时间",
            options: {
              type: "text",
              width: "100%",
              defaultValue: "",
              placeholder: "请输入",
              clearable: false,
              maxLength: null,
              addonBefore: "",
              addonAfter: "秒",
              hidden: false,
              disabled: false
            },
            model: "time",
            key: "input_1664028803991",
            help: "这是时间",
            rules: [
              {
                required: true,
                message: "必填项"
              }
            ]
          },
          {
            type: "input",
            label: "次数",
            options: {
              type: "text",
              width: "100%",
              defaultValue: "",
              placeholder: "请输入",
              clearable: false,
              maxLength: null,
              addonBefore: "",
              addonAfter: "",
              hidden: false,
              disabled: false
            },
            model: "count",
            key: "input_1664028804858",
            help: "",
            rules: [
              {
                required: true,
                message: "必填项"
              }
            ]
          }
        ],
        config: {
          layout: "horizontal",
          labelCol: {
            xs: 4,
            sm: 4,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 4
          },
          labelWidth: 100,
          labelLayout: "flex",
          wrapperCol: {
            xs: 18,
            sm: 18,
            md: 18,
            lg: 18,
            xl: 18,
            xxl: 18
          },
          hideRequiredMark: false,
          customStyle: ""
        }
      };
      this.show = true;
      const data = { count: "1000", time: "10" };
      this.$refs.kfb.setData(data);
    }
  }
};
</script>

License

MIT Copyright (c) 2022 dszhang