1. input组件增加onAppendButtonClick交互事件；

2. 增加组件动态添加或移除自定义样式的API方法； 3. 修复部分bug。
2025-10-31 08:41:49 +08:00 · 2022-07-06 15:31:37 +08:00
parent 44b2423eb1
commit ea82b92682
11 changed files with 135 additions and 15 deletions
--- 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 {
--- 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() {
+      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]);
+        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 ------------------//

  }
--- 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 @@
        <div class="upload-file-list">
          <span class="upload-file-name" :title="file.name">{{file.name}}</span>
          <a :href="file.url" download="">
-            <span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
+            <span class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')">
              <svg-icon icon-class="el-download" />
            </span></a>
-          <span class="file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+          <span class="file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
            @click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
        </div>
      </template>
--- 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,
--- 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
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onAppendButtonClick" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onAppendButtonClick', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onAppendButtonClick-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- 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',
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -46,12 +46,12 @@
    <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="drag-dialog small-padding-dialog" width="75%"
+                 :destroy-on-close="true" :append-to-body="true" custom-class="drag-dialog small-padding-dialog" width="75%"
                 :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
        <div>
          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
            <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
-                         :option-data="testOptionData"
+                         :option-data="testOptionData"  @myEmitTest="onMyEmitTest"
                         @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
                         @formChange="handleFormChange">
            </VFormRender>
@@ -667,6 +667,10 @@
        console.log('test', button)
      },

+      onMyEmitTest(aaa) {
+        console.log('-----', aaa)
+      },
+
      findWidgetById(wId) {
        let foundW = null
        traverseAllWidgets(this.designer.widgetList, (w) => {
--- 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: '',
    },
  },

--- 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 ------------------//

  },
--- 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)
      },
--- 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)
    }
  })
 }