feat: 实现规则链导入逻辑

ww
1 parent f00aade9
Showing 9 changed files with 119 additions and 15 deletions
src/api/ruleDesigner/index.ts
src/enums/cacheEnum.ts
src/enums/pageEnum.ts
src/views/rule/designer/hook/useBasicDataTransform.ts
src/views/rule/designer/hook/useContextMenuAction.ts
src/views/rule/designer/hook/useRuleCopyPaste.ts → src/views/rule/designer/hook/useRuleChainCache.ts
src/views/rule/designer/hook/useRuleChainContextMenu.ts
src/views/rule/designer/hook/useRuleFlow.ts
src/views/rule/designer/hook/useSaveAndRedo.ts
--- a/src/api/ruleDesigner/index.ts
View file @02fc83c
+++ b/src/api/ruleDesigner/index.ts
View file @02fc83c
@@ -4,12 +4,23 @@ import { defHttp } from '/@/utils/http/axios';
 import { RuleChainDetail, RuleChainType } from '/@/views/rule/designer/types/ruleNode';
 enum Api {
+  SAVE_RULE_CHAINS = '/ruleChain',
   GET_RULE_CHAINS_DETAIL = '/ruleChain',
   SAVE = '/ruleChain/metadata',
   GET_RULE_CHAINES = '/ruleChains',
   GET_RULE_NODE_EVENTS = '/events/RULE_NODE',
 }
