ep-form-making

介绍

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

使用说明

1. 安装依赖

npm install ep-form-making --save

2. 引用组件方式

// 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. 表单设计器组件

<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组件

<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组件:

<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: ''
    }
  }