fix: 修复嵌套布局时点击事件bug @0.9.3-4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.3-3",
+  "version": "0.9.3-4",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

src/component/form-designer/src/FormDesigner.vue

@@ -117,8 +117,14 @@
               @click="addWidget(item)"
             >
               <div>
-                <Icon class="icon" :name="item.icon"></Icon>
-                <span>{{ item.name }}</span>
+                <el-badge value="beta" class="badge" v-if="item.beta">
+                  <Icon class="icon" :name="item.icon"></Icon>
+                  <span>{{ item.name }}</span></el-badge
+                >
+                <template v-else>
+                  <Icon class="icon" :name="item.icon"></Icon>
+                  <span>{{ item.name }}</span>
+                </template>
               </div>
             </li>
           </Draggable>

src/component/form-designer/src/WidgetFormItem.vue

@@ -312,7 +312,8 @@ export default {
   },
   methods: {
     handleSelectWidget(index) {
-      this.selectWidget = this.data.list[index];
+      const fieldList = this.customListField || this.data.list;
+      this.selectWidget = fieldList[index];
     },
     handleWidgetDelete(index) {
       const field = this.customListField || this.data.list;

src/component/form-designer/src/WidgetLayout.vue

@@ -13,7 +13,7 @@
       :gutter="element.options.gutter ? element.options.gutter : 0"
       :justify="element.options.justify"
       :align="element.options.align"
-      @click.stop="handleSelectWidget(index)"
+      @click.native.stop="handleSelectWidget"
     >
       <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
         <Draggable
@@ -29,7 +29,7 @@
         >
           <transition-group name="fade" tag="div" class="widget-col-list">
             <template v-for="(el, i) in col.list">
-              <WidgetLayout v-if="el.type.includes('grid') || el.type.includes('tabs')" :element="el" :select.sync="selectWidget" :index="i" :data="data" :key="el.key"></WidgetLayout>
+              <WidgetLayout v-if="el.type.includes('grid') || el.type.includes('tabs')" :element="el" :select.sync="selectWidget" :index="i" :data="col" :key="el.key"></WidgetLayout>
               <WidgetFormItem v-else :element="el" :select.sync="selectWidget" :index="i" :data="col" :key="el.key"></WidgetFormItem>
             </template>
           </transition-group>
@@ -54,7 +54,7 @@
     class="data-grid widget-grid-table-container widget-col widget-view"
     :key="element && element.key"
     :class="{ active: selectWidget && selectWidget.key == element.key }"
-    @click.stop="handleSelectWidget(index)"
+    @click.stop="handleSelectWidget"
   >
     <table
       class="widget-grid-table"
@@ -138,7 +138,7 @@
     </div>
   </div>
   <div v-else-if="element.type === 'tabs'">
-    <WidgetTabs v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :index="index" :data="data" @click.native.stop="handleSelectWidget(index)"></WidgetTabs>
+    <WidgetTabs v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :index="index" :data="data" @click.native.stop="handleSelectWidget"></WidgetTabs>
   </div>
 </template>
 
@@ -167,8 +167,7 @@ export default defineComponent({
       default: () => ({}),
     },
     data: {
-      type: Object,
-      default: () => ({}),
+      type: Object || Array,
     },
     index: {
       type: Number,
@@ -180,16 +179,14 @@ export default defineComponent({
 
     const selectWidget = ref({});
 
-    const handleSelectWidget = (index) => {
-      // console.log(`子项被点击`, index, props.data.list[index]);
-      selectWidget.value = props.data.list[index];
+    const handleSelectWidget = () => {
+      selectWidget.value = props.element;
     };
 
     const handleGridAdd = (grid) => {
       grid.columns.push({
         span: 24,
         list: [],
-        key: `${grid}_${random()}`,
       });
     };
     const handleGridClone = (index) => {

src/component/form-designer/src/components/Tabs/WidgetTabs.vue

@@ -27,7 +27,7 @@
           <transition-group name="fade" tag="div" class="widget-col-list">
             <template v-for="(el, i) in item.list">
               <WidgetLayout v-if="el.type.includes('grid') || el.type.includes('tabs')" :element="el" :select.sync="selectWidget" :index="i" :data="data" :key="el.key"></WidgetLayout>
-              <WidgetFormItem v-else :element="el" :select.sync="selectWidget" :index="i" :data="data" :key="el.key"></WidgetFormItem>
+              <WidgetFormItem v-else :element="el" :select.sync="selectWidget" :index="i" :data="data" :customListField="item.list" :key="el.key"></WidgetFormItem>
             </template>
           </transition-group>
         </Draggable>

src/component/form-designer/src/componentsConfig.ts

@@ -532,6 +532,7 @@ export const layoutComponents = [
     type: 'grid-table',
     name: '表格布局',
     icon: 'table',
+    beta: true,
     options: {
       borderWidth: 1,
       borderColor: '#999',
@@ -549,6 +550,7 @@ export const layoutComponents = [
     type: 'tabs',
     name: '标签页',
     icon: 'tags',
+    beta: true,
     items: [
       {
         name: '标签页1',

src/component/form-designer/src/styles/cover.scss

@@ -24,3 +24,7 @@
 .el-form--inline .el-form-item__label {
   margin-bottom: 10px;
 }
+.el-badge__content.is-fixed{
+  top: 5px;
+  right: -5px;
+}

src/component/form-designer/src/styles/index.scss

@@ -75,7 +75,6 @@ $primary-background-color: #ecf5ff;
   padding: 8px 0;
   width: 100%;
   height: 100%;
-
   .widget-cate {
     padding: 8px 12px;
     font-size: 13px;
@@ -100,7 +99,7 @@ $primary-background-color: #ecf5ff;
     position: relative;
     float: left;
     left: 0;
-    overflow: hidden;
+    // overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 1%;