为v-form-render的form-json属性增加默认值。

src/components/form-designer/designer.js

@@ -6,30 +6,13 @@
  * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
  */
 
-import {deepClone, generateId, overwriteObj} from "@/utils/util"
+import {deepClone, generateId, getDefaultFormConfig, overwriteObj} from "@/utils/util"
 import {containers, advancedFields, basicFields, customFields} from "@/components/form-designer/widget-panel/widgetsConfig.js"
 import {VARIANT_FORM_VERSION} from "@/utils/config"
 import eventBus from "@/utils/event-bus"
 
 export function createDesigner(vueInstance) {
-  let defaultFormConfig = {
+  let defaultFormConfig = deepClone( getDefaultFormConfig() )
-    modelName: 'formData',
-    refName: 'vForm',
-    rulesName: 'rules',
-    labelWidth: 80,
-    labelPosition: 'left',
-    size: '',
-    labelAlign: 'label-left-align',
-    cssCode: '',
-    customClass: '',
-    functions: '',  //全局函数
-    layoutType: 'PC',
-    jsonVersion: 3,
-
-    onFormCreated: '',
-    onFormMounted: '',
-    onFormDataChange: '',
-  }
 
   return {
     widgetList: [],

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

@@ -1,5 +1,5 @@
 <template>
-  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState" :display-style="field.options.displayStyle"
                      :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-button ref="fieldEditor" :type="field.options.type" :size="widgetSize"

src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}" :style="{display: displayStyle}">
-    <div class="static-content-item" v-show="!field.options.hidden || (designState === true)"
+    <div class="static-content-item" v-show="!field.options.hidden || (designState === true)" :style="{display: displayStyle}"
          :class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
       <slot></slot>
     </div>
@@ -46,6 +46,11 @@
         default: false
       },
 
+      displayStyle: {
+        type: String,
+        default: 'block'
+      },
+
       subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
         type: Number,
         default: -1

src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue

@@ -31,7 +31,8 @@
     data() {
       return {
         uploadPictureTypes: [
-          {value: 'jpeg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
+          {value: 'jpg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
+          {value: 'jpeg', label: 'jpeg'},
           {value: 'png', label: 'png'},
           {value: 'gif', label: 'gif'},
         ],

src/components/form-designer/widget-panel/widgetsConfig.js

@@ -702,6 +702,7 @@ export const basicFields = [
       label: '',
       columnWidth: '200px',
       size: '',
+      displayStyle: 'block',
       disabled: false,
       hidden: false,
       type: '',
@@ -765,7 +766,7 @@ export const advancedFields = [
       showFileList: true,
       limit: 3,
       fileMaxSize: 5, //MB
-      fileTypes: ['jpeg', 'png'],
+      fileTypes: ['jpg', 'jpeg', 'png'],
       //headers: [],
       //-------------------
       customClass: '',  //自定义css类名

src/components/form-render/index.vue

@@ -43,9 +43,9 @@
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
   import {
     generateId, deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml, getAllContainerWidgets,
-    getAllFieldWidgets, traverseFieldWidgets} from "@/utils/util"
+    getAllFieldWidgets, traverseFieldWidgets, buildDefaultFormJson
+  } from "@/utils/util"
   import i18n, { changeLocale } from "@/utils/i18n"
-  import eventBus from "@/utils/event-bus"
 
   export default {
     name: "VFormRender",
@@ -57,9 +57,12 @@
       ...FieldComponents,
     },
     props: {
-      formJson: Object, //prop传入的表单JSON配置
+      formJson: { //prop传入的表单JSON配置
+        type: Object,
+        default: () => buildDefaultFormJson()
+      },
       formData: { //prop传入的表单数据
-        Object,
+        type: Object,
         default: () => {}
       },
       optionData: { //prop传入的选项数据

src/utils/util.js

@@ -321,3 +321,31 @@ export function getQueryParam(variable) {
 
   return undefined;
 }
+
+export function getDefaultFormConfig() {
+  return {
+    modelName: 'formData',
+    refName: 'vForm',
+    rulesName: 'rules',
+    labelWidth: 80,
+    labelPosition: 'left',
+    size: '',
+    labelAlign: 'label-left-align',
+    cssCode: '',
+    customClass: '',
+    functions: '',  //全局函数
+    layoutType: 'PC',
+    jsonVersion: 3,
+
+    onFormCreated: '',
+    onFormMounted: '',
+    onFormDataChange: '',
+  }
+}
+
+export function buildDefaultFormJson() {
+  return {
+    widgetList: [],
+    formConfig: deepClone( getDefaultFormConfig() )
+  }
+}