# ep-form-making

**Repository Path**: han1982/ep-form-making

## Basic Information

- **Project Name**: ep-form-making
- **Description**: 为满足“一次设计，多端可用”的产品需求，独立设计研发了表单设计器ep-form-making，通过抽象表单核心数据模型，并分别基于 Element Plus 与 Vant3 封装渲染器，实现了一套配置在PC与移动端的自动适配与渲染，从架构上解决了跨端一致性问题，降低了多端产品的维护成本与系统灵活性。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-16
- **Last Updated**: 2025-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ep-form-making

### 介绍

基于 element-plus、vant3 封装的可拖拽表单设计器，低代码框架，组件同时支持 PC 端和移动端适配展示。

[在线预览](https://h-gxi.github.io/ep-form-making/)

## 使用说明

1. 安装依赖

```bash
npm install ep-form-making --save
```

2. 引用组件方式

```bash
// Export EpFormMaking and RenderFrom components by default
import epFormMaking from 'ep-form-making'

// element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// ...
app.use(epFormMaking, request)
// app.use(renderFrom)
app.mount('#app')
```

3. 表单设计器组件

```html
<ep-form-making />
```

-- 选项参数

```
options: {
  clearButtonShow: true, // 显示清空按钮
  previewButtonShow: true, // 显示预览按钮
  formConfigShow: true // 显示表单设置项
}
```

-- 自定义显示组件，默认全部显示

```
fields: ['input', 'textarea']
```

-- 配置双向绑定

```
modelValue: {}
```

-- 是否显示容器

```
show: {
  type: Boolean,
  default: true
}
```

-- 已使用流程条件项 ids
配合流程设计器使用，已作为流程判断条件不能删除

```
usedConditionIds: {
  type: Array,
  default: null
}
```

-- 必选项字段
可作为流程设计器条件使用

```
conditions: {
  type: Array,
  default: () => []
}
```

-- 关联审批应用列表 { label, options: [{label, value}]}

```
correlationOptions: {
  type: Array,
  default: null
}
```

#### render-form 组件

```html
<render-form ref="previewRef" :json-object="formMaking" :form-data="initFormData" :h5="isH5" @change="renderChange" />
<render-form ref="previewRef" :json-object="state" :h5="isH5" :form-data="initFormData" @change="renderChange">
  <!-- 已选关联审批列表 -->
  <template #correlation="{ item, remove }">
    {{ item }}
    <el-button @click="remove">删除</el-button>
  </template>
  <!-- 选择关联审批：options组件配置 {selectType} 可选范围，默认false全部; {selectRange} 可选审批;
    callback([...items]) 选中项改变后回调函数；
    save 移动端调用保存关闭 -->
  <template #correlationDialog="{ options: optionItems, callback, save }">
    options：{{ optionItems }}
    <el-table
      :data="[{id:'1',name:'小明的请假', time:'2023-6-13'},{id:'2',name:'小红的请假', time:'2023-6-13'}]"
      style="width: 100%"
      @selection-change="callback"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="id" width="120" />
      <el-table-column property="name" label="name" />
      <el-table-column property="time" label="time" />
    </el-table>
    <van-button
      v-show="isH5"
      type="primary"
      style="margin-top: 10px;margin-left: 2%;margin-right: 2%;width: 96%;"
      block
      @click="save"
    >
      确定
    </van-button>
  </template>
</render-form>

props: { /** 是否渲染H5 UI组件 */ h5: { type: Boolean, default: false }, /** Json表单配置 */ jsonObject: { type: Object,
required: true }, /** 表单数据 */ formData: { type: Object, default: null } } /** Json表单配置 */ jsonObject: {
widgetList: [], formConfig: {} } const previewRef = ref(null) /** * 表单中流程条件字段值变更时触发 */ const renderChange
= (val) => { console.log('renderChange :>> ', val) } /** 表单提交 */ const onSubmit = () => {
previewRef.value.getFormModel().then(formData => { const formDataJson = JSON.stringify(formData)
console.log('formDataJson :>> ', formDataJson) }).catch(error => { console.log('error :>> ', error) }) } /** 表单重置 */
const onReset = () => { previewRef.value.clearFormModel() }
```

#### detail-form 组件:

```html
<detail-form :widget-list="widgetList" :form-data="detailFormData" :h5="isH5" label-width="80px">
  <!-- 已选关联审批列表 -->
  <template #correlation="{ item }"> {{ item }} </template>
</detail-form>

props: { /** 是否渲染H5 UI组件 */ h5: { type: Boolean, default: false }, /** 表单组件列表 */ widgetList: { type: Object,
required: true }, /** 表单展示数据 */ formData: { type: Object, required: true }, /** 字体颜色 */ color: { type: String,
default: null }, /** 字体大小 */ fontSize: { type: [String, Number], default: null }, /** 标题颜色 */ labelColor: {
type: String, default: null }, /** 标题大小 */ labelFontSize: { type: [String, Number], default: null }, /** 标题宽度 */
labelWidth: { type: [String, Number], default: null }, /** 附加样式 */ cellClass: { type: String, default: '' } }
```