@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/flow/common/hooks/useFlowFormLoad.js

@@ -0,0 +1,64 @@
+import { useRef, useEffect } from 'react';
+import { isInIde, PAGE_TYPE } from '../../common';
+/** 处理流程表单加载逻辑 */
+export function useFlowFormLoad(flowLoad, updatePageType) {
+    const formLoadDataRef = useRef({});
+    const timeRef = useRef(null);
+    useEffect(() => () => {
+        clearTimeout(timeRef.current);
+    }, []);
+    /** 获取表单类型 */
+    const getFormType = (currentPageType) => {
+        const couldWriteForm = [
+            PAGE_TYPE.DRAFT,
+            PAGE_TYPE.TO_DO,
+            PAGE_TYPE.CREATEFLOW,
+        ];
+        return couldWriteForm.includes(currentPageType) || isInIde()
+            ? 'create'
+            : 'read';
+    };
+    /** 获取表单数据 */
+    const getFlowData = (data) => ({
+        initialValues: data.objectMap,
+        objectListValues: data.objectListMap,
+    });
+    /**
+     * 加载表单数据 - 仅在请求数据成功后调用
+     * @description
+     *  回调中会通过后端数据检查任务状态，如果任务状态（taskStatus）大于1（说明当前审批任务已不是待办状态），且当前的浏览器参数页面类型是TODO
+     * 则将当前页面的浏览器参数更新
+     */
+    const loadFlowFormData = (data, currentPageType) => {
+        const flowLoadData = {
+            ...getFlowData(data),
+            formType: getFormType(currentPageType),
+        };
+        formLoadDataRef.current = getFlowData(data);
+        if (currentPageType === PAGE_TYPE.TO_DO &&
+            data.processInstance.taskStatus > 1) {
+            // 将url参数中的pageType更新成Done
+            updatePageType(PAGE_TYPE.DONE);
+            // 设置表单状态为只读
+            flowLoadData.formType = 'read';
+        }
+        flowLoad === null || flowLoad === void 0 ? void 0 : flowLoad(flowLoadData);
+        // eslint-disable-next-line rulesdir/no-timer
+        timeRef.current = setTimeout(() => {
+            // 对于表单中的对象列表中的数据，需要延时加载
+            flowLoad === null || flowLoad === void 0 ? void 0 : flowLoad(flowLoadData);
+            timeRef.current = null;
+        });
+    };
+    /** 更新表单类型 */
+    const updateFlowFormType = (type) => {
+        flowLoad === null || flowLoad === void 0 ? void 0 : flowLoad({
+            ...formLoadDataRef.current,
+            formType: type,
+        });
+    };
+    return {
+        loadFlowFormData,
+        updateFlowFormType,
+    };
+}

package/dist/web/components/flow/common/hooks/useFlowPageType.d.ts

@@ -0,0 +1,5 @@
+/** 处理流程PageType的更新 */
+export declare function useFlowPageType(): {
+    currentPageType: string;
+    updatePageType: (pageType: string | null) => void;
+};

package/dist/web/components/flow/common/hooks/useFlowPageType.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+// eslint-disable-next-line rulesdir/no-phantom-deps
+import EventEmitter from 'eventemitter3';
+import { parse, stringify } from 'querystring';
+import { getFlowPageQuery } from '../utils';
+/** 处理流程PageType的更新 */
+export function useFlowPageType() {
+    const { currentPageType: defaultPageType } = getFlowPageQuery();
+    const [currentPageType, setCurrentPageType] = useState(defaultPageType);
+    useEffect(() => {
+        FlowPageTypeHub.listen((pageType) => setCurrentPageType(pageType));
+        return () => {
+            FlowPageTypeHub.remove();
+        };
+    }, []);
+    /** 更新浏览器参数中的PageType */
+    function updatePageType(pageType) {
+        if (!pageType)
+            return;
+        const { hash, origin, pathname } = location;
+        const currentHash = hash.split('?')[0];
+        const currentSearch = parse(hash.split('?')[1]);
+        const newSearch = stringify({ ...currentSearch, pageType });
+        const newHash = `${currentHash}?${newSearch}`;
+        const newUrl = `${origin}${pathname}${newHash}`;
+        history.pushState('', '', newUrl);
+        FlowPageTypeHub.send(pageType);
+    }
+    return {
+        currentPageType,
+        updatePageType,
+    };
+}
+const messageHub = new EventEmitter();
+const FlowPageTypeHub = {
+    listen(callback) {
+        messageHub.on('flow-page-type', (pageType) => {
+            callback(pageType);
+        });
+    },
+    send(pageType) {
+        messageHub.emit('flow-page-type', pageType);
+    },
+    remove() {
+        if (!messageHub.listenerCount) {
+            messageHub.removeAllListeners();
+        }
+    },
+};

