@cloudbase/weda-ui 3.4.2 → 3.4.3

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

@@ -0,0 +1,302 @@
+/* eslint-disable no-param-reassign */
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import moment from 'moment';
+import { Modal, Button, LoadingTip, Status } from 'tea-component';
+import { isString } from '@antv/util'; // eslint-disable-line
+import G6 from '@antv/g6';
+import { fetchProcessInfoList } from '../../services';
+import { STATUS_COLOR_MAP, APPROVE_MAP } from './constants';
+import './index.css';
+G6.Tooltip.prototype.showTooltip = function (e) {
+    if (!e.item) {
+        return;
+    }
+    const itemTypes = this.get('itemTypes');
+    if (e.item.getType && itemTypes.indexOf(e.item.getType()) === -1)
+        return;
+    const container = this.get('tooltip');
+    const getContent = this.get('getContent');
+    const tooltip = getContent(e);
+    if (isString(tooltip)) {
+        container.innerHTML = tooltip;
+    }
+    else {
+        container.innerHTML = '';
+        container.appendChild(tooltip);
+    }
+    this.updatePosition(e);
+};
+// eslint-disable-next-line react/display-name
+export const RenderProcess = React.forwardRef((props) => {
+    const { commonFlowData, flowLocalProps } = props;
+    const { flowDetail } = commonFlowData;
+    const { isWedaIde, callWedaApi, safeJsonParse } = flowLocalProps;
+    const { flowCode, flowVersion: appVersion, instanceId } = flowDetail || {};
+    const [visible, setVisible] = useState(false);
+    const [modalData, setModalData] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [isEmptyChart, setIsEmptyChart] = useState(false);
+    useEffect(() => {
+        setIsEmptyChart(!instanceId);
+        instanceId && getGraphData(instanceId);
+    }, [instanceId]);
+    const closeModal = () => {
+        setVisible(false);
+    };
+    const getGraphData = async (instanceId) => {
+        try {
+            setLoading(true);
+            const params = {
+                flowCode,
+                instanceId,
+                appVersion,
+            };
+            const options = { isWedaIde, callWedaApi };
+            const data = await fetchProcessInfoList(params, options);
+            setLoading(false);
+            data && renderContent(data);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    const showModal = (data, infoData) => {
+        const modalData = {
+            nodeName: {
+                label: '审批节点',
+                content: data.name,
+            },
+            approvePerson: {
+                label: '审批人',
+                content: infoData.name,
+            },
+            approveAction: {
+                label: '审批操作',
+                content: (React.createElement("span", { style: {
+                        color: APPROVE_MAP[infoData.status].color,
+                    } },
+                    ' ',
+                    APPROVE_MAP[infoData.status].txt)),
+            },
+            actionTime: {
+                label: '操作时间',
+                content: infoData.opTime
+                    ? moment(infoData.opTime).format('YYYY-MM-DD HH:mm:ss')
+                    : undefined,
+            },
+            approveComment: {
+                label: '审批意见',
+                content: infoData.comment,
+            },
+            newProcessors: {
+                label: '操作详情',
+                content: infoData.newProcessors,
+            },
+            attachmentInfo: {
+                label: '上传附件',
+                content: infoData.attachmentInfo
+                    ? safeJsonParse(infoData.attachmentInfo)
+                    : undefined,
+            },
+        };
+        setVisible(true);
+        setModalData(modalData);
+    };
+    G6.registerNode('sql', {
+        drawShape(cfg, group) {
+            const rect = group.addShape('rect', {
+                attrs: {
+                    x: -75,
+                    y: -25,
+                    width: 150,
+                    height: 50,
+                    radius: 10,
+                    stroke: STATUS_COLOR_MAP[cfg.status].lineColor,
+                    fill: STATUS_COLOR_MAP[cfg.status].bgColor,
+                    lineWidth: 3,
+                    lineDash: cfg.status === 3 ? [5] : undefined,
+                },
+                name: cfg.name,
+            });
+            if (cfg.name) {
+                group.addShape('text', {
+                    attrs: {
+                        text: cfg.name,
+                        x: 0,
+                        y: 0,
+                        fill: '#333',
+                        fontSize: 12,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                        // fontWeight: 'bold',
+                    },
+                    name: 'text-shape',
+                });
+            }
+            return rect;
+        },
+    }, 'single-node');
+    const renderContent = (jsonData) => {
+        jsonData.nodes.forEach((node) => {
+            if (!node.style) {
+                node.style = {};
+            }
+            if (node.id) {
+                node.id = `${node.id}`;
+            }
+            node.style.lineWidth = 3;
+            node.label = node.name;
+            node.labelCfg = {
+                fontSize: 14,
+                color: '#00287E',
+                fontWeight: 'bold',
+            };
+            // STATUS_COLOR_MAP
+            node.style.stroke = STATUS_COLOR_MAP[node.status].lineColor;
+            node.style.fill = STATUS_COLOR_MAP[node.status].bgColor;
+            if (node.elementId.startsWith('startNode') ||
+                node.elementId.startsWith('end')) {
+                node.type = 'circle';
+                node.size = 80;
+                if (node.status === 3) {
+                    node.style.lineDash = [5];
+                }
+            }
+            if (node.elementId.startsWith('exclusiveGateway')) {
+                node.type = 'diamond';
+                node.size = [160, 80];
+                node.anchorPoints = [
+                    [0.5, 0],
+                    [0, 0.5],
+                    [0.5, 1],
+                    [1, 0.5],
+                ];
+            }
+        });
+        const nodeIdsMap = jsonData.nodes.reduce((acc, cur) => {
+            acc[cur.elementId] = cur.id;
+            return acc;
+        }, {});
+        jsonData.edges.forEach((edge) => {
+            edge.source = nodeIdsMap[edge.source];
+            edge.target = nodeIdsMap[edge.target];
+            edge.labelCfg = {
+                refY: -20,
+            };
+            Reflect.deleteProperty(edge, 'type');
+            if (edge.status === 1) {
+                edge.style = {
+                    stroke: '#0ABF5B',
+                };
+            }
+        });
+        const container = document.getElementById('flow-graph_container');
+        const width = container.scrollWidth;
+        const height = document.documentElement.clientHeight;
+        const tooltip = new G6.Tooltip({
+            offsetX: 60,
+            offsetY: -20,
+            trigger: 'click',
+            getContent(e) {
+                const outDiv = document.createElement('div');
+                outDiv.style.width = 'auto';
+                const modelData = e.item.getModel();
+                const conf = modelData === null || modelData === void 0 ? void 0 : modelData.conf;
+                let vdomContent;
+                if (conf === null || conf === void 0 ? void 0 : conf.length) {
+                    const contentHtml = conf.map((value, index) => {
+                        const info = { ...value };
+                        // 区分处理节点和审批节点的 待审批/待处理 文案
+                        if (modelData.dataType === 23 && info.status === 0) {
+                            info.status = 10;
+                        }
+                        return (React.createElement("li", { className: "ProcessInfo-item", key: `conf-${index}`, onClick: () => {
+                                showModal(modelData, info);
+                            } },
+                            React.createElement("div", { className: "first-line" },
+                                React.createElement("i", { className: info.status ? 'tootip-will_do' : '' }),
+                                React.createElement("span", { className: "tootip-name" }, info.name),
+                                React.createElement("span", { style: {
+                                        color: APPROVE_MAP[info.status ? info.status : 0].color,
+                                        paddingLeft: '8px',
+                                    } }, APPROVE_MAP[info.status ? info.status : 0].txt)),
+                            info.status && info.opTime ? (React.createElement("p", { className: "tooltip-time" }, moment(info.opTime).format('YYYY-MM-DD HH:mm:ss'))) : null));
+                    });
+                    vdomContent = (React.createElement("div", { className: "ProcessInfo" },
+                        React.createElement("h4", null, "\u8282\u70B9\u5BA1\u6279\u4FE1\u606F"),
+                        React.createElement("ul", { className: "ProcessInfo-content" }, contentHtml)));
+                }
+                else {
+                    vdomContent = React.createElement("p", null, "\u6682\u65E0\u4FE1\u606F");
+                }
+                ReactDOM.render(vdomContent, outDiv);
+                return outDiv;
+            },
+            itemTypes: ['node'],
+        });
+        const graph = new G6.Graph({
+            container: 'flow-graph_container',
+            width,
+            height: height - 300,
+            fitView: true,
+            fitViewPadding: [20, 40, 50, 20],
+            layout: {
+                type: 'dagre',
+                ranksep: 30,
+                controlPoints: true,
+            },
+            defaultNode: {
+                type: 'sql',
+            },
+            plugins: [tooltip],
+            defaultEdge: {
+                type: 'polyline',
+                style: {
+                    endArrow: true,
+                    lineWidth: 2,
+                    stroke: '#C2C8D5',
+                },
+            },
+            nodeStateStyles: {
+                selected: {
+                    stroke: '#000',
+                    fill: '#5394ef',
+                },
+            },
+            modes: {
+                default: ['drag-canvas', 'zoom-canvas'],
+            },
+        });
+        graph.data(jsonData);
+        graph.render();
+        if (typeof window !== 'undefined')
+            window.onresize = () => {
+                if (!graph || graph.get('destroyed'))
+                    return;
+                if (!container || !container.scrollWidth || !container.scrollHeight)
+                    return;
+                graph.changeSize(container.scrollWidth, container.scrollHeight);
+            };
+    };
+    const renderStatus = () => {
+        if (loading) {
+            return React.createElement(LoadingTip, null);
+        }
+        if (isEmptyChart) {
+            return React.createElement(Status, { icon: "blank", size: "l", title: "\u6682\u65E0\u6D41\u8F6C\u8282\u70B9" });
+        }
+        return null;
+    };
+    return (React.createElement("div", { id: "flow-graph_container" },
+        renderStatus(),
+        React.createElement(Modal, { visible: visible, caption: '审批详情', onClose: closeModal, className: "ProcessInfo-modal" },
+            React.createElement(Modal.Body, null,
+                React.createElement("div", { className: "ProcessInfo-modal_content" }, Object.entries(modalData)
+                    .filter(([, { content }]) => content)
+                    .map(([, { label, content }], index) => (React.createElement("div", { key: index },
+                    React.createElement("span", { className: "ProcessInfo-modal_content-label" }, label),
+                    React.createElement("span", { className: "ProcessInfo-modal_content-content" }, content)))))),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { type: "weak", onClick: closeModal }, "\u5173\u95ED")))));
+});

