版本升级到3.0.2：修复部分bug。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "variant-form3",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "private": false,
   "scripts": {
     "serve": "vite",

src/components/form-designer/designer.js

@@ -148,6 +148,8 @@ export function createDesigner(vueInstance) {
     checkWidgetMove(evt) { /* Only field widget can be dragged into sub-form */
       if (!!evt.draggedContext && !!evt.draggedContext.element) {
         let wgCategory = evt.draggedContext.element.category
+        let wgType = evt.draggedContext.element.type + ''
+        //console.log('wgType======', wgType)
         if (!!evt.to) {
           if ((evt.to.className === 'sub-form-table') && (wgCategory === 'container')) {
             //this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
@@ -159,6 +161,22 @@ export function createDesigner(vueInstance) {
       return true
     },
 
+    checkFieldMove(evt) {
+      if (!!evt.draggedContext && !!evt.draggedContext.element) {
+        let wgCategory = evt.draggedContext.element.category
+        let wgType = evt.draggedContext.element.type + ''
+        //console.log('wgType======', wgType)
+        if (!!evt.to) {
+          if ((evt.to.className === 'sub-form-table') && (wgType === 'slot')) {
+            //this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
+            return false
+          }
+        }
+      }
+
+      return true
+    },
+
     /**
      * 追加表格新行
      * @param widget
@@ -696,6 +714,7 @@ export function createDesigner(vueInstance) {
       let newWidget = deepClone(origin)
       let tempId = generateId()
       newWidget.id = newWidget.type.replace(/-/g, '') + tempId
+      console.log('test id===', newWidget.id)
       newWidget.options.name = newWidget.id
       newWidget.options.label = newWidget.type.toLowerCase()
 

src/components/form-designer/setting-panel/option-items-setting.vue

@@ -61,7 +61,7 @@
         <template #footer>
           <div class="dialog-footer">
             <el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
-            <el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
+            <el-button size="large" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
           </div>
         </template>
       </el-dialog>
@@ -75,7 +75,7 @@
         <template #footer>
           <div class="dialog-footer">
             <el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
-            <el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
+            <el-button size="large" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
           </div>
         </template>
       </el-dialog>

src/components/form-designer/toolbar-panel/index.vue

@@ -13,7 +13,7 @@
         <el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
           {{i18nt('designer.toolbar.mobileLayout')}}</el-button>
       </el-button-group>
-      <el-button type="" style="margin-left: 20px" :title="i18nt('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer">
+      <el-button style="margin-left: 20px" :title="i18nt('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer">
         <svg-icon icon-class="node-tree" /></el-button>
     </div>
 
@@ -60,7 +60,7 @@
             <el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
             <el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
             <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
-            <el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
+            <el-button @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
           </div>
         </template>
       </el-dialog>
@@ -93,7 +93,7 @@
             <el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
               {{i18nt('designer.hint.copyJson')}}</el-button>
             <el-button @click="saveFormJson">{{i18nt('designer.hint.saveFormJson')}}</el-button>
-            <el-button type="" @click="showExportJsonDialogFlag = false">
+            <el-button @click="showExportJsonDialogFlag = false">
               {{i18nt('designer.hint.closePreview')}}</el-button>
           </div>
         </template>
@@ -120,7 +120,7 @@
               {{i18nt('designer.hint.copyHtmlCode')}}</el-button>
             <el-button @click="saveVueCode">{{i18nt('designer.hint.saveVueCode')}}</el-button>
             <el-button @click="saveHtmlCode">{{i18nt('designer.hint.saveHtmlCode')}}</el-button>
-            <el-button type="" @click="showExportCodeDialogFlag = false">
+            <el-button @click="showExportCodeDialogFlag = false">
               {{i18nt('designer.hint.closePreview')}}</el-button>
           </div>
         </template>
@@ -140,7 +140,7 @@
             <el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
               {{i18nt('designer.hint.copyFormData')}}</el-button>
             <el-button @click="saveFormData">{{i18nt('designer.hint.saveFormData')}}</el-button>
-            <el-button type="" @click="showFormDataDialogFlag = false">
+            <el-button @click="showFormDataDialogFlag = false">
               {{i18nt('designer.hint.closePreview')}}</el-button>
           </div>
         </template>
@@ -167,7 +167,7 @@
               {{i18nt('designer.hint.copyVue3SFC')}}</el-button>
             <el-button @click="saveV2SFC">{{i18nt('designer.hint.saveVue2SFC')}}</el-button>
             <el-button @click="saveV3SFC">{{i18nt('designer.hint.saveVue3SFC')}}</el-button>
-            <el-button type="" @click="showExportSFCDialogFlag = false">
+            <el-button @click="showExportSFCDialogFlag = false">
               {{i18nt('designer.hint.closePreview')}}</el-button>
           </div>
         </template>

src/components/form-designer/widget-panel/index.vue

@@ -23,6 +23,7 @@
 
         <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
           <draggable tag="ul" :list="basicFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <template #item="{ element: fld }">
               <li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
@@ -34,6 +35,7 @@
 
         <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
           <draggable tag="ul" :list="advancedFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <template #item="{ element: fld }">
               <li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
@@ -45,6 +47,7 @@
 
         <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
           <draggable tag="ul" :list="customFields" item-key="key" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <template #item="{ element: fld }">
               <li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
@@ -227,6 +230,10 @@ import { generateId } from '../../../utils/util'
         return this.designer.checkWidgetMove(evt)
       },
 
+      checkFieldMove(evt) {
+        return this.designer.checkFieldMove(evt)
+      },
+
       onContainerDragEnd(evt) {
         //console.log('Drag end of container: ')
         //console.log(evt)

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

@@ -39,20 +39,6 @@ export const containers = [
     }
   },
 
-  /*
-  {
-    type: 'section',
-    category: 'container',
-    icon: 'section',
-    widgetList: [],
-    options: {
-      name: '',
-      hidden: false,
-      customClass: '',  //自定义css类名
-    }
-  },
-  */
-
   {
     type: 'grid-col',
     category: 'container',

src/components/form-render/container-item/sub-form-item.vue

@@ -38,9 +38,9 @@
       <el-row v-for="(subFormRowId, sfrIdx) in rowIdData" class="sub-form-row" :key="subFormRowId">
         <div class="sub-form-action-column hide-label">
           <div class="action-button-column">
-            <el-button :disabled="actionDisabled" circle type="" icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
+            <el-button :disabled="actionDisabled" circle icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
                        :title="i18nt('render.hint.insertSubFormRow')"></el-button>
-            <el-button :disabled="actionDisabled" circle type="" icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
+            <el-button :disabled="actionDisabled" circle icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
                        :title="i18nt('render.hint.deleteSubFormRow')"></el-button>
             <span v-if="widget.options.showRowNumber" class="row-number-span">#{{sfrIdx+1}}</span>
           </div>
@@ -64,11 +64,11 @@
 
 <script>
   import emitter from '@/utils/emitter'
-  import i18n from "../../../utils/i18n"
+  import i18n from '@/utils/i18n'
-  import {deepClone, generateId} from "../../../utils/util"
+  import {deepClone, generateId} from '@/utils/util'
-  import refMixin from "../../../components/form-render/refMixin"
+  import refMixin from '../../../components/form-render/refMixin'
   import ContainerItemWrapper from './container-item-wrapper'
-  import containerItemMixin from "./containerItemMixin"
+  import containerItemMixin from './containerItemMixin'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
   import eventBus from "@/utils/event-bus"
 

src/utils/config.js

@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '3.0.1'
+export const VARIANT_FORM_VERSION = '3.0.2'
 
 //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'

src/utils/el-icons.js

@@ -1,4 +1,4 @@
-import {Edit, Minus, Plus, InfoFilled, Search} from '@element-plus/icons-vue'
+import {Edit, Minus, Plus, InfoFilled, Search, CirclePlus, Delete} from '@element-plus/icons-vue'
 
 export function registerIcon(app) {
   app.component('el-icon-edit', Edit)
@@ -6,4 +6,6 @@ export function registerIcon(app) {
   app.component('el-icon-plus', Plus)
   app.component('el-icon-info', InfoFilled)
   app.component('el-icon-search', Search)
+  app.component('el-icon-circle-plus-outline', CirclePlus)
+  app.component('el-icon-delete', Delete)
 }