@cloudbase/weda-ui 3.4.2 → 3.4.4

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 './isString';
+import G6 from '@antv/g6/es';
+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,87 @@
+#flow-graph_container {
+  position: relative;
+}
+.ProcessInfo {
+  padding: 2px 4px;
+}
+.ProcessInfo h4 {
+  margin-bottom: 4px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+  color: #000;
+}
+.ProcessInfo .ProcessInfo-content {
+  max-height: 160px;
+  overflow: auto;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #e5e8ed;
+  cursor: pointer;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line {
+  height: 20px;
+  display: flex;
+  justify-content: flex-start nowrap;
+  align-items: center;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line i {
+  width: 16px;
+  height: 16px;
+  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: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--co-common-main-color);
+  border-radius: 50%;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .first-line .tootip-name {
+  padding-left: 8px;
+}
+.ProcessInfo .ProcessInfo-content .ProcessInfo-item .tooltip-time {
+  padding-left: 24px;
+  color: #999;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+}
+.ProcessInfo-modal_content > div {
+  display: flex;
+  margin-bottom: 8px;
+}
+.ProcessInfo-modal_content > div .ProcessInfo-modal_content-label {
+  min-width: 60px;
+  margin-right: 28px;
+  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: 200px;
+  overflow: auto;
+}

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/chart/isString.js

@@ -0,0 +1,5 @@
+const to = {}.toString;
+const isType = (value, type) => to.call(value) === '[object ' + type + ']';
+export default (str) => {
+    return isType(str, 'String');
+};

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,144 @@
+.approval-drawer.drawer {
+  width: 500px !important;
+  top: 0px !important;
+  box-shadow: 0px 25px 25px 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: 5px !important;
+  padding-bottom: 5px !important;
+  min-width: auto !important;
+  line-height: 1.5 !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__label
+  label {
+  font-size: 14px;
+  color: #666;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls {
+  width: 100%;
+  font-size: 12px;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls--text {
+  padding-top: 5px !important;
+  padding-bottom: 16px !important;
+  line-height: 1.5 !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .wedatea2td-form__controls--text
+  .wedatea2td-btn {
+  padding: 0 20px !important;
+  height: 28px !important;
+  line-height: 28px !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: 14px;
+  color: #333;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .btn-wrapper__black
+  button {
+  border-radius: 4px;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .btn-wrapper__black.person-btn__wrapper
+  button {
+  margin-right: 8px;
+  margin-bottom: 6px;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .upload-item__label
+  .wedatea2td-form__label {
+  padding-top: 12px !important;
+}
+.approval-drawer.drawer
+  .wedatea2td-form.approval-form__drawer
+  .form-item__textarea {
+  width: 356px;
+  height: 108px;
+  border-radius: 4px;
+}
+.approval-drawer.drawer .btn-wrapper button {
+  border-radius: 4px;
+}
+.approval-drawer.drawer .btn-wrapper button:first-child {
+  margin-right: 10px;
+}
+.approval-drawer.drawer .person-item {
+  display: inline-block;
+  vertical-align: middle;
+  height: 30px;
+  box-sizing: border-box;
+  margin-right: 8px;
+  margin-bottom: 6px;
+  padding: 4px;
+  border: 1px solid #dcdee6;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.approval-drawer.drawer .person-item span {
+  padding: 0 8px;
+}
+.approval-drawer.drawer .person-item .wedatea2td-icon-dismiss {
+  cursor: pointer;
+}
+.approval-drawer.drawer .wedatea2td-drawer__body {
+  padding: 28px;
+}
+.approval-drawer.drawer .wedatea2td-drawer__footer {
+  flex: 0 0 76px;
+  padding: 20px;
+  background-color: #fff;
+}
+.approval-drawer.drawer .wedatea2td-drawer__footer .btn-wrapper button {
+  height: 36px;
+  width: 106px;
+}
+.approval-drawer.drawer .apass-upload-file-item__title {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+.ccUsers-wrapper .person-item {
+  display: inline-block;
+  vertical-align: middle;
+  height: 30px;
+  box-sizing: border-box;
+  margin-right: 8px;
+  margin-bottom: 6px;
+  padding: 4px;
+  border: 1px solid #dcdee6;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.ccUsers-wrapper .person-item span {
+  padding: 0 8px;
+}
+.ccUsers-wrapper .person-item .wedatea2td-icon-dismiss {
+  cursor: pointer;
+}