wip: 单元格更多组件布局

src/components/RendererDom.vue

@@ -24,7 +24,6 @@ if (props['itemData']['category'] == 'formItem') {
   }
 }
 
-
 // 选中元素节点
 const handleSelectDom = (activeId: any) => {
   const fatherDom = handleFindDomById(widgetJson['subDomList'], activeId, false)
@@ -48,9 +47,32 @@ const handleFindLastDom = () => {
     widgetJson['activeConfig']['activeDisplayName'] = ""
   }
 }
-// 移除组件
-const handleDelDom = () => {
+// 移除指定ID的组件
+const handleDelDom = (node: any = widgetJson) => {
+  if (!node || !Array.isArray(node.subDomList)) return;
+  const deleteFromList = (list: any) => {
+    for (let i = list.length - 1; i >= 0; i--) {
+      const item = list[i];
+      if (Array.isArray(item)) {
+        // 如果是二维数组，递归删除内部元素
+        deleteFromList(item);
+        // 如果内部数组为空，删除整个空数组
+        if (item.length === 0) {
+          list.splice(i, 1);
+        }
+      } else if (item && item.id === widgetJson['activeConfig']['activeId']) {
+        // 找到匹配项，删除它
+        list.splice(i, 1);
+      } else if (item && item.subDomList) {
+        // 递归子节点
+        handleDelDom(item);
+      }
+    }
+  };
+
+  deleteFromList(node.subDomList);
 }
+
 </script>
 
 <template>
@@ -77,7 +99,7 @@ const handleDelDom = () => {
           <div @click.stop="addTableCol(widgetJson, 'table-cell')" title="插入新列">
             <Icon icon="iconoir:arrow-separate" />
           </div>
-          <div @click.stop="handleDelDom" title="移除组件">
+          <div @click.stop="() => { debugger; handleDelDom() }" title="移除组件">
             <Icon icon="mi:delete" />
           </div>
         </div>
@@ -91,6 +113,39 @@ const handleDelDom = () => {
       :data-id="itemData['id']" :class="{ activeDom: widgetJson['activeConfig']['activeId'] == itemData['id'] }"
       @click.stop="handleSelectDom(itemData['id'])">
       <RendererDom v-for="subData in itemData['subDomList'] as IWidget[]" :key="subData['id']" :itemData="subData" />
+      <template v-if="itemData['id'] == widgetJson['activeConfig']['activeId']">
+        <div class="activeDomWrapper">{{ widgetJson['activeConfig']['activeDisplayName'] }}</div>
+        <div class="fnArea">
+          <div @click.stop="handleFindLastDom" title="选中父组件">
+            <Icon icon="ion:return-up-back" />
+          </div>
+          <div class="moreBox">
+            <Icon icon="hugeicons:menu-square" />
+            <div class="actionBox">
+              <ul>
+                <li>插入左侧列</li>
+                <li>插入右侧列</li>
+                <li>插入上方行</li>
+                <li>插入下方行</li>
+                <el-divider />
+                <li>合并左侧单元格</li>
+                <li>合并右侧单元格</li>
+                <li>合并整行</li>
+                <el-divider />
+                <li>合并上方单元格</li>
+                <li>合并下方单元格</li>
+                <li>合并整列</li>
+                <el-divider />
+                <li>撤销行合并</li>
+                <li>撤销列合并</li>
+                <el-divider />
+                <li>删除整列</li>
+                <li>删除整行</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </template>
     </td>
   </template>
 

src/utils/table.ts

@@ -38,8 +38,10 @@ export const addTable = (widgetJson: IWidgetJson, addItemTypeName: any) => {
       widgetJson['subDomList'].push(addItemData)
     }
   }
-  widgetJson['activeConfig']['activeId'] = activeId
-  widgetJson['activeConfig']['activeDisplayName'] = activeDisplayName
+  widgetJson['activeConfig']['activeId'] = tableCol['activeId']
+  widgetJson['activeConfig']['activeDisplayName'] = tableCol['activeDisplayName']
+  // widgetJson['activeConfig']['activeId'] = activeId
+  // widgetJson['activeConfig']['activeDisplayName'] = activeDisplayName
 }
 
 

src/views/Home/subCom/MainWrapper.vue

@@ -38,6 +38,50 @@ provide('docForm', docForm)
 
       td {
         border: 1px dashed var(--el-color-primary);
+        position: relative;
+
+        .moreBox {
+          position: relative;
+
+          &:hover {
+            .actionBox {
+              display: block;
+            }
+          }
+
+          .actionBox {
+            // display: none;
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding-top: 12px;
+
+            ul {
+
+              list-style: none;
+              padding-left: 0;
+              background-color: #fff;
+              border: 1px solid #c1c1c1;
+              padding-bottom: 2px;
+
+              li {
+                list-style: none;
+                white-space: nowrap;
+                color: #666;
+                font-size: 12px;
+                padding: 4px 8px;
+
+                &:hover {
+                  background-color: #c9effd;
+                  color: var(--el-color-primary);
+                }
+              }
+            }
+          }
+
+        }
+
       }
     }