@cloudbase/weda-ui 3.4.8 → 3.4.9

package/dist/web/components/flow/process/components/comment-text/style.css

@@ -0,0 +1,33 @@
+.weda-process-comment {
+  max-width: 768px;
+  display: inline-block;
+  background: rgb(243, 243, 243);
+  padding: 5px 12px;
+  border-radius: 3px;
+  position: relative;
+}
+
+.weda-process-comment::before {
+  content: ' ';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  background: rgb(243, 243, 243);
+  transform: rotate(45deg);
+}
+
+.arrow-top::before {
+  top: -3px;
+  left: 25px;
+}
+
+.arrow-left::before {
+  top: 6px;
+  left: -2px;
+}
+
+.weda-process-comment-content {
+  width: 100%;
+  display: inline-block;
+}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style.css';
+/** 描述列表 成组展示多个只读字段 */
+export function Descriptions(props) {
+    const { items } = props;
+    const renderDescriptionItem = (description) => {
+        const { label, children } = description;
+        return (_jsxs("div", { className: "weda-process-descriptions-item", style: description.layout === 'vertical'
+                ? { flexDirection: 'column' }
+                : { alignItems: 'center' }, children: [_jsx("span", { className: "weda-process-descriptions-item-key", children: label }), _jsx("span", { className: "weda-process-descriptions-item-value", children: children })] }));
+    };
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    return (_jsx("div", { className: "weda-process-descriptions", children: items.map((item) => renderDescriptionItem(item)) }));
+}
+Descriptions.defaultProps = {
+    label: '',
+    layout: 'horizontal',
+};

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

