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

2024-11-10 09:39:20 +08:00 · 2022-01-15 01:26:51 +08:00 · 2022-01-15 01:26:51 +08:00 · 54e11ab3b7
commit 54e11ab3b7
parent 15c20de9e5
21 changed files with 137 additions and 61 deletions
--- a/package.json
+++ b/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",
--- a/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
@ -2,16 +2,18 @@
  <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"
-                    :disabled="field.options.disabled" :readonly="field.options.readonly"
-                    :size="field.options.size"
-                    :clearable="field.options.clearable" :editable="field.options.editable"
-                    :format="field.options.format" :value-format="field.options.valueFormat"
-                    :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
-                    :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
-                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                    @change="handleChangeEvent">
-    </el-date-picker>
+    <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"
+                      :format="field.options.format" :value-format="field.options.valueFormat"
+                      :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
+                      :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
+                      @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>
--- a/src/components/form-designer/form-widget/field-widget/date-widget.vue
+++ b/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"
--- a/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
+++ b/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() {
--- a/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
@ -2,16 +2,19 @@
  <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"
-                    :disabled="field.options.disabled" :readonly="field.options.readonly"
-                    :size="field.options.size"
-                    :clearable="field.options.clearable" :editable="field.options.editable"
-                    :format="field.options.format" value-format="HH:mm:ss"
-                    :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
-                    :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
-                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                    @change="handleChangeEvent">
-    </el-time-picker>
+    <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"
+                      :format="field.options.format" value-format="HH:mm:ss"
+                      :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
+                      :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
+                      @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>
--- a/src/components/form-designer/form-widget/field-widget/time-widget.vue
+++ b/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"
--- a/src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue
@ -1,6 +1,8 @@
 <template>
-  <el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
-  </el-color-picker>
+  <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>
--- a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue
@ -1,7 +1,9 @@
 <template>
-  <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 :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>
--- a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue
@ -1,7 +1,9 @@
 <template>
-  <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 :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>
--- a/src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/property-editor/field-rich-editor/rich-editor-contentHeight-editor.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue
@ -1,7 +1,9 @@
 <template>
-  <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 :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>
--- a/src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue
@ -1,7 +1,9 @@
 <template>
-  <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 :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>
--- a/src/components/form-designer/setting-panel/propertyRegister.js
+++ b/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',

  //容器
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/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,
--- a/src/lang/en-US.js
+++ b/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',
--- a/src/lang/zh-CN.js
+++ b/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: '插入右侧列',
--- a/src/styles/global.scss
+++ b/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;
--- a/src/utils/i18n.js
+++ b/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
    },

  }