pm-customform-std-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

自定义表单组件包使用说明

一、安装

npm install pm-customform-std-ui node支持12+

二、快速上手

1、引入

在 main.js 中写入以下内容：

import customform from 'pm-customform-std-ui';
import 'pm-customform-std-ui/lib/PmCustomformStdUi.css';
//按需配置
const customFormConfig = {
    adornUrl: 'XXX', //API请求前缀，如需二级目录需要设置
    hiddenFormType: true,// 如需配置组件不展示表单类型下拉选择，设置为true
    defalueFormTypeId: 1, // 如需设置配置组件表单类型
    selfRenderHistory: true, //如需渲染组件自己处理工作流
    handleReplaceText: true, //如需支持错词、敏感词处理
    pdfViewUrl: 'XXX', //pdf预览的前缀，默认是/pdf/web/viewer.html?file=
}
Vue.use(customform, customFormConfig)

2、配置组件

在需要使用自定义表单配置的页面对应布局中，直接使用

<pm-form-config></pm-form-config>

• 备注：接口请求已经在组件中处理

2、渲染组件

在需要使用自定义表单渲染的页面对应布局中，直接使用

<pm-form-render ref="pmFormRenderRef"></pm-form-render>

因渲染组件请求数据需要先在外面获取对应的参数，所以需要在页面中获取到详情数据后，调用对应方法：

this.$refs.pmFormRenderRef.getCustomData(formId, paramMap, config)

• 第一个参数：formId
• 第二个参数：相关的paramsMap
• 第三个参数: 对应的配置config 通过entityId查询：getAttByEntityId为true

2、数据源配置组件

在需要使用数据源配置的页面对应布局中，直接使用

<pm-datasource-config></pm-datasource-config>

• 备注：接口请求已经在组件中处理

三、注意事项

因为自定义表单的接口请求都需要在请求头带上access_token，所以需要在项目中登录之后缓存access_token

localStorage.setItem('access_token',XXX)