zcy
/
vue_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

3.0.0预览版代码首次上传。

master
vdpAdmin 2022-01-02 14:33:25 +08:00
parent 23615147a3
commit f9de155e83
26 changed files with 698 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ dist-ssr
*.local
/.idea/
/.vscode/
/stats.html

65
README.md
View File

@ -1,7 +1,64 @@
# Vue 3 + Vite
# Variant Form For Vue 3预览版
#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
### 说明
这是一个开发预览版，仅供学习参考，请勿用于开发环境，下述问题亟待解决：
```
iconfont图标替换为svg未全部完成；
多语言切换未完成；
富文本组件修改未完成；
```
## Recommended IDE Setup
### 友情链接
[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
### 功能一览
```
> 拖拽式可视化表单设计；
> 支持PC、Pad、H5三种布局；
> 支持运行时动态加载表单；
> 支持表单复杂交互控制；
> 支持自定义CSS样式；
> 支持自定义校验逻辑；
> 支持国际化多语言；
> 兼容IE 11浏览器；
> 可导出Vue组件、HTML源码；
> 可导出Vue的SFC单文件组件；
> 支持开发自定义组件；
> 支持响应式自适应布局；
> 支持VS Code插件；
> 更多功能等你探究...；
```
### 安装依赖
```
npm install --registry=https://registry.npm.taobao.org
```
### 开发调试
```
npm run serve
```
### 生产打包
```
npm run build
```
### 表单设计器 + 表单渲染器打包
```
npm run lib
```
### 表单渲染器打包
```
npm run lib-render
```
### 浏览器兼容性
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari```
<br/>

209
package-lock.json generated
View File

@ -906,6 +906,34 @@
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dev": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
},
"dependencies": {
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true
},
"strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"requires": {
"ansi-regex": "^5.0.1"
}
}
}
},
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@ -1248,6 +1276,12 @@
"normalize-wheel-es": "^1.1.1"
}
},
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true
},
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@ -1583,6 +1617,12 @@
"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
"dev": true
},
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"dev": true
},
"get-intrinsic": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@ -1882,6 +1922,12 @@
"kind-of": "^5.0.0"
}
},
"is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true
},
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@ -1894,6 +1940,12 @@
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
"dev": true
},
"is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true
},
"is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@ -1948,6 +2000,15 @@
"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
"dev": true
},
"is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"requires": {
"is-docker": "^2.0.0"
}
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@ -2392,6 +2453,16 @@
"wrappy": "1"
}
},
"open": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
"dev": true,
"requires": {
"is-docker": "^2.0.0",
"is-wsl": "^2.1.1"
}
},
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
@ -2611,6 +2682,12 @@
"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
"dev": true
},
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
"dev": true
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@ -2642,6 +2719,26 @@
"fsevents": "~2.3.2"
}
},
"rollup-plugin-visualizer": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.5.2.tgz",
"integrity": "sha512-sh+P9KhuWTzeStyRA5yNZpoEFGuj5Ph34JLMa9+muhU8CneFf9L0XE4fmAwAojJLWp//uLUEyytBPSCdZEg5AA==",
"dev": true,
"requires": {
"nanoid": "^3.1.22",
"open": "^7.4.2",
"source-map": "^0.7.3",
"yargs": "^16.2.0"
},
"dependencies": {
"source-map": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
"dev": true
}
}
},
"safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -2770,6 +2867,11 @@
}
}
},
"sortablejs": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -2867,6 +2969,34 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"requires": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"dependencies": {
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true
},
"strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"requires": {
"ansi-regex": "^5.0.1"
}
}
}
},
"string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -3270,11 +3400,90 @@
"vue": "^3.0.11"
}
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"dependencies": {
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"requires": {
"ansi-regex": "^5.0.1"
}
}
}
},
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dev": true,
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"dev": true
}
}
}

2
package.json
View File

@ -16,6 +16,7 @@
"element-plus": "^1.2.0-beta.5",
"file-saver": "^2.0.5",
"mitt": "^3.0.0",
"sortablejs": "1.14.0",
"vue": "^3.0.0",
"vue-i18n": "^9.2.0-beta.23",
"vue3-quill": "^0.2.6"
@ -28,6 +29,7 @@
"ace-builds": "^1.4.12",
"babel-eslint": "^10.1.0",
"mvdir": "^1.0.21",
"rollup-plugin-visualizer": "^5.5.2",
"sass": "^1.45.0",
"vite": "^2.7.2",
"vite-plugin-svg-icons": "^1.0.5"

5
src/components/form-designer/form-widget/field-widget/cascader-widget.vue
View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" class="full-width-input"
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
style="width: 100%" class="full-width-input"
:disabled="field.options.disabled"
:size="field.options.size"
:clearable="field.options.clearable"
@ -98,7 +99,7 @@
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
.full-width-input {
width: 100% !important;
width: 100% !important; /* 没生效？？改用内联样式style */
}
</style>

44
src/components/form-designer/form-widget/field-widget/fieldMixin.js
View File

@ -88,14 +88,28 @@ export default {
},
initEventHandler() {
eventBus.$on('setFormData', (newFormData) => {
// eventBus.$on('setFormData', (newFormData) => {
// console.log('formModel of globalModel----------', this.globalModel.formModel)
// if (!this.subFormItemFlag) {
// this.setValue(newFormData[this.field.options.name])
// }
// })
this.on$('setFormData', (newFormData) => {
console.log('formModel of globalModel----------', this.globalModel.formModel)
if (!this.subFormItemFlag) {
this.setValue(newFormData[this.field.options.name])
}
})
eventBus.$on('field-value-changed', (values) => {
// eventBus.$on('field-value-changed', (values) => {
// if (!!this.subFormItemFlag) {
// let subFormData = this.formModel[this.subFormName]
// this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
// } else {
// this.handleOnChange(values[0], values[1])
// }
// })
this.on$('field-value-changed', (values) => {
if (!!this.subFormItemFlag) {
let subFormData = this.formModel[this.subFormName]
this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
@ -105,11 +119,17 @@ export default {
})
/* 监听重新加载选项事件 */
eventBus.$on('reloadOptionItems', (widgetNames) => {
// eventBus.$on('reloadOptionItems', (widgetNames) => {
// if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
// this.initOptionItems(true)
// }
// })
this.on$('reloadOptionItems', (widgetNames) => {
if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
this.initOptionItems(true)
}
})
},
handleOnCreated() {
@ -289,13 +309,15 @@ export default {
emitFieldDataChange(newValue, oldValue) {
//this.$emit('field-value-changed', [newValue, oldValue])
eventBus.$emit('field-value-changed', [newValue, oldValue])
//eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！
this.emit$('field-value-changed', [newValue, oldValue])
console.log('test', 'ccccccccc')
// /* 必须用dispatch向指定父组件派发消息！！ */
// this.dispatch('VFormRender', 'fieldChange',
// [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
this.dispatch('VFormRender', 'fieldChange',
[this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
// eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
},
syncUpdateFormModel(value) {
@ -319,9 +341,9 @@ export default {
//number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
// /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
// this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
eventBus.$emit('fieldValidation', [this.field.options.name])
/* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
// eventBus.$emit('fieldValidation', [this.field.options.name])
},
handleFocusCustomEvent(event) {
@ -356,7 +378,7 @@ export default {
handleOnChange(val, oldVal) { //自定义onChange事件
console.log('test', 'aaaaaaaaa')
debugger
//debugger
if (!!this.field.options.onChange) {
let changeFn = new Function('value', 'oldValue', this.field.options.onChange)

4
src/components/form-designer/form-widget/field-widget/input-widget.vue
View File

@ -14,8 +14,8 @@
:prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
@change="handleChangeEvent">
<template #append>
<el-button v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
<template #append v-if="field.options.appendButton">
<el-button :disabled="field.options.disabled || field.options.appendButtonDisabled"
:class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button>
</template>
</el-input>

21
src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
View File

@ -9,6 +9,16 @@
@focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent">
</vue-editor>
-->
<quill-editor
v-model:value="fieldModel"
:options="editorOption"
:disabled="field.options.disabled"
@blur="handleRichEditorBlurEvent"
@focus="handleRichEditorFocusEvent"
@change="handleRichEditorChangeEvent"
/>
</form-item-wrapper>
</template>
@ -19,6 +29,8 @@
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { Quill, quillEditor } from 'vue3-quill'
export default {
name: "rich-editor-widget",
componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件
@ -55,6 +67,7 @@
// VueEditor: resolve => { //懒加载！！
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
// }
quillEditor,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
@ -68,6 +81,14 @@
}
},
computed: {
editorOption() {
return {
placeholder: this.field.options.placeholder,
modules: {
//toolbar: this.customToolbar
}
}
},
},
beforeCreate() {

12
src/components/form-designer/setting-panel/form-setting.vue
View File

@ -80,8 +80,9 @@
</el-collapse>
</el-form>
<div v-if="showFormEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
v-if="showFormEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
@ -95,9 +96,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showEditFormCssDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
v-if="showEditFormCssDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
<template #footer>
@ -109,9 +112,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showEditFunctionsDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
v-if="showEditFunctionsDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
<template #footer>
@ -123,6 +128,7 @@
</div>
</template>
</el-dialog>
</div>
</div>
</template>

16
src/components/form-designer/setting-panel/index.vue
View File

@ -71,8 +71,9 @@
</el-tab-pane>
</el-tabs>
<div v-if="showWidgetEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag"
v-if="showWidgetEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"></code-editor>
@ -86,6 +87,7 @@
</div>
</template>
</el-dialog>
</div>
</el-container>
</template>
@ -100,13 +102,14 @@
} from "@/utils/util"
import i18n from "@/utils/i18n"
import eventBus from "@/utils/event-bus"
import emitter from "@/utils/emitter";
const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
export default {
name: "SettingPanel",
componentName: "SettingPanel",
mixins: [i18n],
mixins: [i18n, emitter],
components: {
CodeEditor,
FormSetting,
@ -178,11 +181,14 @@
},
created() {
// eventBus.$on('editEventHandler', (eventName, eventParams) => {
// //debugger
// this.editEventHandler(eventName, eventParams)
// })
eventBus.$on('editEventHandler', (eventParams) => {
// eventBus.$on('editEventHandler', (eventParams) => {
// this.editEventHandler(eventParams[0], eventParams[1])
// })
this.on$('editEventHandler', (eventParams) => {
//debugger
this.editEventHandler(eventParams[0], eventParams[1])
})
@ -253,7 +259,7 @@
},
editEventHandler(eventName, eventParams) {
debugger
//debugger
this.curEventName = eventName
this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`

9
src/components/form-designer/setting-panel/option-items-setting.vue
View File

@ -50,8 +50,9 @@
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
</div>
<div v-if="showImportDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
v-if="showImportDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-form-item>
<el-input type="textarea" rows="10" v-model="optionLines"></el-input>
@ -63,9 +64,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showImportCascaderDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
v-if="showImportCascaderDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
<template #footer>
@ -76,6 +79,8 @@
</template>
</el-dialog>
</div>
</div>
</template>
<script>

5
src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
View File

@ -6,9 +6,8 @@ export default {
created() {},
methods: {
editEventHandler(eventName, eventParams) {
//this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
// eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
},
}

18
src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "cascader-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

18
src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "checkbox-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

2
src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue
View File

@ -10,7 +10,7 @@
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
name: "defaultValue-editor",
name: "number-defaultValue-editor",
mixins: [i18n, propertyMixin],
props: {
designer: Object,

18
src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "radio-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

18
src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "select-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

25
src/components/form-designer/toolbar-panel/index.vue
View File

@ -41,9 +41,10 @@
</template>
</div>
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag" v-if="showPreviewDialogFlag"
<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
:destroy-on-close="true" custom-class="small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
:destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
@ -63,6 +64,7 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showImportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.importJson')" v-model="showImportJsonDialogFlag"
@ -81,8 +83,9 @@
</el-dialog>
</div>
<div v-if="showExportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
v-if="showExportJsonDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
:show-close="true" custom-class="drag-dialog small-padding-dialog" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
<template #footer>
@ -95,9 +98,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showExportCodeDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
v-if="showExportCodeDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
:show-close="true" custom-class="drag-dialog small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
<el-tab-pane label="Vue" name="vue">
@ -120,9 +125,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showFormDataDialogFlag" class="" v-drag="['.nested-drag-dialog.el-dialog', '.nested-drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
v-if="showFormDataDialogFlag" :show-close="true" custom-class="dialog-title-light-bg" center
:show-close="true" custom-class="nested-drag-dialog dialog-title-light-bg" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
:append-to-body="true">
<div style="border: 1px solid #DCDFE6">
@ -138,9 +145,11 @@
</div>
</template>
</el-dialog>
</div>
<div v-if="showExportSFCDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag"
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="drag-dialog small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
<el-tab-pane label="Vue2" name="vue2">
@ -164,6 +173,8 @@
</template>
</el-dialog>
</div>
</div>
</template>
<script>
@ -442,7 +453,7 @@
doJsonImport() {
try {
let importObj = JSON.parse(this.importTemplate)
console.log('test import', this.importTemplate)
//console.log('test import', this.importTemplate)
this.designer.loadFormJson(importObj)
this.showImportJsonDialogFlag = false

3
src/components/form-render/container-item/sub-form-item.vue
View File

@ -192,7 +192,8 @@
return
}
eventBus.$on('setFormData', (newFormData) => {
//eventBus.$on('setFormData', (newFormData) => {
this.on$('setFormData', (newFormData) => {
this.initRowIdData(false)
this.initFieldSchemaData()

12
src/components/form-render/index.vue
View File

@ -259,16 +259,20 @@
},
addFieldChangeEventHandler() {
eventBus.$off('fieldChange') //移除原有事件监听
eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
//eventBus.$off('fieldChange') //移除原有事件监听
this.off$('fieldChange') //移除原有事件监听
//eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.on$('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
})
},
addFieldValidateEventHandler() {
eventBus.$off('fieldValidation') //移除原有事件监听
eventBus.$on('fieldValidation', (fieldName) => {
//eventBus.$off('fieldValidation') //移除原有事件监听
this.off$('fieldValidation') //移除原有事件监听
//eventBus.$on('fieldValidation', (fieldName) => {
this.on$('fieldValidation', (fieldName) => {
this.$refs.renderForm.validateField(fieldName)
})
},

54
src/utils/emitter.js
View File

@ -1,10 +1,13 @@
function _broadcast(componentName, eventName, params) {
this.$children.forEach(function (child) {
var name = child.$options.componentName;
let name = child.$options.componentName;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
//child.$emit.apply(child, [eventName].concat(params));
if (!!child.emit$) {
child.emit$.call(child, eventName, params)
}
} else {
_broadcast.apply(child, [componentName, eventName].concat([params]));
}
@ -12,11 +15,46 @@ function _broadcast(componentName, eventName, params) {
}
export default {
data() {
return {
vfEvents: {}
}
},
methods: {
emit$(eventName, data) {
if (this.vfEvents[eventName]) {
this.vfEvents[eventName].forEach((fn) => {
fn(data);
});
}
},
on$(eventName, fn) {
this.vfEvents[eventName] = this.vfEvents[eventName] || [];
this.vfEvents[eventName].push(fn);
},
off$(eventName, fn) {
if (this.vfEvents[eventName]) {
if ((fn === undefined) || (fn === null)) {
this.vfEvents[eventName].length = 0
return
}
for (let i = 0; i < this.vfEvents[eventName].length; i++) {
if (this.vfEvents[eventName][i] === fn) {
this.vfEvents[eventName].splice(i, 1)
break
}
}
}
},
dispatch: function dispatch(componentName, eventName, params) {
debugger
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
//debugger
let parent = this.$parent || this.$root;
let name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
@ -26,9 +64,13 @@ export default {
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
//parent.$emit.apply(parent, [eventName].concat(params));
if (!!parent.emit$) {
parent.emit$.call(parent, eventName, params)
}
}
},
broadcast: function broadcast(componentName, eventName, params) {
_broadcast.call(this, componentName, eventName, params);
}

5
variant-form3-vite.iml
View File

@ -2,7 +2,10 @@
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/dist" />
<excludeFolder url="file://$MODULE_DIR$/lib" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>

3
vite-lib-render.config.js
View File

@ -33,7 +33,8 @@ export default defineConfig({
},
optimizeDeps: {
//include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js']
include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill']
//include: ['quill']
},
css: {

7
vite-lib.config.js
View File

@ -4,6 +4,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { resolve } from 'path'
import commonjs from '@rollup/plugin-commonjs'
import visualizer from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
@ -16,6 +17,9 @@ export default defineConfig({
//解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!!
commonjs(),
//可视化Bundle
visualizer(),
viteSvgIcons({
// Specify the icon folder to be cached
iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
@ -33,7 +37,8 @@ export default defineConfig({
},
optimizeDeps: {
//include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js']
include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill']
//include: ['quill']
},
css: {

2
vite.config.js
View File

@ -33,7 +33,7 @@ export default defineConfig({
},
optimizeDeps: {
include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js']
include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill']
},
css: {

8
许可条款.txt Normal file
View File

@ -0,0 +1,8 @@
# Variant Form 许可条款 1.0
1. 免责声明：任何情况下根据任何法律，本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任；
2. 禁止任何用户对VariantForm进行简单包装后，即声称为自己的产品、并销售源码获利；
3. VariantForm不是公开开源项目，获取到源代码的用户可自由修改源码供自身开发使用，也可以分发build构建后的库代码，但不可分发VariantForm源代码，本作者保留VariantForm核心代码的著作权；
4. 个人或公司用户均可将VariantForm项目应用于商业项目开发，为支持本项目持续开发，请尽量购买源码订阅更新服务；
5. 如果你不同意本许可条款，请勿使用VariantForm；任何情况下，一旦实际使用VariantForm，则代表你已确定完全同意本许可条款；
6. 条款内容结束。