新增tabs标签工具

src/views/bigscreenDesigner/designer/index.vue

@@ -27,7 +27,7 @@
                   v-for="(it, idx) in item.list"
                   :key="idx"
                   draggable="true"
-                  @dragstart="dragStart(it.code)"
+                  @dragstart="dragStart(it.code, $event)"
                   @dragend="dragEnd()"
                 >
                   <div class="tools-item">
@@ -526,9 +526,14 @@ export default {
     getPXUnderScale(px) {
       return this.bigscreenScaleInWorkbench * px;
     },
-    dragStart(widgetCode) {
+    dragStart(widgetCode, evt) {
       this.dragWidgetCode = widgetCode;
       this.currentWidgetTotal = this.widgets.length; // 当前操作面板上有多少各组件
+      // 通过 dataTransfer 传递组件 code，便于 Tabs 等嵌套容器在 drop 时读取（不依赖父组件链）
+      if (evt && evt.dataTransfer) {
+        evt.dataTransfer.setData("application/x-widget-code", widgetCode);
+        evt.dataTransfer.effectAllowed = "copy";
+      }
     },
     dragEnd() {
       /**
@@ -555,12 +560,48 @@ export default {
       });
     },
     dragOver(evt) {
+      // 鼠标在 Tabs 标签内容区内时不处理，让 tab 内容区成为 drop 目标，避免工作台抢走
+      if (evt.target && evt.target.closest && (evt.target.closest(".tab-content") || evt.target.closest("[data-tab-content]"))) {
+        return;
+      }
       evt.preventDefault();
       evt.stopPropagation();
       evt.dataTransfer.dropEffect = "copy";
     },
     // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
     widgetOnDragged(evt) {
+      // 若落在 Tabs 标签内容区内，由 widgetTabs 自己处理，不在此处添加到主画布
+      if (evt.target && evt.target.closest && (evt.target.closest(".tab-content") || evt.target.closest("[data-tab-content]"))) {
+        return;
+      }
+      // 若落在 Tabs 组件的外层容器上（如 avue-draggable），委托给对应 Tabs 加入当前激活的 tab
+      const widgetsRef = this.$refs.widgets;
+      const widgetList = Array.isArray(widgetsRef) ? widgetsRef : (widgetsRef ? [widgetsRef] : []);
+      if (evt.target && widgetList.length) {
+        for (let i = 0; i < widgetList.length; i++) {
+          const w = widgetList[i];
+          if (!w || !w.$el || !w.$el.contains(evt.target)) continue;
+          if (this.widgets[i] && this.widgets[i].type === "widget-tabs") {
+            const findTabs = (comp) => {
+              if (!comp) return null;
+              if (typeof comp.addWidgetFromDrop === "function") return comp;
+              if (comp.$children && comp.$children.length) {
+                for (let j = 0; j < comp.$children.length; j++) {
+                  const found = findTabs(comp.$children[j]);
+                  if (found) return found;
+                }
+              }
+              return null;
+            };
+            const tabsComp = findTabs(w);
+            if (tabsComp) {
+              tabsComp.addWidgetFromDrop(evt);
+              return;
+            }
+          }
+          break;
+        }
+      }
       let widgetType = this.dragWidgetCode;
 
       // 获取结束坐标和列名