From f9de155e83024eea75f421a4892de1ac9d871b8d Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Sun, 2 Jan 2022 14:33:25 +0800 Subject: [PATCH] =?UTF-8?q?3.0.0=E9=A2=84=E8=A7=88=E7=89=88=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E9=A6=96=E6=AC=A1=E4=B8=8A=E4=BC=A0=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + README.md | 65 +++++- package-lock.json | 209 +++++++++++++++++ package.json | 2 + .../field-widget/cascader-widget.vue | 5 +- .../form-widget/field-widget/fieldMixin.js | 44 +++- .../form-widget/field-widget/input-widget.vue | 4 +- .../field-widget/rich-editor-widget.vue | 21 ++ .../setting-panel/form-setting.vue | 88 ++++---- .../form-designer/setting-panel/index.vue | 44 ++-- .../setting-panel/option-items-setting.vue | 53 +++-- .../event-handler/eventMixin.js | 5 +- .../cascader-defaultValue-editor.vue | 18 ++ .../checkbox-defaultValue-editor.vue | 18 ++ .../number-defaultValue-editor.vue | 2 +- .../field-radio/radio-defaultValue-editor.vue | 18 ++ .../select-defaultValue-editor.vue | 18 ++ .../form-designer/toolbar-panel/index.vue | 211 +++++++++--------- .../container-item/sub-form-item.vue | 3 +- src/components/form-render/index.vue | 12 +- src/utils/emitter.js | 54 ++++- variant-form3-vite.iml | 5 +- vite-lib-render.config.js | 3 +- vite-lib.config.js | 7 +- vite.config.js | 2 +- 许可条款.txt | 8 + 26 files changed, 698 insertions(+), 222 deletions(-) create mode 100644 src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue create mode 100644 src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue create mode 100644 src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue create mode 100644 src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue create mode 100644 许可条款.txt diff --git a/.gitignore b/.gitignore index 214fa9a..4b00332 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ dist-ssr *.local /.idea/ /.vscode/ +/stats.html diff --git a/README.md b/README.md index c0793a8..6ad0aa1 100644 --- a/README.md +++ b/README.md @@ -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 ` + + diff --git a/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue new file mode 100644 index 0000000..9660985 --- /dev/null +++ b/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue index 1e4b745..89a778e 100644 --- a/src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue +++ b/src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue @@ -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, diff --git a/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue new file mode 100644 index 0000000..0f846a9 --- /dev/null +++ b/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue new file mode 100644 index 0000000..56612ee --- /dev/null +++ b/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue index d13961a..6f43019 100644 --- a/src/components/form-designer/toolbar-panel/index.vue +++ b/src/components/form-designer/toolbar-panel/index.vue @@ -41,28 +41,30 @@ - -
-
- - +
+ +
+
+ + +
-
- - + + +
- - - - +
+ + + + +
- - - - - - - - - - - +
+ + + + + + + + + + + +
- -
- -
- - + + +
+ +
+ + + + + + + + + + + +
- - - - - - - - - - - @@ -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 diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue index 4688381..82a56d2 100644 --- a/src/components/form-render/container-item/sub-form-item.vue +++ b/src/components/form-render/container-item/sub-form-item.vue @@ -192,7 +192,8 @@ return } - eventBus.$on('setFormData', (newFormData) => { + //eventBus.$on('setFormData', (newFormData) => { + this.on$('setFormData', (newFormData) => { this.initRowIdData(false) this.initFieldSchemaData() diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue index be6615b..f185c1b 100644 --- a/src/components/form-render/index.vue +++ b/src/components/form-render/index.vue @@ -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) }) }, diff --git a/src/utils/emitter.js b/src/utils/emitter.js index 1bcb2fd..e705c85 100644 --- a/src/utils/emitter.js +++ b/src/utils/emitter.js @@ -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); } diff --git a/variant-form3-vite.iml b/variant-form3-vite.iml index 8021953..04e5fa7 100644 --- a/variant-form3-vite.iml +++ b/variant-form3-vite.iml @@ -2,7 +2,10 @@ - + + + + diff --git a/vite-lib-render.config.js b/vite-lib-render.config.js index 3f1838a..ba2f137 100644 --- a/vite-lib-render.config.js +++ b/vite-lib-render.config.js @@ -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: { diff --git a/vite-lib.config.js b/vite-lib.config.js index f2d38d6..c9ab4d9 100644 --- a/vite-lib.config.js +++ b/vite-lib.config.js @@ -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: { diff --git a/vite.config.js b/vite.config.js index 9b32004..2a7fbbd 100644 --- a/vite.config.js +++ b/vite.config.js @@ -33,7 +33,7 @@ export default defineConfig({ }, optimizeDeps: { - include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js'] + include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill'] }, css: { diff --git a/许可条款.txt b/许可条款.txt new file mode 100644 index 0000000..a6c0754 --- /dev/null +++ b/许可条款.txt @@ -0,0 +1,8 @@ +# Variant Form 许可条款 1.0 + +1. 免责声明：任何情况下根据任何法律，本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任； +2. 禁止任何用户对VariantForm进行简单包装后，即声称为自己的产品、并销售源码获利； +3. VariantForm不是公开开源项目，获取到源代码的用户可自由修改源码供自身开发使用，也可以分发build构建后的库代码，但不可分发VariantForm源代码，本作者保留VariantForm核心代码的著作权； +4. 个人或公司用户均可将VariantForm项目应用于商业项目开发，为支持本项目持续开发，请尽量购买源码订阅更新服务； +5. 如果你不同意本许可条款，请勿使用VariantForm；任何情况下，一旦实际使用VariantForm，则代表你已确定完全同意本许可条款； +6. 条款内容结束。