From ea82b92682dc9f2ff152fbba4ea6f681d95f7ba7 Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Wed, 6 Jul 2022 15:31:37 +0800 Subject: [PATCH] =?UTF-8?q?1.=20input=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0o?= =?UTF-8?q?nAppendButtonClick=E4=BA=A4=E4=BA=92=E4=BA=8B=E4=BB=B6=EF=BC=9B?= =?UTF-8?q?=202.=20=E5=A2=9E=E5=8A=A0=E7=BB=84=E4=BB=B6=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=88=96=E7=A7=BB=E9=99=A4=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=A0=B7=E5=BC=8F=E7=9A=84API=E6=96=B9=E6=B3=95?= =?UTF-8?q?=EF=BC=9B=203.=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86bug?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../container-widget/tab-widget.vue | 4 ++ .../form-widget/field-widget/fieldMixin.js | 53 ++++++++++++++++++- .../field-widget/file-upload-widget.vue | 4 +- src/components/form-designer/index.vue | 2 +- .../onAppendButtonClick-editor.vue | 30 +++++++++++ .../setting-panel/propertyRegister.js | 1 + .../form-designer/toolbar-panel/index.vue | 8 ++- .../widget-panel/widgetsConfig.js | 1 + .../container-item/containerItemMixin.js | 32 +++++++++++ src/components/form-render/index.vue | 1 - src/utils/util.js | 14 ++--- 11 files changed, 135 insertions(+), 15 deletions(-) create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue diff --git a/src/components/form-designer/form-widget/container-widget/tab-widget.vue b/src/components/form-designer/form-widget/container-widget/tab-widget.vue index d00dfd2..eb4c131 100644 --- a/src/components/form-designer/form-widget/container-widget/tab-widget.vue +++ b/src/components/form-designer/form-widget/container-widget/tab-widget.vue @@ -112,6 +112,10 @@ .form-widget-list { min-height: 28px; } + + :deep(.el-tabs__content) { + min-height: 28px; + } } .tab-container.selected { diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js index 9fef1ec..90177d0 100644 --- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js +++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js @@ -364,8 +364,17 @@ export default { }, emitAppendButtonClick() { - /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */ - this.dispatch('VFormRender', 'appendButtonClick', [this]); + if (!!this.designState) { //设计状态不触发点击事件 + return + } + + if (!!this.field.options.onAppendButtonClick) { + let customFn = new Function(this.field.options.onAppendButtonClick) + customFn.call(this) + } else { + /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */ + this.dispatch('VFormRender', 'appendButtonClick', [this]) + } }, handleOnChange(val, oldVal) { //自定义onChange事件 @@ -568,6 +577,46 @@ export default { this.customToolbar = customToolbar }, + /** + * 是否子表单内嵌的组件 + * @returns {boolean} + */ + isSubFormItem() { + return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false + }, + + /** + * 动态增加自定义css样式 + * @param className + */ + addCssClass(className) { + if (!this.field.options.customClass) { + this.field.options.customClass = [className] + } else { + this.field.options.customClass.push(className) + } + }, + + /** + * 动态移除自定义css样式 + * @param className + */ + removeCssClass(className) { + if (!this.field.options.customClass) { + return + } + + let foundIdx = -1 + this.field.options.customClass.map((cc, idx) => { + if (cc === className) { + foundIdx = idx + } + }) + if (foundIdx > -1) { + this.field.options.customClass.splice(foundIdx, 1) + } + }, + //--------------------- 以上为组件支持外部调用的API方法 end ------------------// } diff --git a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue index 3caaa99..5b60d9c 100644 --- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue @@ -22,10 +22,10 @@
{{file.name}} - + -
diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue index 94ddcfa..2402ca0 100644 --- a/src/components/form-designer/index.vue +++ b/src/components/form-designer/index.vue @@ -138,7 +138,7 @@ docUrl: 'https://www.vform666.com/document3.html', gitUrl: 'https://github.com/vform666/variant-form3-vite', - chatUrl: 'https://www.vform666.com/chat-group.html', + chatUrl: 'https://www.vform666.com/pages/chat-group/', subScribeUrl: 'https://www.vform666.com/pages/pro/', scrollerHeight: 0, diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue new file mode 100644 index 0000000..99c7cf9 --- /dev/null +++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/components/form-designer/setting-panel/propertyRegister.js b/src/components/form-designer/setting-panel/propertyRegister.js index b85e512..1d15ae4 100644 --- a/src/components/form-designer/setting-panel/propertyRegister.js +++ b/src/components/form-designer/setting-panel/propertyRegister.js @@ -121,6 +121,7 @@ const EVENT_PROPERTIES = { 'onUploadError' : 'onUploadError-editor', 'onFileRemove' : 'onFileRemove-editor', 'onValidate' : 'onValidate-editor', + 'onAppendButtonClick': 'onAppendButtonClick-editor', //容器 'onSubFormRowAdd' : 'onSubFormRowAdd-editor', diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue index 37f5c94..e01c981 100644 --- a/src/components/form-designer/toolbar-panel/index.vue +++ b/src/components/form-designer/toolbar-panel/index.vue @@ -46,12 +46,12 @@
@@ -667,6 +667,10 @@ console.log('test', button) }, + onMyEmitTest(aaa) { + console.log('-----', aaa) + }, + findWidgetById(wId) { let foundW = null traverseAllWidgets(this.designer.widgetList, (w) => { diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js index 161140c..2517eb7 100644 --- a/src/components/form-designer/widget-panel/widgetsConfig.js +++ b/src/components/form-designer/widget-panel/widgetsConfig.js @@ -142,6 +142,7 @@ export const basicFields = [ onFocus: '', onBlur: '', onValidate: '', + onAppendButtonClick: '', }, }, diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js index 2cfbf4a..0ff24bb 100644 --- a/src/components/form-render/container-item/containerItemMixin.js +++ b/src/components/form-render/container-item/containerItemMixin.js @@ -176,6 +176,38 @@ export default { // //TODO: // }, + /** + * 动态增加自定义css样式 + * @param className + */ + addCssClass(className) { + if (!this.widget.options.customClass) { + this.widget.options.customClass = [className] + } else { + this.widget.options.customClass.push(className) + } + }, + + /** + * 动态移除自定义css样式 + * @param className + */ + removeCssClass(className) { + if (!this.widget.options.customClass) { + return + } + + let foundIdx = -1 + this.widget.options.customClass.map((cc, idx) => { + if (cc === className) { + foundIdx = idx + } + }) + if (foundIdx > -1) { + this.widget.options.customClass.splice(foundIdx, 1) + } + }, + //--------------------- 以上为组件支持外部调用的API方法 end ------------------// }, diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue index b137c65..e7fb9e7 100644 --- a/src/components/form-render/index.vue +++ b/src/components/form-render/index.vue @@ -477,7 +477,6 @@ // 通知SubForm组件：表单数据更新事件！！ this.broadcast('ContainerItem', 'setFormData', this.formDataModel) - // 通知FieldWidget组件：表单数据更新事件！！ this.broadcast('FieldWidget', 'setFormData', this.formDataModel) }, diff --git a/src/utils/util.js b/src/utils/util.js index 35cc9f3..ad80715 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -126,28 +126,28 @@ export const loadRemoteScript = function(srcPath, callback) { /*加载远程js } } -export function traverseFieldWidgets(widgetList, handler) { +export function traverseFieldWidgets(widgetList, handler, parent = null) { widgetList.map(w => { if (w.formItemFlag) { - handler(w) + handler(w, parent) } else if (w.type === 'grid') { w.cols.map(col => { - traverseFieldWidgets(col.widgetList, handler) + traverseFieldWidgets(col.widgetList, handler, w) }) } else if (w.type === 'table') { w.rows.map(row => { row.cols.map(cell => { - traverseFieldWidgets(cell.widgetList, handler) + traverseFieldWidgets(cell.widgetList, handler, w) }) }) } else if (w.type === 'tab') { w.tabs.map(tab => { - traverseFieldWidgets(tab.widgetList, handler) + traverseFieldWidgets(tab.widgetList, handler, w) }) } else if (w.type === 'sub-form') { - traverseFieldWidgets(w.widgetList, handler) + traverseFieldWidgets(w.widgetList, handler, w) } else if (w.category === 'container') { //自定义容器 - traverseFieldWidgets(w.widgetList, handler) + traverseFieldWidgets(w.widgetList, handler, w) } }) }