本项目使用 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 |
// 安装最新版本
$ npm install -s lcdp-lib-form-renderer
// 安装指定版本
$ npm install -s lcdp-lib-form-renderer@version
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');
<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>