修复表格容器增加行增加列报错的问题。

src/components/form-designer/form-widget/container-widget/container-wrapper.vue

@@ -20,9 +20,9 @@
       <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
          @click.stop="moveDownWidget()"></i>
       <i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
-         @click.stop="insertTableRow(widget)"></i>
+         @click.stop="appendTableRow(widget)"></i>
       <i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
-         @click.stop="insertTableCol(widget)"></i>
+         @click.stop="appendTableCol(widget)"></i>
       <i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
          :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
       <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>

src/components/form-designer/form-widget/container-widget/grid-col-widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-col v-else-if="widget.type === 'grid-col'" class="grid-cell" v-bind="layoutProps"
+  <el-col v-if="widget.type === 'grid-col'" class="grid-cell" v-bind="layoutProps"
           :class="[selected ? 'selected' : '', customClass]" :style="colHeightStyle"
           :key="widget.id" @click.native.stop="selectWidget(widget)">
     <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"

src/components/form-designer/form-widget/field-widget/slot-widget.vue

@@ -0,0 +1,102 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :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">
+    <div :class="[!!designState ? 'slot-wrapper-design' : 'slot-wrapper-render']">
+      <!-- -->
+      <slot :name="field.options.name" v-bind:formModel="formModel"></slot>
+      <!-- -->
+      <!-- slot :name="field.options.name"></slot -->
+      <div v-if="!!designState" class="slot-title">{{field.options.label}}</div>
+    </div>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "slot-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slot-wrapper-design {
+    width: 100%;
+    min-height: 26px;
+    background: linear-gradient(45deg, #ccc 25%, #eee 0, #eee 50%, #ccc 0, #ccc 75%, #eee 0);
+    background-size: 20px 20px;
+    text-align: center;
+
+    .slot-title {
+      font-size: 13px;
+    }
+  }
+
+  .slot-wrapper-render {
+
+  }
+
+</style>

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

@@ -47,7 +47,11 @@
           <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
                        :option-data="testOptionData"
                        @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
-                       @formChange="handleFormChange"></VFormRender>
+                       @formChange="handleFormChange">
+            <!--
+            <div slot="testSlot">aaaa</div>
+            -->
+          </VFormRender>
         </div>
       </div>
       <code-editor v-model="testFunc" style="display: none"></code-editor>

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

@@ -107,45 +107,6 @@ export const containers = [
     }
   },
 
-    /*
-  {
-    type: 'data-table',
-    category: 'container',
-    icon: 'data-table',
-    options: {
-      name: '',
-      label: '',
-      hidden: false,
-      columns: {},
-      checkboxColumn: {
-        width: 45,
-      },
-      operationColumn: {
-        buttons: [
-          {label: 'Edit', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
-          {label: 'View', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
-          {label: 'Delete', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
-          {label: 'More...', name: '', type: '', plain: false, round: true, circle: false, disabled: false, hidden: false},
-        ]
-      },
-      size: 'medium',
-      height: '100%',
-      maxHeight: '1200px',
-      stripe: false,
-      border: false,
-      fit: true,
-      highlightCurrentRow: false,
-      emptyText: 'no data',
-      showHeader: true,
-      showCheckBox: true,
-      showPager: false,
-      pagerPosition: 'center',
-      pagerSmall: false,
-      pagerBackground: false,
-      pagerCount: 7,
-    }
-  }
-  */
 
 ]
 
@@ -932,20 +893,20 @@ export const advancedFields = [
     },
   },
 
+  // {
+  //   type: 'slot',
+  //   icon: 'slot-field',
+  //   formItemFlag: false,
+  //   options: {
+  //     name: '',
+  //     label: '',
+  //     customClass: '',  //自定义css类名
+  //   }
+  // },
+
 ]
 
 export const customFields = [
-  /*
-  {
-    type: 'custom',
-    icon: 'custom-component',
-  },
-
-  {
-    type: 'slot',
-    icon: 'slot-component',
-  },
-  */
 
 ]
 

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

@@ -5,11 +5,21 @@
       <template v-for="(subWidget, swIdx) in widget.widgetList">
         <template v-if="'container' === subWidget.category">
           <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                          :index-of-parent-list="swIdx" :parent-widget="widget">
+            <!-- 递归传递插槽！！！ -->
+            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+              <slot :name="slot" v-bind="scope"/>
+            </template>
+          </component>
         </template>
         <template v-else>
           <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
-                        :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                        :index-of-parent-list="swIdx" :parent-widget="widget">
+            <!-- 递归传递插槽！！！ -->
+            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+              <slot :name="slot" v-bind="scope"/>
+            </template>
+          </component>
         </template>
       </template>
     </template>

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

@@ -7,7 +7,12 @@
       <template v-for="(colWidget, colIdx) in widget.cols">
         <grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
                        :index-of-parent-list="colIdx" :parent-widget="widget"
