修复日期组件、时间组件、富文本组件的Vue3兼容问题。

package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vueup/vue-quill": "^1.0.0-beta.7",
     "axios": "^0.24.0",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",

src/components/form-designer/form-widget/field-widget/date-range-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-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
+    <div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
+      <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
                       :disabled="field.options.disabled" :readonly="field.options.readonly"
                       :size="field.options.size"
                       :clearable="field.options.clearable" :editable="field.options.editable"
@@ -12,6 +13,7 @@
                       @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                       @change="handleChangeEvent">
       </el-date-picker>
+    </div>
   </form-item-wrapper>
 </template>
 
@@ -101,4 +103,12 @@
     width: 100% !important;
   }
 
+  .auto-full-width {
+    width: 100%;
+
+    :deep(.el-range-editor) {
+      width: 100% !important;
+    }
+  }
+
 </style>

src/components/form-designer/form-widget/field-widget/date-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-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
+    <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
+                    :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
                     :readonly="field.options.readonly" :disabled="field.options.disabled"
                     :size="field.options.size"
                     :clearable="field.options.clearable" :editable="field.options.editable"

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

@@ -18,7 +18,7 @@
               @blur="handleRichEditorBlurEvent"
               @focus="handleRichEditorFocusEvent"
               @change="handleRichEditorChangeEvent"
-              style="height: 200px;"></quill-editor>
+              :style="!!field.options.contentHeight ? `height: ${field.options.contentHeight};`: ''"></quill-editor>
     </div>
 
   </form-item-wrapper>
@@ -32,11 +32,6 @@
   import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
 
   import { Quill, quillEditor } from 'vue3-quill'
-  //const modules = import.meta.glob('../../../../../node_modules/vue3-quill/src/index.js')
-  //console.log('test=====', modules)
-
-  // import { QuillEditor } from '@vueup/vue-quill'
-  // import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
   export default {
     name: "rich-editor-widget",
@@ -75,8 +70,6 @@
       //   require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
       // }
       quillEditor,
-
-      // QuillEditor,
     },
     inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {

src/components/form-designer/form-widget/field-widget/time-range-widget.vue

@@ -2,7 +2,9 @@
   <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-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
+    <div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
+      <el-time-picker ref="fieldEditor" is-range v-model="fieldModel"
+                      :class="[!!field.options.autoFullWidth ? 'full-width-input' : '']"
                       :disabled="field.options.disabled" :readonly="field.options.readonly"
                       :size="field.options.size"
                       :clearable="field.options.clearable" :editable="field.options.editable"
@@ -12,6 +14,7 @@
                       @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                       @change="handleChangeEvent">
       </el-time-picker>
+    </div>
   </form-item-wrapper>
 </template>
 
@@ -101,4 +104,12 @@
     width: 100% !important;
   }
 
+  .auto-full-width {
+    width: 100%;
+
+    :deep(.el-range-editor) {
+      width: 100% !important;
+    }
+  }
+
 </style>

src/components/form-designer/form-widget/field-widget/time-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-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
+    <el-time-picker ref="fieldEditor" v-model="fieldModel"
+                    :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
                     :disabled="field.options.disabled" :readonly="field.options.readonly"
                     :size="field.options.size"
                     :clearable="field.options.clearable" :editable="field.options.editable"

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

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

src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue

@@ -1,6 +1,8 @@
 <template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
     <el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
     </el-color-picker>
+  </el-form-item>
 </template>
 
 <script>

src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue

@@ -1,7 +1,9 @@
 <template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
     <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
                     :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
     </el-date-picker>
+  </el-form-item>
 </template>
 
 <script>

src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue

@@ -2,8 +2,8 @@
   <el-form-item :label="i18nt('designer.setting.format')">
     <el-select v-model="optionModel.format" filterable allow-create>
       <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
-      <el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
+      <el-option label="YYYY/MM/DD" value="YYYY/MM/DD"></el-option>
-      <el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
+      <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日"></el-option>
       <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
       <el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option>
     </el-select>

src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue

@@ -1,7 +1,9 @@
 <template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
     <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
                     :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
     </el-date-picker>
+  </el-form-item>
 </template>
 
 <script>

src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue

@@ -2,8 +2,8 @@
   <el-form-item :label="i18nt('designer.setting.format')">
     <el-select v-model="optionModel.format" filterable allow-create>
       <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
-      <el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
+      <el-option label="YYYY/MM/DD" value="YYYY/MM/DD"></el-option>
-      <el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
+      <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日"></el-option>
       <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
       <el-option label="YYYY-MM-DD hh:mm:ss" value="YYYY-MM-DD hh:mm:ss"></el-option>
     </el-select>

src/components/form-designer/setting-panel/property-editor/field-rich-editor/rich-editor-contentHeight-editor.vue

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

src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue

@@ -1,7 +1,9 @@
 <template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
     <el-time-picker v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange"
                     :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
     </el-time-picker>
+  </el-form-item>
 </template>
 
 <script>

src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue

@@ -1,7 +1,9 @@
 <template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
     <el-time-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
                     :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
     </el-time-picker>
