From f54dada718c07c0b850f2881366668207d75d802 Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Wed, 1 Mar 2023 11:22:46 +0800
Subject: [PATCH] =?UTF-8?q?2023..03.31=E6=9B=B4=E6=96=B0=EF=BC=9A=201.=20?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=A4=E4=B8=AA=E5=B1=9E=E6=80=A7=EF=BC=9B=202.=20?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=8D=95=E5=85=83=E6=A0=BC=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=8D=A2=E8=A1=8C=E5=B1=9E=E6=80=A7=EF=BC=9B=203.=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=B8=8B=E6=8B=89=E7=BB=84=E4=BB=B6=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=90=8E=E4=B8=8D=E8=83=BD=E6=98=BE=E7=A4=BA=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84bug=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  7 ++--
 .../container-widget/table-cell-widget.vue    |  2 +-
 .../field-widget/select-widget.vue            | 10 +++++-
 .../field-widget/static-text-widget.vue       |  3 +-
 .../container-table-cell/wordBreak-editor.vue | 23 ++++++++++++
 .../field-static-text/fontSize-editor.vue     | 23 ++++++++++++
 .../field-static-text/preWrap-editor.vue      | 23 ++++++++++++
 .../field-static-text/textContent-editor.vue  |  2 +-
 .../property-editor/textAlign-editor.vue      | 35 +++++++++++++++++++
 .../setting-panel/propertyRegister.js         |  4 +++
 .../widget-panel/widgetsConfig.js             |  4 +++
 .../container-item/table-cell-item.vue        |  2 +-
 src/lang/en-US.js                             |  4 +++
 src/lang/zh-CN.js                             |  4 +++
 14 files changed, 139 insertions(+), 7 deletions(-)
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue

