Merge pull request #4485 from dataease/pr@dev@refactor_menu-cache

refactor: 优化仪表板数据集菜单操作逻辑，防止菜单量大时可能造成的卡顿

backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java

@@ -9,8 +9,10 @@ import io.dataease.commons.constants.SysLogConstants;
 import io.dataease.commons.utils.DeLogUtils;
 import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.dto.SysLogDTO;
+import io.dataease.dto.authModel.VAuthModelDTO;
 import io.dataease.dto.dataset.DataSetGroupDTO;
 import io.dataease.plugins.common.base.domain.DatasetGroup;
+import io.dataease.service.authModel.VAuthModelService;
 import io.dataease.service.dataset.DataSetGroupService;
 import io.dataease.service.kettle.KettleService;
 import io.swagger.annotations.Api;
@@ -18,7 +20,9 @@ import io.swagger.annotations.ApiOperation;
 import org.apache.shiro.authz.annotation.Logical;
 import org.springframework.web.bind.annotation.*;
 import springfox.documentation.annotations.ApiIgnore;
+
 import javax.annotation.Resource;
+import java.util.Arrays;
 import java.util.List;
 
 /**
@@ -35,14 +39,18 @@ public class DataSetGroupController {
     @Resource
     private KettleService kettleService;
 
+    @Resource
+    private VAuthModelService vAuthModelService;
+
     @DePermissions(value = {
             @DePermission(type = DePermissionType.DATASET, value = "id"),
             @DePermission(type = DePermissionType.DATASET, value = "pid", level = ResourceAuthLevel.DATASET_LEVEL_MANAGE)
     }, logical = Logical.AND)
     @ApiOperation("保存")
     @PostMapping("/save")
-    public DataSetGroupDTO save(@RequestBody DatasetGroup datasetGroup) throws Exception {
+    public VAuthModelDTO save(@RequestBody DatasetGroup datasetGroup) throws Exception {
-        return dataSetGroupService.save(datasetGroup);
+        DataSetGroupDTO result = dataSetGroupService.save(datasetGroup);
+        return vAuthModelService.queryAuthModelByIds("dataset", Arrays.asList(result.getId())).get(0);
     }
 
     @ApiIgnore

backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java

@@ -16,6 +16,7 @@ import io.dataease.controller.handler.annotation.I18n;
 import io.dataease.controller.request.dataset.DataSetExportRequest;
 import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.controller.response.DataSetDetail;
+import io.dataease.dto.authModel.VAuthModelDTO;
 import io.dataease.dto.dataset.DataSetTableDTO;
 import io.dataease.dto.dataset.ExcelFileData;
 import io.dataease.plugins.common.base.domain.DatasetSqlLog;
@@ -24,6 +25,7 @@ import io.dataease.plugins.common.base.domain.DatasetTableField;
 import io.dataease.plugins.common.base.domain.DatasetTableIncrementalConfig;
 import io.dataease.plugins.common.dto.dataset.SqlVariableDetails;
 import io.dataease.plugins.common.dto.datasource.TableField;
+import io.dataease.service.authModel.VAuthModelService;
 import io.dataease.service.dataset.DataSetTableService;
 import io.swagger.annotations.*;
 import org.apache.shiro.authz.annotation.Logical;
@@ -35,6 +37,7 @@ import javax.servlet.http.HttpServletResponse;
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;
 
 /**
  * @Author gin
@@ -48,14 +51,18 @@ public class DataSetTableController {
     @Resource
     private DataSetTableService dataSetTableService;
 
+    @Resource
+    private VAuthModelService vAuthModelService;
+
     @DePermissions(value = {
             @DePermission(type = DePermissionType.DATASET, value = "id"),
             @DePermission(type = DePermissionType.DATASET, value = "sceneId", level = ResourceAuthLevel.DATASET_LEVEL_MANAGE)
     }, logical = Logical.AND)
     @ApiOperation("批量保存")
     @PostMapping("batchAdd")
-    public List<DatasetTable> batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
+    public List<VAuthModelDTO> batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
-        return dataSetTableService.batchInsert(datasetTable);
+        List<String> ids = dataSetTableService.batchInsert(datasetTable).stream().map(DatasetTable::getId).collect(Collectors.toList());
+        return vAuthModelService.queryAuthModelByIds("dataset", ids);
     }
 
     @DePermissions(value = {

backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java

@@ -88,7 +88,7 @@ public class PanelGroupController {
             @DePermission(type = DePermissionType.PANEL, value = "pid", level = ResourceAuthLevel.PANEL_LEVEL_MANAGE)
     }, logical = Logical.AND)
     @I18n
-    public String update(@RequestBody PanelGroupRequest request) {
+    public PanelGroupDTO update(@RequestBody PanelGroupRequest request) {
         return panelGroupService.update(request);
     }
 

backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.java

@@ -15,18 +15,20 @@ public interface ExtPanelGroupMapper {
     List<PanelGroupDTO> panelGroupListDefault(PanelGroupRequest request);
 
     //会级联删除pid 下的所有数据
-    int deleteCircle(@Param("pid") String pid);
+    int deleteCircle(@Param("pid") String pid, @Param("nodeType") String nodeType);
 
-    int deleteCircleView(@Param("pid") String pid);
+    int deleteCircleView(@Param("pid") String pid, @Param("nodeType") String nodeType);
 
-    int deleteCircleViewCache(@Param("pid") String pid);
+    int deleteCircleViewCache(@Param("pid") String pid, @Param("nodeType") String nodeType);
 
-    PanelGroupDTO findOneWithPrivileges(@Param("panelId") String panelId,@Param("userId") String userId);
+    PanelGroupDTO findOneWithPrivileges(@Param("panelId") String panelId, @Param("userId") String userId);
+
+    PanelGroupDTO findShortOneWithPrivileges(@Param("panelId") String panelId, @Param("userId") String userId);
 
     void copyPanelView(@Param("pid") String panelId);
 
     //移除未使用的视图
-    void removeUselessViews(@Param("panelId") String panelId,@Param("viewIds") List<String> viewIds);
+    void removeUselessViews(@Param("panelId") String panelId, @Param("viewIds") List<String> viewIds);
 
     List<PanelGroupDTO> panelGroupInit();
 

backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.xml

@@ -31,6 +31,26 @@
           and panel_type = 'self'
     </select>
 
+    <select id="findShortOneWithPrivileges" resultMap="BaseResultMapDTO">
+        SELECT panel_group.id,
+               panel_group.`name`,
+               panel_group.pid,
+               panel_group.`level`,
+               panel_group.node_type,
+               panel_group.create_by,
+               panel_group.create_time,
+               panel_group.panel_type,
+               panel_group.`name`                            AS label,
+               panel_group.`source`,
+               panel_group.`panel_type`,
+               panel_group.`status`,
+               panel_group.`mobile_layout`,
+               panel_group.`name`                            as source_panel_name,
+               get_auths(panel_group.id, 'panel', #{userId}) as `privileges`
+        from panel_group
+        where id = #{panelId}
+    </select>
+
     <select id="panelGroupListDefault" resultMap="BaseResultMapDTO">
         SELECT
         panel_group.id,
@@ -185,20 +205,34 @@
     <delete id="deleteCircle">
         delete
         from panel_group
-        where FIND_IN_SET(panel_group.id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        where
-           or FIND_IN_SET(panel_group.source, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        panel_group.id = #{pid}
+        or
+        panel_group.source = #{pid}
+        <if test="nodeType == 'folder'">
+            or FIND_IN_SET(panel_group.id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+            or FIND_IN_SET(panel_group.source, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        </if>
     </delete>
 
     <delete id="deleteCircleView">
         delete
         from chart_view
-        where FIND_IN_SET(chart_view.scene_id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        where
+        chart_view.scene_id = #{pid}
+        <if test="nodeType == 'folder'">
+            or FIND_IN_SET(chart_view.scene_id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        </if>
     </delete>
 
     <delete id="deleteCircleViewCache">
         delete
         from chart_view_cache
-        where FIND_IN_SET(chart_view_cache.scene_id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        where
+        chart_view_cache.scene_id = #{pid}
+        <if test="nodeType == 'folder'">
+            or FIND_IN_SET(chart_view_cache.scene_id, GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+        </if>
     </delete>
 
     <insert id="copyPanelView">
@@ -226,120 +260,106 @@
 
     </delete>
 
-    <select id="queryPanelRelation" resultType="io.dataease.dto.RelationDTO" resultMap="io.dataease.ext.ExtDataSourceMapper.RelationResultMap">
+    <select id="queryPanelRelation" resultType="io.dataease.dto.RelationDTO"
-        select
+            resultMap="io.dataease.ext.ExtDataSourceMapper.RelationResultMap">
-            ifnull(ds.id,'') `id`,
+        select ifnull(ds.id, '')                      `id`,
-            ds.name,
+               ds.name,
-            ds_auth.auths,
+               ds_auth.auths,
-            'link' `type`,
+               'link'                                 `type`,
-            dt.id sub_id,
+               dt.id                                  sub_id,
-            dt.name sub_name,
+               dt.name                                sub_name,
-            dt_auth.auths sub_auths,
+               dt_auth.auths                          sub_auths,
-            if(dt.id is not null,'dataset',null) sub_type
+               if(dt.id is not null, 'dataset', null) sub_type
-        from
+        from panel_group pg
-            panel_group pg
+                 join
-        join
+             chart_view cv on cv.scene_id = pg.id
-            chart_view cv on cv.scene_id = pg.id
+                 join
-        join
+             dataset_table dt on cv.table_id = dt.id
-            dataset_table dt on cv.table_id = dt.id
+                 left join
-        left join
+             (select t_dt.id,
-        (
+                     group_concat(distinct sad.privilege_type) auths
-            select
+              from dataset_table t_dt
-                t_dt.id,group_concat(distinct sad.privilege_type) auths
+                       left join sys_auth sa on sa.auth_source = t_dt.id
-            from
+                       left join sys_auth_detail sad on sa.id = sad.auth_id
-                dataset_table t_dt
+              where sa.auth_source_type = 'dataset'
-            left join sys_auth sa on sa.auth_source = t_dt.id
+                and sad.privilege_value = 1
-            left join sys_auth_detail sad on sa.id = sad.auth_id
+                and (
-            where
+                      (
-                sa.auth_source_type = 'dataset'
+                                  sa.auth_target_type = 'dept'
-            and
+                              AND sa.auth_target in
-                sad.privilege_value = 1
+                                  (SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT})
-            and
+                          )
-            (
+                      or
-                (
+                      (
-                    sa.auth_target_type = 'dept'
+                                  sa.auth_target_type = 'user'
-                    AND sa.auth_target in ( SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT} )
+                              AND sa.auth_target = #{userId,jdbcType=BIGINT}
-                )
+                          )
-            or
+                      or
-                (
+                      (
-                    sa.auth_target_type = 'user'
+                                  sa.auth_target_type = 'role'
-                    AND sa.auth_target =  #{userId,jdbcType=BIGINT}
+                              AND sa.auth_target in
-                )
+                                  (SELECT role_id FROM sys_users_roles WHERE user_id = #{userId,jdbcType=BIGINT})
-            or
+                          )
-                (
+                  )
-                    sa.auth_target_type = 'role'
+              group by sa.auth_source) dt_auth on dt.id = dt_auth.id
-                    AND sa.auth_target in ( SELECT role_id FROM sys_users_roles WHERE user_id =  #{userId,jdbcType=BIGINT} )
+                 left join datasource ds on dt.data_source_id = ds.id
-                )
+                 left join
-            )
+             (select t_pg.id,
-            group by sa.auth_source
+                     group_concat(distinct sad.privilege_type) auths
-        ) dt_auth on dt.id = dt_auth.id
+              from panel_group t_pg
-        left join datasource ds on dt.data_source_id = ds.id
+                       left join sys_auth sa on sa.auth_source = t_pg.id
-        left join
+                       left join sys_auth_detail sad on sa.id = sad.auth_id
-        (
+              where sa.auth_source_type = 'link'
-            select
+                and sad.privilege_value = 1
-                t_pg.id,group_concat(distinct sad.privilege_type) auths
+                and (
-            from
+                      (
-                panel_group t_pg
+                                  sa.auth_target_type = 'dept'
-            left join sys_auth sa on sa.auth_source = t_pg.id
+                              AND sa.auth_target in
-            left join sys_auth_detail sad on sa.id = sad.auth_id
+                                  (SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT})
-            where
+                          )
-                sa.auth_source_type = 'link'
+                      OR
-            and
+                      (
-                sad.privilege_value = 1
+                                  sa.auth_target_type = 'user'
-            and
+                              AND sa.auth_target = #{userId,jdbcType=BIGINT}
-            (
+                          )
-                (
+                      OR
-                    sa.auth_target_type = 'dept'
+                      (
-                    AND sa.auth_target in ( SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT} )
+                                  sa.auth_target_type = 'role'
-                )
+                              AND sa.auth_target in
-            OR
+                                  (SELECT role_id FROM sys_users_roles WHERE user_id = #{userId,jdbcType=BIGINT})
-                (
+                          )
-                    sa.auth_target_type = 'user'
+                  )
-                    AND sa.auth_target =  #{userId,jdbcType=BIGINT}
+              group by sa.auth_source) ds_auth on ds_auth.id = ds.id
-                )
+        where pg.id = #{panelId,jdbcType=VARCHAR}
-            OR
+        group by id, sub_id
-                (
-                    sa.auth_target_type = 'role'
-                    AND sa.auth_target in ( SELECT role_id FROM sys_users_roles WHERE user_id = #{userId,jdbcType=BIGINT} )
-                )
-            )
-            group by sa.auth_source
-        ) ds_auth on ds_auth.id = ds.id
-        where pg.id=#{panelId,jdbcType=VARCHAR}
-        group by id,sub_id
         order by id
     </select>
 
     <select id="listPanelByUser" resultType="io.dataease.plugins.common.base.domain.PanelGroup"
             resultMap="io.dataease.plugins.common.base.mapper.PanelGroupMapper.BaseResultMap">
-        select
+        select pg.*
-            pg.*
+        from panel_group pg
-        from
+                 join sys_auth sa on sa.auth_source = pg.id
-            panel_group pg
+                 join sys_auth_detail sad on sa.id = sad.auth_id
-        join sys_auth sa on sa.auth_source = pg.id
+        where pg.node_type = 'panel'
-        join sys_auth_detail sad on sa.id = sad.auth_id
+          and sa.auth_source_type = 'panel'
-        where
+          and sad.privilege_value = 1
-            pg.node_type = 'panel'
+          and (
-        and
-            sa.auth_source_type = 'panel'
-        and
-            sad.privilege_value = 1
-        and
-            (
                 (
-                    sa.auth_target_type = 'dept'
+                            sa.auth_target_type = 'dept'
-                    AND sa.auth_target in ( SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT} )
+                        AND sa.auth_target in (SELECT dept_id FROM sys_user WHERE user_id = #{userId,jdbcType=BIGINT})
-                )
+                    )
-            OR
+                OR
                 (
-                    sa.auth_target_type = 'user'
+                            sa.auth_target_type = 'user'
-                    AND sa.auth_target =  #{userId,jdbcType=BIGINT}
+                        AND sa.auth_target = #{userId,jdbcType=BIGINT}
-                )
+                    )
-            OR
+                OR
                 (
-                    sa.auth_target_type = 'role'
+                            sa.auth_target_type = 'role'
-                    AND sa.auth_target in ( SELECT role_id FROM sys_users_roles WHERE user_id = #{userId,jdbcType=BIGINT} )
+                        AND sa.auth_target in
-                )
+                            (SELECT role_id FROM sys_users_roles WHERE user_id = #{userId,jdbcType=BIGINT})
+                    )
             )
         group by pg.id
     </select>

backend/src/main/java/io/dataease/ext/ExtVAuthModelMapper.java

@@ -10,7 +10,9 @@ public interface ExtVAuthModelMapper {
 
     List<VAuthModelDTO> queryAuthModel(@Param("record") VAuthModelRequest record);
 
-    List<VAuthModelDTO> queryAuthModelViews (@Param("record") VAuthModelRequest record);
+    List<VAuthModelDTO> queryAuthModelByIds(@Param("userId") String userId, @Param("modelType") String modelType, @Param("ids") List<String> ids);
 
-    List<VAuthModelDTO> queryAuthViewsOriginal (@Param("record") VAuthModelRequest record);
+    List<VAuthModelDTO> queryAuthModelViews(@Param("record") VAuthModelRequest record);
+
+    List<VAuthModelDTO> queryAuthViewsOriginal(@Param("record") VAuthModelRequest record);
 }

backend/src/main/java/io/dataease/ext/ExtVAuthModelMapper.xml

@@ -8,6 +8,29 @@
         <result column="is_plugin" jdbcType="VARCHAR" property="isPlugin"/>
     </resultMap>
 
+    <select id="queryAuthModelByIds" resultMap="ExtResultMap">
+        SELECT
+        v_auth_model.id,
+        v_auth_model.name,
+        v_auth_model.label,
+        v_auth_model.pid,
+        v_auth_model.node_type,
+        v_auth_model.model_type,
+        v_auth_model.model_inner_type,
+        v_auth_model.auth_type,
+        v_auth_model.create_by,
+        v_auth_model.level,
+        v_auth_model.mode,
+        v_auth_model.data_source_id,
+        get_auths(v_auth_model.id, #{modelType}, #{userId}) as `privileges`
+        FROM
+        v_auth_model where v_auth_model.model_type = #{modelType} and v_auth_model.id in
+        <foreach collection="ids" item="id" separator="," open="(" close=")">
+            #{id}
+        </foreach>
+        ORDER BY v_auth_model.node_type desc, CONVERT(v_auth_model.label using gbk) asc
+    </select>
+
     <select id="queryAuthModel" resultMap="ExtResultMap">
         SELECT
         v_auth_model.id,
@@ -137,10 +160,8 @@
 
 
     <select id="queryAuthViewsOriginal" resultMap="ExtResultMap">
-        SELECT
+        SELECT *
-            *
+        FROM v_history_chart_view viewsOriginal
-        FROM
-            v_history_chart_view viewsOriginal
         ORDER BY viewsOriginal.node_type desc, CONVERT(viewsOriginal.label using gbk) asc
     </select>
 

backend/src/main/java/io/dataease/service/authModel/VAuthModelService.java

@@ -4,7 +4,7 @@ import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.TreeUtils;
 import io.dataease.controller.request.authModel.VAuthModelRequest;
 import io.dataease.dto.authModel.VAuthModelDTO;
-import io.dataease.ext.*;
+import io.dataease.ext.ExtVAuthModelMapper;
 import org.apache.commons.collections4.CollectionUtils;
 import org.springframework.stereotype.Service;
 
@@ -25,10 +25,22 @@ public class VAuthModelService {
     @Resource
     private ExtVAuthModelMapper extVAuthModelMapper;
 
+    public List<VAuthModelDTO> queryAuthModelByIds(String modelType, List<String> ids) {
+        if (CollectionUtils.isEmpty(ids)) {
+            return new ArrayList<>();
+        }
+        List<VAuthModelDTO> result = extVAuthModelMapper.queryAuthModelByIds(String.valueOf(AuthUtils.getUser().getUserId()), modelType, ids);
+        if (CollectionUtils.isEmpty(result)) {
+            return new ArrayList<>();
+        } else {
+            return result;
+        }
+    }
+
     public List<VAuthModelDTO> queryAuthModel(VAuthModelRequest request) {
         request.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
         List<VAuthModelDTO> result = extVAuthModelMapper.queryAuthModel(request);
-        if(CollectionUtils.isEmpty(result)){
+        if (CollectionUtils.isEmpty(result)) {
             return new ArrayList<>();
         }
         if (request.getPrivileges() != null) {
@@ -44,7 +56,7 @@ public class VAuthModelService {
     }
 
     private List<VAuthModelDTO> filterPrivileges(VAuthModelRequest request, List<VAuthModelDTO> result) {
-        if(AuthUtils.getUser().getIsAdmin()){
+        if (AuthUtils.getUser().getIsAdmin()) {
             return result;
         }
         if (request.getPrivileges() != null) {

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -182,7 +182,7 @@ public class PanelGroupService {
     }
 
 
-    public String update(PanelGroupRequest request) {
+    public PanelGroupDTO update(PanelGroupRequest request) {
         String panelId = request.getId();
         request.setUpdateTime(System.currentTimeMillis());
         request.setUpdateBy(AuthUtils.getUser().getUsername());
@@ -254,7 +254,7 @@ public class PanelGroupService {
             DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, sourceType, request.getId(), request.getPid(), null, sourceType);
         }
         this.removePanelAllCache(panelId);
-        return panelId;
+        return extPanelGroupMapper.findShortOneWithPrivileges(panelId, String.valueOf(AuthUtils.getUser().getUserId()));
     }
 
     public void move(PanelGroupRequest request) {
@@ -294,14 +294,17 @@ public class PanelGroupService {
 
     public void deleteCircle(String id) {
         Assert.notNull(id, "id cannot be null");
-        sysAuthService.checkTreeNoManageCount("panel", id);
         PanelGroupWithBLOBs panel = panelGroupMapper.selectByPrimaryKey(id);
         SysLogDTO sysLogDTO = DeLogUtils.buildLog(SysLogConstants.OPERATE_TYPE.DELETE, sourceType, panel.getId(), panel.getPid(), null, null);
+        String nodeType = panel.getNodeType();
+        if ("folder".equals(nodeType)) {
+            sysAuthService.checkTreeNoManageCount("panel", id);
+        }
         //清理view 和 view cache
-        extPanelGroupMapper.deleteCircleView(id);
+        extPanelGroupMapper.deleteCircleView(id, nodeType);
-        extPanelGroupMapper.deleteCircleViewCache(id);
+        extPanelGroupMapper.deleteCircleViewCache(id, nodeType);
         // 同时会删除对应默认仪表盘
-        extPanelGroupMapper.deleteCircle(id);
+        extPanelGroupMapper.deleteCircle(id, nodeType);
         storeService.removeByPanelId(id);
         shareService.delete(id, null);
         panelLinkService.deleteByResourceId(id);

frontend/src/components/canvas/utils/utils.js

@@ -8,7 +8,7 @@ import {
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
-import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE, PAGE_LINE_DESIGN } from '@/views/panel/panel'
+import { AIDED_DESIGN, MOBILE_SETTING, PAGE_LINE_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'
 
 export function deepCopy(target) {
@@ -271,3 +271,135 @@ export function findCurComponentIndex(componentData, curComponent) {
   }
   return curIndex
 }
+
+export function deleteTreeNode(nodeId, tree, nodeTarget) {
+  if (!nodeId || !tree || !tree.length) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeId) {
+      if (nodeTarget) {
+        nodeTarget['target'] = tree[i]
+      }
+      tree.splice(i, 1)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      deleteTreeNode(nodeId, tree[i].children, nodeTarget)
+    }
+  }
+}
+
+export function moveTreeNode(nodeInfo, tree) {
+  const nodeTarget = { target: null }
+  deleteTreeNode(nodeInfo.id, tree, nodeTarget)
+  if (nodeTarget.target) {
+    nodeTarget.target.pid = nodeInfo.pid
+    insertTreeNode(nodeTarget.target, tree)
+  }
+}
+
+export function updateTreeNode(nodeInfo, tree) {
+  if (!nodeInfo) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeInfo.id) {
+      tree[i].name = nodeInfo.name
+      tree[i].label = nodeInfo.label
+      if (tree[i].isDefault) {
+        tree[i].isDefault = nodeInfo.isDefault
+      }
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      updateTreeNode(nodeInfo, tree[i].children)
+    }
+  }
+}
+
+export function toDefaultTree(nodeId, tree) {
+  if (!nodeId) {
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeId) {
+      tree[i].isDefault = true
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      toDefaultTree(nodeId, tree[i].children)
+    }
+  }
+}
+
+export function insertTreeNode(nodeInfo, tree) {
+  if (!nodeInfo) {
+    return
+  }
+  if (nodeInfo.pid === 0 || nodeInfo.pid === '0') {
+    tree.push(nodeInfo)
+    return
+  }
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === nodeInfo.pid) {
+      if (!tree[i].children) {
+        tree[i].children = []
+      }
+      tree[i].children.push(nodeInfo)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      insertTreeNode(nodeInfo, tree[i].children)
+    }
+  }
+}
+
+export function insertBatchTreeNode(nodeInfoArray, tree) {
+  if (!nodeInfoArray || nodeInfoArray.size === 0) {
+    return
+  }
+  const pid = nodeInfoArray[0].pid
+  for (let i = 0, len = tree.length; i < len; i++) {
+    if (tree[i].id === pid) {
+      if (!tree[i].children) {
+        tree[i].children = []
+      }
+      tree[i].children = tree[i].children.concat(nodeInfoArray)
+      return
+    } else if (tree[i].children && tree[i].children.length) {
+      insertBatchTreeNode(nodeInfoArray, tree[i].children)
+    }
+  }
+}
+
+export function updateCacheTree(opt, treeName, nodeInfo, tree) {
+  if (opt === 'new' || opt === 'copy') {
+    insertTreeNode(nodeInfo, tree)
+  } else if (opt === 'move') {
+    moveTreeNode(nodeInfo, tree)
+  } else if (opt === 'rename') {
+    updateTreeNode(nodeInfo, tree)
+  } else if (opt === 'delete') {
+    deleteTreeNode(nodeInfo, tree)
+  } else if (opt === 'newFirstFolder') {
+    tree.push(nodeInfo)
+  } else if (opt === 'batchNew') {
+    insertBatchTreeNode(nodeInfo, tree)
+  } else if (opt === 'toDefaultPanel') {
+    toDefaultTree(nodeInfo.source, tree)
+  }
+  localStorage.setItem(treeName, JSON.stringify(tree))
+}
+
+export function formatDatasetTreeFolder(tree) {
+  if (tree && tree.length) {
+    for (let len = tree.length - 1; len > -1; len--) {
+      if (tree[len].modelInnerType !== 'group') {
+        tree.splice(len, 1)
+      } else if (tree[len].children && tree[len].children.length) {
+        formatDatasetTreeFolder(tree[len].children)
+      }
+    }
+  }
+}
+
+export function getCacheTree(treeName) {
+  return JSON.parse(localStorage.getItem(treeName))
+}

frontend/src/views/dataset/add/AddApi.vue

@@ -9,7 +9,7 @@
       class="arrow-right"
       @click="showLeft = true"
     >
-      <i class="el-icon-d-arrow-right" />
+      <i class="el-icon-d-arrow-right"/>
     </p>
     <div
       v-show="showLeft"
@@ -172,8 +172,8 @@
           class="data"
         >
           <span class="result-num">{{
-            `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
+              `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
-          }}</span>
+            }}</span>
           <div class="table-grid">
             <ux-grid
               ref="plxTable"
@@ -214,11 +214,12 @@
 </template>
 
 <script>
-import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
+import { isKettleRunning, listApiDatasource, post } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
 import cancelMix from './cancelMix'
 import msgCfm from '@/components/msgCfm/index'
 import { pySort } from './util'
+import { updateCacheTree } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'AddApi',
@@ -442,6 +443,7 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
+          updateCacheTree('batchNew', 'dataset-tree', response.data, JSON.parse(localStorage.getItem('dataset-tree')))
           this.cancel(response.data)
         })
         .finally(() => {
@@ -485,10 +487,12 @@ export default {
     border-top-right-radius: 13px;
     border-bottom-right-radius: 13px;
   }
+
   .table-list {
     p {
       margin: 0;
     }
+
     height: 100%;
     width: 240px;
     padding: 16px 12px;
@@ -501,6 +505,7 @@ export default {
       display: flex;
       justify-content: space-between;
       color: var(--deTextPrimary, #1f2329);
+
       i {
         cursor: pointer;
         font-size: 12px;
@@ -511,6 +516,7 @@ export default {
     .search {
       margin: 12px 0;
     }
+
     .ds-list {
       margin: 12px 0 24px 0;
       width: 100%;
@@ -519,6 +525,7 @@ export default {
     .table-checkbox-list {
       height: calc(100% - 190px);
       overflow-y: auto;
+
       .item {
         height: 40px;
         width: 100%;
@@ -556,12 +563,14 @@ export default {
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
         .error-name-exist {
           position: absolute;
           top: 10px;
           right: 10px;
         }
       }
+
       .not-allow {
         cursor: not-allowed;
         color: var(--deTextDisable, #bbbfc4);
@@ -573,6 +582,7 @@ export default {
     font-family: PingFang SC;
     flex: 1;
     overflow: hidden;
+
     .top-table-detail {
       height: 64px;
       width: 100%;
@@ -580,6 +590,7 @@ export default {
       background: #f5f6f7;
       display: flex;
       align-items: center;
+
       .el-select {
         width: 120px;
         margin-right: 12px;
@@ -593,6 +604,7 @@ export default {
       display: flex;
       align-items: center;
       position: relative;
+
       .name {
         font-size: 14px;
         font-weight: 400;
@@ -611,6 +623,7 @@ export default {
       height: calc(100% - 140px);
       width: 100%;
       box-sizing: border-box;
+
       .result-num {
         font-weight: 400;
         display: inline-block;

frontend/src/views/dataset/add/AddDB.vue

@@ -9,7 +9,7 @@
       class="arrow-right"
       @click="showLeft = true"
     >
-      <i class="el-icon-d-arrow-right" />
+      <i class="el-icon-d-arrow-right"/>
     </p>
     <div
       v-show="showLeft"
@@ -179,8 +179,8 @@
           class="data"
         >
           <span class="result-num">{{
-            `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
+              `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
-          }}</span>
+            }}</span>
           <div class="table-grid">
             <ux-grid
               ref="plxTable"
@@ -221,12 +221,14 @@
 </template>
 
 <script>
-import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
+import { isKettleRunning, listDatasource, post } from '@/api/dataset/dataset'
-import { engineMode, dbPreview } from '@/api/system/engine'
+import { dbPreview, engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
 
 import { pySort } from './util'
+import { updateCacheTree } from '@/components/canvas/utils/utils'
+
 export default {
   name: 'AddDB',
   mixins: [msgCfm, cancelMix],
@@ -460,6 +462,7 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
+          updateCacheTree('batchNew', 'dataset-tree', response.data, JSON.parse(localStorage.getItem('dataset-tree')))
           this.cancel(response.data)
         })
         .finally(() => {
@@ -503,10 +506,12 @@ export default {
     border-top-right-radius: 13px;
     border-bottom-right-radius: 13px;
   }
+
   .table-list {
     p {
       margin: 0;
     }
+
     height: 100%;
     width: 240px;
     padding: 16px 12px;
@@ -519,6 +524,7 @@ export default {
       display: flex;
       justify-content: space-between;
       color: var(--deTextPrimary, #1f2329);
+
       i {
         cursor: pointer;
         font-size: 12px;
@@ -529,6 +535,7 @@ export default {
     .search {
       margin: 12px 0;
     }
+
     .ds-list {
       margin: 12px 0 24px 0;
       width: 100%;
@@ -537,6 +544,7 @@ export default {
     .table-checkbox-list {
       height: calc(100% - 190px);
       overflow-y: auto;
+
       .item {
         height: 40px;
         width: 100%;
@@ -574,12 +582,14 @@ export default {
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
         .error-name-exist {
           position: absolute;
           top: 10px;
           right: 10px;
         }
       }
+
       .not-allow {
         cursor: not-allowed;
         color: var(--deTextDisable, #bbbfc4);
@@ -591,6 +601,7 @@ export default {
     font-family: PingFang SC;
     flex: 1;
     overflow: hidden;
+
     .top-table-detail {
       height: 64px;
       width: 100%;
@@ -598,6 +609,7 @@ export default {
       background: #f5f6f7;
       display: flex;
       align-items: center;
+
       .el-select {
         width: 120px;
         margin-right: 12px;
@@ -611,6 +623,7 @@ export default {
       display: flex;
       align-items: center;
       position: relative;
+
       .name {
         font-size: 14px;
         font-weight: 400;
@@ -629,6 +642,7 @@ export default {
       height: calc(100% - 140px);
       width: 100%;
       box-sizing: border-box;
+
       .result-num {
         font-weight: 400;
         display: inline-block;

frontend/src/views/dataset/group/CreatDsGroup.vue

@@ -18,7 +18,7 @@
         :label="$t('dataset.name')"
         prop="name"
       >
-        <el-input v-model="datasetForm.name" />
+        <el-input v-model="datasetForm.name"/>
       </el-form-item>
       <el-form-item
         :label="$t('deDataset.folder')"
@@ -44,8 +44,8 @@
               slot-scope="{ data }"
               class="custom-tree-node-dataset"
             >
-              <span v-if="data.type === 'group'">
+              <span v-if="data.modelInnerType === 'group'">
-                <svg-icon icon-class="scene" />
+                <svg-icon icon-class="scene"/>
               </span>
               <span
                 style="
@@ -84,7 +84,8 @@
       <deBtn
         secondary
         @click="resetForm"
-      >{{ $t('dataset.cancel') }}</deBtn>
+      >{{ $t('dataset.cancel') }}
+      </deBtn>
       <deBtn
         type="primary"
         @click="saveDataset"
@@ -97,7 +98,8 @@
 <script>
 import { post } from '@/api/dataset/dataset'
 import { datasetTypeMap } from './options'
-import { groupTree } from '@/api/dataset/dataset'
+import { formatDatasetTreeFolder, getCacheTree } from '@/components/canvas/utils/utils'
+
 export default {
   data() {
     return {
@@ -203,21 +205,8 @@ export default {
       )
     },
     tree() {
-      this.loading = true
+      this.tData = getCacheTree('dataset-tree')
-      groupTree({
+      formatDatasetTreeFolder(this.tData)
-        name: '',
-        pid: '0',
-        level: 0,
-        type: 'group',
-        children: [],
-        sort: 'type desc,name asc'
-      })
-        .then((res) => {
-          this.tData = res.data
-        })
-        .finally(() => {
-          this.loading = false
-        })
     },
     nodeClick({ id, label }) {
       this.selectDatasets = [

frontend/src/views/dataset/group/Group.vue

@@ -111,8 +111,8 @@
               class="no-tdata-new"
               @click="() => clickAdd()"
             >{{
-              $t('deDataset.create')
+                $t('deDataset.create')
-            }}</span>
+              }}</span>
           </div>
           <el-tree
             v-else
@@ -134,7 +134,7 @@
             >
               <span style="display: flex; flex: 1; width: 0">
                 <span>
-                  <svg-icon icon-class="scene" />
+                  <svg-icon icon-class="scene"/>
                 </span>
                 <span
                   style="
@@ -242,15 +242,15 @@
                       class="de-card-dropdown"
                     >
                       <el-dropdown-item command="rename">
-                        <svg-icon icon-class="de-ds-rename" />
+                        <svg-icon icon-class="de-ds-rename"/>
                         {{ $t('dataset.rename') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="move">
-                        <svg-icon icon-class="de-ds-move" />
+                        <svg-icon icon-class="de-ds-move"/>
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="delete">
-                        <svg-icon icon-class="de-ds-trash" />
+                        <svg-icon icon-class="de-ds-trash"/>
                         {{ $t('dataset.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -353,15 +353,15 @@
                       class="de-card-dropdown"
                     >
                       <el-dropdown-item command="editTable">
-                        <svg-icon icon-class="de-ds-rename" />
+                        <svg-icon icon-class="de-ds-rename"/>
                         {{ $t('dataset.rename') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="moveDs">
-                        <svg-icon icon-class="de-ds-move" />
+                        <svg-icon icon-class="de-ds-move"/>
                         {{ $t('dataset.move_to') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="deleteTable">
-                        <svg-icon icon-class="de-ds-trash" />
+                        <svg-icon icon-class="de-ds-trash"/>
                         {{ $t('dataset.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -405,7 +405,8 @@
           <deBtn
             secondary
             @click="close()"
-          >{{ $t('dataset.cancel') }}</deBtn>
+          >{{ $t('dataset.cancel') }}
+          </deBtn>
           <deBtn
             type="primary"
             @click="saveGroup(groupForm)"
@@ -433,7 +434,7 @@
           :label="$t('dataset.name')"
           prop="name"
         >
-          <el-input v-model="tableForm.name" />
+          <el-input v-model="tableForm.name"/>
         </el-form-item>
       </el-form>
       <div
@@ -444,8 +445,9 @@
           secondary
           @click="closeTable()"
         >{{
-          $t('dataset.cancel')
+            $t('dataset.cancel')
-        }}</deBtn>
+          }}
+        </deBtn>
         <deBtn
           type="primary"
           @click="saveTable(tableForm)"
@@ -467,8 +469,8 @@
           :title="moveDialogTitle"
           class="text-overflow"
         >{{
-          moveDialogTitle
+            moveDialogTitle
-        }}</span>
+          }}</span>
         {{ $t('dataset.m2') }}
       </template>
       <group-move-selector
@@ -481,8 +483,9 @@
           secondary
           @click="closeMoveGroup()"
         >{{
-          $t('dataset.cancel')
+            $t('dataset.cancel')
-        }}</deBtn>
+          }}
+        </deBtn>
         <deBtn
           :disabled="groupMoveConfirmDisabled"
           type="primary"
@@ -505,8 +508,8 @@
           :title="moveDialogTitle"
           class="text-overflow"
         >{{
-          moveDialogTitle
+            moveDialogTitle
-        }}</span>
+          }}</span>
         {{ $t('dataset.m2') }}
       </template>
       <group-move-selector
@@ -518,8 +521,9 @@
           secondary
           @click="closeMoveDs()"
         >{{
-          $t('dataset.cancel')
+            $t('dataset.cancel')
-        }}</deBtn>
+          }}
+        </deBtn>
         <deBtn
           :disabled="dsMoveConfirmDisabled"
           type="primary"
@@ -530,21 +534,12 @@
     </el-drawer>
 
     <!-- 新增数据集文件夹 -->
-    <CreatDsGroup ref="CreatDsGroup" />
+    <CreatDsGroup ref="CreatDsGroup"/>
   </el-col>
 </template>
 
 <script>
-import {
+import { addGroup, alter, delGroup, delTable, getScene, isKettleRunning, loadTable, post } from '@/api/dataset/dataset'
-  loadTable,
-  getScene,
-  addGroup,
-  delGroup,
-  delTable,
-  post,
-  isKettleRunning,
-  alter
-} from '@/api/dataset/dataset'
 import { getDatasetRelationship } from '@/api/chart/chart.js'
 
 import msgContent from '@/views/system/datasource/MsgContent.vue'
@@ -555,6 +550,7 @@ import { engineMode } from '@/api/system/engine'
 import _ from 'lodash'
 import msgCfm from '@/components/msgCfm/index'
 import { checkPermission } from '@/utils/permission'
+import { updateCacheTree } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'Group',
@@ -688,34 +684,49 @@ export default {
     })
   },
   mounted() {
-    const { id, name } = this.$route.params
+    this.init(true)
-    this.treeLoading = true
-    queryAuthModel({ modelType: 'dataset' }, true)
-      .then((res) => {
-        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
-        this.tData = res.data || []
-        this.$nextTick(() => {
-          this.$refs.datasetTreeRef?.filter(this.filterText)
-          if (id && name.includes(this.filterText)) {
-            this.dfsTableData(this.tData, id)
-          } else {
-            const currentNodeId = sessionStorage.getItem('dataset-current-node')
-            if (currentNodeId) {
-              sessionStorage.setItem('dataset-current-node', '')
-              this.dfsTableData(this.tData, currentNodeId)
-            }
-          }
-        })
-      })
-      .finally(() => {
-        this.treeLoading = false
-      })
-    this.refresh()
   },
   beforeDestroy() {
     sessionStorage.setItem('dataset-current-node', this.currentNodeId)
   },
   methods: {
+    init(cache = true) {
+      const { id, name } = this.$route.params
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = modelInfo && cache
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+        this.queryAfter(id)
+      } else {
+        this.treeLoading = true
+      }
+      queryAuthModel({ modelType: 'dataset' }, !userCache)
+        .then((res) => {
+          localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+          if (!userCache) {
+            this.tData = res.data || []
+            this.queryAfter(id)
+          }
+        })
+        .finally(() => {
+          this.treeLoading = false
+        })
+      this.refresh()
+    },
+    queryAfter(id) {
+      this.$nextTick(() => {
+        this.$refs.datasetTreeRef?.filter(this.filterText)
+        if (id && name.includes(this.filterText)) {
+          this.dfsTableData(this.tData, id)
+        } else {
+          const currentNodeId = sessionStorage.getItem('dataset-current-node')
+          if (currentNodeId) {
+            sessionStorage.setItem('dataset-current-node', '')
+            this.dfsTableData(this.tData, currentNodeId)
+          }
+        }
+      })
+    },
     getDatasetRelationship({ queryType, label, id }) {
       return getDatasetRelationship(id).then((res) => {
         const arr = res.data ? [res.data] : []
@@ -852,7 +863,8 @@ export default {
             this.close()
             this.openMessageSuccess('dataset.save_success')
             this.expandedArray.push(group.pid)
-            this.treeNode()
+            const opt = group.id ? 'rename' : 'new'
+            updateCacheTree(opt, 'dataset-tree', res.data, this.tData)
           })
         } else {
           return false
@@ -872,7 +884,9 @@ export default {
             this.openMessageSuccess('dataset.save_success')
             _this.expandedArray.push(table.sceneId)
             _this.$refs.datasetTreeRef.setCurrentKey(table.id)
-            _this.treeNode()
+            const renameNode = { id: table.id, name: table.name, label: table.name }
+            updateCacheTree('rename', 'dataset-tree', renameNode, this.tData)
+            ('rename', 'dataset-tree', response.data, this.tData)
             this.$emit('switchComponent', { name: '' })
           })
         } else {
@@ -894,11 +908,12 @@ export default {
         .then(() => {
           delGroup(data.id).then((response) => {
             this.openMessageSuccess('dataset.delete_success')
-            this.treeNode()
+            updateCacheTree('delete', 'dataset-tree', data.id, this.tData)
             this.$emit('switchComponent', { name: '' })
           })
         })
-        .catch(() => {})
+        .catch(() => {
+        })
     },
 
     async deleteTable(data) {
@@ -916,7 +931,7 @@ export default {
         cb: () => {
           delTable(data.id).then((response) => {
             this.openMessageSuccess('dataset.delete_success')
-            this.treeNode()
+            updateCacheTree('delete', 'dataset-tree', data.id, this.tData)
             this.$emit('switchComponent', { name: '' })
             this.$store.dispatch('dataset/setTable', new Date().getTime())
           })
@@ -1108,7 +1123,7 @@ export default {
       addGroup(this.groupForm).then((res) => {
         this.openMessageSuccess('dept.move_success')
         this.closeMoveGroup()
-        this.treeNode()
+        updateCacheTree('move', 'dataset-tree', res.data, this.tData)
       })
     },
     targetGroup(val) {
@@ -1133,12 +1148,14 @@ export default {
     },
     saveMoveDs() {
       const newSceneId = this.tDs.id
+      const nodeId = this.dsForm.id
       this.dsForm.sceneId = newSceneId
       this.dsForm.isRename = true
       alter(this.dsForm).then((res) => {
         this.closeMoveDs()
         this.expandedArray.push(newSceneId)
-        this.treeNode()
+        const moveNode = { id: nodeId, pid: newSceneId }
+        updateCacheTree('move', 'dataset-tree', moveNode, this.tData)
         this.openMessageSuccess('移动成功')
       })
     },
@@ -1213,6 +1230,7 @@ export default {
 
 .custom-tree-container {
   margin-top: 10px;
+
   .no-tdata {
     text-align: center;
     margin-top: 80px;
@@ -1220,6 +1238,7 @@ export default {
     font-size: 14px;
     color: var(--deTextSecondary, #646a73);
     font-weight: 400;
+
     .no-tdata-new {
       cursor: pointer;
       color: var(--primary, #3370ff);
@@ -1273,6 +1292,7 @@ export default {
   width: 100%;
   display: flex;
 }
+
 .scene-title-name {
   width: 100%;
   overflow: hidden;
@@ -1280,9 +1300,11 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 .father .child {
   visibility: hidden;
 }
+
 .father:hover .child {
   visibility: visible;
 }
@@ -1299,19 +1321,25 @@ export default {
   padding: 10px 24px;
   height: 100%;
   overflow-y: auto;
+
   .main-area-input {
+    //width: calc(100% - 80px);
+
     .el-input-group__append {
       width: 70px;
       background: transparent;
+
       .el-input__inner {
         padding-left: 12px;
       }
     }
   }
+
   .title-css {
     display: flex;
     justify-content: space-between;
   }
+
   .el-icon-plus {
     width: 28px;
     height: 28px;
@@ -1332,6 +1360,7 @@ export default {
     }
   }
 }
+
 .de-dataset-dropdown {
   .el-dropdown-menu__item {
     height: 40px;
@@ -1342,6 +1371,7 @@ export default {
     font-family: PingFang SC;
     font-size: 14px;
     font-weight: 400;
+
     .svg-icon {
       margin-right: 8.75px;
       width: 16.5px;
@@ -1358,6 +1388,7 @@ export default {
       color: #fff;
     }
   }
+
   .de-top-border {
     border-top: 1px solid rgba(31, 35, 41, 0.15);
   }

frontend/src/views/dataset/group/GroupMoveSelector.vue

@@ -23,8 +23,8 @@
           :class="treeClass(data, node)"
         >
           <span style="display: flex; flex: 1; width: 0">
-            <span v-if="data.type === 'group'">
+            <span v-if="data.modelInnerType === 'group'">
-              <svg-icon icon-class="scene" />
+              <svg-icon icon-class="scene"/>
             </span>
             <span
               style="
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { groupTree } from '@/api/dataset/dataset'
+import { formatDatasetTreeFolder, getCacheTree } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'GroupMoveSelector',
@@ -87,22 +87,23 @@ export default {
   },
   methods: {
     tree(group) {
-      groupTree(group).then((res) => {
+      const treeData = getCacheTree('dataset-tree')
-        if (this.moveDir) {
+      formatDatasetTreeFolder(treeData)
-          this.tData = [
+      if (this.moveDir) {
-            {
+        this.tData = [
-              id: '0',
+          {
-              name: this.$t('dataset.dataset_group'),
+            id: '0',
-              pid: '0',
+            name: this.$t('dataset.dataset_group'),
-              privileges: 'grant,manage,use',
+            pid: '0',
-              type: 'group',
+            privileges: 'grant,manage,use',
-              children: res.data
+            modelInnerType: 'group',
-            }
+            children: treeData
-          ]
+          }
-          return
+        ]
-        }
+        return
-        this.tData = res.data
+      } else {
-      })
+        this.tData = treeData
+      }
     },
     filterNode(value, data) {
       if (!value) return true
@@ -143,10 +144,12 @@ export default {
 <style lang="scss">
 .ds-move-tree {
   height: 100%;
+
   .tree {
     height: calc(100% - 115px);
     overflow-y: auto;
   }
+
   .select-tree-keywords {
     color: var(--primary, #3370ff);
   }

frontend/src/views/panel/list/PanelList.vue

@@ -459,6 +459,7 @@ import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import TreeSelector from '@/components/treeSelector'
 import { queryAuthModel } from '@/api/authModel/authModel'
 import msgCfm from '@/components/msgCfm/index'
+import { updateCacheTree } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'PanelList',
@@ -469,7 +470,7 @@ export default {
       lastActiveDefaultPanelId: null, // 激活的节点 在这个节点下面动态放置子节点
       responseSource: 'panelQuery',
       defaultExpansion: false,
-      clearLocalStorage: ['chart-tree', 'dataset-tree'],
+      clearLocalStorage: ['dataset-tree'],
       historyRequestId: null,
       lastActiveNode: null, // 激活的节点 在这个节点下面动态放置子节点
       lastActiveNodeData: null,
@@ -578,7 +579,7 @@ export default {
         all: this.$t('commons.all'),
         folder: this.$t('commons.folder')
       },
-      initLocalStorage: ['chart', 'dataset']
+      initLocalStorage: ['dataset']
     }
   },
   computed: {
@@ -611,7 +612,6 @@ export default {
     }
   },
   beforeDestroy() {
-    bus.$off('newPanelFromMarket', this.newPanelFromMarket)
   },
   mounted() {
     this.clearCanvas()
@@ -654,18 +654,12 @@ export default {
       })
       this.responseSource = 'panelQuery'
     },
-    newPanelFromMarket(panelInfo) {
-      if (panelInfo) {
-        this.tree()
-        this.edit(panelInfo, null)
-      }
-    },
     initCache() {
       // 初始化时提前加载视图和数据集的缓存
       this.initLocalStorage.forEach((item) => {
         if (!localStorage.getItem(item + '-tree')) {
           queryAuthModel({ modelType: item }, false).then((res) => {
-            localStorage.setItem(item + '-tree', JSON.stringify(res.data))
+            localStorage.setItem(item + '-tree', JSON.stringify(res.data || []))
           })
         }
       })
@@ -673,8 +667,10 @@ export default {
     closeEditPanelDialog(panelInfo) {
       this.editPanel.visible = false
       if (panelInfo) {
-        this.defaultTree(false)
+        if (this.editPanel.optType === 'toDefaultPanel') {
-        this.tree()
+          this.defaultTree(false)
+        }
+        updateCacheTree(this.editPanel.optType, 'panel-main-tree', panelInfo, this.tData)
         if (this.editPanel.optType === 'rename' && panelInfo.id === this.$store.state.panel.panelInfo.id) {
           this.$store.state.panel.panelInfo.name = panelInfo.name
         }
@@ -689,13 +685,7 @@ export default {
             return
           }
           // 复制后的仪表板 放在父节点下面
-          if (this.editPanel.optType === 'copy') {
+          if (this.editPanel.optType !== 'copy') {
-            this.lastActiveNode.parent.data.children.push(panelInfo)
-          } else {
-            if (!this.lastActiveNodeData.children) {
-              this.$set(this.lastActiveNodeData, 'children', [])
-            }
-            this.lastActiveNodeData.children.push(panelInfo)
             this.lastActiveNode.expanded = true
           }
           this.activeNodeAndClick(panelInfo)
@@ -745,6 +735,7 @@ export default {
           this.editPanel = {
             visible: true,
             titlePre: this.$t('panel.to_default'),
+            optType: 'toDefaultPanel',
             panelInfo: {
               id: param.data.id,
               name: param.data.name,
@@ -869,7 +860,7 @@ export default {
               showClose: true
             })
             this.clearCanvas()
-            this.tree()
+            updateCacheTree('delete', 'panel-main-tree', data.id, this.tData)
             this.defaultTree(false)
           })
         }
@@ -906,7 +897,7 @@ export default {
         this.tData = JSON.parse(modelInfo)
       }
       groupTree(this.groupForm, !userCache).then((res) => {
-        localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
+        localStorage.setItem('panel-main-tree', JSON.stringify(res.data || []))
         if (!userCache) {
           this.tData = res.data
         }
@@ -937,7 +928,7 @@ export default {
       defaultTree(requestInfo, false).then((res) => {
         localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
         if (!userCache) {
-          this.defaultData = res.data
+          this.defaultData = res.data || []
           if (showFirst && this.defaultData && this.defaultData.length > 0) {
             this.activeDefaultNodeAndClickOnly(this.defaultData[0].id)
           }
@@ -1054,7 +1045,7 @@ export default {
           _this.$nextTick(() => {
             document.querySelector('.is-current').firstChild.click()
             // 如果是仪表板列表的仪表板 直接进入编辑界面
-            if (panelInfo.nodeType === 'panel') {
+            if (panelInfo.nodeType === 'panel' && this.editPanel.optType !== 'copy') {
               _this.edit(this.lastActiveNodeData, this.lastActiveNode)
             }
           })
@@ -1109,11 +1100,11 @@ export default {
               id: 'panel_list',
               name: _this.$t('panel.panel_list'),
               label: _this.$t('panel.panel_list'),
-              children: res.data
+              children: res.data || []
             }
           ]
         } else {
-          _this.tGroupData = res.data
+          _this.tGroupData = res.data || []
         }
         _this.moveGroup = true
       })
@@ -1126,7 +1117,7 @@ export default {
       this.moveInfo.pid = this.tGroup.id
       this.moveInfo['optType'] = 'move'
       panelUpdate(this.moveInfo).then((response) => {
-        this.tree()
+        updateCacheTree('move', 'panel-main-tree', response.data, this.tData)
         this.closeMoveGroup()
       })
     },

frontend/src/views/panel/list/editPanel/index.vue

@@ -240,7 +240,7 @@ export default {
             showClose: true
           })
           this.loading = false
-          this.$emit('closeEditPanelDialog', { id: response.data, name: this.editPanel.panelInfo.name })
+          this.$emit('closeEditPanelDialog', response.data)
         }).catch(() => {
           this.loading = false
         })