-                       :col-height="widget.options.colHeight"></grid-col-item>
+                       :col-height="widget.options.colHeight">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </grid-col-item>
       </template>
     </el-row>
 

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

@@ -52,7 +52,9 @@
                           :key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
                           :index-of-parent-list="swIdx" :parent-widget="widget"
                           :sub-form-row-id="subFormRowId"
-                          :sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx"></component>
+                          :sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx">
+              <!-- 子表单暂不支持插槽！！！ -->
+            </component>
           </div>
         </template>
       </el-row>

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

@@ -9,11 +9,21 @@
           <template v-for="(subWidget, swIdx) in tab.widgetList">
             <template v-if="'container' === subWidget.category">
               <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                              :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope"/>
+                </template>
+              </component>
             </template>
             <template v-else>
               <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                            :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                            :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope"/>
+                </template>
+              </component>
             </template>
           </template>
         </el-tab-pane>

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

@@ -5,11 +5,21 @@
     <template v-for="(subWidget, swIdx) in widget.widgetList">
       <template v-if="'container' === subWidget.category">
         <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                        :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                        :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
       </template>
       <template v-else>
         <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                      :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                      :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
       </template>
     </template>
   </td>

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

@@ -8,7 +8,12 @@
         <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
           <template v-for="(colWidget, colIdx) in row.cols">
             <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
-                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget"></table-cell-item>
+                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </table-cell-item>
           </template>
         </tr>
         </tbody>

src/components/form-render/index.vue

@@ -16,11 +16,21 @@
     <template v-for="(widget, index) in widgetList">
       <template v-if="'container' === widget.category">
         <component :is="getContainerWidgetName(widget)" :widget="widget" :key="widget.id" :parent-list="widgetList"
-                        :index-of-parent-list="index" :parent-widget="null"></component>
+                        :index-of-parent-list="index" :parent-widget="null">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
       </template>
       <template v-else>
         <component :is="getWidgetName(widget)" :field="widget" :form-model="formDataModel" :designer="null" :key="widget.id" :parent-list="widgetList"
-                      :index-of-parent-list="index" :parent-widget="null"></component>
+                      :index-of-parent-list="index" :parent-widget="null">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
       </template>
     </template>
   </el-form>

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

@@ -12,11 +12,21 @@
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
             <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                       :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </component>
           </template>
           <template v-else>
             <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
-                       :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </component>
           </template>
         </template>
       </template>

src/icons/svg/slot-field.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639198371252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2851" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M475.937391 244.869565m18.031305 0l36.285217 0q18.031304 0 18.031304 18.031305l0 217.266087q0 18.031304-18.031304 18.031304l-36.285217 0q-18.031304 0-18.031305-18.031304l0-217.266087q0-18.031304 18.031305-18.031305Z" p-id="2852"></path><path d="M305.41913 525.801739m18.031305 0l36.285217 0q18.031304 0 18.031305 18.031304l0 217.266087q0 18.031304-18.031305 18.031305l-36.285217 0q-18.031304 0-18.031305-18.031305l0-217.266087q0-18.031304 18.031305-18.031304Z" p-id="2853"></path><path d="M646.233043 525.801739m18.031305 0l36.285217 0q18.031304 0 18.031305 18.031304l0 217.266087q0 18.031304-18.031305 18.031305l-36.285217 0q-18.031304 0-18.031305-18.031305l0-217.266087q0-18.031304 18.031305-18.031304Z" p-id="2854"></path><path d="M827.436522 122.212174H196.563478a74.573913 74.573913 0 0 0-74.351304 74.351304v630.873044a74.573913 74.573913 0 0 0 74.351304 74.351304h630.873044a74.573913 74.573913 0 0 0 74.351304-74.351304V196.563478a74.573913 74.573913 0 0 0-74.351304-74.351304z m52.090435 705.224348a52.090435 52.090435 0 0 1-52.090435 52.090435H196.563478a52.090435 52.090435 0 0 1-52.090435-52.090435V196.563478a52.090435 52.090435 0 0 1 52.090435-52.090435h630.873044a52.090435 52.090435 0 0 1 52.090435 52.090435z" p-id="2855"></path></svg>

src/lang/en-US.js

@@ -56,9 +56,9 @@ export default {
       'file-upload':    'File',
       'rich-editor':    'Rich Editor',
       cascader:         'Cascader',
+      slot:             'Slot',
 
       custom:           'Custom Component',
-      slot:             'Slot'
     },
 
     hint: {

src/lang/zh-CN.js

@@ -56,9 +56,9 @@ export default {
       'file-upload':    '文件',
       'rich-editor':    '富文本',
       cascader:         '级联选择',
+      slot:             '插槽',
 
       custom:           'Custom Component',
-      slot:             'Slot'
     },
 
     hint: {