Vue3 PLM Form Designer

基于 Vue3 + Element Plus 的可视化表单设计器 + 流程设计器组件库。

功能特性

• 🎨 表单设计器: 可视化拖拽表单设计
• 🔄 流程设计器: 基于 LogicFlow 的流程设计
• 📋 表单渲染器: 根据设计配置渲染表单
• 🎯 Element Plus 集成: 完美集成 Element Plus UI 组件
• 📦 开箱即用: 简单导入即可使用

安装

# 使用 pnpm
pnpm add vue3-plm-form-designer

# 使用 npm
npm install vue3-plm-form-designer

# 使用 yarn
yarn add vue3-plm-form-designer

使用方式

完整导入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Vue3PlmFormDesigner from 'vue3-plm-form-designer'
import 'vue3-plm-form-designer/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(Vue3PlmFormDesigner)
app.mount('#app')

按需导入组件

import { FormDesigner, FormBuilder, FlowDesigner } from 'vue3-plm-form-designer'

// 在组件中使用
export default {
  components: {
    FormDesigner,
    FormBuilder,
    FlowDesigner
  }
}

组件使用示例

表单设计器

<template>
  <FormDesigner v-model="formConfig" @save="handleSave" />
</template>

<script setup>
import { ref } from 'vue'
import { FormDesigner } from 'vue3-plm-form-designer'

const formConfig = ref({
  questions: [],
  $reqs: [],
  initLinkage: [],
})

const handleSave = (config) => {
  console.log('保存的配置:', config)
}
</script>

流程设计器

<template>
  <FlowDesigner />
</template>

<script setup>
import { FlowDesigner } from 'vue3-plm-form-designer'
</script>

<style scoped>
/* 确保容器有高度 */
.flow-container {
  height: 600px;
}
</style>

表单渲染器

<template>
  <FormBuilder :form-config="formConfig" @submit="handleSubmit" />
</template>

<script setup>
import { ref } from 'vue'
import { FormBuilder } from 'vue3-plm-form-designer'

const formConfig = ref({
  questions: [
    {
      id: 'username',
      label: '用户名',
      type: 'input',
      width: 50,
      placeholder: '请输入用户名',
      required: true,
    },
    {
      id: 'email',
      label: '邮箱',
      type: 'input',
      mode: 'email',
      width: 50,
      placeholder: '请输入邮箱',
      required: true,
    },
  ],
  questionsPerRow: 1,
  formType: 'default',
  showActions: true,
})

const handleSubmit = (data) => {
  console.log('提交的表单数据:', data)
}
</script>

组件 API

FormDesigner 表单设计器

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | v-model | Object | {} | 表单配置数据 | | @save | Function | - | 保存配置回调 |

FormBuilder 表单渲染器

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | form-config | Object | {} | 表单配置 | | @submit | Function | - | 表单提交回调 |

FlowDesigner 流程设计器

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | - | - | - | 无特定属性 |

注意事项

1. 依赖要求: 需要先安装 Vue 3.x 和 Element Plus
2. 样式引入: 需要引入 Element Plus 样式和组件库样式
3. 图标库: 需要安装 @element-plus/icons-vue 并注册图标组件
4. 流程设计器: 需要确保容器有明确的高度

开发指南

本地开发

# 克隆项目
git clone <repository-url>

# 进入目录
cd packages/form-designer

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

发布到 npm

# 登录 npm
npm login

# 构建
pnpm build

# 发布
npm publish

许可证

MIT