feat(@0.9.0): 布局组件新增禁止嵌套提醒,子表单仅支持拖拽表单组件提醒

BoBoooooo · Mar 10, 2021 · ee72394 · ee72394
1 parent 0d615ab
commit ee72394
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.9",
+  "version": "0.9.0",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -160,7 +160,7 @@
             </div>
           </el-header>
           <el-main class="config-content">
-            <WidgetConfig v-show="configTab == 'widget'" v-if="Object.keys(widgetFormSelect).length > 0" :dictType="dictType" :elementConfig="widgetFormSelect"></WidgetConfig>
+            <WidgetConfig v-show="configTab == 'widget'" v-if="widgetFormSelect && Object.keys(widgetFormSelect).length > 0" :dictType="dictType" :elementConfig="widgetFormSelect"></WidgetConfig>
             <FormConfig v-show="configTab == 'form'" :data="widgetForm.config"></FormConfig>
           </el-main>
         </el-container>

diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
@@ -347,12 +347,15 @@ export default {
     },
     handleWidgetTdAdd($event, col) {
       const { newIndex, oldIndex, item } = $event;
+      const newItem = col.list[newIndex];
       // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf('data-grid') >= 0) {
-        col.list[newIndex].splice(newIndex, 1);
+      if (['tabs', 'grid', 'grid-table'].includes(newItem.type)) {
+        col.list.splice(newIndex, 1);
+        this.$message.warning('布局元素暂不支持嵌套');
         return false;
       }
-      this.selectWidget = col.list[newIndex];
+
+      this.selectWidget = newItem;
       return null;
     },
     handleWidgetColAdd($event, row, colIndex) {
@@ -364,6 +367,7 @@ export default {
           this.data.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex]);
         }
         row.columns[colIndex].list.splice(newIndex, 1);
+        this.$message.warning('布局元素暂不支持嵌套');
         return false;
       }
       this.selectWidget = row.columns[colIndex].list[newIndex];

diff --git a/src/component/form-designer/src/components/SubForm/WidgetSubForm.vue b/src/component/form-designer/src/components/SubForm/WidgetSubForm.vue
@@ -69,6 +69,7 @@ import {
   Component, Vue, Prop, Watch,
 } from 'vue-property-decorator';
 import Draggable from 'vuedraggable';
+import { formElement } from '../../componentsConfig';
 
 @Component({
   name: 'WidgetSubForm',
@@ -114,13 +115,23 @@ export default class WidgetSubForm extends Vue {
 
   selectWidget = this.select;
 
+  formElement = formElement
+
   handleSelectWidget(index) {
     this.selectWidget = this.element.tableColumns[index];
   }
 
   handleWidgetAdd(evt) {
     const { newIndex } = evt;
     const { model, type } = this.element.tableColumns[newIndex];
+
+    // 防止布局元素的嵌套拖拽
+    if (!formElement.includes(type)) {
+      this.element.tableColumns.splice(newIndex, 1);
+      this.$message.warning('仅支持拖拽表单组件');
+      return false;
+    }
+
     // 为拖拽到容器的元素添加唯一 key
     const key = model || `${type}_${Math.ceil(Math.random() * 99999)}`;
     this.$set(this.element.tableColumns, newIndex, {
@@ -153,6 +164,7 @@ export default class WidgetSubForm extends Vue {
     }
     console.log(this.element.tableColumns[newIndex]);
     this.selectWidget = this.element.tableColumns[newIndex];
+    return null;
   }
 
   handleWidgetDelete(index) {

diff --git a/src/component/form-designer/src/components/Tabs/WidgetTabs.vue b/src/component/form-designer/src/components/Tabs/WidgetTabs.vue
@@ -35,7 +35,7 @@
                     :gutter="element.options.gutter ? element.options.gutter : 0"
                     :justify="element.options.justify"
                     :align="element.options.align"
-                    @click.native="handleSelectWidget(index)"
+                    @click.native.stop="handleSelectWidget(element)"
                   >
                     <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
                       <Draggable
@@ -57,7 +57,7 @@
                             :element="el"
                             :select.sync="selectWidget"
                             :index="i"
-                            @click.native="handleSelectWidget(i)"
+                            @click.native="handleSelectWidget(el)"
                             :data="col"
                           ></WidgetFormItem>
                         </transition-group>
@@ -86,7 +86,7 @@
                 :select.sync="selectWidget"
                 :index="index"
                 :data="data"
-                @click.native="handleSelectWidget(index)"
+                @click.native="handleSelectWidget(element)"
               ></WidgetFormItem>
             </template>
           </transition-group>
@@ -96,6 +96,9 @@
     <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
       <i class="drag-widget el-icon el-icon-rank"></i>
     </div>
+    <div class="widget-view-action" v-if="selectWidget.key == element.key">
+      <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete()"></i>
+    </div>
   </div>
 </template>
 
@@ -135,19 +138,25 @@ export default class WidgetTabs extends Vue {
   })
   data!: any
 
+    @Prop({
+      type: Number,
+      default: null,
+    })
+  index!: number
+
   activeName = '标签页1'
 
   selectWidget = this.select
 
-  handleSelectWidget(index) {
-    const currentTab = this.element.items.find(_ => _.name === this.activeName);
-    this.selectWidget = currentTab.list[index];
+  handleSelectWidget(element) {
+    this.selectWidget = element;
   }
 
   handleWidgetColAdd($event, row, colIndex) {
     const { newIndex } = $event;
     const { oldIndex } = $event;
     const { item } = $event;
+    console.log(item.className);
     // 防止布局元素的嵌套拖拽
     if (item.className.indexOf('data-grid') >= 0) {
       // 如果是列表中拖拽的元素需要还原到原来位置
@@ -174,7 +183,7 @@ export default class WidgetTabs extends Vue {
     });
   }
 
-  handleWidgetDelete(index) {
+  handleWidgetDelete(index = this.index) {
     if (this.data.list.length - 1 === index) {
       if (index === 0) {
         this.selectWidget = {};
@@ -214,9 +223,10 @@ export default class WidgetTabs extends Vue {
     const { newIndex, item, oldIndex } = evt;
     const { list } = currentTab;
     const newItem = list[newIndex];
-    // 防止tab布局元素的嵌套拖拽
-    if (newItem.type === 'tabs') {
+    // 防止布局元素的嵌套拖拽
+    if (['tabs', 'grid-table'].includes(newItem.type)) {
       list.splice(newIndex, 1);
+      this.$message.warning('布局元素暂不支持嵌套');
       return false;
     }
     this.selectWidget = newItem;

diff --git a/src/component/form-designer/src/componentsConfig.ts b/src/component/form-designer/src/componentsConfig.ts
@@ -527,7 +527,7 @@ export const layoutComponents = [
   {
     type: 'grid-table',
     name: '表格布局',
-    icon: 'th',
+    icon: 'table',
     options: {
       borderWidth: 1,
       borderColor: '#999',

diff --git a/src/component/form-designer/src/icon.ts b/src/component/form-designer/src/icon.ts
@@ -36,3 +36,4 @@ import 'vue-awesome/icons/file-word';
 import 'vue-awesome/icons/chart-bar';
 import 'vue-awesome/icons/tags';
 import 'vue-awesome/icons/user';
+import 'vue-awesome/icons/table';