@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/flow/process/process.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tag, Status, LoadingTip, Bubble } from 'tea-component';
+import { useFlowConfig, WedaFlowContainer, FlowTitleText, FlowContentText, } from '../common';
+import { Descriptions, Timeline, CommentText, } from './components';
+import { NAME_MAPPING, NAME_TEXT_MAPPING } from './constants';
+import { useFlowProcessModel } from './view-model';
+import './style.css';
+/** 批办过程组件 */
+export default function ModelFlowProcess(props) {
+    const { processData, loading, getProcessDataList } = useFlowProcessModel();
+    const flowConfig = useFlowConfig({
+        moduleName: 'flow-process',
+        wedaPlatformProps: props,
+        // 待流程公共数据加载完毕后，再获取流程审批历史数据
+        commonDataLoaded: getProcessDataList,
+    });
+    /** 根据批办过程数据渲染时间轴 */
+    const renderTimeline = () => {
+        if (loading) {
+            return _jsx(LoadingTip, {});
+        }
+        if (!(processData === null || processData === void 0 ? void 0 : processData.length)) {
+            return _jsx(Status, { icon: "blank", size: "l", title: "\u6682\u65E0\u6D41\u8F6C\u8BB0\u5F55" });
+        }
+        const timelineItems = processData.map((processItem) => ({
+            title: (_jsx(FlowContentText, { wedaPlatformProps: props, omitProperties: ['fontSize'], children: processItem.title })),
+            label: (_jsx(FlowContentText, { wedaPlatformProps: props, omitProperties: ['color'], children: processItem.contentInfo.createTime })),
+            dotColor: processItem.dotColor,
+            extra: renderStatusTag(processItem.status),
+            content: renderContent(processItem, props),
+        }));
+        return (_jsx(Timeline, { items: timelineItems, titleAlign: flowConfig.isH5 ? 'space-between' : 'flex-start', style: { paddingTop: 6 } }));
+    };
+    return (_jsx(WedaFlowContainer, { wedaPlatformProps: props, ref: flowConfig.elementRef, children: _jsxs("div", { className: "weda-process-container", children: [_jsx(FlowTitleText, { className: "weda-process-title", wedaPlatformProps: props }), renderTimeline()] }) }));
+}
+/** 渲染状态标签 */
+function renderStatusTag(status) {
+    if ([NAME_MAPPING.START, NAME_MAPPING.END, NAME_MAPPING.CC].includes(status))
+        return null;
+    const { theme, text } = (NAME_TEXT_MAPPING === null || NAME_TEXT_MAPPING === void 0 ? void 0 : NAME_TEXT_MAPPING[status]) || {};
+    if (!text)
+        return null;
+    return (_jsx(Tag, { className: "weda-process-status-tag", theme: theme, children: text }));
+}
+/**
+ * 从批办记录中获取时间轴正文
+ * 目前显示以下条目：
+ * - 1.发起人or审批人
+ * - 2.抄送
+ * - 3.回退到指定节点
+ * - 4.审批意见
+ * - 5.加签
+ */
+function renderContent(processItem, wedaPlatformProps) {
+    var _a, _b, _c;
+    const { status, contentInfo } = processItem || {};
+    const isLongComment = ((_a = contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.operationComment) === null || _a === void 0 ? void 0 : _a.length) > 100;
+    const renderContent = (content, isLabel = false) => (_jsx(FlowContentText, { wedaPlatformProps: wedaPlatformProps, omitProperties: isLabel ? ['color'] : [], children: content }));
+    const items = [
+        {
+            label: status === NAME_MAPPING.START ? '发起人' : '审批人',
+            children: () => renderUserBubble(processItem),
+            visible: ![NAME_MAPPING.CC, NAME_MAPPING.DROP].includes(status),
+        },
+        {
+            label: '抄送',
+            children: () => { var _a, _b; return (_b = (_a = contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.ccUserInfos) === null || _a === void 0 ? void 0 : _a.map((i) => i.name)) === null || _b === void 0 ? void 0 : _b.join('、'); },
+            visible: status === NAME_MAPPING.CC || (contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.isCC),
+        },
+        {
+            label: '回退到指定节点',
+            children: () => { var _a, _b; return ((_b = (_a = contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.operationList) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.name) || ''; },
+            visible: status === NAME_MAPPING.TRANS,
+        },
+        {
+            label: '加签',
+            children: () => { var _a, _b, _c; return (_c = (_b = (_a = contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.operationList) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (i) => i.name)) === null || _c === void 0 ? void 0 : _c.join('、'); },
+            visible: status === NAME_MAPPING.COUNTERSIGN,
+        },
+        {
+            label: '审批意见',
+            children: () => (_jsx(CommentText, { comment: contentInfo.operationComment, highlightPositionList: contentInfo.highlightPositionList, arrowDirection: isLongComment ? 'top' : 'left' })),
+            layout: isLongComment ? 'vertical' : 'horizontal',
+            visible: !!((_c = (_b = contentInfo === null || contentInfo === void 0 ? void 0 : contentInfo.operationComment) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)),
+        },
+    ];
+    const showItems = items
+        .filter((i) => i.visible)
+        .map(({ label, children, layout }) => ({
+        layout,
+        label: renderContent(label, true),
+        children: renderContent(children()),
+    }));
+    return _jsx(Descriptions, { items: showItems });
+}
+/** 操作用户列表气泡标签 */
+function renderUserBubble(processItem) {
+    const { operaName, approvalStrategy } = processItem;
+    if (typeof operaName === 'string') {
+        return _jsx("span", { children: operaName || '-' });
+    }
+    if (Array.isArray(operaName)) {
+        const names = operaName.filter((name) => name);
+        if (!names.length) {
+            return _jsx("span", { children: "-" });
+        }
+        if (names.length < 2) {
+            return _jsx("span", { children: names[0] });
+        }
+        return (_jsxs(Bubble, { arrowPointAtCenter: true, placement: "top-end", content: names.join('、'), children: [names === null || names === void 0 ? void 0 : names.slice(0, 2).join('、'), _jsxs("span", { children: ["\u7B49", _jsxs("span", { style: { color: '#2473f2' }, children: [names.length, "\u4EBA"] }), approvalStrategy === '1' ? '任签' : '加签'] })] }));
+    }
+    return null;
+}

package/dist/web/components/flow/process/style.css

@@ -0,0 +1,17 @@
+.weda-process-container {
+  padding: 20px;
+}
+.weda-process-title {
+  margin-bottom: 6px;
+  font-size: 16px;
+  font-weight: bolder;
+}
+
+.weda-process-status-tag {
+  min-width: 72px;
+  padding: 0 12px;
+  text-align: center;
+  line-height: 24px;
+  margin-left: 12px;
+  margin-top: 0 !important;
+}

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

@@ -0,0 +1,80 @@
+import { ITimelineItemConfig } from './components';
+import { IStatusName } from './constants';
+/** 批办过程响应数据 */
+export interface IElementInfo {
+    id: string;
+    /** 节点名称 */
+    name: string;
+    /** 操作人名称列表 */
+    operaName: string[];
+    /** 操作人列表 */
+    operaUserList: IUserInfo[];
+    /** 操作结果 */
+    result: string;
+    /** 审批策略 */
+    approvalStrategy: string;
+    /** 操作内容 */
+    contentInfo: IContentInfo;
+}
+/** 批办过程响应数据 - 操作内容 */
+export interface IContentInfo {
+    /**
+     * 操作动作
+     * 1：提交，
+     * 2：同意，
+     * 3：拒绝，
+     * 4：转办：
+     * 5：撤销，
+     * 6：回退，
+     * 7：加签，
+     * 8：终止，
+     * 9：跳过，
+     * 13：处理，
+     * 15：节点抄送，
+     * 16：废弃流程，
+     * 17：保存草稿
+     */
+    action: number;
+    /** 抄送人员列表 */
+    ccUserInfos?: IUserInfo[];
+    /** 操作时间 */
+    createTime: number;
+    /** 评论高亮位置列表 */
+    highlightPositionList?: string;
+    /** 是否为抄送 */
+    isCC?: boolean;
+    /** 审批意见 */
+    operationComment?: string;
+    /** @操作，userid和@ 户名映射 */
+    opinionUserMap?: Record<number, string>;
+    /** 操作记录 */
+    operation?: string;
+}
+/** 前端渲染界面所需的流程数据属性 */
+export interface IProcessData extends Omit<IElementInfo, 'contentInfo'> {
+    contentInfo: IProcessDataContentInfo;
+    /** 节点状态名称 */
+    status?: IStatusName;
+    /** 批办过程节点标题 */
+    title?: string;
+    /** 批办过程节点在时间轴中对应的装饰点颜色 */
+    dotColor?: ITimelineItemConfig['dotColor'];
+}
+export interface IProcessDataContentInfo extends Omit<IContentInfo, 'action' | 'createTime' | 'highlightPositionList'> {
+    /** 操作时间 */
+    createTime: string;
+    /** 评论高亮位置列表 */
+    highlightPositionList?: Array<[number, number]>;
+    /** 操作记录列表形式 */
+    operationList?: IOperationListItem[];
+}
+export interface IUserInfo {
+    /** 用户UserId */
+    id: string;
+    /** 用户名称 */
+    name: string;
+}
+export interface IOperationListItem {
+    id: string;
+    name: string;
+}

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

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

package/dist/web/components/flow/process/view-model.d.ts

@@ -0,0 +1,7 @@
+import { ICommonFlowData } from '../common';
+import { IProcessData } from './types';
+export declare function useFlowProcessModel(): {
+    processData: IProcessData[];
+    loading: boolean;
+    getProcessDataList: (data: ICommonFlowData) => Promise<void>;
+};

package/dist/web/components/flow/process/view-model.js

@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import moment from 'moment';
+import { flowRequest, safeJsonParse } from '../common';
+import { NAME_MAPPING, NAME_TEXT_MAPPING, CODE_NAME_MAPPING, NAME_CODE_MAPPING, } from './constants';
+export function useFlowProcessModel() {
+    const [processData, setProcessData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const getProcessDataList = async (data) => {
+        const { instanceId } = data.processInstance || {};
+        if (!instanceId)
+            return;
+        setLoading(true);
+        const newProcessData = await getProcessData(instanceId);
+        setLoading(false);
+        setProcessData(newProcessData);
+    };
+    return {
+        processData,
+        loading,
+        getProcessDataList,
+    };
+}
+/** 获取流程批办过程数据 */
+async function getProcessData(instanceId) {
+    try {
+        const result = await flowRequest({
+            data: { instanceId },
+            action: 'GetInstanceOperation',
+        }, { previewData: getInstanceOperationPreviewData });
+        return transElementInfos(result.elementInfos);
+    }
+    catch (error) {
+        return [];
+    }
+}
+/** 转换批办过程数据 */
+function transElementInfos(elementInfos) {
+    if (!(elementInfos === null || elementInfos === void 0 ? void 0 : elementInfos.length))
+        return [];
+    /** 设置节点状态名称 */
+    const setElementStatus = (elementInfo) => {
+        var _a, _b, _c, _d;
+        let statusName = '';
+        if (elementInfo.result === '待审批') {
+            statusName = NAME_MAPPING.PENDING;
+        }
+        else if (elementInfo.result === '待处理') {
+            statusName = NAME_MAPPING.HANDLING;
+        }
+        else {
+            const actionCode = (_a = elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.contentInfo) === null || _a === void 0 ? void 0 : _a.action;
+            statusName = CODE_NAME_MAPPING[actionCode];
+            if (actionCode === NAME_CODE_MAPPING.SKIP_PASS) {
+                const operationId = (_d = (_c = safeJsonParse((_b = elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.contentInfo) === null || _b === void 0 ? void 0 : _b.operation)) === null || _c === void 0 ? void 0 : _c[0].id) === null || _d === void 0 ? void 0 : _d.toString();
+                statusName =
+                    operationId === '2' ? NAME_MAPPING.SKIP_PASS : NAME_MAPPING.SKIP_DOWN; // 2同意 3驳回
+            }
+        }
+        return statusName;
+    };
+    /** 转换批办记录中的节点操作时间 */
+    const transCreateTime = (createTime) => {
+        return createTime ? moment(createTime).format('YYYY-MM-DD HH:mm:ss') : null;
+    };
+    const transHighlightPositionList = (highlightPositionList = '{}') => {
+        // 获取高亮位置对象
+        const highlightPositionMap = safeJsonParse(highlightPositionList);
+        // 将高亮位置对象转化成数组
+        const highlightPositionArray = Object.entries(highlightPositionMap);
+        return highlightPositionArray.map(([key, value]) => [
+            parseInt(key),
+            value,
+        ]);
+    };
+    /** 从批办记录中获取时间轴前缀修饰点颜色 */
+    const getTimelineDotColor = (status) => {
+        if (!status)
+            return 'default';
+        const { theme } = (NAME_TEXT_MAPPING === null || NAME_TEXT_MAPPING === void 0 ? void 0 : NAME_TEXT_MAPPING[status]) || {};
+        return (theme || 'default');
+    };
+    /** 转换操作列表 */
+    const getOperationList = (operation) => {
+        const result = safeJsonParse(operation);
+        return Array.isArray(result) ? result : [];
+    };
+    /** 处理操作人名称列表 - 去重 */
+    const deduplicationOperaName = (operaName) => {
+        return Array.from(new Set(operaName));
+    };
+    return elementInfos.map((elementInfo) => {
+        var _a, _b, _c;
+        const status = setElementStatus(elementInfo);
+        return {
+            ...elementInfo,
+            status,
+            title: status === NAME_MAPPING.DROP ? elementInfo.result : elementInfo.name,
+            dotColor: getTimelineDotColor(status),
+            contentInfo: {
+                ...elementInfo.contentInfo,
+                createTime: transCreateTime((_a = elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.contentInfo) === null || _a === void 0 ? void 0 : _a.createTime),
+                highlightPositionList: transHighlightPositionList((_b = elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.contentInfo) === null || _b === void 0 ? void 0 : _b.highlightPositionList),
+                operationList: getOperationList((_c = elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.contentInfo) === null || _c === void 0 ? void 0 : _c.operation),
+            },
+            operaName: deduplicationOperaName(elementInfo.operaName || []),
+        };
+    });
+}
+const getInstanceOperationPreviewData = {
+    ElementInfos: [
+        {
+            Id: '1542109022301507586',
+            Name: '经理审批',
+            OperaName: ['张三'],
+            Result: 'true',
+            ContentInfo: {
+                Action: 2,
+                AttachmentInfo: '[]',
+                OperationComment: '同意',
+                CreateTime: 1656502417000,
+                OpinionUserMap: {},
+                HighlightPositionList: '{}',
+            },
+        },
+        {
+            Name: '总监审批',
+            OperaName: ['王五', '李四'],
+            Result: '待审批',
+            ApprovalStrategy: '1',
+            ContentInfo: {
+                CreateTime: 1656502417000,
+            },
+        },
+    ],
+};

package/dist/web/components/flow-graph/constants.d.ts

@@ -0,0 +1,64 @@
+export declare const STATUS_COLOR_MAP: {
+    1: {
+        bgColor: string;
+        lineColor: string;
+    };
+    2: {
+        bgColor: string;
+        lineColor: string;
+    };
+    3: {
+        bgColor: string;
+        lineColor: string;
+    };
+};
+export declare const APPROVE_MAP: {
+    0: {
+        txt: string;
+        color: string;
+    };
+    1: {
+        txt: string;
+        color: string;
+    };
+    2: {
+        txt: string;
+        color: string;
+    };
+    3: {
+        txt: string;
+        color: string;
+    };
+    4: {
+        txt: string;
+        color: string;
+    };
+    5: {
+        txt: string;
+        color: string;
+    };
+    6: {
+        txt: string;
+        color: string;
+    };
+    7: {
+        txt: string;
+        color: string;
+    };
+    8: {
+        txt: string;
+        color: string;
+    };
+    9: {
+        txt: string;
+        color: string;
+    };
+    10: {
+        txt: string;
+        color: string;
+    };
+    13: {
+        txt: string;
+        color: string;
+    };
+};

package/dist/web/components/flow-graph/constants.js

@@ -0,0 +1,28 @@
+export const STATUS_COLOR_MAP = {
+    1: {
+        bgColor: 'rgba(10,191,91,0.10)',
+        lineColor: '#0ABF5B',
+    },
+    2: {
+        bgColor: 'rgba(153,153,153,0.10)',
+        lineColor: '#999999',
+    },
+    3: {
+        bgColor: 'rgba(0,110,255,0.20)',
+        lineColor: '#2473F2',
+    },
+};
+export const APPROVE_MAP = {
+    0: { txt: '待审批', color: '#F88000' },
+    1: { txt: '提交', color: '#09BF5B' },
+    2: { txt: '同意', color: '#09BF5B' },
+    3: { txt: '拒绝', color: '#E02020' },
+    4: { txt: '转办', color: '#333333' },
+    5: { txt: '撤销', color: '#333333' },
+    6: { txt: '回退', color: '#333333' },
+    7: { txt: '加签', color: '#333333' },
+    8: { txt: '终止', color: '#333333' },
+    9: { txt: '跳过', color: '#333333' },
+    10: { txt: '待处理', color: '#F88000' },
+    13: { txt: '已处理', color: '#09BF5B' },
+};

package/dist/web/components/flow-graph/graph.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IFlowGraphProps } from './types';
+import './style.css';
+/** 流程图组件 */
+export declare const FlowGraph: React.FC<IFlowGraphProps>;