package/dist/web/components/flow/common/index.d.ts

@@ -0,0 +1,6 @@
+export * from './utils';
+export * from './constants';
+export * from './types';
+export * from './components';
+export * from './hooks';
+export * from './request';

package/dist/web/components/flow/common/index.js

@@ -0,0 +1,7 @@
+/* eslint-disable rulesdir/no-export-all */
+export * from './utils';
+export * from './constants';
+export * from './types';
+export * from './components';
+export * from './hooks';
+export * from './request';

package/dist/web/components/flow/common/request.d.ts

@@ -0,0 +1,28 @@
+/** 流程请求数据属性 */
+export type IFlowRequestDefaultData = Record<string, unknown> | Record<string, unknown>[];
+/** 流程请求参数属性 */
+export interface IFlowRequestParameter<T = IFlowRequestDefaultData> {
+    params: {
+        action: string;
+        data: T;
+    };
+    config?: {
+        previewData?: T | null;
+        upperCaseData?: boolean;
+        upperCaseIgnoreKeys?: string[];
+    };
+}
+/**
+ * 流程请求
+ * @description 基于callWedaApi 封装，主要是处理出入参大小写，以及预览数据
+ */
+export declare function flowRequest<T = IFlowRequestDefaultData>(params: {
+    action: string;
+    data: IFlowRequestDefaultData;
+}, config?: {
+    previewData?: Record<string, unknown> | null;
+    upperCaseData?: boolean;
+    upperCaseIgnoreKeys?: string[];
+    lowerCaseResult?: boolean;
+    lowerResultCaseIgnoreKeys?: string[];
+}): Promise<T>;

package/dist/web/components/flow/common/request.js

@@ -0,0 +1,47 @@
+import { callWedaApi } from '../../../utils/tcb';
+import { isInIde } from './utils';
+/**
+ * 流程请求
+ * @description 基于callWedaApi 封装，主要是处理出入参大小写，以及预览数据
+ */
+export async function flowRequest(params, config) {
+    const { previewData, upperCaseData = true, upperCaseIgnoreKeys, lowerCaseResult = true, lowerResultCaseIgnoreKeys, } = config || {};
+    if (isInIde()) {
+        return toTransKeyCase(previewData || {}, lowerCaseResult ? 'toLowerCase' : 'toUpperCase', lowerResultCaseIgnoreKeys);
+    }
+    const result = await callWedaApi({
+        ...params,
+        data: toTransKeyCase(params.data, upperCaseData ? 'toUpperCase' : 'toLowerCase', upperCaseIgnoreKeys),
+    });
+    return toTransKeyCase(result, lowerCaseResult ? 'toLowerCase' : 'toUpperCase', lowerResultCaseIgnoreKeys);
+}
+/** 转换具体参数的首字母大小写 */
+function toTransKeyCase(target, method, ignoreKeyValues) {
+    const result = {};
+    if (isArray(target)) {
+        return target === null || target === void 0 ? void 0 : target.map((item) => toTransKeyCase(item, method, ignoreKeyValues));
+    }
+    if (isObject(target)) {
+        return Object.keys(target).reduce((acc, key) => {
+            const finalKey = transKey(key, method);
+            acc[finalKey] = (ignoreKeyValues === null || ignoreKeyValues === void 0 ? void 0 : ignoreKeyValues.includes(key))
+                ? target[key]
+                : toTransKeyCase(target[key], method, ignoreKeyValues);
+            return acc;
+        }, result);
+    }
+    return target;
+}
+/** 转换字符串首字母大小写 */
+function transKey(str, method) {
+    const firstChar = method === 'toLowerCase'
+        ? str.charAt(0).toLowerCase()
+        : str.charAt(0).toUpperCase();
+    return `${firstChar}${str.slice(1)}`;
+}
+function isArray(value) {
+    return Array.isArray(value);
+}
+function isObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}