+  </el-form-item>
 </template>
 
 <script>

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

@@ -14,6 +14,7 @@ const COMMON_PROPERTIES = {
   'startPlaceholder'  :            'startPlaceholder-editor',
   'endPlaceholder'    :            'endPlaceholder-editor',
   'columnWidth'       :            'columnWidth-editor',
+  'autoFullWidth'     :            'autoFullWidth-editor',
   'size'              :            'size-editor',
   'showStops'         :            'showStops-editor',
   'displayStyle'      :            'displayStyle-editor',
@@ -50,6 +51,7 @@ const COMMON_PROPERTIES = {
   'limit'             :            'limit-editor',
   'fileMaxSize'       :            'fileMaxSize-editor',
   'fileTypes'         :            'fileTypes-editor',
+  'contentHeight'     :            'contentHeight-editor',
   'customClass'       :            'customClass-editor',
 
   //容器

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

@@ -374,6 +374,7 @@ export const basicFields = [
       placeholder: '',
       columnWidth: '200px',
       size: '',
+      autoFullWidth: true,
       labelWidth: null,
       labelHidden: false,
       readonly: false,
@@ -413,6 +414,7 @@ export const basicFields = [
       endPlaceholder: '',
       columnWidth: '200px',
       size: '',
+      autoFullWidth: true,
       labelWidth: null,
       labelHidden: false,
       readonly: false,
@@ -452,6 +454,7 @@ export const basicFields = [
       placeholder: '',
       columnWidth: '200px',
       size: '',
+      autoFullWidth: true,
       labelWidth: null,
       labelHidden: false,
       readonly: false,
@@ -493,6 +496,7 @@ export const basicFields = [
       endPlaceholder: '',
       columnWidth: '200px',
       size: '',
+      autoFullWidth: true,
       labelWidth: null,
       labelHidden: false,
       readonly: false,

src/lang/en-US.js

@@ -177,6 +177,7 @@ export default {
       endPlaceholder: 'End Placeholder',
       widgetColumnWidth: 'Width',
       widgetSize: 'Size',
+      autoFullWidth: 'Auto Full Width',
       showStops: 'Show Stops',
       displayStyle: 'Display Style',
       inlineLayout: 'inline',
@@ -278,6 +279,7 @@ export default {
       vertical: 'Vertical',
       showBlankRow: 'Show Blank Row',
       showRowNumber: 'Show Row Number',
+      contentHeight: 'Content Area Height',
 
       insertColumnToLeft: 'insert column to left',
       insertColumnToRight: 'insert column to right',

src/lang/zh-CN.js

@@ -177,6 +177,7 @@ export default {
       endPlaceholder: '截止占位内容',
       widgetColumnWidth: '组件列宽',
       widgetSize: '组件大小',
+      autoFullWidth: '自动拉伸宽度',
       showStops: '显示间断点',
       displayStyle: '显示样式',
       inlineLayout: '行内',
@@ -278,6 +279,7 @@ export default {
       vertical: '是否竖向显示',
       showBlankRow: '默认显示新行',
       showRowNumber: '显示行号',
+      contentHeight: '内容区高度',
 
       insertColumnToLeft: '插入左侧列',
       insertColumnToRight: '插入右侧列',

src/styles/global.scss

@@ -58,6 +58,10 @@ input[type="password"]::-ms-reveal {  /* 隐藏IE/Edge原生的密码查看按
   display: none;
 }
 
+.auto-full-width.el-date-editor.el-input, .auto-full-width.el-date-editor.el-input__inner {
+  width: 100% !important;
+}
+
 /* 滚动条样式 begin */
 ::-webkit-scrollbar {
   width: 8px;

src/utils/i18n.js

@@ -1,5 +1,4 @@
 import { createI18n } from 'vue-i18n'		//引入vue-i18n组件
-//import { vfApp } from '@/utils/create-app'
 
 import enLocaleElement from "element-plus/lib/locale/lang/en";
 import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn";
@@ -37,25 +36,19 @@ const langResources = {
 //locale.i18n((key, value) => i18n.t(key, value))
 
 export const changeLocale = function(langName) {
-  //console.log('11111', i18n.locale )
+  //i18n.locale = langName  //此行切换语言无效！！
-  //i18n.locale = langName
-
   i18n.global.locale = langName
-  //console.log('22222', i18n.locale )
   localStorage.setItem('v_form_locale', langName)
 }
 
 export const translate = function(key) {
   return i18n.global.t(key, i18n.locale)
-
-  //return key
 }
 
 const i18n = createI18n({
   locale: localStorage.getItem('v_form_locale') || 'zh-CN',
   messages: langResources
 })
-//vfApp.use(i18n);
 
 export const installI18n = (app) => {
   app.use(i18n)
@@ -65,15 +58,11 @@ export default {
   methods: {
     i18nt(key) {
       return i18n.global.t(key, i18n.locale)
-
-      //return key
     },
 
     /* 如果key1不存在，则查找key2 */
     i18n2t(key1, key2) {
       return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale)
-
-      //return key1
     },
 
   }