# pms-iss-library-form-designer 可视化表单设计器

## 介绍

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

### 可选参数

表单设计器（iss-library-form-designer）入参：

| 参数名               | 参数类型 | 描述                                                          |
| -------------------- | -------- | ------------------------------------------------------------- |
| preview              | Boolean  | 是否为预览状态：true = 是；false（默认） = 否                 |
| generateCode         | Boolean  | 是否输出表单代码：true = 是；false（默认） = 否               |
| generateJson         | Boolean  | 是否输出表单 JSON 结构数据：true = 是；false（默认） = 否     |
| importJson           | Boolean  | 是否允许导入 JSON 格式表单代码：true = 是；false（默认） = 否 |
| clearable            | Boolean  | 是否允许清空表单设计：true = 是（默认）；false = 否           |
| variables            | Object   | 引入变量：主要为当前登录用户信息                              |
| appId                | String   | 应用 ID                                                       |
| currentFormId        | String   | 表单 ID                                                       |
| currentFormVersionId | String   | 表单版本 ID                                                   |
| systemConfig         | Object   | 系统参数                                                      |

### 使用示例:

#### 1.安装:

```
    $ npm install -s pms-iss-library-form-designer@1.0.3
```

#### 2.引入:

```
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import issLibraryFormDesigner from 'pms-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>
  <pms-iss-library-form-designer
      clearable
      generate-code
      generate-json
      preview
      import-json>
  </pms-iss-library-form-designer>
</template>
```