images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2024-11-14 07:29:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

3.0.0预览版代码首次上传。

Browse Source
This commit is contained in:
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 *.local
/.idea/ /.idea/
/.vscode/ /.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" "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": { "clone": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@ -1248,6 +1276,12 @@
"normalize-wheel-es": "^1.1.1" "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": { "emojis-list": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@ -1583,6 +1617,12 @@
"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
"dev": true "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": { "get-intrinsic": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@ -1882,6 +1922,12 @@
"kind-of": "^5.0.0" "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": { "is-extendable": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@ -1894,6 +1940,12 @@
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
"dev": true "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": { "is-glob": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@ -1948,6 +2000,15 @@
"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
"dev": true "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": { "isarray": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@ -2392,6 +2453,16 @@
"wrappy": "1" "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": { "parchment": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
@ -2611,6 +2682,12 @@
"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
"dev": true "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": { "resolve": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@ -2642,6 +2719,26 @@
"fsevents": "~2.3.2" "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": { "safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "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": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -2867,6 +2969,34 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true "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": { "string_decoder": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -3270,11 +3400,90 @@
"vue": "^3.0.11" "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": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true "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", "element-plus": "^1.2.0-beta.5",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"sortablejs": "1.14.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-i18n": "^9.2.0-beta.23", "vue-i18n": "^9.2.0-beta.23",
"vue3-quill": "^0.2.6" "vue3-quill": "^0.2.6"
@ -28,6 +29,7 @@
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"mvdir": "^1.0.21", "mvdir": "^1.0.21",
"rollup-plugin-visualizer": "^5.5.2",
"sass": "^1.45.0", "sass": "^1.45.0",
"vite": "^2.7.2", "vite": "^2.7.2",
"vite-plugin-svg-icons": "^1.0.5" "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" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :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"> :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" :disabled="field.options.disabled"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :clearable="field.options.clearable"
@ -98,7 +99,7 @@
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */ @import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
.full-width-input { .full-width-input {
width: 100% !important; width: 100% !important; /* 没生效？？改用内联样式style */
} }
</style> </style>

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

@ -88,14 +88,28 @@ export default {
}, },
initEventHandler() { 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) console.log('formModel of globalModel----------', this.globalModel.formModel)
if (!this.subFormItemFlag) { if (!this.subFormItemFlag) {
this.setValue(newFormData[this.field.options.name]) 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) { if (!!this.subFormItemFlag) {
let subFormData = this.formModel[this.subFormName] let subFormData = this.formModel[this.subFormName]
this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId) 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)) { if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
this.initOptionItems(true) this.initOptionItems(true)
} }
}) })
}, },
handleOnCreated() { handleOnCreated() {
@ -289,13 +309,15 @@ export default {
emitFieldDataChange(newValue, oldValue) { emitFieldDataChange(newValue, oldValue) {
//this.$emit('field-value-changed', [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') console.log('test', 'ccccccccc')
// /* 必须用dispatch向指定父组件派发消息！！ */ // /* 必须用dispatch向指定父组件派发消息！！ */
// this.dispatch('VFormRender', 'fieldChange', this.dispatch('VFormRender', 'fieldChange',
// [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex]) [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
eventBus.$emit('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) { syncUpdateFormModel(value) {
@ -319,9 +341,9 @@ export default {
//number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！ //number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */ this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
// /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */ /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
// this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name]) this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
eventBus.$emit('fieldValidation', [this.field.options.name]) // eventBus.$emit('fieldValidation', [this.field.options.name])
}, },
handleFocusCustomEvent(event) { handleFocusCustomEvent(event) {
@ -356,7 +378,7 @@ export default {
handleOnChange(val, oldVal) { //自定义onChange事件 handleOnChange(val, oldVal) { //自定义onChange事件
console.log('test', 'aaaaaaaaa') console.log('test', 'aaaaaaaaa')
debugger //debugger
if (!!this.field.options.onChange) { if (!!this.field.options.onChange) {
let changeFn = new Function('value', 'oldValue', 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" :prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent" @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
@change="handleChangeEvent"> @change="handleChangeEvent">
<template #append> <template #append v-if="field.options.appendButton">
<el-button v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled" <el-button :disabled="field.options.disabled || field.options.appendButtonDisabled"
:class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button> :class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button>
</template> </template>
</el-input> </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"> @focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent">
</vue-editor> </vue-editor>
--> -->
<quill-editor
v-model:value="fieldModel"
:options="editorOption"
:disabled="field.options.disabled"
@blur="handleRichEditorBlurEvent"
@focus="handleRichEditorFocusEvent"
@change="handleRichEditorChangeEvent"
/>
</form-item-wrapper> </form-item-wrapper>
</template> </template>
@ -19,6 +29,8 @@
import {deepClone} from "@/utils/util"; import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"; import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { Quill, quillEditor } from 'vue3-quill'
export default { export default {
name: "rich-editor-widget", name: "rich-editor-widget",
componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件 componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件
@ -55,6 +67,7 @@
// VueEditor: resolve => { //懒加载！！ // VueEditor: resolve => { //懒加载！！
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor)) // require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
// } // }
quillEditor,
}, },
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'], inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() { data() {
@ -68,6 +81,14 @@
} }
}, },
computed: { computed: {
editorOption() {
return {
placeholder: this.field.options.placeholder,
modules: {
//toolbar: this.customToolbar
}
}
},
}, },
beforeCreate() { beforeCreate() {

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

@ -80,49 +80,55 @@
</el-collapse> </el-collapse>
</el-form> </el-form>
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag" <div v-if="showFormEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showFormEventDialogFlag" :show-close="true" custom-class="small-padding-dialog" <el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog"
<el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor> <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
<el-alert type="info" :closable="false" title="}"></el-alert> <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
<template #footer> <el-alert type="info" :closable="false" title="}"></el-alert>
<div class="dialog-footer"> <template #footer>
<el-button @click="showFormEventDialogFlag = false"> <div class="dialog-footer">
{{i18nt('designer.hint.cancel')}}</el-button> <el-button @click="showFormEventDialogFlag = false">
<el-button type="primary" @click="saveFormEventHandler"> {{i18nt('designer.hint.cancel')}}</el-button>
{{i18nt('designer.hint.confirm')}}</el-button> <el-button type="primary" @click="saveFormEventHandler">
</div> {{i18nt('designer.hint.confirm')}}</el-button>
</template> </div>
</el-dialog> </template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag" <div v-if="showEditFormCssDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showEditFormCssDialogFlag" :show-close="true" custom-class="small-padding-dialog" <el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog"
<code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<template #footer> <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
<div class="dialog-footer"> <template #footer>
<el-button @click="showEditFormCssDialogFlag = false"> <div class="dialog-footer">
{{i18nt('designer.hint.cancel')}}</el-button> <el-button @click="showEditFormCssDialogFlag = false">
<el-button type="primary" @click="saveFormCss"> {{i18nt('designer.hint.cancel')}}</el-button>
{{i18nt('designer.hint.confirm')}}</el-button> <el-button type="primary" @click="saveFormCss">
</div> {{i18nt('designer.hint.confirm')}}</el-button>
</template> </div>
</el-dialog> </template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag" <div v-if="showEditFunctionsDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showEditFunctionsDialogFlag" :show-close="true" custom-class="small-padding-dialog" <el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog"
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<template #footer> <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
<div class="dialog-footer"> <template #footer>
<el-button @click="showEditFunctionsDialogFlag = false"> <div class="dialog-footer">
{{i18nt('designer.hint.cancel')}}</el-button> <el-button @click="showEditFunctionsDialogFlag = false">
<el-button type="primary" @click="saveGlobalFunctions"> {{i18nt('designer.hint.cancel')}}</el-button>
{{i18nt('designer.hint.confirm')}}</el-button> <el-button type="primary" @click="saveGlobalFunctions">
</div> {{i18nt('designer.hint.confirm')}}</el-button>
</template> </div>
</el-dialog> </template>
</el-dialog>
</div>
</div> </div>
</template> </template>

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

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

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

@ -50,31 +50,36 @@
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button> <el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
</div> </div>
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag" <div v-if="showImportDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showImportDialogFlag" :show-close="true" custom-class="small-padding-dialog" <el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog"
<el-form-item> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-input type="textarea" rows="10" v-model="optionLines"></el-input> <el-form-item>
</el-form-item> <el-input type="textarea" rows="10" v-model="optionLines"></el-input>
<template #footer> </el-form-item>
<div class="dialog-footer"> <template #footer>
<el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button> <div class="dialog-footer">
<el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button> <el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
</div> <el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</template> </div>
</el-dialog> </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"
: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>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
v-if="showImportCascaderDialogFlag" :show-close="true" custom-class="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>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>

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

@ -6,9 +6,8 @@ export default {
created() {}, created() {},
methods: { methods: {
editEventHandler(eventName, eventParams) { editEventHandler(eventName, eventParams) {
//this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]]) this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
// eventBus.$emit('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" import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default { export default {
name: "defaultValue-editor", name: "number-defaultValue-editor",
mixins: [i18n, propertyMixin], mixins: [i18n, propertyMixin],
props: { props: {
designer: Object, 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>

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

@ -41,28 +41,30 @@
</template> </template>
</div> </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']">
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center <el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
:destroy-on-close="true" custom-class="small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'"> :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
<div> :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']"> <div>
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true" <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
:option-data="testOptionData" <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick" :option-data="testOptionData"
@formChange="handleFormChange"> @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
</VFormRender> @formChange="handleFormChange">
</VFormRender>
</div>
</div> </div>
</div> <template #footer>
<template #footer> <div class="dialog-footer">
<div class="dialog-footer"> <el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button>
<el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button> <el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
<el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button> <el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
<el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button> <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
<el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button> <el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
<el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button> </div>
</div> </template>
</template> </el-dialog>
</el-dialog> </div>
<div v-if="showImportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']"> <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" <el-dialog :title="i18nt('designer.toolbar.importJson')" v-model="showImportJsonDialogFlag"
@ -81,88 +83,97 @@
</el-dialog> </el-dialog>
</div> </div>
<el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag" <div v-if="showExportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showExportJsonDialogFlag" :show-close="true" custom-class="small-padding-dialog" center <el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog" center
<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<template #footer> <code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
<div class="dialog-footer"> <template #footer>
<el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson"> <div class="dialog-footer">
{{i18nt('designer.hint.copyJson')}}</el-button> <el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
<el-button @click="saveFormJson">{{i18nt('designer.hint.saveFormJson')}}</el-button> {{i18nt('designer.hint.copyJson')}}</el-button>
<el-button type="" @click="showExportJsonDialogFlag = false"> <el-button @click="saveFormJson">{{i18nt('designer.hint.saveFormJson')}}</el-button>
{{i18nt('designer.hint.closePreview')}}</el-button> <el-button type="" @click="showExportJsonDialogFlag = false">
</div> {{i18nt('designer.hint.closePreview')}}</el-button>
</template> </div>
</el-dialog> </template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag" <div v-if="showExportCodeDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
v-if="showExportCodeDialogFlag" :show-close="true" custom-class="small-padding-dialog" center <el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> :show-close="true" custom-class="drag-dialog small-padding-dialog" center
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab"> width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tab-pane label="Vue" name="vue"> <el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
<code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></code-editor> <el-tab-pane label="Vue" name="vue">
</el-tab-pane> <code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></code-editor>
<el-tab-pane label="HTML" name="html"> </el-tab-pane>
<code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></code-editor> <el-tab-pane label="HTML" name="html">
</el-tab-pane> <code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></code-editor>
</el-tabs> </el-tab-pane>
<template #footer> </el-tabs>
<div class="dialog-footer"> <template #footer>
<el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode"> <div class="dialog-footer">
{{i18nt('designer.hint.copyVueCode')}}</el-button> <el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode">
<el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode"> {{i18nt('designer.hint.copyVueCode')}}</el-button>
{{i18nt('designer.hint.copyHtmlCode')}}</el-button> <el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode">
<el-button @click="saveVueCode">{{i18nt('designer.hint.saveVueCode')}}</el-button> {{i18nt('designer.hint.copyHtmlCode')}}</el-button>
<el-button @click="saveHtmlCode">{{i18nt('designer.hint.saveHtmlCode')}}</el-button> <el-button @click="saveVueCode">{{i18nt('designer.hint.saveVueCode')}}</el-button>
<el-button type="" @click="showExportCodeDialogFlag = false"> <el-button @click="saveHtmlCode">{{i18nt('designer.hint.saveHtmlCode')}}</el-button>
{{i18nt('designer.hint.closePreview')}}</el-button> <el-button type="" @click="showExportCodeDialogFlag = false">
</div> {{i18nt('designer.hint.closePreview')}}</el-button>
</template> </div>
</el-dialog> </template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag" <div v-if="showFormDataDialogFlag" class="" v-drag="['.nested-drag-dialog.el-dialog', '.nested-drag-dialog .el-dialog__header']">
v-if="showFormDataDialogFlag" :show-close="true" custom-class="dialog-title-light-bg" center <el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="true" custom-class="nested-drag-dialog dialog-title-light-bg" center
:append-to-body="true"> :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
<div style="border: 1px solid #DCDFE6"> :append-to-body="true">
<code-editor :mode="'json'" :readonly="true" v-model="formDataJson"></code-editor> <div style="border: 1px solid #DCDFE6">
</div> <code-editor :mode="'json'" :readonly="true" v-model="formDataJson"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
{{i18nt('designer.hint.copyFormData')}}</el-button>
<el-button @click="saveFormData">{{i18nt('designer.hint.saveFormData')}}</el-button>
<el-button type="" @click="showFormDataDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div> </div>
</template> <template #footer>
</el-dialog> <div class="dialog-footer">
<el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
{{i18nt('designer.hint.copyFormData')}}</el-button>
<el-button @click="saveFormData">{{i18nt('designer.hint.saveFormData')}}</el-button>
<el-button type="" @click="showFormDataDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</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="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">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="Vue3" name="vue3">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
{{i18nt('designer.hint.copyVue2SFC')}}</el-button>
<el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
{{i18nt('designer.hint.copyVue3SFC')}}</el-button>
<el-button @click="saveV2SFC">{{i18nt('designer.hint.saveVue2SFC')}}</el-button>
<el-button @click="saveV3SFC">{{i18nt('designer.hint.saveVue3SFC')}}</el-button>
<el-button type="" @click="showExportSFCDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag"
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="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">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="Vue3" name="vue3">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
{{i18nt('designer.hint.copyVue2SFC')}}</el-button>
<el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
{{i18nt('designer.hint.copyVue3SFC')}}</el-button>
<el-button @click="saveV2SFC">{{i18nt('designer.hint.saveVue2SFC')}}</el-button>
<el-button @click="saveV3SFC">{{i18nt('designer.hint.saveVue3SFC')}}</el-button>
<el-button type="" @click="showExportSFCDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
@ -442,7 +453,7 @@
doJsonImport() { doJsonImport() {
try { try {
let importObj = JSON.parse(this.importTemplate) let importObj = JSON.parse(this.importTemplate)
console.log('test import', this.importTemplate) //console.log('test import', this.importTemplate)
this.designer.loadFormJson(importObj) this.designer.loadFormJson(importObj)
this.showImportJsonDialogFlag = false this.showImportJsonDialogFlag = false

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

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

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

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

54
src/utils/emitter.js
View File

@ -1,10 +1,13 @@
function _broadcast(componentName, eventName, params) { function _broadcast(componentName, eventName, params) {
this.$children.forEach(function (child) { this.$children.forEach(function (child) {
var name = child.$options.componentName; let name = child.$options.componentName;
if (name === 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 { } else {
_broadcast.apply(child, [componentName, eventName].concat([params])); _broadcast.apply(child, [componentName, eventName].concat([params]));
} }
@ -12,11 +15,46 @@ function _broadcast(componentName, eventName, params) {
} }
export default { export default {
data() {
return {
vfEvents: {}
}
},
methods: { 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) { dispatch: function dispatch(componentName, eventName, params) {
debugger //debugger
var parent = this.$parent || this.$root; let parent = this.$parent || this.$root;
var name = parent.$options.componentName; let name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) { while (parent && (!name || name !== componentName)) {
parent = parent.$parent; parent = parent.$parent;
@ -26,9 +64,13 @@ export default {
} }
} }
if (parent) { 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: function broadcast(componentName, eventName, params) {
_broadcast.call(this, 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"> <module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true"> <component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output /> <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="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
</component> </component>

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

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

2
vite.config.js
View File

@ -33,7 +33,7 @@ export default defineConfig({
}, },
optimizeDeps: { optimizeDeps: {
include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js'] include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill']
}, },
css: { 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. 条款内容结束。