+export const saveRuleChainDetail = (params: Partial<RuleChainDetail>) => {
+  return defHttp.post<RuleChainDetail>(
+    {
+      url: Api.SAVE_RULE_CHAINS,
+      data: params,
+    },
+    { joinPrefix: false }
+  );
+};
+
 export const getRuleChainDetail = (id: string) => {
   return defHttp.get<RuleChainDetail>(
     {
--- a/src/enums/cacheEnum.ts
View file @02fc83c
+++ b/src/enums/cacheEnum.ts
View file @02fc83c
@@ -41,8 +41,12 @@ export const MENU_LIST = 'MENU_LIST';
 export const RULE_NODE_LOCAL_CACHE_KEY = 'RULE__NODE__KEY__';
+export const RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY = 'RULE__CHAIN__IMPORT__KEY__';
+
 export const RULE_NODE_KEY = 'RULE_NODE';
+export const RULE_CHAIN_KEY = 'RULE_CHAIN';
+
 export enum CacheTypeEnum {
   SESSION,
   LOCAL,
--- a/src/enums/pageEnum.ts
View file @02fc83c
+++ b/src/enums/pageEnum.ts
View file @02fc83c
@@ -18,4 +18,6 @@ export const PageEnum = {
   SHARE_PAGE: '/share/:viewType/:id/:publicId',
   RULE_CHAIN_DETAIL: '/rule/chain/:id',
+
+  RULE_CHAIN_DETAIL_IMPORT: '/rule/chain/import',
 };
--- a/src/views/rule/designer/hook/useBasicDataTransform.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useBasicDataTransform.ts
View file @02fc83c
@@ -8,6 +8,7 @@ import { buildUUID } from '/@/utils/uuid';
 import { isNullOrUnDef } from '/@/utils/is';
 import { useAddNodes } from './useAddNodes';
 import { useAddEdges } from './useAddEdges';
+import { RuleChainEntityType } from '../enum/entity';
 export function useBasicDataTransform() {
   const nodeConfigMap = new Map<string, NodeData>();
@@ -67,8 +68,8 @@ export function useBasicDataTransform() {
       const sourceNode = indexMap.get(Number(fromIndex));
       const targetNode = indexMap.get(Number(toIndex));
-      const source = sourceNode!.id!.id;
-      const target = targetNode!.id!.id;
+      const source = sourceNode?.id?.id || buildUUID();
+      const target = targetNode?.id?.id || buildUUID();
       const sourceHandle = `${source}${SOURCE_HANDLE}`;
       const targetHandle = `${target}${TARGET_HANDLE}`;
@@ -88,7 +89,7 @@ export function useBasicDataTransform() {
     if (!isNullOrUnDef(firstNodeIndex)) {
       const targetNode = indexMap.get(firstNodeIndex);
       const source = inputNodeId;
-      const target = targetNode!.id!.id;
+      const target = targetNode?.id?.id || buildUUID();
       const sourceHandle = `${source}$${SOURCE_HANDLE}`;
       const targetHandle = `${target}${TARGET_HANDLE}`;
       edges.push(
@@ -112,7 +113,7 @@ export function useBasicDataTransform() {
     const { layoutX, layoutY, description } = additionalInfo || {};
     const { getAddNodesParams } = useAddNodes();
-    return getAddNodesParams(
+    const value = getAddNodesParams(
       { x: layoutX!, y: layoutY! },
       {
         ...config,
@@ -128,6 +129,10 @@ export function useBasicDataTransform() {
         id: id?.id || buildUUID(),
       }
     );
+
+    if (!id?.id) node.id = { id: value.id, entityType: RuleChainEntityType.RULE_NODE };
+
+    return value;
   }
   function deconstructionNode(nodes: RuleChainType['nodes']) {
--- a/src/views/rule/designer/hook/useContextMenuAction.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useContextMenuAction.ts
View file @02fc83c
 import { GraphEdge, GraphNode, VueFlowStore, pointToRendererPoint } from '@vue-flow/core';
-import { getRuleNodeCache, setRuleNodeCache } from './useRuleCopyPaste';
+import { getRuleNodeCache, setRuleNodeCache } from './useRuleChainCache';
 import { RuleContextMenuEnum } from './useRuleChainContextMenu';
 import { useAddNodes } from './useAddNodes';
 import { buildUUID } from '/@/utils/uuid';
--- a/src/views/rule/designer/hook/useRuleChainCache.ts renamed from src/views/rule/designer/hook/useRuleCopyPaste.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useRuleChainCache.ts renamed from src/views/rule/designer/hook/useRuleCopyPaste.ts
View file @02fc83c
 import { Edge, Node } from '@vue-flow/core';
-import { RULE_NODE_KEY, RULE_NODE_LOCAL_CACHE_KEY } from '/@/enums/cacheEnum';
+import {
+  RULE_NODE_KEY,
+  RULE_CHAIN_KEY,
+  RULE_NODE_LOCAL_CACHE_KEY,
+  RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY,
+} from '/@/enums/cacheEnum';
 import { createLocalStorage } from '/@/utils/cache';
+import { RuleChainDetail, RuleChainType } from '../types/ruleNode';
 const ruleNodeStorage = createLocalStorage({ prefixKey: RULE_NODE_LOCAL_CACHE_KEY });
+const ruleChainStorage = createLocalStorage({ prefixKey: RULE_CHAIN_IMPORT_LOCAL_CACHE_KEY });
 interface RuleNodeCacheType {
   nodes?: Node[];
@@ -11,6 +18,11 @@ interface RuleNodeCacheType {
   originY?: number;
 }
+export interface RuleChainCacheType {
+  ruleChain: Partial<RuleChainDetail>;
+  metadata: RuleChainType;
+}
+
 export const setRuleNodeCache = ({
   nodes = [],
   edges = [],
@@ -29,6 +41,14 @@ export const getRuleNodeCache = (): RuleNodeCacheType => ruleNodeStorage.get(RUL
 export const checkHasCacheRuleNode = () => !!getRuleNodeCache();
+export const getRuleChainImportCache = (): RuleChainCacheType =>
+  ruleChainStorage.get(RULE_CHAIN_KEY) || {};
+
+export const setRuleChainImportCache = (value: RuleChainCacheType) =>
+  ruleChainStorage.set(RULE_CHAIN_KEY, value);
+
+export const clearRuleChainImportCache = () => ruleChainStorage.remove(RULE_CHAIN_KEY);
+
 function initRuleNodeStorage() {
   const value = ruleNodeStorage.get(RULE_NODE_KEY);
   value && ruleNodeStorage.set(RULE_NODE_KEY, value);
--- a/src/views/rule/designer/hook/useRuleChainContextMenu.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useRuleChainContextMenu.ts
View file @02fc83c
@@ -2,7 +2,7 @@ import { NodeMouseEvent } from '@vue-flow/core';
 import { useContextMenu } from '../src/components/RuleChainContextMenu';
 import { RuleChainContextMenuItemType } from '../src/components/RuleChainContextMenu/index.type';
 import { ElementsTypeEnum } from '../enum';
-import { checkHasCacheRuleNode } from './useRuleCopyPaste';
+import { checkHasCacheRuleNode } from './useRuleChainCache';
 export enum RuleContextMenuEnum {
   DETAIL = 'DETAIL',
@@ -17,6 +17,8 @@ export enum RuleContextMenuEnum {
   UNDO_CHANGE = 'UNDO_CHANGE',
   SELECT_ALL = 'SELECT_ALL',
+
+  CREATE_RULE_CHAIN = 'CREATE_RULE_CHAIN',
 }
 export enum RuleContextMenuNameEnum {
@@ -32,6 +34,8 @@ export enum RuleContextMenuNameEnum {
   UNDO_CHANGE = '撤销更改',
   SELECT_ALL = '选择全部',
+
+  CREATE_RULE_CHAIN = '创建规则链',
 }
 export enum RuleChainContextMenuIconEnum {
@@ -48,6 +52,8 @@ export enum RuleChainContextMenuIconEnum {
   SELECT_ALL = 'material-symbols:select-all',
+  CREATE_RULE_CHAIN = 'material-symbols:settings-ethernet',
+
   // LINK = 'material-symbols:trending-flat',
 }
@@ -95,6 +101,7 @@ export function useCreateRuleChainContextMenu() {
   const createElementsSelectedContextMenu = (
     params: NodeMouseEvent,
     changeMarker: boolean,
+    hasCreateChainMenuItem = false,
     elementsType: ElementsTypeEnum.NODE = ElementsTypeEnum.NODE
   ): Promise<RuleContextMenuEnum | ''> => {
     return new Promise(async (resolve) => {
@@ -106,6 +113,9 @@ export function useCreateRuleChainContextMenu() {
           getMenuItem(RuleContextMenuEnum.PASTE, resolve, !checkHasCacheRuleNode()),
           getDivider(),
           getMenuItem(RuleContextMenuEnum.UNSELECTED, resolve),
+          ...(hasCreateChainMenuItem
+            ? [getMenuItem(RuleContextMenuEnum.CREATE_RULE_CHAIN, resolve)]
+            : []),
           getMenuItem(RuleContextMenuEnum.DELETE_SELECT, resolve),
           getDivider(),
           getMenuItem(RuleContextMenuEnum.APPLY_CHANGE, resolve, !changeMarker),
--- a/src/views/rule/designer/hook/useRuleFlow.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useRuleFlow.ts
View file @02fc83c
@@ -166,7 +166,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const menuType = params.node.selected
       ? await createElementsSelectedContextMenu(
           params,
-          unref(useSaveAndRedoActionType.changeMarker)
+          unref(useSaveAndRedoActionType.changeMarker),
+          validateSelectionElementsCanCreateRuleChain()
         )
       : await createNodeContextMenu(params);
@@ -214,7 +215,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     const menuType = unref(flowActionType.getSelectedElements).length
       ? await createElementsSelectedContextMenu(
           getCreatePanelContextMenuParams(params),
-          unref(useSaveAndRedoActionType.changeMarker)
+          unref(useSaveAndRedoActionType.changeMarker),
+          validateSelectionElementsCanCreateRuleChain()
         )
       : await createPanelContextMenu(
           getCreatePanelContextMenuParams(params),
@@ -380,5 +382,17 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     } as NodeMouseEvent;
   }
+  function validateSelectionElementsCanCreateRuleChain() {
+    const nodes = unref(flowActionType.getSelectedNodes);
+    const edges = unref(flowActionType.getSelectedEdges);
+
+    for (const node of nodes) {
+      const index = edges.findIndex((edge) => edge.target === node.id || edge.source === node.id);
+      if (!~index) return false;
+    }
+
+    return true;
+  }
+
   return { flowActionType };
 }
--- a/src/views/rule/designer/hook/useSaveAndRedo.ts
View file @02fc83c
+++ b/src/views/rule/designer/hook/useSaveAndRedo.ts
View file @02fc83c
@@ -3,12 +3,19 @@ import { ComputedRef, computed, ref, unref } from 'vue';
 import { BasicNodeBindData, EdgeData, NodeData } from '../types/node';
 import { EntryCategoryComponentEnum } from '../enum/category';
 import { useBasicDataTransform } from './useBasicDataTransform';
-import { getRuleChainData, getRuleChainDetail, saveRuleChainData } from '/@/api/ruleDesigner';
+import {
+  getRuleChainData,
+  getRuleChainDetail,
+  saveRuleChainData,
+  saveRuleChainDetail,
+} from '/@/api/ruleDesigner';
 import { ConnectionItemType, RuleChainDetail, RuleChainType } from '../types/ruleNode';
 import { useInputNode } from './useInputNode';
 import { buildUUID } from '/@/utils/uuid';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { RuleChainEntityType } from '../enum/entity';
+import { PageEnum } from '/@/enums/pageEnum';
+import { clearRuleChainImportCache, getRuleChainImportCache } from './useRuleChainCache';
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
@@ -21,10 +28,14 @@ export function useSaveAndRedo() {
   const ROUTE = useRoute();
+  const ROUTER = useRouter();
+
   const debugMarker = ref(false);
   const getRuleChainId = computed(() => (ROUTE.params as Record<'id', string>).id);
+  const getIsImportFlag = computed(() => ROUTE.fullPath === PageEnum.RULE_CHAIN_DETAIL_IMPORT);
+
   const ruleChainDetail = ref<RuleChainDetail>();
   const { mergeData, deconstructionData } = useBasicDataTransform();
@@ -131,7 +142,9 @@ export function useSaveAndRedo() {
   };
   async function getCurrentRuleChainDetail() {
-    ruleChainDetail.value = await getRuleChainDetail(unref(getRuleChainId));
+    ruleChainDetail.value = unref(getIsImportFlag)
+      ? (getImportChainDetail() as RuleChainDetail)
+      : await getRuleChainDetail(unref(getRuleChainId));
   }
   async function handleSaveRuleChain(
@@ -142,19 +155,35 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
+      let ruleChainId = unref(getRuleChainId);
+      if (unref(getIsImportFlag)) {
+        const detail = await saveRuleChainDetail(unref(ruleChainDetail)!);
+        ruleChainDetail.value = detail;
+        ruleChainId = detail.id.id;
+      }
+
       const data = await saveRuleChainData({
         connections,
         nodes,
         firstNodeIndex,
         ruleChainId: {
           entityType: RuleChainEntityType.RULE_CHAIN,
-          id: unref(getRuleChainId),
+          id: ruleChainId,
         },
       });
       parseRuleChain(data);
       resetChange();
+
+      if (unref(getIsImportFlag)) {
+        clearRuleChainImportCache();
+
+        ROUTER.replace({
+          path: `/rule/chain/${ruleChainId}`,
+          replace: true,
+        });
+      }
     } finally {
       loading.value = false;
     }
@@ -164,13 +193,16 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
-      const data = await getRuleChainData(unref(getRuleChainId));
+      const data = unref(getIsImportFlag)
+        ? await getImportMetadata()
+        : await getRuleChainData(unref(getRuleChainId));
+      if (!data) return;
       const elements = parseRuleChain(data);
       flowActionType.setElements(elements);
-      resetChange();
+      unref(getIsImportFlag) ? triggerChange() : resetChange();
     } finally {
       loading.value = false;
     }
@@ -201,6 +233,12 @@ export function useSaveAndRedo() {
     triggerChange();
   };
+  const getImportMetadata = () => {
+    return getRuleChainImportCache().metadata;
+  };
+
+  const getImportChainDetail = () => getRuleChainImportCache().ruleChain;
+
   return {
     loading,
     debugMarker,