R Form Builder

一个基于Vue2的动态表单构建器组件，可以根据数据库表结构动态生成查询表单。

特性

• 支持多种表单控件类型（输入框、下拉选择、日期、日期时间、数字等）
• 支持多种查询运算符（等于、大于、小于、大于等于、小于等于、包含）
• 基于iView UI组件库
• 分为表单配置器和表单运行器两个组件
• 配置结果可保存到数据库供后续使用

安装

npm install r-form-builder

使用方法

1. 在你的Vue项目中引入组件：

import RFormBuilder from 'r-form-builder'
import 'view-design/dist/styles/iview.css'

Vue.use(RFormBuilder)

2. 使用表单配置器组件：

<template>
  <FormBuilder
    :schema="tableSchema"
    @config-generated="handleConfigGenerated"
  />
</template>

<script>
export default {
  data() {
    return {
      tableSchema: [
        { name: 'name', label: '姓名' },
        { name: 'age', label: '年龄' },
        { name: 'birthday', label: '生日' }
      ]
    }
  },
  methods: {
    handleConfigGenerated(config) {
      // 处理生成的配置
      console.log(config)
    }
  }
}
</script>

3. 使用表单运行器组件：

<template>
  <FormRunner
    :config="formConfig"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script>
export default {
  data() {
    return {
      formConfig: [
        {
          name: 'name',
          label: '姓名',
          type: 'input',
          operator: 'like'
        },
        {
          name: 'age',
          label: '年龄',
          type: 'number',
          operator: 'gte'
        }
      ]
    }
  },
  methods: {
    handleSearch(params) {
      // 处理搜索参数
      console.log(params)
    },
    handleReset() {
      // 处理重置事件
    }
  }
}
</script>

API

FormBuilder Props

| 属性 | 类型 | 说明 | |------|------|------| | schema | Array | 表结构数据，每个字段包含name和label属性 |

FormBuilder Events

| 事件名 | 说明 | 参数 | |--------|------|------| | config-generated | 配置生成完成时触发 | config: 生成的表单配置 |

FormRunner Props

| 属性 | 类型 | 说明 | |------|------|------| | config | Array | 表单配置数据 |

FormRunner Events

| 事件名 | 说明 | 参数 | |--------|------|------| | search | 点击查询按钮时触发 | params: 查询参数 | | reset | 点击重置按钮时触发 | - |

配置示例

// 表单配置示例
{
  name: 'age',           // 字段名
  label: '年龄',         // 显示标签
  type: 'number',       // 控件类型：input/select/date/datetime/number
  operator: 'gte',      // 运算符：eq/gt/lt/gte/lte/like
  options: [            // 仅type为select时需要
    {
      label: '选项1',
      value: '1'
    }
  ]
}

查询参数示例

// 查询参数示例
{
  age: {
    value: 18,
    operator: 'gte'
  },
  name: {
    value: '张',
    operator: 'like'
  }
}

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

License

MIT