package/dist/web/components/flow/modules/chart/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/modules/chart/index.css

@@ -0,0 +1,90 @@
+#flow-graph_container {
+  position: relative;
+}
+.ProcessInfo {
+  padding: 0.14286rem 0.28571rem;
+}
+.ProcessInfo h4 {
+  margin-bottom: 0.28571rem;
+  font-size: 1rem;
+  border-bottom: 0.07143rem solid #eee;
+  color: #000;
+}
+.ProcessInfo .ProcessInfo-content {
+  max-height: 11.42857rem;
+  overflow: auto;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item {
+  padding: 0.57143rem 0;
+  border-bottom: 0.07143rem solid #e5e8ed;
+  cursor: pointer;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line {
+  height: 1.42857rem;
+  display: flex;
+  justify-content: flex-start nowrap;
+  align-items: center;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line i {
+  width: 1.14286rem;
+  height: 1.14286rem;
+  position: relative;
+  border-radius: 50%;
+  background: rgba(36, 115, 242, 0.15);
+}
+.ProcessInfo
+  .ProcessInfo-content
+  .ProcessInfo-item
+  .first-line
+  i.tooltip-will_do {
+  background: rgba(162, 172, 189, 0.15);
+}
+.ProcessInfo
+  .ProcessInfo-content
+  .ProcessInfo-item
+  .first-line
+  i.tooltip-will_do:after {
+  background: #a2acbd;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line i:after {
+  content: '';
+  position: absolute;
+  top: 0.28571rem;
+  left: 0.28571rem;
+  width: 0.57143rem;
+  height: 0.57143rem;
+  background-color: var(--co-common-main-color);
+  border-radius: 50%;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line .tootip-name {
+  padding-left: 0.57143rem;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .tooltip-time {
+  padding-left: 1.71429rem;
+  color: #999;
+  font-size: 0.85714rem;
+  height: 1.28571rem;
+  line-height: 1.28571rem;
+}
+.ProcessInfo-modal_content > div {
+  display: flex;
+  margin-bottom: 0.57143rem;
+}
+.ProcessInfo-modal_content > div .ProcessInfo-modal_content-label {
+  min-width: 4.28571rem;
+  margin-right: 2rem;
+  color: #999;
+}
+.ProcessInfo-modal_content > div .ProcessInfo-modal_content-content {
+  color: #333;
+}
+.ProcessInfo-modal_content > div .ProcessInfo-modal_content_link > button {
+  display: block;
+}
+.ProcessInfo-modal .tea-dialog__body {
+  max-height: 14.28571rem;
+  overflow: auto;
+}
+
+/*# sourceURL=webpack://./src/web/components/flow/modules/chart/index.css */
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy93ZWIvY29tcG9uZW50cy9mbG93L21vZHVsZXMvY2hhcnQvaW5kZXguY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSw4QkFBOEI7QUFDaEM7QUFDQTtFQUNFLHlCQUF5QjtFQUN6QixlQUFlO0VBQ2Ysb0NBQW9DO0VBQ3BDLFdBQVc7QUFDYjtBQUNBO0VBQ0UsdUJBQXVCO0VBQ3ZCLGNBQWM7QUFDaEI7QUFDQTtFQUNFLHFCQUFxQjtFQUNyQix1Q0FBdUM7RUFDdkMsZUFBZTtBQUNqQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLGFBQWE7RUFDYixrQ0FBa0M7RUFDbEMsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxpQkFBaUI7RUFDakIsa0JBQWtCO0VBQ2xCLGtCQUFrQjtFQUNsQixrQkFBa0I7RUFDbEIsb0NBQW9DO0FBQ3RDO0FBQ0E7Ozs7O0VBS0UscUNBQXFDO0FBQ3ZDO0FBQ0E7Ozs7O0VBS0UsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxXQUFXO0VBQ1gsa0JBQWtCO0VBQ2xCLGVBQWU7RUFDZixnQkFBZ0I7RUFDaEIsaUJBQWlCO0VBQ2pCLGtCQUFrQjtFQUNsQiw2Q0FBNkM7RUFDN0Msa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSx3QkFBd0I7QUFDMUI7QUFDQTtFQUNFLHdCQUF3QjtFQUN4QixXQUFXO0VBQ1gscUJBQXFCO0VBQ3JCLGtCQUFrQjtFQUNsQix1QkFBdUI7QUFDekI7QUFDQTtFQUNFLGFBQWE7RUFDYix5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLHFCQUFxQjtFQUNyQixrQkFBa0I7RUFDbEIsV0FBVztBQUNiO0FBQ0E7RUFDRSxXQUFXO0FBQ2I7QUFDQTtFQUNFLGNBQWM7QUFDaEI7QUFDQTtFQUNFLHVCQUF1QjtFQUN2QixjQUFjO0FBQ2hCIiwic291cmNlc0NvbnRlbnQiOlsiI2Zsb3ctZ3JhcGhfY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLlByb2Nlc3NJbmZvIHtcbiAgcGFkZGluZzogMC4xNDI4NnJlbSAwLjI4NTcxcmVtO1xufVxuLlByb2Nlc3NJbmZvIGg0IHtcbiAgbWFyZ2luLWJvdHRvbTogMC4yODU3MXJlbTtcbiAgZm9udC1zaXplOiAxcmVtO1xuICBib3JkZXItYm90dG9tOiAwLjA3MTQzcmVtIHNvbGlkICNlZWU7XG4gIGNvbG9yOiAjMDAwO1xufVxuLlByb2Nlc3NJbmZvIC5Qcm9jZXNzSW5mby1jb250ZW50IHtcbiAgbWF4LWhlaWdodDogMTEuNDI4NTdyZW07XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuLlByb2Nlc3NJbmZvIC5Qcm9jZXNzSW5mby1jb250ZW50IC5Qcm9jZXNzSW5mby1pdGVtIHtcbiAgcGFkZGluZzogMC41NzE0M3JlbSAwO1xuICBib3JkZXItYm90dG9tOiAwLjA3MTQzcmVtIHNvbGlkICNlNWU4ZWQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5Qcm9jZXNzSW5mbyAuUHJvY2Vzc0luZm8tY29udGVudCAuUHJvY2Vzc0luZm8taXRlbSAuZmlyc3QtbGluZSB7XG4gIGhlaWdodDogMS40Mjg1N3JlbTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0IG5vd3JhcDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5Qcm9jZXNzSW5mbyAuUHJvY2Vzc0luZm8tY29udGVudCAuUHJvY2Vzc0luZm8taXRlbSAuZmlyc3QtbGluZSBpIHtcbiAgd2lkdGg6IDEuMTQyODZyZW07XG4gIGhlaWdodDogMS4xNDI4NnJlbTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJhY2tncm91bmQ6IHJnYmEoMzYsIDExNSwgMjQyLCAwLjE1KTtcbn1cbi5Qcm9jZXNzSW5mb1xuICAuUHJvY2Vzc0luZm8tY29udGVudFxuICAuUHJvY2Vzc0luZm8taXRlbVxuICAuZmlyc3QtbGluZVxuICBpLnRvb2x0aXAtd2lsbF9kbyB7XG4gIGJhY2tncm91bmQ6IHJnYmEoMTYyLCAxNzIsIDE4OSwgMC4xNSk7XG59XG4uUHJvY2Vzc0luZm9cbiAgLlByb2Nlc3NJbmZvLWNvbnRlbnRcbiAgLlByb2Nlc3NJbmZvLWl0ZW1cbiAgLmZpcnN0LWxpbmVcbiAgaS50b29sdGlwLXdpbGxfZG86YWZ0ZXIge1xuICBiYWNrZ3JvdW5kOiAjYTJhY2JkO1xufVxuLlByb2Nlc3NJbmZvIC5Qcm9jZXNzSW5mby1jb250ZW50IC5Qcm9jZXNzSW5mby1pdGVtIC5maXJzdC1saW5lIGk6YWZ0ZXIge1xuICBjb250ZW50OiAnJztcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDAuMjg1NzFyZW07XG4gIGxlZnQ6IDAuMjg1NzFyZW07XG4gIHdpZHRoOiAwLjU3MTQzcmVtO1xuICBoZWlnaHQ6IDAuNTcxNDNyZW07XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvLWNvbW1vbi1tYWluLWNvbG9yKTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xufVxuLlByb2Nlc3NJbmZvIC5Qcm9jZXNzSW5mby1jb250ZW50IC5Qcm9jZXNzSW5mby1pdGVtIC5maXJzdC1saW5lIC50b290aXAtbmFtZSB7XG4gIHBhZGRpbmctbGVmdDogMC41NzE0M3JlbTtcbn1cbi5Qcm9jZXNzSW5mbyAuUHJvY2Vzc0luZm8tY29udGVudCAuUHJvY2Vzc0luZm8taXRlbSAudG9vbHRpcC10aW1lIHtcbiAgcGFkZGluZy1sZWZ0OiAxLjcxNDI5cmVtO1xuICBjb2xvcjogIzk5OTtcbiAgZm9udC1zaXplOiAwLjg1NzE0cmVtO1xuICBoZWlnaHQ6IDEuMjg1NzFyZW07XG4gIGxpbmUtaGVpZ2h0OiAxLjI4NTcxcmVtO1xufVxuLlByb2Nlc3NJbmZvLW1vZGFsX2NvbnRlbnQgPiBkaXYge1xuICBkaXNwbGF5OiBmbGV4O1xuICBtYXJnaW4tYm90dG9tOiAwLjU3MTQzcmVtO1xufVxuLlByb2Nlc3NJbmZvLW1vZGFsX2NvbnRlbnQgPiBkaXYgLlByb2Nlc3NJbmZvLW1vZGFsX2NvbnRlbnQtbGFiZWwge1xuICBtaW4td2lkdGg6IDQuMjg1NzFyZW07XG4gIG1hcmdpbi1yaWdodDogMnJlbTtcbiAgY29sb3I6ICM5OTk7XG59XG4uUHJvY2Vzc0luZm8tbW9kYWxfY29udGVudCA+IGRpdiAuUHJvY2Vzc0luZm8tbW9kYWxfY29udGVudC1jb250ZW50IHtcbiAgY29sb3I6ICMzMzM7XG59XG4uUHJvY2Vzc0luZm8tbW9kYWxfY29udGVudCA+IGRpdiAuUHJvY2Vzc0luZm8tbW9kYWxfY29udGVudF9saW5rID4gYnV0dG9uIHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG4uUHJvY2Vzc0luZm8tbW9kYWwgLnRlYS1kaWFsb2dfX2JvZHkge1xuICBtYXgtaGVpZ2h0OiAxNC4yODU3MXJlbTtcbiAgb3ZlcmZsb3c6IGF1dG87XG59XG4iXSwic291cmNlUm9vdCI6IiJ9 */

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderProcess } from './Chart';
+import { createModuleFrame } from '../../frame';
+const ModelFlowChart = (props) => (React.createElement(RenderProcess, { ...props }));
+export default createModuleFrame(ModelFlowChart, 'flow-chart');

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import Tabs from '../../../tabs';
+import ModelFlowBasic from '../basic';
+import ModelFlowChart from '../chart';
+import ModelFlowControl from '../control';
+import ModelFlowLayout from '../layout';
+import ModelFlowProcess from '../process';
+const ModelFlow = (props) => {
+    const commonProps = {
+        events: (props === null || props === void 0 ? void 0 : props.events) || {},
+    };
+    return (React.createElement(ModelFlowLayout, { ...props, flowContentSlot: React.createElement(Tabs, { isMultipleSlot: true, events: { change: () => { } }, tabs: [
+                { value: 'process', title: '流程详情' },
+                { value: 'chart', title: '流转图示' },
+            ], 
+            // @ts-ignore 忽略属性报错
+            panel1: React.createElement(React.Fragment, null,
+                React.createElement(ModelFlowBasic, { ...commonProps }),
+                React.createElement(ModelFlowProcess, { ...commonProps })), panel2: React.createElement(ModelFlowChart, { ...commonProps }), selectedIndex: 0 }), flowControlSlot: React.createElement(ModelFlowControl, { ...commonProps }) }));
+};
+export default ModelFlow;

package/dist/web/components/flow/modules/control/ApprovalDrawer.css

@@ -0,0 +1,147 @@
+.approval-drawer.drawer {
+  width: 35.71429rem !important;
+  top: 0 !important;
+  box-shadow: 0 1.78571rem 1.78571rem rgba(0, 0, 0, 0.5) !important;
+  background-color: #fff;
+}
+.approval-drawer.drawer .wedatea2td-form.approval-form__drawer {
+  display: block;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__label {
+  padding-top: 0.35714rem !important;
+  padding-bottom: 0.35714rem !important;
+  min-width: auto !important;
+  line-height: 1.5 !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__label
+  label {
+  font-size: 1rem;
+  color: #666;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls {
+  width: 100%;
+  font-size: 0.85714rem;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls--text {
+  padding-top: 0.35714rem !important;
+  padding-bottom: 1.14286rem !important;
+  line-height: 1.5 !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls--text
+  .wedatea2td-btn {
+  padding: 0 1.42857rem !important;
+  height: 2rem !important;
+  line-height: 2rem !important;
+  min-width: auto !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls--text
+  .wedatea2td-btn.wedatea2td-btn--link {
+  padding: 0 !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .form-item__plain {
+  font-size: 1rem;
+  color: #333;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .btn-wrapper__black
+  button {
+  border-radius: 0.28571rem;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .btn-wrapper__black.person-btn__wrapper
+  button {
+  margin-right: 0.57143rem;
+  margin-bottom: 0.42857rem;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .upload-item__label
+  .wedatea2td-form__label {
+  padding-top: 0.85714rem !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .form-item__textarea {
+  width: 25.42857rem;
+  height: 7.71429rem;
+  border-radius: 0.28571rem;
+}
+.approval-drawer.drawer .btn-wrapper button {
+  border-radius: 0.28571rem;
+}
+.approval-drawer.drawer .btn-wrapper button:first-child {
+  margin-right: 0.71429rem;
+}
+.approval-drawer.drawer .person-item {
+  display: inline-block;
+  vertical-align: middle;
+  height: 2.14286rem;
+  box-sizing: border-box;
+  margin-right: 0.57143rem;
+  margin-bottom: 0.42857rem;
+  padding: 0.28571rem;
+  border: 0.07143rem solid #dcdee6;
+  border-radius: 0.28571rem;
+  font-size: 0.85714rem;
+}
+.approval-drawer.drawer .person-item span {
+  padding: 0 0.57143rem;
+}
+.approval-drawer.drawer .person-item .wedatea2td-icon-dismiss {
+  cursor: pointer;
+}
+.approval-drawer.drawer .wedatea2td-drawer__body {
+  padding: 2rem;
+}
+.approval-drawer.drawer .wedatea2td-drawer__footer {
+  flex: 0 0 5.42857rem;
+  padding: 1.42857rem;
+  background-color: #fff;
+}
+.approval-drawer.drawer .wedatea2td-drawer__footer .btn-wrapper button {
+  height: 2.57143rem;
+  width: 7.57143rem;
+}
+.approval-drawer.drawer .apass-upload-file-item__title {
+  max-width: 15.71429rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+.ccUsers-wrapper .person-item {
+  display: inline-block;
+  vertical-align: middle;
+  height: 2.14286rem;
+  box-sizing: border-box;
+  margin-right: 0.57143rem;
+  margin-bottom: 0.42857rem;
+  padding: 0.28571rem;
+  border: 0.07143rem solid #dcdee6;
+  border-radius: 0.28571rem;
+  font-size: 0.85714rem;
+}
+.ccUsers-wrapper .person-item span {
+  padding: 0 0.57143rem;
+}
+.ccUsers-wrapper .person-item .wedatea2td-icon-dismiss {
+  cursor: pointer;
+}
+
+/*# sourceURL=webpack://./src/web/components/flow/modules/control/ApprovalDrawer.css */
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy93ZWIvY29tcG9uZW50cy9mbG93L21vZHVsZXMvY29udHJvbC9BcHByb3ZhbERyYXdlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSw2QkFBNkI7RUFDN0IsaUJBQWlCO0VBQ2pCLGlFQUFpRTtFQUNqRSxzQkFBc0I7QUFDeEI7QUFDQTtFQUNFLGNBQWM7QUFDaEI7QUFDQTs7O0VBR0Usa0NBQWtDO0VBQ2xDLHFDQUFxQztFQUNyQywwQkFBMEI7RUFDMUIsMkJBQTJCO0FBQzdCO0FBQ0E7Ozs7RUFJRSxlQUFlO0VBQ2YsV0FBVztBQUNiO0FBQ0E7OztFQUdFLFdBQVc7RUFDWCxxQkFBcUI7QUFDdkI7QUFDQTs7O0VBR0Usa0NBQWtDO0VBQ2xDLHFDQUFxQztFQUNyQywyQkFBMkI7QUFDN0I7QUFDQTs7OztFQUlFLGdDQUFnQztFQUNoQyx1QkFBdUI7RUFDdkIsNEJBQTRCO0VBQzVCLDBCQUEwQjtBQUM1QjtBQUNBOzs7O0VBSUUscUJBQXFCO0FBQ3ZCO0FBQ0E7OztFQUdFLGVBQWU7RUFDZixXQUFXO0FBQ2I7QUFDQTs7OztFQUlFLHlCQUF5QjtBQUMzQjtBQUNBOzs7O0VBSUUsd0JBQXdCO0VBQ3hCLHlCQUF5QjtBQUMzQjtBQUNBOzs7O0VBSUUsa0NBQWtDO0FBQ3BDO0FBQ0E7OztFQUdFLGtCQUFrQjtFQUNsQixrQkFBa0I7RUFDbEIseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSx5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLHdCQUF3QjtBQUMxQjtBQUNBO0VBQ0UscUJBQXFCO0VBQ3JCLHNCQUFzQjtFQUN0QixrQkFBa0I7RUFDbEIsc0JBQXNCO0VBQ3RCLHdCQUF3QjtFQUN4Qix5QkFBeUI7RUFDekIsbUJBQW1CO0VBQ25CLGdDQUFnQztFQUNoQyx5QkFBeUI7RUFDekIscUJBQXFCO0FBQ3ZCO0FBQ0E7RUFDRSxxQkFBcUI7QUFDdkI7QUFDQTtFQUNFLGVBQWU7QUFDakI7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0Usb0JBQW9CO0VBQ3BCLG1CQUFtQjtFQUNuQixzQkFBc0I7QUFDeEI7QUFDQTtFQUNFLGtCQUFrQjtFQUNsQixpQkFBaUI7QUFDbkI7QUFDQTtFQUNFLHNCQUFzQjtFQUN0QixnQkFBZ0I7RUFDaEIsdUJBQXVCO0VBQ3ZCLHFCQUFxQjtBQUN2QjtBQUNBO0VBQ0UscUJBQXFCO0VBQ3JCLHNCQUFzQjtFQUN0QixrQkFBa0I7RUFDbEIsc0JBQXNCO0VBQ3RCLHdCQUF3QjtFQUN4Qix5QkFBeUI7RUFDekIsbUJBQW1CO0VBQ25CLGdDQUFnQztFQUNoQyx5QkFBeUI7RUFDekIscUJBQXFCO0FBQ3ZCO0FBQ0E7RUFDRSxxQkFBcUI7QUFDdkI7QUFDQTtFQUNFLGVBQWU7QUFDakIiLCJzb3VyY2VzQ29udGVudCI6WyIuYXBwcm92YWwtZHJhd2VyLmRyYXdlciB7XG4gIHdpZHRoOiAzNS43MTQyOXJlbSAhaW1wb3J0YW50O1xuICB0b3A6IDAgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogMCAxLjc4NTcxcmVtIDEuNzg1NzFyZW0gcmdiYSgwLCAwLCAwLCAwLjUpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG59XG4uYXBwcm92YWwtZHJhd2VyLmRyYXdlciAud2VkYXRlYTJ0ZC1mb3JtLmFwcHJvdmFsLWZvcm1fX2RyYXdlciB7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybV9fbGFiZWwge1xuICBwYWRkaW5nLXRvcDogMC4zNTcxNHJlbSAhaW1wb3J0YW50O1xuICBwYWRkaW5nLWJvdHRvbTogMC4zNTcxNHJlbSAhaW1wb3J0YW50O1xuICBtaW4td2lkdGg6IGF1dG8gIWltcG9ydGFudDtcbiAgbGluZS1oZWlnaHQ6IDEuNSAhaW1wb3J0YW50O1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybV9fbGFiZWxcbiAgbGFiZWwge1xuICBmb250LXNpemU6IDFyZW07XG4gIGNvbG9yOiAjNjY2O1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybV9fY29udHJvbHMge1xuICB3aWR0aDogMTAwJTtcbiAgZm9udC1zaXplOiAwLjg1NzE0cmVtO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybV9fY29udHJvbHMtLXRleHQge1xuICBwYWRkaW5nLXRvcDogMC4zNTcxNHJlbSAhaW1wb3J0YW50O1xuICBwYWRkaW5nLWJvdHRvbTogMS4xNDI4NnJlbSAhaW1wb3J0YW50O1xuICBsaW5lLWhlaWdodDogMS41ICFpbXBvcnRhbnQ7XG59XG4uYXBwcm92YWwtZHJhd2VyLmRyYXdlclxuICAud2VkYXRlYTJ0ZC1mb3JtLmFwcHJvdmFsLWZvcm1fX2RyYXdlclxuICAud2VkYXRlYTJ0ZC1mb3JtX19jb250cm9scy0tdGV4dFxuICAud2VkYXRlYTJ0ZC1idG4ge1xuICBwYWRkaW5nOiAwIDEuNDI4NTdyZW0gIWltcG9ydGFudDtcbiAgaGVpZ2h0OiAycmVtICFpbXBvcnRhbnQ7XG4gIGxpbmUtaGVpZ2h0OiAycmVtICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogYXV0byAhaW1wb3J0YW50O1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybV9fY29udHJvbHMtLXRleHRcbiAgLndlZGF0ZWEydGQtYnRuLndlZGF0ZWEydGQtYnRuLS1saW5rIHtcbiAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLmZvcm0taXRlbV9fcGxhaW4ge1xuICBmb250LXNpemU6IDFyZW07XG4gIGNvbG9yOiAjMzMzO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLmJ0bi13cmFwcGVyX19ibGFja1xuICBidXR0b24ge1xuICBib3JkZXItcmFkaXVzOiAwLjI4NTcxcmVtO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLmJ0bi13cmFwcGVyX19ibGFjay5wZXJzb24tYnRuX193cmFwcGVyXG4gIGJ1dHRvbiB7XG4gIG1hcmdpbi1yaWdodDogMC41NzE0M3JlbTtcbiAgbWFyZ2luLWJvdHRvbTogMC40Mjg1N3JlbTtcbn1cbi5hcHByb3ZhbC1kcmF3ZXIuZHJhd2VyXG4gIC53ZWRhdGVhMnRkLWZvcm0uYXBwcm92YWwtZm9ybV9fZHJhd2VyXG4gIC51cGxvYWQtaXRlbV9fbGFiZWxcbiAgLndlZGF0ZWEydGQtZm9ybV9fbGFiZWwge1xuICBwYWRkaW5nLXRvcDogMC44NTcxNHJlbSAhaW1wb3J0YW50O1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXJcbiAgLndlZGF0ZWEydGQtZm9ybS5hcHByb3ZhbC1mb3JtX19kcmF3ZXJcbiAgLmZvcm0taXRlbV9fdGV4dGFyZWEge1xuICB3aWR0aDogMjUuNDI4NTdyZW07XG4gIGhlaWdodDogNy43MTQyOXJlbTtcbiAgYm9yZGVyLXJhZGl1czogMC4yODU3MXJlbTtcbn1cbi5hcHByb3ZhbC1kcmF3ZXIuZHJhd2VyIC5idG4td3JhcHBlciBidXR0b24ge1xuICBib3JkZXItcmFkaXVzOiAwLjI4NTcxcmVtO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXIgLmJ0bi13cmFwcGVyIGJ1dHRvbjpmaXJzdC1jaGlsZCB7XG4gIG1hcmdpbi1yaWdodDogMC43MTQyOXJlbTtcbn1cbi5hcHByb3ZhbC1kcmF3ZXIuZHJhd2VyIC5wZXJzb24taXRlbSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgaGVpZ2h0OiAyLjE0Mjg2cmVtO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBtYXJnaW4tcmlnaHQ6IDAuNTcxNDNyZW07XG4gIG1hcmdpbi1ib3R0b206IDAuNDI4NTdyZW07XG4gIHBhZGRpbmc6IDAuMjg1NzFyZW07XG4gIGJvcmRlcjogMC4wNzE0M3JlbSBzb2xpZCAjZGNkZWU2O1xuICBib3JkZXItcmFkaXVzOiAwLjI4NTcxcmVtO1xuICBmb250LXNpemU6IDAuODU3MTRyZW07XG59XG4uYXBwcm92YWwtZHJhd2VyLmRyYXdlciAucGVyc29uLWl0ZW0gc3BhbiB7XG4gIHBhZGRpbmc6IDAgMC41NzE0M3JlbTtcbn1cbi5hcHByb3ZhbC1kcmF3ZXIuZHJhd2VyIC5wZXJzb24taXRlbSAud2VkYXRlYTJ0ZC1pY29uLWRpc21pc3Mge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4uYXBwcm92YWwtZHJhd2VyLmRyYXdlciAud2VkYXRlYTJ0ZC1kcmF3ZXJfX2JvZHkge1xuICBwYWRkaW5nOiAycmVtO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXIgLndlZGF0ZWEydGQtZHJhd2VyX19mb290ZXIge1xuICBmbGV4OiAwIDAgNS40Mjg1N3JlbTtcbiAgcGFkZGluZzogMS40Mjg1N3JlbTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbn1cbi5hcHByb3ZhbC1kcmF3ZXIuZHJhd2VyIC53ZWRhdGVhMnRkLWRyYXdlcl9fZm9vdGVyIC5idG4td3JhcHBlciBidXR0b24ge1xuICBoZWlnaHQ6IDIuNTcxNDNyZW07XG4gIHdpZHRoOiA3LjU3MTQzcmVtO1xufVxuLmFwcHJvdmFsLWRyYXdlci5kcmF3ZXIgLmFwYXNzLXVwbG9hZC1maWxlLWl0ZW1fX3RpdGxlIHtcbiAgbWF4LXdpZHRoOiAxNS43MTQyOXJlbTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cbi5jY1VzZXJzLXdyYXBwZXIgLnBlcnNvbi1pdGVtIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBoZWlnaHQ6IDIuMTQyODZyZW07XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG1hcmdpbi1yaWdodDogMC41NzE0M3JlbTtcbiAgbWFyZ2luLWJvdHRvbTogMC40Mjg1N3JlbTtcbiAgcGFkZGluZzogMC4yODU3MXJlbTtcbiAgYm9yZGVyOiAwLjA3MTQzcmVtIHNvbGlkICNkY2RlZTY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjg1NzFyZW07XG4gIGZvbnQtc2l6ZTogMC44NTcxNHJlbTtcbn1cbi5jY1VzZXJzLXdyYXBwZXIgLnBlcnNvbi1pdGVtIHNwYW4ge1xuICBwYWRkaW5nOiAwIDAuNTcxNDNyZW07XG59XG4uY2NVc2Vycy13cmFwcGVyIC5wZXJzb24taXRlbSAud2VkYXRlYTJ0ZC1pY29uLWRpc21pc3Mge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9 */