VForm源码目录结构说明
ACE 简介
Ace（Ajax.org Cloud9 Editor）是一款完全由JavaScript编写的独立代码编辑器。其目标是创建一个基于浏览器的编辑器，不仅在功能、易用性和性能上能与现有的本地编辑器（如TextMate、Vim或Eclipse）相媲美，甚至还能有所超越。Ace可以轻松嵌入到任何网页或JavaScript应用中。它是Cloud9 IDE的主要编辑器，也是Mozilla Skywriter（Bespin）项目的继任者。
https://gitcode.com/gh_mirrors/ac/ace/overview 国内镜像站点，有详细用法。
表单设计器——VFormDesigner 源码解析
引用和依赖
src/App.vue 表单设计器首页
导入表单设计器组件
import VFormDesigner from './components/form-designer/index.vue'页面标签定义
<template>
<div id="app">
<VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
<template #customToolButtons>
<el-button type="text" @click="printFormJson">测试按钮</el-button>
</template>
</VFormDesigner>
</div>
</template>脚本定义
export default {
name: 'App',
components: {
VFormDesigner,
},
data() {
return {
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
},
//全局数据源变量
globalDsv: {
testApiHost: 'http://www.test.com/api',
testPort: 8080,
},
}
},
methods: {
printFormJson() {
console.log( this.$refs.vfDesignerRef.getFormJson() )
}
}
}
</script>
交互方法
其中$refs是vue的内置全局对象，用于引用页面组件对象实例（DOM实例）。
由此可以引申出来表单设计器的全局方法有哪些？官方文档给出了19个方法；其中5个方法是pro版专用接口。
这些接口定义在组件首页src/components/form-designer/index.vue的methods方法体。
API方法
方法名 说明 参数
1、changeLanguage 修改界面显示语言 string：'zh-CN'、'en-US'
2、setFormJson 设置表单JSON对象 string/object
3、getFormJson 获取表单JSON对象 —
4、clearDesigner 清空设计器画布 —
4、refreshDesigner 刷新设计器画布（几乎用不到） —
6、previewForm 打开--预览表单--弹窗 —
7、importJson 打开--导入表单JSON--弹窗 —
8、exportJson 打开--导出表单JSON--弹窗 —
9、exportCode 打开--导出Vue/HTML代码--弹窗 —
10、generateSFC 打开--生成SFC组件代码--弹窗 —
11、getFieldWidgets 获取表单JSON中的所有字段，返回对象数组，格式如下：
[
{
type: String,
name: String,
field: Object
},
...,
] — 无参数
注意：该方法获取的是formJson中的字段JSON定义，并非渲染后的字段组件。
12、getContainerWidgets 获取表单JSON中的所有容器，返回对象数组，格式如下：
[
{
type: String,
name: String,
container: Object
},
...,
] — 无参数
注意：该方法获取的是formJson中的容器JSON定义，并非渲染后的容器组件。
13、getWidgetRef 获取设计器组件实例 (widgetName, showError):
widgetName，组件名称
showError=true/false，如组件不存在是否显示错误
14、getSelectedWidgetRef 获取设计器选中的组件实例 —
15、buildFormDataSchema 构建并返回表单数据结构对象，仅Pro版本支持
16、addDataSource 增加数据源对象，仅Pro版本支持 dsObj，数据源对象
{
dataSourceId: '1x2y3z98765', //确保表单内唯一不重复
uniqueName: '',
requestURL: '',
requestURLType: 'String',
description: '',
headers: [
],
params: [
],
data: [
],
requestMethod: 'get',
configHandlerCode: ' return config',
dataHandlerCode: ' return result.data.data;',
errorHandlerCode: ' $message.error(error.message);',
dataSetEnabled: false, // 是否开启多数据集
dataSets: [
],
}
17、getFormTemplates 获取全部表单模板，仅Pro版本支持 返回表单模板数组
18、clearFormTemplates 清空全部表单模板，仅Pro版本支持 —
19、addFormTemplate 追加新的表单模板，仅Pro版本支持 formTemplate，表单模板对象
{
title: '表单模板名称',
imgUrl: '模板缩略图URL',
jsonStr: '表单模板json字符串', //优先级高于jsonUrl
jsonUrl: '表单模板对象读取URL', //优先级低于jsonStr
description: ‘表单模板描述文字’,
i18n: { //优先级高于title和description
'zh-CN': {
title: '中文title',
description: ‘中文描述文字’,
},
'en-US': {
title: '英文title',
description: ‘英文描述文字’,
}
}
}css定义
<style lang="scss">
#app {
height: 100%;
}
</style>
