Vue3新版本和Vite新版本疑似冲突，原因待查，暂时使用指定版本。

package.json

@@ -18,7 +18,7 @@
     "file-saver": "^2.0.5",
     "mitt": "^3.0.0",
     "sortablejs": "1.14.0",
-    "vue": "^3.0.0",
+    "vue": "3.2.26",
     "vue3-quill": "^0.2.6"
   },
   "devDependencies": {
@@ -32,7 +32,7 @@
     "rollup-plugin-external-globals": "^0.6.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "sass": "^1.45.0",
-    "vite": "^2.7.2",
+    "vite": "2.7.3",
     "vite-plugin-svg-icons": "^1.0.5"
   },
   "browserslist": [

src/components/code-editor/index.vue

@@ -123,6 +123,10 @@
         return this.aceEditor.getSession().getAnnotations()
       },
 
+      setValue(newValue) {
+        this.aceEditor.getSession().setValue(newValue)
+      },
+
     }
   }
 </script>

src/components/form-designer/designer.js

@@ -22,7 +22,7 @@ export function createDesigner(vueInstance) {
     labelAlign: 'label-left-align',
     cssCode: '',
     customClass: '',
-    functions: '',
+    functions: '',  //全局函数
     layoutType: 'PC',
     jsonVersion: 3,
 
@@ -638,6 +638,33 @@ export function createDesigner(vueInstance) {
       return Object.keys(originalWidget.options).indexOf(configName) > -1
     },
 
+    upgradeWidgetConfig(oldWidget) {
+      let newWidget = null
+      if (!!oldWidget.category) {
+        newWidget = this.getContainerByType(oldWidget.type)
+      } else {
+        newWidget = this.getFieldWidgetByType(oldWidget.type)
+      }
+
+      if (!newWidget || !newWidget.options) {
+        return
+      }
+
+      Object.keys(newWidget.options).forEach(ck => {
+        if (!oldWidget.hasOwnProperty(ck)) {
+          oldWidget.options[ck] = deepClone(newWidget.options[ck])
+        }
+      })
+    },
+
+    upgradeFormConfig(oldFormConfig) {
+      Object.keys(this.formConfig).forEach(fc => {
+        if (!oldFormConfig.hasOwnProperty(fc)) {
+          oldFormConfig[fc] = deepClone(this.formConfig[fc])
+        }
+      })
+    },
+
     cloneGridCol(widget, parentWidget) {
       let newGridCol = deepClone(this.getContainerByType('grid-col'))
       newGridCol.options.span = widget.options.span

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

@@ -543,6 +543,14 @@ export default {
       this.enableOptionOfList(this.field.options.optionItems, optionValue)
     },
 
+    /**
+     * 返回选择项
+     * @returns {*}
+     */
+    getOptionItems() {
+      return this.field.options.optionItems
+    },
+
     setUploadHeader(name, value) {
       this.uploadHeaders[name] = value
     },

src/components/form-designer/index.vue

@@ -69,7 +69,7 @@
   import VFormWidget from './form-widget/index'
   import {createDesigner} from "@/components/form-designer/designer"
   import {addWindowResizeHandler, deepClone, getQueryParam, getAllContainerWidgets,
-    getAllFieldWidgets} from "@/utils/util"
+    getAllFieldWidgets, traverseAllWidgets} from "@/utils/util"
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
   import i18n, { changeLocale } from "@/utils/i18n"
   import axios from 'axios'
@@ -170,7 +170,6 @@
       })
 
       this.loadCase()
-
       this.loadFieldListFromServer()
     },
     methods: {
@@ -364,6 +363,24 @@
         return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
       },
 
+      /**
+       * 升级表单json，以补充最新的组件属性
+       * @param formJson
+       */
+      upgradeFormJson(formJson) {
+        if (!formJson.widgetList || !formJson.formConfig) {
+          this.$message.error('Invalid form json!')
+          return
+        }
+
+        traverseAllWidgets(formJson.widgetList, (w) => {
+          this.designer.upgradeWidgetConfig(w)
+        })
+        this.designer.upgradeFormConfig(formJson.formConfig)
+
+        return formJson
+      },
+
       getWidgetRef(widgetName, showError = false) {
         return this.$refs['formRef'].getWidgetRef(widgetName, showError)
       },
@@ -382,7 +399,7 @@
   .el-container.main-container {
     background: #fff;
 
-    ::v-deep aside {  /* 防止aside样式被外部样式覆盖！！ */
+    :deep(aside) {  /* 防止aside样式被外部样式覆盖！！ */
       margin: 0;
       padding: 0;
       background: inherit;

src/components/form-render/container-item/grid-col-item.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script>
+  import emitter from '@/utils/emitter'
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-  import emitter from "@/utils/emitter";
 
   export default {
     name: "GridColItem",

src/components/form-render/container-item/table-cell-item.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script>
+  import emitter from '@/utils/emitter'
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-  import emitter from "@/utils/emitter";
 
   export default {
     name: "TableCellItem",

src/extension/samples/card/card-item.vue

@@ -6,7 +6,7 @@
       <template #header>
         <div class="clear-fix">
           <span>{{widget.options.label}}</span>
-          <i v-if="widget.options.showFold" class="float-right"  @click="toggleCard">
+          <i v-if="widget.options.showFold" class="float-right" @click="toggleCard">
             <template v-if="!widget.options.folded">
               <el-icon><ArrowDown /></el-icon>
             </template>