# lcdp-lib-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 lcdp-lib-form-renderer
    // 安装指定版本
    $ npm install -s lcdp-lib-form-renderer@version
```
#### 2.引入:

```
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import lcdpLibFormRenderner from 'lcdp-lib-form-renderer';
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});
lcdpLibFormRenderner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
```

#### 3.使用:

```
<template>
  <div>
    <lcdp-lib-form-renderer 
      :source="schema"
      :value="editData" 
      ref="formRenderer">
    </lcdp-lib-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>

```