package/dist/web/components/flow/common/types.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { IUseFlowConfig } from './hooks';
+/** 微搭平台自定义属性 */
+export interface IWedaPlatformProps {
+    /** 文本颜色 */
+    moduleContentColor?: string;
+    /** 文本字号 */
+    moduleContentFontSize?: number;
+    /** 文本字重 */
+    moduleContentFontWeight?: string;
+    /** 文本行高 */
+    moduleContentLineHeight?: string;
+    /** 标题内容 */
+    moduleTitle?: string;
+    /** 标题颜色 */
+    moduleTitleColor?: string;
+    /** 标题字号 */
+    moduleTitleFontSize?: number;
+    /** 标题字重 */
+    moduleTitleFontWeight?: string;
+    /** 标题行高 */
+    moduleTitleLineHeight?: string;
+    /** 标题是否可见 */
+    moduleTitleVisible?: boolean;
+    /** 流程正文插槽 - 包含 流程基本信息 流程流转记录 流程图示 */
+    flowContentSlot?: React.ReactNode;
+    /** 流程控制插槽 */
+    flowControlSlot?: React.ReactNode;
+    /** 平台事件 */
+    events?: {
+        /** 流程加载回调 */
+        flowLoad?: (data: unknown) => void;
+        /** 流程提交点击事件 */
+        tap?: (...arg: unknown[]) => void;
+        /** 保存草稿后事件 */
+        afterSavedDraft?: () => void;
+        /** 提交后事件 */
+        afterSubmit?: () => void;
+        /** 取消提交后事件 */
+        afterCancelSubmit?: () => void;
+        /** 处理后事件 */
+        afterHandle?: () => void;
+        /** 同意后事件 */
+        afterAgree?: () => void;
+        /** 拒绝后事件 */
+        afterReject?: () => void;
+        /** 转办后事件 */
+        afterTransfer?: () => void;
+        /** 回退后事件 */
+        afterGoBack?: () => void;
+        /** 加签后事件 */
+        afterAddAssignee?: () => void;
+        /** 撤销后事件 */
+        afterRevoke?: () => void;
+        /** 选择完下一节点审批人后事件 */
+        afterSelectNextApprover?: () => void;
+    };
+}
+/** 流程模块属性 包含公用的流程配置 以及 微搭平台属性 */
+export type IFlowModulesProps = IUseFlowConfig & {
+    wedaPlatformProps: IWedaPlatformProps;
+};

package/dist/web/components/flow/common/types.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/flow/common/utils.d.ts

@@ -0,0 +1,9 @@
+import { isInIde } from '../../../utils/platform';
+import { safeJsonParse } from '../../../utils/tool';
+import classNames from '../../../utils/classnames';
+/** 获取当前流程页面参数 */
+declare function getFlowPageQuery(): {
+    flowTaskId: string;
+    currentPageType: string;
+};
+export { isInIde, safeJsonParse, classNames, getFlowPageQuery };

package/dist/web/components/flow/common/utils.js

@@ -0,0 +1,15 @@
+import { isInIde } from '../../../utils/platform';
+import { safeJsonParse } from '../../../utils/tool';
+import classNames from '../../../utils/classnames';
+import { getPageQuery } from '../../../utils/getPageQuery';
+import { PAGE_TYPE } from './constants';
+/** 获取当前流程页面参数 */
+function getFlowPageQuery() {
+    const { flowTaskId, pageType: queryPageType } = getPageQuery();
+    const currentPageType = isInIde() ? PAGE_TYPE.TO_DO : queryPageType;
+    return {
+        flowTaskId: flowTaskId,
+        currentPageType: currentPageType,
+    };
+}
+export { isInIde, safeJsonParse, classNames, getFlowPageQuery };

package/dist/web/components/flow/modules/basic/Basic.css

@@ -0,0 +1,16 @@
+.mf-progress-info__form {
+  display: flex !important;
+  line-height: 1.7;
+  width: 100%;
+  font-size: 14px;
+  background-color: #fff;
+}
+.mf-progress-info__form .wedatea2td-form__item {
+  width: 25%;
+}
+.mf-progress-info__form .wedatea2td-form__controls {
+  font-size: 14px;
+}
+.mf-progress-info__form .wedatea2td-form__label {
+  width: 70px !important;
+}

