iss-library-form-renderer 可视化表单设计器-渲染引擎

介绍

本项目使用 vue-cli 4 搭建，基于 vue 和 element-ui 实现。

可选参数

| 参数名 | 参数类型 | 描述 | |----------------------|---------|--------------------------------------------------| | source | Object | 表单结构信息：JSON结构数据，存放表单及其组件的详细信息 | | value | Object | 表单录入值 | | edit | Boolean | 是否为编辑状态：true = 是；false（默认） = 否 | | printRead | Boolean | 是否为打印状态：true = 是；false（默认） = 否 | | preview | Boolean | 是否为预览状态：true = 是；false（默认） = 否 | | preferPlatform | String | 终端展示类型：’pc‘ = 电脑端（默认），’pad‘ = 平板电脑，’mobile‘ = 手机 | | lockPlatform | Boolean | 是否锁定终端类型：true = 是（默认）；false = 否 | | variables | Object | 引入变量：主要为当前登录用户信息 | | currentFormId | String | 表单ID | | formPublishVersionId | String | 表单发布ID |

使用示例:

1.安装:

    $ npm install -s [email protected]

2.引入:

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import issLibraryFormDesigner from 'iss-library-form-designer';
import './assets/styles/theme/element-variables.scss';
import 'remixicon/fonts/remixicon.css';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.use(ElementUI, {zIndex: 2000});
issLibraryFormDesigner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3.使用:

<template>
  <div>
    <iss-library-form-renderer 
      :source="schema"
      :value="editData" 
      ref="formRenderer">
    </iss-library-form-renderer>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      schema: {"list":[],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"theme":"default","themeTitle":"","themeSubTitle":"","themeTitleAlign":"left","submitHiddenArea":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"beforeSubmit","name":"beforeSubmit","func":"// 在表单提交前调用，且返回值会影响提交结果\n// 返回值为true时会继续执行 \n// 返回值为false时会阻止提交 \n// 返回值为Error时会阻止提交 且会修改错误提示信息 return new Error('提示信息'); \nreturn true;"},{"key":"submitted","name":"submitted","func":""}]},"version":1},
      editData: {}
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.formRenderer.getData().then(data => {
        // Data verification succeeded
        alert(JSON.stringify(data))
      }).catch(e => {
        // Data verification failed
      })
    }
  }
}
</script>