修复工具按钮栏宽度自适应问题；修复组件列宽属性不能正常显隐问题；按钮组件新增显示样式设置；静态文字组件新增字体大小设置。

src/components/form-designer/form-widget/container-widget/containerMixin.js

@@ -15,6 +15,7 @@ export default {
       }
 
       this.designer.emitHistoryChange()
+      this.designer.emitEvent('field-selected', this.widget)
     },
 
     onContainerDragUpdate() {

src/components/form-designer/form-widget/container-widget/grid-col-widget.vue

@@ -197,6 +197,7 @@
         }
 
         this.designer.emitHistoryChange()
+        this.designer.emitEvent('field-selected', this.widget)
       },
 
       onGridDragUpdate() {

src/components/form-designer/form-widget/container-widget/table-cell-widget.vue

@@ -160,6 +160,7 @@
         }
 
         this.designer.emitHistoryChange()
+        this.designer.emitEvent('field-selected', this.widget)
       },
 
       onTableDragUpdate() {

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="field.options.size"

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

@@ -84,7 +84,7 @@ export default {
 
     initEventHandler() {
       this.$on('setFormData', function (newFormData) {
-        console.log('formModel of globalModel----------', this.globalModel.formModel)
+        //console.log('formModel of globalModel----------', this.globalModel.formModel)
         if (!this.subFormItemFlag) {
           this.setValue(newFormData[this.field.options.name])
         }

src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue

@@ -139,7 +139,7 @@
         }
         fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
         if (!fileSizeCheckResult) {
-          this.$message.error(this.$('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
+          this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
           return false;
         }
 

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>
@@ -42,6 +42,11 @@
         default: false
       },
 
+      displayStyle: {
+        type: String,
+        default: 'block'
+      },
+
       subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
         type: Number,
         default: -1

src/components/form-designer/form-widget/field-widget/static-text-widget.vue

@@ -2,7 +2,8 @@
   <static-content-wrapper :designer="designer" :field="field" :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">
-    <div ref="fieldEditor">{{field.options.textContent}}</div>
+    <div ref="fieldEditor" :style="!!field.options.fontSize ? `font-size: ${field.options.fontSize};`: ''">
+      {{field.options.textContent}}</div>
   </static-content-wrapper>
 </template>
 

src/components/form-designer/form-widget/index.vue

@@ -144,6 +144,7 @@
         }
 
         this.designer.emitHistoryChange()
+        this.designer.emitEvent('field-selected', null)
       },
 
       onDragUpdate() {  /* 在VueDraggable内拖拽组件发生位置变化时会触发update，未发生组件位置变化不会触发！！ */

src/components/form-designer/setting-panel/index.vue

@@ -114,6 +114,11 @@
       selectedWidget: Object,
       formConfig: Object,
     },
+    provide() {
+      return {
+        isSubFormChildWidget: () => this.subFormChildWidgetFlag,
+      }
+    },
     inject: ['getDesignerConfig'],
     data() {
       return {
@@ -181,6 +186,12 @@
       this.designer.handleEvent('form-css-updated', (cssClassList) => {
         this.designer.setCssClassList(cssClassList)
       })
+
+      //监听字段组件选中事件
+      this.designer.handleEvent('field-selected', (parentWidget) => {
+        this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
+        //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
+      })
     },
     mounted() {
       if (!this.designer.selectedWidget) {

src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!subFormChildWidgetFlag">
+    <el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!isSubFormChildWidget()">
       <el-input type="text" v-model="optionModel.columnWidth"></el-input>
     </el-form-item>
   </div>
@@ -17,21 +17,7 @@
       selectedWidget: Object,
       optionModel: Object,
     },
-    data() {
+    inject: ['isSubFormChildWidget'],
-      return {
-        //subFormChildWidgetFlag: false,
-        subFormChildWidgetFlag: true,
-      }
-    },
-    created() {
-
-    },
-    mounted() {
-      this.designer.handleEvent('field-selected', (parentWidget) => {
-        this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
-        //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
-      })
-    }
   }
 </script>
 

src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.fontSize')">
+    <el-input v-model="optionModel.fontSize"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "fontSize-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/propertyRegister.js

@@ -32,6 +32,7 @@ const COMMON_PROPERTIES = {
   'editable'          :            'editable-editor',
   'showPassword'      :            'showPassword-editor',
   'textContent'       :            'textContent-editor',
+  'fontSize'          :            'fontSize-editor',
   'htmlContent'       :            'htmlContent-editor',
   'format'            :            'format-editor',
   'valueFormat'       :            'valueFormat-editor',

src/components/form-designer/toolbar-panel/index.vue

@@ -23,22 +23,24 @@
                icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
     </el-drawer>
 
-    <div class="right-toolbar">
+    <div class="right-toolbar" :style="{width: toolBarWidth + 'px'}">
-      <el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
+      <div class="right-toolbar-con">
-        <i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
+        <el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
-      <el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
+          <i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
-        <i class="el-icon-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
+        <el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
-      <el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
+          <i class="el-icon-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
-        {{i18nt('designer.toolbar.importJson')}}</el-button>
+        <el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
-      <el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
+          {{i18nt('designer.toolbar.importJson')}}</el-button>
-        {{i18nt('designer.toolbar.exportJson')}}</el-button>
+        <el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
-      <el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
+          {{i18nt('designer.toolbar.exportJson')}}</el-button>
-        {{i18nt('designer.toolbar.exportCode')}}</el-button>
+        <el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
-      <el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
+          {{i18nt('designer.toolbar.exportCode')}}</el-button>
-        <svg-icon icon-class="vue-sfc" />{{i18nt('designer.toolbar.generateSFC')}}</el-button>
+        <el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
-      <template v-for="(idx, slotName) in $slots">
+          <svg-icon icon-class="vue-sfc" />{{i18nt('designer.toolbar.generateSFC')}}</el-button>
-        <slot :name="slotName"></slot>
+        <template v-for="(idx, slotName) in $slots">
-      </template>
+          <slot :name="slotName"></slot>
+        </template>
+      </div>
     </div>
 
     <el-dialog :title="i18nt('designer.toolbar.preview')" :visible.sync="showPreviewDialogFlag" v-if="showPreviewDialogFlag"
@@ -165,8 +167,8 @@
     copyToClipboard,
     generateId,
     getQueryParam,
-    traverseAllWidgets
+    traverseAllWidgets, addWindowResizeHandler
-  } from "@/utils/util";
+  } from "@/utils/util"
   import i18n from '@/utils/i18n'
   import {generateCode} from "@/utils/code-generator";
   import {genSFC} from "@/utils/sfc-generator";
@@ -190,6 +192,7 @@
       return {
         designerConfig: this.getDesignerConfig(),
 
+        toolBarWidth: 420,
         showPreviewDialogFlag: false,
         showImportJsonDialogFlag: false,
         showExportJsonDialogFlag: false,
@@ -267,6 +270,16 @@
       },
 
 
+    },
+    mounted() {
+      let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
+      this.toolBarWidth = newTBWidth >= 420 ? 420 : (newTBWidth <= 300 ? 300 : newTBWidth)
+      addWindowResizeHandler(() => {
+        this.$nextTick(() => {
+          let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80
+          this.toolBarWidth = newTBWidth2 >= 420 ? 420 : (newTBWidth2 <= 300 ? 300 : newTBWidth2)
+        })
+      })
     },
     methods: {
       showToolButton(configName) {
@@ -613,7 +626,8 @@
 
 <style lang="scss" scoped>
   div.toolbar-container {
-    min-width: 728px;  /* 解决工具按钮栏换行的问题！！ */
+    //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
+    /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
   }
 
   .left-toolbar {
@@ -623,6 +637,14 @@
 
   .right-toolbar {
     float: right;
+    //width: 420px;
+    text-align: right;
+    overflow: hidden;
+
+    .right-toolbar-con {
+      text-align: left;
+      width: 600px;
+    }
 
     ::v-deep .el-button--text {
       font-size: 14px !important;

src/components/form-designer/widget-panel/index.vue

@@ -61,8 +61,8 @@
         <template v-for="(ft, idx) in formTemplates">
           <el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
             <el-popover placement="right" trigger="hover">
-              <img slot="reference" :src="ft.imgUrl" style="width: 200px">
+              <img slot="reference" :src="ftImages[idx].imgUrl" style="width: 200px">
-              <img :src="ft.imgUrl" style="height: 600px;width: 720px">
+              <img :src="ftImages[idx].imgUrl" style="height: 600px;width: 720px">
             </el-popover>
             <div class="bottom clear-fix">
               <span class="ft-title">#{{idx+1}} {{ft.title}}</span>

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

@@ -39,20 +39,6 @@ export const containers = [
     }
   },
 
-  /*
-  {
-    type: 'section',
-    category: 'container',
-    icon: 'section',
-    widgetList: [],
-    options: {
-      name: '',
-      hidden: false,
-      customClass: '',  //自定义css类名
-    }
-  },
-  */
-
   {
     type: 'grid-col',
     category: 'container',
@@ -665,6 +651,7 @@ export const basicFields = [
       columnWidth: '200px',
       hidden: false,
       textContent: 'static text',
+      fontSize: '13px',
       //-------------------
       customClass: '',  //自定义css类名
       //-------------------
@@ -699,6 +686,7 @@ export const basicFields = [
       label: '',
       columnWidth: '200px',
       size: '',
+      displayStyle: 'block',
       disabled: false,
       hidden: false,
       type: '',
@@ -748,6 +736,7 @@ export const advancedFields = [
       label: '',
       labelWidth: null,
       labelHidden: false,
+      columnWidth: '200px',
       disabled: false,
       hidden: false,
       required: false,
@@ -790,6 +779,7 @@ export const advancedFields = [
       label: '',
       labelWidth: null,
       labelHidden: false,
+      columnWidth: '200px',
       disabled: false,
       hidden: false,
       required: false,
@@ -832,6 +822,7 @@ export const advancedFields = [
       placeholder: '',
       labelWidth: null,
       labelHidden: false,
+      columnWidth: '200px',
       disabled: false,
       hidden: false,
       required: false,
@@ -865,6 +856,7 @@ export const advancedFields = [
       size: '',
       labelWidth: null,
       labelHidden: false,
+      columnWidth: '200px',
       disabled: false,
       hidden: false,
       clearable: true,

src/lang/en-US.js

@@ -177,6 +177,7 @@ export default {
       endPlaceholder: 'End Placeholder',
       widgetColumnWidth: 'Width',
       widgetSize: 'Size',
+      fontSize: 'Font Size',
       showStops: 'Show Stops',
       displayStyle: 'Display Style',
       inlineLayout: 'inline',

src/lang/zh-CN.js

@@ -177,6 +177,7 @@ export default {
       endPlaceholder: '截止占位内容',
       widgetColumnWidth: '组件列宽',
       widgetSize: '组件大小',
+      fontSize: '字体大小',
       showStops: '显示间断点',
       displayStyle: '显示样式',
       inlineLayout: '行内',