package/dist/web/components/flow/modules/basic/Basic.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IFlowModulesProps } from '../../common';
+import './Basic.css';
+export declare const Basic: (props: IFlowModulesProps) => JSX.Element;

package/dist/web/components/flow/modules/basic/Basic.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+import { Card, Button, Form } from 'tea-component';
+import { FlowContentText, FlowTitleText, getModuleContentStyle, } from '../../common';
+import { pressTask } from './utils';
+import { FlowStatusText } from './status-text';
+import './Basic.css';
+export const Basic = (props) => {
+    const { currentPageType, approvalPageDetail, processInstance, wedaPlatformProps, } = props;
+    // 是否为发起流程页面
+    const isStartFlowPage = ['DRAFT', 'CREATEFLOW'].includes(currentPageType) &&
+        (approvalPageDetail === null || approvalPageDetail === void 0 ? void 0 : approvalPageDetail.showSubmitApp);
+    const onPressTask = () => {
+        pressTask(processInstance.instanceId);
+    };
+    const formOptions = [
+        { label: '发起人', value: processInstance.startedBy },
+        {
+            label: '发起时间',
+            value: processInstance.startTime
+                ? moment(processInstance.startTime).format('YYYY-MM-DD HH:mm:ss')
+                : '--',
+        },
+        {
+            label: '结束时间',
+            value: processInstance.endTime
+                ? moment(processInstance.endTime).format('YYYY-MM-DD HH:mm:ss')
+                : '--',
+        },
+        {
+            label: '流程状态',
+            value: (_jsx(FlowStatusText, { flow: processInstance, style: getModuleContentStyle(wedaPlatformProps) })),
+            useOriginValue: true,
+        },
+    ];
+    if (!isStartFlowPage) {
+        return (_jsx(Card.Body, { className: "page-process__progress-card", title: _jsx(FlowTitleText, { wedaPlatformProps: props.wedaPlatformProps }), operation: _jsx("div", { className: "detail__operations", children: currentPageType === 'CREATE' && !processInstance.isCompleted && (_jsx(Button, { type: "link", style: { fontSize: '14px' }, onClick: onPressTask, children: "\u50AC\u529E" })) }), children: _jsx(Form, { className: "mf-progress-info__form", children: formOptions.map(({ label, value, useOriginValue }, index) => (_jsx(Form.Item, { label: _jsxs(FlowContentText, { wedaPlatformProps: props.wedaPlatformProps, children: [label, "\uFF1A"] }), children: useOriginValue ? (value) : (_jsx(FlowContentText, { wedaPlatformProps: props.wedaPlatformProps, children: value })) }, index))) }) }));
+    }
+    return null;
+};

package/dist/web/components/flow/modules/basic/BasicMobile.css

@@ -0,0 +1,29 @@
+.process-progress--mb {
+  background: #fff !important;
+}
+.progress-mb--header {
+  background: #fff;
+  padding: 16px;
+}
+.progress-mb--header .progress-mb--title {
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 8px;
+  color: #333;
+}
+.progress-mb--header .progress-mb--header__module-title {
+  margin-bottom: 10px;
+}
+.progress-mb--header .wedatea2td-tag {
+  margin-top: 0;
+}
+.progress-mb--header .wedatea2td-justify-grid .wedatea2td-justify-grid__col {
+  font-size: 12px;
+}
+.progress-mb--header__info {
+  font-size: 12px;
+  line-height: 20px;
+}
+.progress-mb--header__info + .progress-mb--header__info {
+  margin-top: 6px;
+}

package/dist/web/components/flow/modules/basic/BasicMobile.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IFlowModulesProps } from '../../common';
+import './BasicMobile.css';
+export declare const BasicMobile: (props: IFlowModulesProps) => JSX.Element;

