@cloudbase/weda-ui 3.5.2-mp → 3.5.3

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

@@ -0,0 +1,266 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import G6 from '@antv/g6';
+import { Status, Modal, Button, ConfigProvider } from 'tea-component';
+import moment from 'moment';
+import { getUuid } from '../../utils/tool';
+import { STATUS_COLOR_MAP, APPROVE_MAP } from './constants';
+import './style.css';
+/** 流程图组件 */
+export const FlowGraph = (props) => {
+    const { processCanvasInfo, ...restProps } = props;
+    const containerIdRef = useRef(getUuid());
+    // 节点审批详情弹窗显示状态
+    const [modalVisible, setModalVisible] = useState(false);
+    // 节点审批详情弹窗显示数据
+    const [modalData, setModalData] = useState({
+        nodeName: '',
+        confData: null,
+    });
+    useEffect(() => {
+        var _a;
+        if (((_a = processCanvasInfo === null || processCanvasInfo === void 0 ? void 0 : processCanvasInfo.Nodes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            renderGraph({
+                data: processCanvasInfo,
+                containerIdRef,
+                setModalData,
+                onOpenModal,
+            });
+        }
+    }, [processCanvasInfo]);
+    const onOpenModal = () => setModalVisible(true);
+    const onCloseModal = () => setModalVisible(false);
+    // antv注册节点
+    registerNode();
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { ...restProps, children: _jsxs("div", { id: containerIdRef.current, children: [renderStatus(!processCanvasInfo), renderTooltipContentModal({
+                        modalData,
+                        visible: modalVisible,
+                        onClose: onCloseModal,
+                    })] }) }) }));
+};
+// 渲染当前状态
+const renderStatus = (isEmpty) => {
+    if (isEmpty) {
+        return _jsx(Status, { icon: "blank", size: "l", title: "\u6682\u65E0\u6D41\u8F6C\u8282\u70B9" });
+    }
+    return null;
+};
+// 渲染图示内容
+const renderGraph = (config) => {
+    const { data, containerIdRef, onOpenModal, setModalData } = config;
+    const container = document.getElementById(containerIdRef.current);
+    if (!container)
+        return;
+    const width = container.scrollWidth;
+    const height = document.documentElement.clientHeight;
+    const tooltip = new G6.Tooltip({
+        offsetX: 60,
+        offsetY: -20,
+        trigger: 'click',
+        itemTypes: ['node'],
+        getContent: (e) => {
+            return renderTooltipContent(e, onOpenModal, setModalData);
+        },
+    });
+    const graphData = getGraphData(data);
+    const graph = new G6.Graph({
+        container: containerIdRef.current,
+        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(graphData);
+    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 renderTooltipContent = (e, onOpenModal, setModalData) => {
+    var _a;
+    const outDiv = document.createElement('div');
+    outDiv.style.width = 'auto';
+    const modelData = e.item.getModel();
+    const dataSource = modelData === null || modelData === void 0 ? void 0 : modelData.dataSource;
+    let vDomContent = null;
+    if ((_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.Conf) === null || _a === void 0 ? void 0 : _a.length) {
+        const contentHtml = dataSource === null || dataSource === void 0 ? void 0 : dataSource.Conf.map((info, index) => {
+            // 区分处理节点和审批节点的 待审批/待处理 文案
+            if (modelData.dataType === 23 && info.Status === 0) {
+                info.Status = 10;
+            }
+            return (_jsxs("li", { className: "weda-flow-graph-info-item", onClick: () => {
+                    onOpenModal();
+                    setModalData({
+                        nodeName: dataSource === null || dataSource === void 0 ? void 0 : dataSource.Name,
+                        confData: info,
+                    });
+                }, children: [_jsxs("div", { className: "first-line", children: [_jsx("i", { className: info.Status ? 'tootip-will_do' : '' }), _jsx("span", { className: "tootip-name", children: info.Name }), _jsx("span", { style: {
+                                    color: APPROVE_MAP[info.Status ? info.Status : 0].color,
+                                    paddingLeft: '8px',
+                                }, children: APPROVE_MAP[info.Status ? info.Status : 0].txt })] }), info.Status && info.OpTime ? (_jsx("p", { className: "tooltip-time", children: moment(info.OpTime).format('YYYY-MM-DD HH:mm:ss') })) : null] }, `conf-${index}`));
+        });
+        vDomContent = (_jsxs("div", { className: "weda-flow-graph-info", children: [_jsx("h4", { children: "\u8282\u70B9\u5BA1\u6279\u4FE1\u606F" }), _jsx("ul", { className: "weda-flow-graph-info-content", children: contentHtml })] }));
+    }
+    else {
+        vDomContent = _jsx("p", { children: "\u6682\u65E0\u4FE1\u606F" });
+    }
+    ReactDOM.render(vDomContent, outDiv);
+    return outDiv;
+};
+// 渲染提示内容弹窗
+const renderTooltipContentModal = (config) => {
+    var _a, _b;
+    const { visible, onClose, modalData: { nodeName, confData }, } = config;
+    const showData = [
+        {
+            label: '审批节点',
+            content: nodeName,
+        },
+        {
+            label: '审批人',
+            content: confData === null || confData === void 0 ? void 0 : confData.Name,
+        },
+        {
+            label: '审批操作',
+            content: (_jsx("span", { style: {
+                    color: (_a = APPROVE_MAP === null || APPROVE_MAP === void 0 ? void 0 : APPROVE_MAP[confData === null || confData === void 0 ? void 0 : confData.Status]) === null || _a === void 0 ? void 0 : _a.color,
+                }, children: (_b = APPROVE_MAP === null || APPROVE_MAP === void 0 ? void 0 : APPROVE_MAP[confData === null || confData === void 0 ? void 0 : confData.Status]) === null || _b === void 0 ? void 0 : _b.txt })),
+        },
+        {
+            label: '操作时间',
+            content: (confData === null || confData === void 0 ? void 0 : confData.OpTime)
+                ? moment(confData === null || confData === void 0 ? void 0 : confData.OpTime).format('YYYY-MM-DD HH:mm:ss')
+                : undefined,
+        },
+        {
+            label: '审批意见',
+            content: confData === null || confData === void 0 ? void 0 : confData.Comment,
+        },
+        {
+            label: '操作详情',
+            content: confData === null || confData === void 0 ? void 0 : confData.NewProcessors,
+        },
+    ];
+    if (!visible)
+        return null;
+    return (_jsxs(Modal, { visible: true, caption: '审批详情', onClose: onClose, className: "weda-flow-graph-info-modal", destroyOnClose: true, children: [_jsx(Modal.Body, { children: _jsx("div", { className: "weda-flow-graph-info-modal_content", children: showData
+                        .filter(({ content }) => content)
+                        .map(({ label, content }, index) => (_jsxs("div", { children: [_jsx("span", { className: "weda-flow-graph-info-modal_content-label", children: label }), _jsx("span", { className: "weda-flow-graph-info-modal_content-content", children: content })] }, index))) }) }), _jsx(Modal.Footer, { children: _jsx(Button, { type: "weak", onClick: onClose, children: "\u5173\u95ED" }) })] }));
+};
+// 获取图示数据
+const getGraphData = (data) => {
+    var _a;
+    const graphNodes = data.Nodes.map((node) => {
+        const { ElementId, Status } = node;
+        const graphNode = {
+            style: {
+                lineWidth: 3,
+                stroke: STATUS_COLOR_MAP[node.Status].lineColor,
+                fill: STATUS_COLOR_MAP[node.Status].bgColor,
+            },
+            id: `${node.ElementId}`,
+            label: node.Name,
+            labelCfg: {
+                style: {
+                    fontSize: 14,
+                    fill: '#00287E',
+                    fontWeight: 'bold',
+                },
+            },
+            dataSource: node,
+        };
+        if ((ElementId === null || ElementId === void 0 ? void 0 : ElementId.startsWith('startNode')) || (ElementId === null || ElementId === void 0 ? void 0 : ElementId.startsWith('end'))) {
+            graphNode.type = 'circle';
+            graphNode.size = 80;
+            if (Status === 3) {
+                graphNode.style.lineDash = [5];
+            }
+        }
+        if (ElementId.startsWith('exclusiveGateway')) {
+            graphNode.type = 'diamond';
+            graphNode.size = [160, 80];
+            graphNode.anchorPoints = [
+                [0.5, 0],
+                [0, 0.5],
+                [0.5, 1],
+                [1, 0.5],
+            ];
+        }
+        return graphNode;
+    });
+    const graphEdges = (_a = data.Edges) === null || _a === void 0 ? void 0 : _a.map((edge) => {
+        const graphEdge = {
+            source: edge.Source,
+            target: edge.Target,
+            label: edge.Label,
+        };
+        if (edge.Status === 1) {
+            graphEdge.style = {
+                stroke: '#0ABF5B',
+            };
+        }
+        return graphEdge;
+    });
+    return {
+        nodes: graphNodes,
+        edges: graphEdges,
+    };
+};
+// 注册节点
+const registerNode = () => {
+    G6.registerNode('sql', {
+        drawShape(cfg, group) {
+            var _a, _b;
+            const rect = group.addShape('rect', {
+                attrs: {
+                    x: -75,
+                    y: -25,
+                    width: 150,
+                    height: 50,
+                    radius: 10,
+                    stroke: (_a = STATUS_COLOR_MAP === null || STATUS_COLOR_MAP === void 0 ? void 0 : STATUS_COLOR_MAP[cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status]) === null || _a === void 0 ? void 0 : _a.lineColor,
+                    fill: (_b = STATUS_COLOR_MAP === null || STATUS_COLOR_MAP === void 0 ? void 0 : STATUS_COLOR_MAP[cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status]) === null || _b === void 0 ? void 0 : _b.bgColor,
+                    lineWidth: 3,
+                    lineDash: (cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status) === 3 ? [5] : undefined,
+                },
+                name: cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Name,
+            });
+            return rect;
+        },
+    }, 'single-node');
+};

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

@@ -0,0 +1,3 @@
+import { FlowGraph } from './graph';
+export type { IFlowGraphCanvasInfo } from './types';
+export default FlowGraph;

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

@@ -0,0 +1,2 @@
+import { FlowGraph } from './graph';
+export default FlowGraph;

package/dist/web/components/flow-graph/style.css

@@ -0,0 +1,109 @@
+.weda-flow-graph-info {
+  padding: 2px 4px;
+}
+.weda-flow-graph-info h4 {
+  margin-bottom: 4px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+  color: #000;
+}
+.weda-flow-graph-info .weda-flow-graph-info-content {
+  max-height: 160px;
+  overflow: auto;
+}
+.weda-flow-graph-info .weda-flow-graph-info-content .weda-flow-graph-info-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #e5e8ed;
+  cursor: pointer;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line {
+  height: 20px;
+  display: flex;
+  justify-content: flex-start nowrap;
+  align-items: center;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  border-radius: 50%;
+  background: rgba(36, 115, 242, 0.15);
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i.tooltip-will_do {
+  background: rgba(162, 172, 189, 0.15);
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i.tooltip-will_do:after {
+  background: #a2acbd;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-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%;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  .tootip-name {
+  padding-left: 8px;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .tooltip-time {
+  padding-left: 24px;
+  color: #999;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+}
+.weda-flow-graph-info-modal_content > div {
+  display: flex;
+  margin-bottom: 8px;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content-label {
+  min-width: 60px;
+  margin-right: 28px;
+  color: #999;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content-content {
+  color: #333;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content_link
+  > button {
+  display: block;
+}
+.weda-flow-graph-info-modal .tea-dialog__body {
+  max-height: 200px;
+  overflow: auto;
+}

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

@@ -0,0 +1,48 @@
+export interface IFlowGraphProps {
+    /**流程图数据 */
+    processCanvasInfo?: IFlowGraphCanvasInfo;
+}
+export interface IFlowGraphCanvasInfo {
+    /**流程图数据节点信息 */
+    Nodes: IFlowGraphCanvasNode[];
+    /**流程图数据连线信息 */
+    Edges: IFlowGraphCanvasEdge[];
+}
+export interface IFlowGraphCanvasNode {
+    /** 节点序号 */
+    Id: number;
+    /** 节点Id */
+    ElementId: string;
+    /** 节点名称 */
+    Name: string;
+    /** 节点类型 */
+    DataType: number;
+    /** 节点状态 */
+    Status: number;
+    /** 配置信息 */
+    Conf: IFlowGraphCanvasNodeConf[];
+}
+export interface IFlowGraphCanvasNodeConf {
+    /** 处理人名称 */
+    Name: string;
+    /** 处理状态 */
+    Status: number;
+    /** 操作时间 */
+    OpTime: number;
+    /** 评论 */
+    Comment: string;
+    /** 转交处理人 */
+    NewProcessors: string;
+}
+export interface IFlowGraphCanvasEdge {
+    /** 分支、边名称 */
+    Label: string;
+    /** 类型 */
+    Type: number;
+    /** 边的起始节点 */
+    Source: string;
+    /** 边的目标节点 */
+    Target: string;
+    /** 边的状态 */
+    Status: number;
+}

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

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

package/dist/web/components/form/checkbox/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import './style';
+export default function Checkbox({ id, className, style, events, name, label, labelVisible, format, enumName, range, layout, disabled, requiredFlag, decorator, controlValue, onChange: outerOnChange, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    range?: Readonly<{
+        label: string;
+        value: any;
+        [key: string]: any;
+    }[]>;
+    format?: string;
+    enumName?: string;
+    controlValue?: string[];
+    onChange?: (val: string[]) => void;
+}

package/dist/web/components/form/checkbox/index.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import fromEntries from 'object.fromentries';
+import { usePlatform } from '../../../utils/platform';
+import { renderDecorator } from '../renderDecorator';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+import './style';
+export default function Checkbox({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+name = 'formCheckbox', label = '标题', labelVisible = true, format = '', enumName = '', range = emptyArray, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, controlValue, onChange: outerOnChange, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-checkbox': true,
+        [className]: className,
+    });
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const subCls = classNames({
+        'weui-cell': isH5,
+        'weui-cell_active': isH5,
+        'weui-check__label': isH5,
+        'weui-cell_disabled': isH5 && disabled,
+    });
+    const [option, setOption] = useState(range);
+    const [enumOptions, setEnumOptions] = useState([]);
+    const [checkedItems, setCheckedItems] = React.useState(platform === 'h5'
+        ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+        : option.filter(({ checked }) => checked).map(({ value }) => value));
+    // 两次range不同时, 需要刷新checkedItems
+    const prevRangeRef = React.useRef();
+    React.useEffect(() => {
+        if (!isObjectEqual(prevRangeRef.current, option, true)) {
+            prevRangeRef.current = JSON.parse(JSON.stringify(option));
+            setCheckedItems(fromEntries(option.map(({ value, checked }) => [value, !!checked])));
+        }
+    });
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, []);
+    useEffect(() => {
+        if (format === 'x-enum') {
+            const opt = enumOptions &&
+                enumOptions.map((item) => {
+                    const checked = controlValue && controlValue.find((val) => val === item.value);
+                    return {
+                        value: item.value,
+                        label: item.label,
+                        checked: !!checked,
+                    };
+                });
+            setOption(opt);
+        }
+    }, [controlValue]);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [range]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        /* istanbul ignore next */
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setEnumOptions(enumOption);
+        const opt = enumOption &&
+            enumOption.map((item) => {
+                const checked = controlValue && controlValue.find((val) => val === item.value);
+                return {
+                    value: item.value,
+                    label: item.label,
+                    checked: !!checked,
+                };
+            });
+        setOption(opt);
+    };
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (value) {
+        const onChange = function (e) {
+            e.stopPropagation();
+            const checked = !checkedItems[value];
+            const newMap = Object.assign({}, checkedItems, { [value]: checked });
+            if (!disabled) {
+                setCheckedItems(newMap);
+                const value = Object.entries(newMap)
+                    .filter(([, checked]) => checked)
+                    .map(([value]) => value);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);
+                events.change({
+                    value,
+                }, { originEvent: e });
+            }
+        };
+        return onChange;
+    };
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    let checkboxElement;
+    if (platform === 'h5') {
+        checkboxElement = option.map(({ label, value }, index) => {
+            const _id = `checkbox-${hashcode}-${index}`;
+            const _name = `checkbox-${hashcode}-${name}`;
+            return (_jsxs("div", { onClickCapture: getChangeHandler(value), className: subCls, children: [_jsxs("div", { className: "weui-cell__hd", children: [_jsx("input", { type: "checkbox", className: "weui-check", value: value, id: _id, name: _name, checked: checkedItems[value], disabled: disabled }), _jsx("i", { className: "weui-icon-checked" })] }), _jsx("div", { className: "weui-cell__bd", children: _jsx("p", { children: label }) })] }, _id));
+        });
+    }
+    else {
+        checkboxElement = (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(TeaCheckbox.Group, { disabled: disabled, value: Object.entries(checkedItems)
+                    .filter(([, checked]) => checked)
+                    .map(([value]) => value), onChange: (value) => {
+                    const newMap = option
+                        .map((opt) => opt.value)
+                        .reduce((acc, cur) => {
+                        const idx = value.indexOf(cur);
+                        if (idx < 0) {
+                            acc[cur] = false;
+                        }
+                        else {
+                            acc[cur] = true;
+                        }
+                        return acc;
+                    }, {});
+                    setCheckedItems(newMap);
+                    const newVal = Object.entries(newMap)
+                        .filter(([, checked]) => checked)
+                        .map(([value]) => value);
+                    outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(newVal);
+                    events.change({
+                        value: newVal,
+                    });
+                }, children: option.map(({ value, label }, index) => {
+                    const _id = `checkbox-${hashcode}-${index}`;
+                    return (_jsx(TeaCheckbox, { name: value, id: _id, children: label }, _id));
+                }) }) }));
+    }
+    return renderDecorator(checkboxElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}

package/dist/web/components/form/checkbox/style.d.ts

@@ -0,0 +1 @@
+import '../../style';

package/dist/web/components/form/checkbox/style.js

@@ -0,0 +1,2 @@
+// common style
+import '../../style';