3.0.0预览版代码首次上传。

src/components/form-designer/form-widget/field-widget/cascader-widget.vue

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

src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -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)

src/components/form-designer/form-widget/field-widget/input-widget.vue

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

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

@@ -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() {