package/dist/web/components/flow/modules/basic/BasicMobile.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+import { Text, Button, Justify } from 'tea-component';
+import { FlowTitleText, getModuleTitleStyle, getModuleContentStyle, } from '../../common';
+import { pressTask } from './utils';
+import { FlowStatusText } from './status-text';
+import './BasicMobile.css';
+export const BasicMobile = (props) => {
+    const { currentPageType, approvalPageDetail, processInstance, wedaPlatformProps, } = props;
+    const flowModelContentStyle = getModuleContentStyle(wedaPlatformProps);
+    // 是否为发起流程页面
+    const isStartFlowPage = ['DRAFT', 'CREATEFLOW'].includes(currentPageType) &&
+        (approvalPageDetail === null || approvalPageDetail === void 0 ? void 0 : approvalPageDetail.showSubmitApp);
+    const onPressTask = () => {
+        pressTask(processInstance.instanceId);
+    };
+    if (isStartFlowPage) {
+        return (_jsxs("div", { className: "progress-mb--header", children: [_jsx(FlowTitleText, { wedaPlatformProps: props.wedaPlatformProps, className: "progress-mb--header__module-title" }), _jsx("div", { className: "progress-mb--title", style: { marginBottom: 0, ...getModuleTitleStyle(wedaPlatformProps) }, children: processInstance === null || processInstance === void 0 ? void 0 : processInstance.name })] }));
+    }
+    return (_jsxs("div", { className: "progress-mb--header", children: [_jsx(FlowTitleText, { wedaPlatformProps: props.wedaPlatformProps, className: "progress-mb--header__module-title" }), _jsxs("div", { className: "progress-mb--title", style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: flowModelContentStyle, children: processInstance === null || processInstance === void 0 ? void 0 : processInstance.name }), currentPageType === 'CREATE' && !(processInstance === null || processInstance === void 0 ? void 0 : processInstance.isCompleted) && (_jsx(Button, { type: "link", style: { fontSize: '14px', flexShrink: '0' }, onClick: onPressTask, children: "\u50AC\u529E" }))] }), _jsx("div", { className: "progress-mb--header__info", children: _jsxs(Text, { theme: "weak", style: flowModelContentStyle, children: ["\u53D1\u8D77\u4EBA\uFF1A", processInstance.startedBy] }) }), _jsx(Justify, { className: "progress-mb--header__info", left: _jsxs(Text, { theme: "weak", style: flowModelContentStyle, children: ["\u53D1\u8D77\u65F6\u95F4\uFF1A", processInstance.startTime
+                            ? moment(processInstance.startTime).format('YYYY-MM-DD HH:mm:ss')
+                            : '--', ' '] }), right: _jsx(FlowStatusText, { flow: processInstance, style: getModuleContentStyle(wedaPlatformProps) }) })] }));
+};

package/dist/web/components/flow/modules/basic/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IWedaPlatformProps } from '../../common';
+export default function ModelFlowBasic(props: IWedaPlatformProps): JSX.Element;

package/dist/web/components/flow/modules/basic/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFlowConfig, WedaFlowContainer, } from '../../common';
+import { Basic } from './Basic';
+import { BasicMobile } from './BasicMobile';
+export default function ModelFlowBasic(props) {
+    const flowConfig = useFlowConfig({
+        moduleName: 'flow-basic',
+        wedaPlatformProps: props,
+    });
+    const commonProps = {
+        ...flowConfig,
+        wedaPlatformProps: props,
+    };
+    const renderContent = () => {
+        if (flowConfig.isH5) {
+            return _jsx(BasicMobile, { ...commonProps });
+        }
+        return _jsx(Basic, { ...commonProps });
+    };
+    return (_jsx(WedaFlowContainer, { ref: flowConfig.elementRef, wedaPlatformProps: props, children: renderContent() }));
+}

package/dist/web/components/flow/modules/basic/status-text.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface FlowStatusTextProps {
+    flow?: {
+        isCompleted?: boolean;
+        status?: number;
+        userTaskType?: number;
+    };
+    style?: React.CSSProperties;
+}
+export declare const FlowStatusText: (props: FlowStatusTextProps) => JSX.Element;
+export {};

package/dist/web/components/flow/modules/basic/status-text.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'tea-component';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const omit = (prop, { [prop]: _, ...rest }) => rest;
+export const FlowStatusText = (props) => {
+    const { isCompleted, status, userTaskType } = props.flow || {};
+    const getTagProps = () => {
+        const props = {
+            theme: 'warning',
+            text: '审批中',
+        };
+        if (userTaskType === 2) {
+            props.text = '处理中';
+        }
+        if (isCompleted) {
+            if (status === 1) {
+                props.theme = 'danger';
+                props.text = '已终止';
+            }
+            else if (status === 2) {
+                props.theme = 'danger';
+                props.text = '已驳回';
+            }
+            else if (status === 4) {
+                props.theme = 'danger';
+                props.text = '已作废';
+            }
+            else {
+                props.theme = 'success';
+                props.text = userTaskType === 2 ? '已处理' : '审批通过';
+            }
+        }
+        return props;
+    };
+    const { text, ...rest } = getTagProps();
+    return (_jsx(Text, { ...rest, style: omit('color', props.style), children: text }));
+};

