ep-form-making

介绍

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

使用说明

1. 安装依赖

1npm install ep-form-making --save

2. 引用组件方式

1// Export EpFormMaking and RenderFrom components by default
2import epFormMaking from 'ep-form-making'
3
4// element plus
5import ElementPlus from 'element-plus'
6import 'element-plus/dist/index.css'
7
8const app = createApp(App)
9// ...
10app.use(epFormMaking, request) 
11// app.use(renderFrom)
12app.mount('#app')

3. 表单设计器组件

1<ep-form-making />

-- 选项参数

options: {
  nameReadonly: false, // 禁止修改组件名称
  clearButtonShow: true, // 显示清空按钮
  previewButtonShow: true, // 显示预览按钮
  exportJsonButtonShow: true, // 显示导出JSON按钮
  formConfigShow: true // 显示表单设置项
}

-- 隐藏常用组件

hideFields: ['fileupload', 'imgupload']

-- 配置双向绑定

modelValue: {}

-- 容器高度，可由外部指定维护

height: {
  type: Number,
  default: null
}

-- 是否显示容器

show: {
  type: Boolean,
  default: true
}

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

usedConditionIds: {
  type: Array,
  default: null
}

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

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

-- 多语言

language: {
  type: String,
  default: 'zh-cn'
}

-- 表单模板数据

formTemplates: {
  type: Array,
  default: () => [{
    title: '请假表单',
    img: new URL('../../assets/leave.jpg', import.meta.url).href,
    json: new URL('../../assets/leave.json', import.meta.url).href
  }]
}

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

correlationOptions: {
  type: Array,
  default: null
}

render-form组件

1<render-form
2  ref="previewRef"
3  :json-object="formMaking"
4  :form-data="initFormData"
5  :h5="isH5"
6  @change="renderChange"
7/>
8<render-form ref="previewRef" :json-object="state" :h5="isH5" :form-data="initFormData" @change="renderChange">
9  <!-- 已选关联审批列表 -->
10  <template #correlation="{ item, remove }">
11    {{ item }}
12    <el-button @click="remove">删除</el-button>
13  </template>
14  <!-- 选择关联审批：options组件配置 {selectType} 可选范围，默认false全部; {selectRange} 可选审批;
15    callback([...items]) 选中项改变后回调函数；
16    save 移动端调用保存关闭 -->
17  <template #correlationDialog="{ options: optionItems, callback, save }">
18    options：{{ optionItems }}
19    <el-table
20      :data="[{id:'1',name:'小明的请假', time:'2023-6-13'},{id:'2',name:'小红的请假', time:'2023-6-13'}]"
21      style="width: 100%"
22      @selection-change="callback"
23    >
24      <el-table-column type="selection" width="55" />
25      <el-table-column property="id" label="id" width="120" />
26      <el-table-column property="name" label="name" />
27      <el-table-column property="time" label="time" />
28    </el-table>
29    <van-button
30      v-show="isH5"
31      type="primary"
32      style="margin-top: 10px;margin-left: 2%;margin-right: 2%;width: 96%;"
33      block
34      @click="save"
35    >
36      确定
37    </van-button>
38  </template>
39</render-form>
40
41props: {
42    /** 是否渲染H5 UI组件 */
43    h5: {
44      type: Boolean,
45      default: false
46    },
47    /** Json表单配置 */
48    jsonObject: {
49      type: Object,
50      required: true
51    },
52    /** 表单数据 */
53    formData: {
54      type: Object,
55      default: null
56    }
57  }
58
59/** Json表单配置 */
60jsonObject: {
61  widgetList: [],
62  formConfig: {}
63}
64
65const previewRef = ref(null)
66
67/**
68 * 表单中流程条件字段值变更时触发
69 */
70const renderChange = (val) => {
71  console.log('renderChange :>> ', val)
72}
73
74/** 表单提交 */
75const onSubmit = () => {
76  previewRef.value.getFormModel().then(formData => {
77    const formDataJson = JSON.stringify(formData)
78    console.log('formDataJson :>> ', formDataJson)
79  }).catch(error => {
80    console.log('error :>> ', error)
81  })
82}
83
84/** 表单重置 */
85const onReset = () => {
86  previewRef.value.clearFormModel()
87}

detail-form组件:

1<detail-form :widget-list="widgetList" :form-data="detailFormData" :h5="isH5" label-width="80px">
2  <!-- 已选关联审批列表 -->
3  <template #correlation="{ item }">
4    {{ item }}
5  </template>
6</detail-form>
7
8props: {
9    /** 是否渲染H5 UI组件 */
10    h5: {
11      type: Boolean,
12      default: false
13    },
14    /** 表单组件列表 */
15    widgetList: {
16      type: Object,
17      required: true
18    },
19    /** 表单展示数据 */
20    formData: {
21      type: Object,
22      required: true
23    },
24    /** 字体颜色 */
25    color: {
26      type: String,
27      default: null
28    },
29    /** 字体大小 */
30    fontSize: {
31      type: [String, Number],
32      default: null
33    },
34    /** 标题颜色 */
35    labelColor: {
36      type: String,
37      default: null
38    },
39    /** 标题大小 */
40    labelFontSize: {
41      type: [String, Number],
42      default: null
43    },
44    /** 标题宽度 */
45    labelWidth: {
46      type: [String, Number],
47      default: null
48    },
49    /** 附加样式 */
50    cellClass: {
51      type: String,
52      default: ''
53    }
54  }