diff --git a/README.md b/README.md
index 206cd53..59655bd 100644
--- a/README.md
+++ b/README.md
@@ -8,8 +8,11 @@
 ### 立即体验VForm 3
 [在线Demo](http://120.92.142.115:81/vform3/)
  
- ### 立即体验VForm 3 Pro高级版（提供商业支持）
- [VForm 3 Pro Demo](https://vform666.com/pages/pro/)
+### 立即体验VForm 3 Pro高级版（提供商业支持）
+[VForm 3 Pro Demo](https://vform666.com/pages/pro/)
+
+### 视频教程集合：
+[B站观看](https://space.bilibili.com/626932375)
  
 ### 适合Vue 2的版本看这里
 [点此查看](https://gitee.com/vdpadmin/variant-form)
diff --git a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
index 4a899ac..94bf0d2 100644
--- a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
@@ -1,6 +1,6 @@
 <template>
   <td class="table-cell" :class="[selected ? 'selected' : '', customClass]"
-      :style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || ''}"
+      :style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}"
       :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
       @click.stop="selectWidget(widget)">
     <draggable :list="widget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
diff --git a/src/components/form-designer/form-widget/field-widget/select-widget.vue b/src/components/form-designer/form-widget/field-widget/select-widget.vue
index 547c99c..c8bbcc8 100644
--- a/src/components/form-designer/form-widget/field-widget/select-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/select-widget.vue
@@ -12,7 +12,7 @@
                :automatic-dropdown="field.options.automaticDropdown"
                :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
                :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-               :remote="field.options.remote" :remote-method="remoteQuery"
+               :remote="field.options.remote" :remote-method="remoteMethod"
                @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                @change="handleChangeEvent">
       <el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
@@ -73,6 +73,14 @@
         return (!!this.field.options.filterable && !!this.field.options.allowCreate)
       },
 
+      remoteMethod() {
+        if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
+          return this.remoteQuery
+        } else {
+          return undefined
+        }
+      },
+
     },
     beforeCreate() {
       /* 这里不能访问方法和属性！！ */
diff --git a/src/components/form-designer/form-widget/field-widget/static-text-widget.vue b/src/components/form-designer/form-widget/field-widget/static-text-widget.vue
index 02a8bca..bd1173b 100644
--- a/src/components/form-designer/form-widget/field-widget/static-text-widget.vue
+++ b/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};`: ''">
+      <pre :style="{'white-space': !!field.options.preWrap ? 'pre-wrap' : 'pre', 'text-align': !!field.options.textAlign ? field.options.textAlign : 'left'}">{{field.options.textContent}}</pre></div>
   </static-content-wrapper>
 </template>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue
new file mode 100644
index 0000000..0417fee
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.wordBreak')">
+    <el-switch v-model="optionModel.wordBreak"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "table-cell-wordBreak-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue
new file mode 100644
index 0000000..b2c1758
--- /dev/null
+++ b/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>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue
new file mode 100644
index 0000000..61ee8a3
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.preWrap')">
+    <el-switch v-model="optionModel.preWrap"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "static-text-preWrap-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
index 1056131..5c6e145 100644
--- a/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
@@ -1,6 +1,6 @@
 <template>
   <el-form-item :label="i18nt('designer.setting.textContent')">
-    <el-input v-model="optionModel.textContent"></el-input>
+    <el-input v-model="optionModel.textContent" type="textarea" :rows="3"></el-input>
   </el-form-item>
 </template>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue b/src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue
new file mode 100644
index 0000000..0d49890
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.textAlign')" v-if="(selectedWidget.type === 'static-text')">
+    <el-radio-group v-model="optionModel.textAlign" class="radio-group-custom">
+      <el-radio-button label="left">
+        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+      <el-radio-button label="center">
+        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+      <el-radio-button label="right">
+        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "textAlign-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>
diff --git a/src/components/form-designer/setting-panel/propertyRegister.js b/src/components/form-designer/setting-panel/propertyRegister.js
index af71756..0d98156 100644
--- a/src/components/form-designer/setting-panel/propertyRegister.js
+++ b/src/components/form-designer/setting-panel/propertyRegister.js
@@ -34,6 +34,9 @@ const COMMON_PROPERTIES = {
   'editable'          :            'editable-editor',
   'showPassword'      :            'showPassword-editor',
   'textContent'       :            'textContent-editor',
+  'textAlign'         :            'textAlign-editor',
+  'fontSize'          :            'fontSize-editor',
+  'preWrap'           :            'preWrap-editor',
   'htmlContent'       :            'htmlContent-editor',
   'format'            :            'format-editor',
   'valueFormat'       :            'valueFormat-editor',
@@ -63,6 +66,7 @@ const COMMON_PROPERTIES = {
   'cellWidth'          :            'cellWidth-editor',
   'cellHeight'         :            'cellHeight-editor',
   'colHeight'          :            'colHeight-editor',
+  'wordBreak'          :            'wordBreak-editor',
   'gutter'             :            'gutter-editor',
   'responsive'         :            'responsive-editor',
   'span'               :            'span-editor',
diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js
index 5e77076..150514c 100644
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/src/components/form-designer/widget-panel/widgetsConfig.js
@@ -73,6 +73,7 @@ export const containers = [
       cellHeight: '',
       colspan: 1,
       rowspan: 1,
+      wordBreak: false,  //是否自动换行
       customClass: '',  //自定义css类名
     }
   },
@@ -669,6 +670,9 @@ export const basicFields = [
       columnWidth: '200px',
       hidden: false,
       textContent: 'static text',
+      textAlign: 'left',
+      fontSize: '13px',
+      preWrap: false,  //是否自动换行
       //-------------------
       customClass: '',  //自定义css类名
       //-------------------
diff --git a/src/components/form-render/container-item/table-cell-item.vue b/src/components/form-render/container-item/table-cell-item.vue
index 3520cac..7c2aa7b 100644
--- a/src/components/form-render/container-item/table-cell-item.vue
+++ b/src/components/form-render/container-item/table-cell-item.vue
@@ -1,7 +1,7 @@
 <template>
   <td class="table-cell" :class="[customClass]"
       :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
-      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
+      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}">
     <template v-for="(subWidget, swIdx) in widget.widgetList">
       <template v-if="'container' === subWidget.category">
         <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
diff --git a/src/lang/en-US.js b/src/lang/en-US.js
index 3c0e131..3a4744d 100644
--- a/src/lang/en-US.js
+++ b/src/lang/en-US.js
@@ -179,6 +179,8 @@ export default {
       endPlaceholder: 'End Placeholder',
       widgetColumnWidth: 'Width',
       widgetSize: 'Size',
+      fontSize: 'Font Size',
+      textAlign: 'Text Align',
       autoFullWidth: 'Auto Full Width',
       showStops: 'Show Stops',
       displayStyle: 'Display Style',
@@ -198,6 +200,7 @@ export default {
       disabled: 'Disabled',
       hidden: 'Hidden',
       textContent: 'Text',
+      preWrap: 'Line Wrap',
       htmlContent: 'HTML',
       clearable: 'Clearable',
       editable: 'Editable',
@@ -235,6 +238,7 @@ export default {
 
       cellWidth: 'Width',
       cellHeight: 'Height',
+      wordBreak: 'Line Wrap',
       gridColHeight: 'Height Of Col(px)',
       gutter: 'Gutter(px)',
       columnSetting: 'Cols Setting',
diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js
index 260a834..e59576a 100644
--- a/src/lang/zh-CN.js
+++ b/src/lang/zh-CN.js
@@ -179,6 +179,8 @@ export default {
       endPlaceholder: '截止占位内容',
       widgetColumnWidth: '组件列宽',
       widgetSize: '组件大小',
+      fontSize: '字体大小',
+      textAlign: '文字对齐',
       autoFullWidth: '自动拉伸宽度',
       showStops: '显示间断点',
       displayStyle: '显示样式',
@@ -198,6 +200,7 @@ export default {
       disabled: '禁用',
       hidden: '隐藏',
       textContent: '静态文字',
+      preWrap: '自动换行',
       htmlContent: 'HTML',
       clearable: '可清除',
       editable: '可输入',
@@ -235,6 +238,7 @@ export default {
 
       cellWidth: '宽度',
       cellHeight: '高度',
+      wordBreak: '文字自动换行',
       gridColHeight: '栅格列统一高度(px)',
       gutter: '栅格间隔(px)',
       columnSetting: '栅格属性设置',