package/dist/web/components/flow/modules/basic/utils.d.ts

@@ -0,0 +1 @@
+export declare const pressTask: (instanceId: string) => Promise<void>;

package/dist/web/components/flow/modules/basic/utils.js

@@ -0,0 +1,29 @@
+import { message } from 'tea-component';
+import { isInIde, flowRequest } from '../../common';
+// 流程催办
+export const pressTask = async (instanceId) => {
+    if (isInIde())
+        return;
+    try {
+        const result = await flowRequest({
+            data: { instanceId },
+            action: 'PressTask',
+        });
+        if ((result === null || result === void 0 ? void 0 : result.status) === true) {
+            message.success({
+                content: '催办成功',
+            });
+            return;
+        }
+        if ((result === null || result === void 0 ? void 0 : result.status) === false) {
+            message.warning({
+                content: '当前催办操作过于频繁，请明日再试！',
+            });
+        }
+    }
+    catch (error) {
+        message.error({
+            content: '催办失败！',
+        });
+    }
+};

package/dist/web/components/flow/modules/chart/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IWedaPlatformProps } from '../../common';
+export default function ModelFlowChart(props: IWedaPlatformProps): JSX.Element;

package/dist/web/components/flow/modules/chart/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { message } from 'tea-component';
+import { useFlowConfig, WedaFlowContainer, flowRequest, } from '../../common';
+import FlowGraph from '../../../flow-graph';
+import { processCanvasInfoPreviewData } from './preview-data';
+export default function ModelFlowChart(props) {
+    const flowConfig = useFlowConfig({
+        moduleName: 'flow-chart',
+        wedaPlatformProps: props,
+    });
+    return (_jsx(WedaFlowContainer, { wedaPlatformProps: props, ref: flowConfig.elementRef, children: _jsx(FlowChart, { ...flowConfig, wedaPlatformProps: props }) }));
+}
+const FlowChart = (props) => {
+    const { processInstance } = props;
+    const [canvasInfo, setCanvasInfo] = useState({
+        Nodes: [],
+        Edges: [],
+    });
+    useEffect(() => {
+        (async () => {
+            if (processInstance.instanceId) {
+                const result = await getProcessCanvasInfo({
+                    flowCode: processInstance.flowCode,
+                    instanceId: processInstance.instanceId,
+                    appVersion: processInstance.flowVersion,
+                });
+                setCanvasInfo(result);
+            }
+        })();
+    }, [processInstance]);
+    /**
+     * 获取流程实例运行图
+     */
+    async function getProcessCanvasInfo(data) {
+        try {
+            const result = await flowRequest({
+                data,
+                action: 'GetProcessCanvasInfo',
+            }, { lowerCaseResult: false, previewData: processCanvasInfoPreviewData });
+            return result;
+        }
+        catch (error) {
+            message.error({ content: '获取流程实例运行数据失败' });
+            return {};
+        }
+    }
+    return _jsx(FlowGraph, { processCanvasInfo: canvasInfo });
+};

package/dist/web/components/flow/modules/chart/preview-data.d.ts

@@ -0,0 +1,45 @@
+export declare const processCanvasInfoPreviewData: {
+    Nodes: ({
+        visited: boolean;
+        Id: number;
+        ElementId: string;
+        Name: string;
+        DataType: number;
+        Status: number;
+        Conf: {
+            Name: string;
+            Status: number;
+            OpTime: number;
+            Comment: string;
+            AttachmentInfo: string;
+            NewProcessors: string;
+        }[];
+    } | {
+        visited: boolean;
+        Id: number;
+        ElementId: string;
+        Name: string;
+        DataType: number;
+        Status: number;
+        Conf: {
+            Name: string;
+            Status: number;
+            OpTime: number;
+        }[];
+    } | {
+        visited: boolean;
+        Id: number;
+        ElementId: string;
+        Name: string;
+        DataType: number;
+        Status: number;
+        Conf?: undefined;
+    })[];
+    Edges: {
+        Label: string;
+        Type: number;
+        Source: string;
+        Target: string;
+        Status: number;
+    }[];
+};