1. 修复vite打包axios报错的bug；

2. 适配form、form-item的size属性。
2024-11-10 09:39:20 +08:00 · 2022-01-12 14:09:31 +08:00 · 2022-01-12 14:09:31 +08:00 · 9a2c6040c5
commit 9a2c6040c5
parent 1921746b8d
17 changed files with 27 additions and 28 deletions
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@ -7,7 +7,7 @@ export default {

  computed: {
    widgetSize() {
-      return this.field.options.size || 'medium'
+      return this.field.options.size || 'default'
    },

    subFormName() {
--- a/src/components/form-designer/form-widget/index.vue
+++ b/src/components/form-designer/form-widget/index.vue
@ -82,7 +82,7 @@
          return this.designer.formConfig.size
        }

-        return 'medium'
+        return 'default'
      },

      customClass() {
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@ -71,7 +71,7 @@
  import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util"
  import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
  import i18n, { changeLocale } from "@/utils/i18n"
-  import axios from "axios"
+  import axios from 'axios'

  export default {
    name: "VFormDesigner",
--- a/src/components/form-designer/setting-panel/form-setting.vue
+++ b/src/components/form-designer/setting-panel/form-setting.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <el-form :model="formConfig" size="mini" label-position="left" label-width="120px"
+    <el-form :model="formConfig" size="small" label-position="left" label-width="120px"
             class="setting-form" @submit.prevent>
      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
@ -158,9 +158,9 @@
        formSizes: [
          {label: 'default', value: ''},
          {label: 'large', value: 'large'},
-          {label: 'medium', value: 'medium'},
+          //{label: 'medium', value: 'medium'},
          {label: 'small', value: 'small'},
-          {label: 'mini', value: 'mini'},
+          //{label: 'mini', value: 'mini'},
        ],

        showEditFormCssDialogFlag: false,
--- a/src/components/form-designer/setting-panel/index.vue
+++ b/src/components/form-designer/setting-panel/index.vue
@ -5,7 +5,7 @@
        <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">

          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
+            <el-form :model="optionModel" size="small" label-position="left" label-width="120px" class="setting-form"
                     @submit.prevent>
              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
@ -34,7 +34,7 @@
          </template>

          <template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
+            <el-form :model="optionModel" size="small" label-position="left" label-width="120px" class="setting-form"
                     @submit.prevent>
              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
--- a/src/components/form-designer/setting-panel/option-items-setting.vue
+++ b/src/components/form-designer/setting-panel/option-items-setting.vue
@ -7,10 +7,10 @@
        <template #item="{ element: option, index: idx }">
          <li>
            <el-radio :label="option.value">
-              <el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
-              <el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
+              <el-input v-model="option.value" size="small" style="width: 100px"></el-input>
+              <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
              <i class="iconfont icon-drag drag-option"></i>
-              <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
+              <el-button circle plain size="small" type="danger" @click="deleteOption(option, idx)"
                         icon="el-icon-minus" class="col-delete-button"></el-button>
            </el-radio>
          </li>
@ -24,10 +24,10 @@
        <template #item="{ element: option, index: idx }">
          <li>
            <el-checkbox :label="option.value">
-              <el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
-              <el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
+              <el-input v-model="option.value" size="small" style="width: 100px"></el-input>
+              <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
              <i class="iconfont icon-drag drag-option"></i>
-              <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
+              <el-button circle plain size="small" type="danger" @click="deleteOption(option, idx)"
                         icon="el-icon-minus" class="col-delete-button"></el-button>
            </el-checkbox>
          </li>
--- a/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
@ -13,7 +13,7 @@
        <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
                         @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
                         class="cell-span-input"></el-input-number>
-        <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
+        <el-button circle plain size="small" type="danger" @click="deleteCol(selectedWidget, colIdx)"
                   icon="el-icon-minus" class="col-delete-button"></el-button>
      </li>
      <div>
--- a/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
@ -21,7 +21,7 @@
                         style="margin-right: 8px">{{i18nt('designer.setting.paneActive')}}</el-checkbox>
            <el-input type="text" v-model="tpItem.options.label" style="width: 155px"></el-input>
            <i class="iconfont icon-drag drag-option"></i>
-            <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
+            <el-button circle plain size="small" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
                       icon="el-icon-minus" class="col-delete-button"></el-button>
          </li>
        </template>
--- a/src/components/form-designer/setting-panel/property-editor/size-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/size-editor.vue
@ -24,9 +24,9 @@
        widgetSizes: [
          {label: 'default', value: ''},
          {label: 'large', value: 'large'},
-          {label: 'medium', value: 'medium'},
+          //{label: 'medium', value: 'medium'},
          {label: 'small', value: 'small'},
-          {label: 'mini', value: 'mini'},
+          //{label: 'mini', value: 'mini'},
        ],
      }
    }
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@ -193,7 +193,7 @@
  import {genSFC} from "@/utils/sfc-generator";
  import loadBeautifier from "@/utils/beautifierLoader";
  import { saveAs } from 'file-saver'
-  import axios from "axios"
+  import axios from 'axios'

  export default {
    name: "ToolbarPanel",
--- a/src/components/form-designer/widget-panel/index.vue
+++ b/src/components/form-designer/widget-panel/index.vue
@ -93,7 +93,7 @@
  import {formTemplates} from './templatesConfig'
  import {addWindowResizeHandler} from "@/utils/util"
  import i18n from "@/utils/i18n"
-  import axios from "axios"
+  import axios from 'axios'

  import ftImg1 from '@/assets/ft-images/t1.png'
  import ftImg2 from '@/assets/ft-images/t2.png'
--- a/src/components/form-render/container-item/sub-form-item.vue
+++ b/src/components/form-render/container-item/sub-form-item.vue
@ -6,7 +6,7 @@
      <el-row class="header-row">
        <div class="action-header-column">
          <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
-          <el-button :disabled="actionDisabled" round type="primary" size="mini" class="action-button" @click="addSubFormRow"
+          <el-button :disabled="actionDisabled" round type="primary" size="small" class="action-button" @click="addSubFormRow"
                     :title="i18nt('render.hint.subFormAddActionHint')">
            {{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
        </div>
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@ -123,7 +123,7 @@
          return this.formConfig.size
        }

-        return 'medium'
+        return 'default'
      },

      customClass() {
--- a/src/components/v-table/index.vue
+++ b/src/components/v-table/index.vue
@ -62,7 +62,7 @@
      },
      tableSize: {
        type: String,
-        default: 'medium'
+        default: 'default'
      },
    },
    methods: {
--- a/src/main.js
+++ b/src/main.js
@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import axios from "axios"
+import axios from 'axios'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
--- a/src/utils/sfc-generator.js
+++ b/src/utils/sfc-generator.js
@ -426,7 +426,7 @@ function genTemplate(formConfig, widgetList, vue3Flag = false) {

  const formTemplate =
 `  <el-form :model="${formConfig.modelName}" ref="${formConfig.refName}" :rules="${formConfig.rulesName}"
-    label-position="${formConfig.labelPosition}" label-width="${formConfig.labelWidth}px" size="${formConfig.size || 'medium'}"
+    label-position="${formConfig.labelPosition}" label-width="${formConfig.labelWidth}px" size="${formConfig.size || 'default'}"
    ${submitAttr}>
  ${!!childrenList ? childrenList.join('\n') : ''}
 </el-form>`
--- a/vite-lib.config.js
+++ b/vite-lib.config.js
@ -15,7 +15,8 @@ export default defineConfig({
    vueJsx({}),

    //解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!!
-    commonjs(),
+    commonjs({requireReturnsDefault: true}),  /* 配置requireReturnsDefault属性，
+    解决打包后引入VForm出现的"Axios is not a constructor"错！！ */

    //可视化Bundle
    visualizer(),
@ -38,8 +39,6 @@ export default defineConfig({

  optimizeDeps: {
    include: ['@/../lib/vuedraggable/dist/vuedraggable.umd.js', 'quill'],
-    exclude: ['axios'],
-    //include: ['quill']
  },

  css: {