单组件可以拖拽到分组内

src/hooks/eventHandler.hook.ts

@@ -6,6 +6,26 @@ import { EventBus } from '@/utils/eventBus';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
+//递归获取某个id在数组里的位置或者父id
+export const queryFun = (array, value, peg?: any) => {
+  var res = [];
+  function _find(array, value, peg) {
+    array.forEach((item, index) => {
+      if (item.id === value) {
+        if (peg) {
+          res.push(peg);
+        }
+        res.push(index);
+        return;
+      } else if (item.groupList instanceof Array) {
+        _find(item.groupList, value, index);
+      }
+    });
+  }
+  _find(array, value, peg);
+  return res;
+};
+
 export const eventCommonHandler = (
   componentList: any,
   elementList: any,
@@ -53,28 +73,53 @@ export const eventCommonHandler = (
       } else if (elementList[j].movement == 'reveal') {
         // 显示
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (componentList[i].id == elementList[j].elementId[k]) {
-            obj = componentList[i];
-            index = i;
+          //获取位置
+          const arr = queryFun(componentList, elementList[j].elementId[k]);
+          console.log(arr);
+          if (arr.length > 1) {
+            obj = componentList[arr[0]].groupList[arr[1]];
             obj.status.hide = false;
-            chartEditStore.updateComponentList(index, obj);
+            console.log(obj);
+            // chartEditStore.updateComponentList(arr[0], obj, arr[1]);
+          } else if (arr.length == 1) {
+            obj = componentList[arr[0]];
+            obj.status.hide = false;
+            console.log(obj);
+            // chartEditStore.updateComponentList(arr[0], obj);
           }
+          // if (componentList[i].id == elementList[j].elementId[k]) {
+          //   obj = componentList[i];
+          //   index = i;
+          //   obj.status.hide = false;
+          //   chartEditStore.updateComponentList(index, obj);
+          // }
         }
       } else if (elementList[j].movement == 'hidden') {
         // 隐藏
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (componentList[i].id == elementList[j].elementId[k]) {
-            obj = componentList[i];
-            index = i;
+          //获取位置
+          const arr = queryFun(componentList, elementList[j].elementId[k]);
+          if (arr.length > 1) {
+            obj = componentList[arr[0]].groupList[arr[1]];
             obj.status.hide = true;
-            chartEditStore.updateComponentList(index, obj);
+            // chartEditStore.updateComponentList(arr[0], obj, arr[1]);
+          } else if (arr.length == 1) {
+            obj = componentList[arr[0]];
+            obj.status.hide = true;
+            // chartEditStore.updateComponentList(arr[0], obj);
           }
+          // if (componentList[i].id == elementList[j].elementId[k]) {
+          //   obj = componentList[i];
+          //   index = i;
+          //   obj.status.hide = true;
+          //   chartEditStore.updateComponentList(index, obj);
+          // }
         }
       } else if (elementList[j].movement == 'map') {
         // 地图事件联动
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (componentList[i].id == elementList[j].elementId[k]) {
-            console.log("elementList[j].funName",elementList[j])
+            console.log('elementList[j].funName', elementList[j]);
             if (elementList[j].params) {
               ceshiFunction[elementList[j].funName](elementList[j].params);
             } else {
@@ -89,23 +134,24 @@ export const eventCommonHandler = (
             EventBus.emit(elementList[j].elementId[k] + type, params);
           }
         }
-
       } else if (elementList[j].movement == 'graphic') {
-        // 
+        //
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (componentList[i].id == elementList[j].elementId[k]) {
             EventBus.emit(elementList[j].elementId[k] + type, params);
           }
         }
-
       } else if (elementList[j].movement == 'style') {
-        // 修改组件样式
-        // for (let k = 0; k < elementList[j].elementId.length; k++) {}
-        if (componentList[i].id == elementList[j].elementId) {
-          obj = componentList[i];
-          index = i;
+        //获取位置
+        const arr = queryFun(componentList, elementList[j].elementId);
+        if (arr.length > 1) {
+          obj = componentList[arr[0]].groupList[arr[1]];
           obj.option = elementList[j].option;
-          chartEditStore.updateComponentList(index, obj);
+          // chartEditStore.updateComponentList(arr[0], obj, arr[1]);
+        } else if (arr.length == 1) {
+          obj = componentList[arr[0]];
+          obj.option = elementList[j].option;
+          // chartEditStore.updateComponentList(arr[0], obj);
         }
       }
     }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -406,7 +406,11 @@ export const useChartEditStore = defineStore({
       chartHistoryStore.createMoveHistory(item);
     },
     // * 更新组件列表某一项的值
-    updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
+    updateComponentList(
+      index: number,
+      newData: CreateComponentType | CreateComponentGroupType,
+      childIndex?: number,
+    ) {
       if (index < 1 && index > this.getComponentList.length) return;
       this.componentList[index] = newData;
     },

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue

@@ -54,14 +54,13 @@
             <n-divider vertical style="height: 450px" />
 
             <div class="movement-type">
-
               <template v-if="panel.movement != 'newaddress'">
                 <div class="movement-type__element" v-if="panel.movement == 'style'">
-                  关联组件
+                  关联组件（可选择分组里的单组件）
                   <n-select
                     v-model:value="panel.elementId"
                     placeholder="请选择"
-                    :options="elementSelectOptions"
+                    :options="elementSelectSingleOptions"
                     @update:value="handleUpdateValue(panel.elementId, panel.movement, panelIndex)"
                   />
                 </div>
@@ -86,7 +85,13 @@
                 />
               </div>
 
-              <div class="movement-type__element" v-if="panel.movement == 'map' && currentMapFunction?.group == 'layer' || panel.movement == 'graphic'" >
+              <div
+                class="movement-type__element"
+                v-if="
+                  (panel.movement == 'map' && currentMapFunction?.group == 'layer') ||
+                  panel.movement == 'graphic'
+                "
+              >
                 选择图层对象
                 <n-select
                   v-model:value="panel.params"
@@ -170,17 +175,19 @@
   import { useTargetData } from '../../../../hooks/useTargetData.hook';
   import { getMenuList } from '@/api/sys/menu';
   import { projectListApi } from '@/api/path/project.api';
-  import { funSelectOptions,layerOptions } from '@/hooks/ceshiFun.hook';
+  import { funSelectOptions, layerOptions } from '@/hooks/ceshiFun.hook';
   import { getLoad } from '@/api/sys/sysDataItemDetail';
 
   const EventComponent = loadAsyncComponent(() => import('./EventComponent.vue'));
   const { targetData, chartEditStore } = useTargetData();
   const targetDataOption = ref([]);
   const chartConfig = ref([]);
+  const componentGroupList = ref([]);
   // 选择组件样式
   const handleUpdateValue = (value, movement, index) => {
-    chartEditStore.getComponentList.map((item) => {
+    componentGroupList.value.map((item: any) => {
       if (item.id == value) {
+        console.log('item', item);
         targetDataOption.value[index] = item.option;
         chartConfig.value[index] = item.chartConfig;
         chartConfig.value[index].config = acquiesceAsyncComponent(
@@ -297,6 +304,8 @@
       };
     }),
   );
+  // 修改组件样式，可以选择分组里的某个单组件
+  const elementSelectSingleOptions: any = ref([]);
   const treeIterator = (tree) => {
     tree.forEach((node) => {
       var obj = {};
@@ -352,22 +361,38 @@
     getRouteList();
     getPublishedPageList();
     getMsgTypeList();
+    chartEditStore.getComponentList.forEach((item) => {
+      if (item.isGroup) {
+        item.groupList?.forEach((groupItem) => {
+          elementSelectSingleOptions.value.push({
+            label: '分组-' + item.chartConfig.title + '>> 组件-' + groupItem.chartConfig.title,
+            value: groupItem.id,
+          });
+          componentGroupList.value.push({
+            ...groupItem,
+          });
+        });
+      }
+      elementSelectSingleOptions.value.push({
+        label: item.isGroup ? '分组-' + item.chartConfig.title : '组件-' + item.chartConfig.title,
+        value: item.id,
+      });
+      componentGroupList.value.push({
+        ...item,
+      });
+    });
   });
 
-
-
   // 地图交互方法改变
   const currentMapFunction = ref(null);
   const handlerMapFunChange = (e) => {
-    
-    
-    let selected = funSelectOptions.filter((item,index)=>{
+    let selected = funSelectOptions.filter((item, index) => {
       return item.value == e;
-    })
-    if(selected?.length>0){
+    });
+    if (selected?.length > 0) {
       currentMapFunction.value = selected[0];
     }
-  }
+  };
 
   const changeOption = (index, data) => {
     props.eventData.movementList[index].option = data;
@@ -391,7 +416,6 @@
     },
     { deep: true },
   );
-
 </script>
 <style lang="scss" scoped>
   .event-item {

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -28,23 +28,31 @@
       <div :class="{ 'select-modal': select }"></div>
     </div>
     <n-collapse-transition :show="expend">
-      <LayersListItem
-        v-for="element in componentGroupData.groupList"
-        :key="element.id"
-        :componentData="element"
-        :layer-mode="layerMode"
-        :isGroup="true"
-        @mousedown="mousedownHandle($event, element, componentGroupData.id)"
-        @mouseenter="mouseenterHandle(element)"
-        @mouseleave="mouseleaveHandle(element)"
-        @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)"
-      ></LayersListItem>
+      <draggable
+        item-key="id"
+        v-model="layerList"
+        ghostClass="ghost"
+        @change="onMoveCallback"
+        :group="{ name: 'items', pull: true, put: true }"
+      >
+        <template #item="{ element }">
+          <LayersListItem
+            :componentData="element"
+            :layer-mode="layerMode"
+            :isGroup="true"
+            @mousedown="mousedownHandle($event, element, componentGroupData.id)"
+            @mouseenter="mouseenterHandle(element)"
+            @mouseleave="mouseleaveHandle(element)"
+            @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)"
+          ></LayersListItem>
+        </template>
+      </draggable>
     </n-collapse-transition>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, PropType } from 'vue';
+  import { ref, computed, PropType, watch } from 'vue';
   import { MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum';
   import { MenuEnum } from '@/enums/editPageEnum';
   import { useDesignStore } from '@/store/modules/designStore/designStore';
@@ -56,6 +64,7 @@
   import { LayersListItem } from '../LayersListItem';
   import { LayersStatus } from '../LayersStatus/index';
   import { icon } from '@/plugins';
+  import Draggable from 'vuedraggable';
 
   const props = defineProps({
     componentGroupData: {
@@ -67,7 +76,14 @@
       default: LayerModeEnum.THUMBNAIL,
     },
   });
+  const layerList = ref<any>(props.componentGroupData.groupList);
 
+  watch(
+    () => props.componentGroupData,
+    (newValue) => {
+      layerList.value = newValue.groupList;
+    },
+  );
   // 右键
   const pickOptionsList = [MenuEnum.UN_GROUP];
 
@@ -187,6 +203,15 @@
   const mouseleaveHandle = (componentInstance: CreateComponentType | CreateComponentGroupType) => {
     chartEditStore.setTargetHoverChart(undefined);
   };
+
+  // 移动结束处理
+  const onMoveCallback = (val: any) => {
+    const { newIndex, element } = val.added;
+    const groupIndex = chartEditStore.getComponentList.findIndex(
+      (item) => item.id == props.componentGroupData.id,
+    );
+    chartEditStore.getComponentList[groupIndex].groupList.splice(newIndex, 0, element);
+  };
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentLayers/index.vue

@@ -37,7 +37,13 @@
     </n-space>
 
     <!-- https://github.com/SortableJS/vue.draggable.next -->
-    <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
+    <draggable
+      item-key="id"
+      v-model="layerList"
+      ghostClass="ghost"
+      @change="onMoveCallback"
+      :group="{ name: 'items', pull: true, put: true }"
+    >
       <template #item="{ element }">
         <div class="go-content-layer-box">
           <!-- 组合 -->
@@ -144,19 +150,25 @@
 
   // 移动结束处理
   const onMoveCallback = (val: any) => {
-    const { oldIndex, newIndex } = val.moved;
-    if (newIndex - oldIndex > 0) {
-      // 从上往下
-      const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
-      chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
-    } else {
-      // 从下往上
-      const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
-      if (newIndex === 0) {
-        chartEditStore.getComponentList.push(moveTarget);
-      } else {
+    if (val.moved) {
+      const { oldIndex, newIndex } = val.moved;
+      if (newIndex - oldIndex > 0) {
+        // 从上往下
+        const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
         chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
+      } else {
+        // 从下往上
+        const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
+        if (newIndex === 0) {
+          chartEditStore.getComponentList.push(moveTarget);
+        } else {
+          chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
+        }
       }
+    } else if (val.removed) {
+      const { oldIndex, element } = val.removed;
+      const index = chartEditStore.getComponentList.findIndex((item) => item.id == element.id);
+      chartEditStore.getComponentList.splice(index, 1);
     }
   };