JVS低代码完整源码解析：如何二次开发自己的表单组件？

一、JVS低代码表单组件体系概述

JVS低代码平台采用 Spring Cloud + VUE 3 的技术架构，表单引擎是其六大核心引擎之一。表单组件体系主要分为三层：

text

 复制代码┌─────────────────────────────────────────────────────────────┐
│                   表单组件体系三层架构                       │
├─────────────────────────────────────────────────────────────┤
│  设计器层（Designer）                                      │
│  ┌─────────────────────────────────────────────────────┐  │
│  │  拖拽面板、属性配置面板、预览画布                    │  │
│  └─────────────────────────────────────────────────────┘  │
│                    ↓                                      │
│  组件层（Components）                                      │
│  ┌─────────────────────────────────────────────────────┐  │
│  │  基础组件（输入框/下拉框/日期选择器...）             │  │
│  │  高级组件（表格/树形选择/文件上传...）               │  │
│  │  自定义组件（按需扩展）                             │  │
│  └─────────────────────────────────────────────────────┘  │
│                    ↓                                      │
│  渲染层（Renderer）                                        │
│  ┌─────────────────────────────────────────────────────┐  │
│  │  动态表单渲染引擎（根据配置JSON生成实际表单）         │  │
│  └─────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

核心设计思想是：表单的配置与渲染分离。表单设计器产出一份JSON格式的配置描述，渲染引擎根据这份JSON动态生成实际表单。这种设计使得自定义组件只需要遵循统一的配置规范，即可被设计器和渲染引擎同时识别。

二、源码结构解析

JVS低代码的前端代码基于Vue 3 + Element Plus构建。表单组件相关的源码主要分布在以下目录：

text

 复制代码jvs-ui/
├── src/
│   ├── components/
│   │   └── form-designer/          # 表单设计器核心
│   │       ├── designer/           # 设计器主画布
│   │       ├── component-panel/    # 组件面板
│   │       ├── property-panel/     # 属性配置面板
│   │       └── components/         # 内置表单组件
│   │           ├── input/          # 输入框
│   │           ├── select/         # 下拉框
│   │           ├── date-picker/    # 日期选择器
│   │           └── ...             # 其他组件
│   ├── renderer/
│   │   └── form-renderer/          # 表单渲染引擎
│   └── types/
│       └── form-config.ts          # 表单配置类型定义

关键模块说明：

• component-panel：组件面板，展示所有可拖拽的组件列表。新增自定义组件后需要在此注册。
• property-panel：属性配置面板，选中组件后展示可配置的属性。自定义组件需要定义自己的属性配置表单。
• form-renderer：表单渲染引擎，根据配置JSON递归渲染组件树，是自定义组件最终展示的地方。

三、开发一个自定义表单组件

以开发一个“手机号输入框（带验证码发送）”组件为例，完整演示二次开发流程。

第一步：创建组件文件

在 src/components/form-designer/components/ 目录下创建 phone-input/ 文件夹：

vue

 复制代码<!-- phone-input/index.vue -->
<template>
  <div class="phone-input-wrapper">
    <el-input
      :model-value="modelValue"
      :placeholder="placeholder"
      @update:model-value="handleInput"
      class="phone-input"
    />
    <el-button
      :disabled="countdown > 0"
      @click="sendCode"
      class="send-btn"
    >
      {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
    </el-button>
  </div>
</template><script setup>
import { ref } from 'vue'const props = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '请输入手机号' }
})const emit = defineEmits(['update:modelValue'])const countdown = ref(0)
let timer = nullconst handleInput = (val) => {
  emit('update:modelValue', val)
}const sendCode = () => {
  // 实际项目调用发送验证码API
  console.log('发送验证码至：', props.modelValue)
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) clearInterval(timer)
  }, 1000)
}
</script>

第二步：注册组件到组件面板

在 src/components/form-designer/component-panel/index.ts 中注册：

typescript

 复制代码// 引入自定义组件
import PhoneInput from '../components/phone-input/index.vue'// 组件配置
export const CUSTOM_COMPONENTS = {
  phoneInput: {
    component: PhoneInput,
    // 设计器中的展示名称
    label: '手机号输入',
    // 组件图标
    icon: 'phone',
    // 默认属性配置
    defaultProps: {
      placeholder: '请输入手机号',
      required: false
    },
    // 组件分类（用于面板分组）
    category: '高级组件'
  }
}

第三步：定义属性配置

在 property-panel 中为自定义组件添加属性配置：

vue

 复制代码<!-- property-panel/PhoneInputProps.vue -->
<template>
  <el-form-item label="占位文本">
    <el-input v-model="localProps.placeholder" />
  </el-form-item>
  <el-form-item label="是否必填">
    <el-switch v-model="localProps.required" />
  </el-form-item>
</template><script setup>
const props = defineProps(['value'])
const localProps = computed({
  get: () => props.value,
  set: (val) => emit('update:value', val)
})
</script>

四、组件与数据模型的联动

JVS低代码的组件与数据模型通过统一元数据实现联动。表单字段定义存储在 meta_field 表中：

sql

 复制代码CREATE TABLE `meta_field` (
  `id` varchar(32) NOT NULL,
  `model_id` varchar(32) NOT NULL COMMENT '所属模型',
  `field_name` varchar(64) NOT NULL COMMENT '字段名',
  `field_label` varchar(128) NOT NULL COMMENT '字段标签',
  `field_type` varchar(32) NOT NULL COMMENT '字段类型',
  `options` json DEFAULT NULL COMMENT '组件配置',
  PRIMARY KEY (`id`)
);

自定义组件需要确保其输出的数据格式与元数据定义一致。在手机号输入组件中，输出的 modelValue 是字符串类型，对应 field_type = 'string'，并可通过 options 字段存储组件的特有配置。

五、二次开发建议

1. 优先复用现有组件
JVS低代码提供了500+字段类型和验证规则，在开发自定义组件前，先确认是否可通过配置现有组件实现需求。

2. 遵循配置规范
自定义组件应遵循 modelValue / update:modelValue 的Vue v-model规范，便于与表单渲染引擎无缝集成。

3. 测试覆盖
在 form-renderer 的测试环境中单独渲染自定义组件，验证其在表单中的表现是否符合预期。

六、总结

JVS低代码源码全量交付，为企业提供了深度定制的可能性。通过理解其表单组件体系的三层架构——设计器层、组件层、渲染层——开发者可以快速定位扩展点，开发满足业务需求的自定义组件并注册到设计器中。核心原则是：遵循配置规范、复用现有基础设施、保持与元数据模型的一致性。

标签：#低代码 #源码解析 #表单组件 #Vue3 #JVS