@@ -0,0 +1,31 @@
+.weda-process-descriptions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.weda-process-descriptions-item {
+  display: flex;
+  gap: 4px;
+}
+
+.weda-process-descriptions-item-key {
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 400;
+  font-size: 12px;
+  text-align: start;
+  word-break: keep-all;
+}
+.weda-process-descriptions-item-key::after {
+  content: ':';
+  position: relative;
+  top: -0.5px;
+  margin-inline: 2px 8px;
+}
+
+.weda-process-descriptions-item-value {
+  color: rgba(0, 0, 0, 0.78);
+  font-size: 12px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,4 @@
+import { CommentText } from './comment-text';
+import { Descriptions } from './descriptions';
+import { Timeline } from './timeline';
+export { CommentText, Descriptions, Timeline };

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style.css';
+/** 审批历史时间轴组件 */
+export function Timeline(props) {
+    const { items = [], titleAlign = 'flex-start', className = '', style = {}, } = props;
+    const renderPrefix = (index, dataLength, color) => {
+        return (_jsxs("div", { className: "weda-process-timeline-prefix", children: [_jsx("div", { className: `weda-process-timeline-dot ${color}` }), _jsx("div", { className: `weda-process-timeline-line ${index === dataLength - 1 ? 'weda-process-timeline-line-hidden' : ''}` })] }));
+    };
+    const renderContent = (item) => {
+        return (_jsxs("div", { className: "weda-process-timeline-content", children: [_jsxs("div", { className: "weda-process-timeline-header", style: { justifyContent: titleAlign }, children: [_jsx("div", { className: "weda-process-timeline-title", children: item.title }), _jsx("div", { className: "weda-process-timeline-extra", children: item.extra || null })] }), _jsx("div", { children: item.content || null }), _jsx("div", { className: "weda-process-timeline-label", children: item.label })] }));
+    };
+    return (_jsx("ul", { className: `weda-process-timeline ${className}`, style: style, children: items.map((item, index) => (_jsxs("li", { className: "weda-process-timeline-item", children: [renderPrefix(index, items === null || items === void 0 ? void 0 : items.length, item.dotColor), renderContent(item)] }, `${index}_flow_tl_item`))) }));
+}

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

@@ -0,0 +1,75 @@
+.weda-process-timeline {
+  list-style: none;
+}
+.weda-process-timeline-item {
+  display: flex;
+  min-height: 70px;
+}
+
+.weda-process-timeline-prefix {
+  width: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding-top: 8px;
+}
+
+.weda-process-timeline-dot {
+  width: 4px;
+  height: 4px;
+  border: 2px solid #0052d9;
+  border-radius: 50%;
+  box-sizing: unset;
+}
+.weda-process-timeline-dot.primary {
+  border-color: #0052d9;
+}
+.weda-process-timeline-dot.error {
+  border-color: #e45561;
+}
+.weda-process-timeline-dot.success {
+  border-color: #11ac77;
+}
+.weda-process-timeline-dot.warning {
+  border-color: #ed7b2f;
+}
+.weda-process-timeline-line {
+  width: 2px;
+  background-color: #dcdcdc;
+  flex: 1;
+}
+.weda-process-timeline-line-hidden {
+  display: none;
+}
+
+.weda-process-timeline-content {
+  flex: 1;
+  padding-left: 20px;
+  padding-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.weda-process-timeline-header {
+  display: flex;
+  align-items: center;
+  height: 26px;
+}
+
+.weda-process-timeline-title {
+  font-size: 14px;
+  line-height: 24px;
+  min-width: 110px;
+  max-width: 450px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 8px;
+}
+
+.weda-process-timeline-label {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}

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

@@ -0,0 +1,46 @@
+/** 操作节点状态相关常量 */
+const OPERATION_NODE_STATUS = [
+    { name: 'start', code: 1, theme: null, text: null },
+    { name: 'pass', code: 2, theme: 'success', text: '审批通过' },
+    { name: 'down', code: 3, theme: 'error', text: '驳回' },
+    { name: 'turn', code: 4, theme: 'primary', text: '已转办' },
+    { name: 'revoke', code: 5, theme: 'default', text: '撤销' },
+    { name: 'trans', code: 6, theme: 'default', text: '回退' },
+    { name: 'countersign', code: 7, theme: 'default', text: '加签' },
+    { name: 'stop', code: 8, theme: 'error', text: '终止' },
+    { name: 'skip_pass', code: 9, theme: 'success', text: '跳过(同意)' },
+    { name: 'skip_down', code: 10, theme: 'error', text: '跳过(驳回)' },
+    { name: 'pending', code: 11, theme: 'warning', text: '待审批' },
+    { name: 'end', code: 12, theme: 'error', text: '结束' },
+    { name: 'handled', code: 13, theme: 'success', text: '已处理' },
+    { name: 'handling', code: 14, theme: 'warning', text: '待处理' },
+    { name: 'cc', code: 15, theme: null, text: null },
+    { name: 'drop', code: 16, theme: null, text: null }, // 作废
+];
+/** 操作节点状态相关映射关系转换 */
+const { 
+/** 状态码-状态名称映射 */
+CODE_NAME_MAPPING, 
+/** 状态名称-状态码映射 */
+NAME_CODE_MAPPING, 
+/** 状态名称映射 */
+NAME_MAPPING, 
+/** 状态名称-状态文本信息映射 */
+NAME_TEXT_MAPPING, } = OPERATION_NODE_STATUS.reduce((result, curr) => {
+    result.CODE_NAME_MAPPING[curr.code] = curr.name;
+    result.NAME_CODE_MAPPING[curr.name.toUpperCase()] = curr.code;
+    result.NAME_MAPPING[curr.name.toUpperCase()] = curr.name;
+    if (curr.theme && curr.text) {
+        result.NAME_TEXT_MAPPING[curr.name] = {
+            theme: curr.theme,
+            text: curr.text,
+        };
+    }
+    return result;
+}, {
+    CODE_NAME_MAPPING: {},
+    NAME_CODE_MAPPING: {},
+    NAME_MAPPING: {},
+    NAME_TEXT_MAPPING: {},
+});
+export { CODE_NAME_MAPPING, NAME_CODE_MAPPING, NAME_MAPPING, NAME_TEXT_MAPPING, };

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

@@ -0,0 +1,2 @@
+import ModelFlowProcess from './process';
+export default ModelFlowProcess;

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.js

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

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.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' },
+};