可以导入、导出

Author: codebdy

src/example/README.md

@@ -0,0 +1 @@
+如何使用审批流样例，根据这个目录的演示，集成到目标项目

src/example/WorkflowEditor/WorkFlowEditorInner.tsx

@@ -3,8 +3,9 @@ import { Avatar, Button, Dropdown, MenuProps, Space } from "antd"
 import { memo, useCallback, useMemo, useState } from "react"
 import { styled } from "styled-components"
 import classNames from "classnames"
-import { NavTabs, Toolbar, WorkflowDiagram } from "../../workflow-editor"
+import { NavTabs, Toolbar, WorkflowDiagram, useImport } from "../../workflow-editor"
 import { useTranslate } from "../../workflow-editor/react-locales"
+import { useExport } from "../../workflow-editor"
 
 const Container = styled.div`
   flex:1;
@@ -27,18 +28,22 @@ export const WorkFlowEditorInner = memo((props: {
   const { className, ...other } = props
   const [selectedTab, setSelectedTab] = useState<TabType>(TabType.flowDesign)
   const t = useTranslate()
+  const exportjson = useExport()
+  const importJson = useImport()
   const items: MenuProps['items'] = useMemo(() => [
     {
       label: t("import"),
       key: 'import',
-      icon: <ImportOutlined />
+      icon: <ImportOutlined />,
+      onClick: importJson,
     },
     {
       label: t("export"),
       key: 'export',
-      icon: <ExportOutlined />
+      icon: <ExportOutlined />,
+      onClick: exportjson,
     },
-  ], [t]);
+  ], [exportjson, importJson, t]);
 
   const handleNavChange = useCallback((key?: string) => {
     setSelectedTab((key || TabType.flowDesign) as TabType)

src/workflow-editor/classes/EditorStore.ts

@@ -114,6 +114,18 @@ export class EditorStore {
     this.dispatch(setStartNodeAction)
   }
 
+  setStartNode(node: IWorkFlowNode) {
+    this.backup()
+    const setStartNodeAction: SetStartNodeAction = {
+      type: ActionType.SET_START_NODE,
+      payload: {
+        node
+      }
+    }
+
+    this.dispatch(setStartNodeAction)
+  }
+
   changeNode(node: IWorkFlowNode) {
     this.backup()
     const changeNodeAction: ChangeNodeAction = {

src/workflow-editor/hooks/index.ts

@@ -1 +1,5 @@
-export * from "./useEditorStore"
+export * from "./useEditorStore"
+export * from "./useExport"
+export * from "./useImport"
+export * from "./useSelectedNode"
+export * from "./useStartNode"

src/workflow-editor/hooks/useExport.ts

@@ -1,3 +1,24 @@
-export function useExport(){
-  
+import { message } from "antd";
+import { useCallback } from "react";
+import { saveFile } from "../utils/saveFile";
+import { useTranslate } from "../react-locales";
+import { useStartNode } from "./useStartNode";
+
+export function useExport() {
+  const t = useTranslate();
+  const startNode = useStartNode();
+  const doExport = useCallback(() => {
+
+    saveFile(`approvalflow`, JSON.stringify({ startNode }, null, 2)).then(
+      (savedName) => {
+        if (savedName) {
+          message.success(t("operateSuccess"))
+        }
+      }
+    ).catch(err => {
+      console.error(err)
+    });
+  }, [startNode, t]);
+
+  return doExport
 }

src/workflow-editor/hooks/useImport.ts

@@ -1,3 +1,39 @@
-export function useImport(){
-  
+import { message } from "antd";
+import { useCallback } from "react";
+import { getTheFiles } from "../utils/getFIles";
+import { IWorkFlowNode } from "../interfaces";
+import { useEditorStore } from "./useEditorStore";
+import { useTranslate } from "../react-locales";
+
+export interface IFlowJson {
+  startNode?: IWorkFlowNode
+}
+
+export function useImport() {
+  const edtorStore = useEditorStore()
+  const t = useTranslate()
+
+  const doImport = useCallback(() => {
+    getTheFiles(".json").then((fileHandles) => {
+      fileHandles?.[0]?.getFile().then((file: any) => {
+        file.text().then((fileData: any) => {
+          try {
+            const flowJson: IFlowJson = JSON.parse(fileData);
+            if (flowJson.startNode) {
+              edtorStore?.setStartNode(flowJson.startNode)
+            } else {
+              message.error(t("fileIllegal"));
+            }
+          } catch (error: any) {
+            console.error(error);
+            message.error(t("fileIllegal"));
+          }
+        });
+      });
+    }).catch(err => {
+      console.error(err)
+    });
+  }, [edtorStore, t]);
+
+  return doImport
 }

src/workflow-editor/locales.ts

@@ -44,6 +44,8 @@ export const defalutLocales: ILocales = {
     add: "添加",
     departmentsAndMembersVisable: "以下部门和人员可看到审批模板",
     search: "搜索",
+    operateSuccess: "操作成功",
+    fileIllegal: "文件不合法",
   },
   'en-US': {
     baseSettings: "Base Settings",
@@ -88,5 +90,7 @@ export const defalutLocales: ILocales = {
     add: "Add",
     departmentsAndMembersVisable: "Departments and Members",
     search: "Search",
+    operateSuccess: "Operate success",
+    fileIllegal: "File Illegal",
   }
 }

src/workflow-editor/utils/getFIles.ts

@@ -0,0 +1,14 @@
+export async function getTheFiles(accept: string, multiple?: boolean) {
+  // open file picker
+  const fileHandles = await (window as any).showOpenFilePicker({
+    types: [{
+      accept: {
+        "file/*": accept?.split(",")
+      },
+    }],
+    excludeAcceptAllOption: false,
+    multiple: multiple,
+  });
+
+  return fileHandles;
+}

src/workflow-editor/utils/saveFile.tsx

@@ -0,0 +1,37 @@
+export const pickerTypes = [
+  {
+    accept: {
+      "text/json": [".json"],
+    },
+  },
+];
+
+
+export async function saveFile(name: string, content: string) {
+  //const handle = getHandle();
+  // create a new handle
+  try{
+    const newHandle =  await (window as any).showSaveFilePicker({
+      suggestedName: name + ".json",
+      types: pickerTypes,
+    });
+
+    // create a FileSystemWritableFileStream to write to
+    const writableStream = await newHandle.createWritable();
+
+    // write our file
+    await writableStream.write(content);
+
+    // close the file and write the contents to disk.
+    await writableStream.close();
+
+    //setHandle(newHandle);    
+
+    return newHandle.name;
+  }
+  catch(error){
+    console.error(error);
+    return false;
+  }
+ 
+}