@cloudbase/weda-ui 3.4.2 → 3.4.3

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Transfer, Table, SearchBox, Bubble, Text, Modal, Button, LoadingTip, } from 'tea-component';
+import to from 'await-to-js';
+import { useGlobalContext } from '../../../../utils/hooks/context';
+import { getWedaUserList } from '../../services';
+import './index.css';
+const { selectable, removeable, scrollable, radioable } = Table.addons;
+export function WedaUserTransfer({ visible, onClose, setOptions, multiple = true, isMobile = false, onSelectedChange, value, tableClassName, }) {
+    var _a;
+    const [targetKeys, setTargetKeys] = useState([]);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const [userList, setUserList] = useState([]);
+    const originUserList = useRef([]);
+    const [loading, setLoading] = useState(false);
+    const { callWedaApi, IS_WEDA_IDE } = useGlobalContext();
+    useEffect(() => {
+        getWedaUser({ PageNo: 1, PageSize: 200 });
+    }, []);
+    useEffect(() => {
+        if (!visible) {
+            onSearchUser('');
+        }
+    }, [visible]);
+    useEffect(() => {
+        var _a;
+        if (isMobile) {
+            setTargetKeys(value);
+        }
+        else {
+            setTargetKeys(value === null || value === void 0 ? void 0 : value.map((i) => i === null || i === void 0 ? void 0 : i.value));
+        }
+        if ((_a = originUserList.current) === null || _a === void 0 ? void 0 : _a.length) {
+            const initSelected = value === null || value === void 0 ? void 0 : value.map((i) => {
+                var _a;
+                return (_a = originUserList.current) === null || _a === void 0 ? void 0 : _a.find((user) => {
+                    if (isMobile)
+                        return (user === null || user === void 0 ? void 0 : user.UserId) === i;
+                    return (user === null || user === void 0 ? void 0 : user.UserId) === (i === null || i === void 0 ? void 0 : i.value);
+                });
+            });
+            setSelectedRows(initSelected || []);
+        }
+    }, [value, (_a = originUserList.current) === null || _a === void 0 ? void 0 : _a.length]);
+    const getWedaUser = async (params) => {
+        setLoading(true);
+        const [err, result] = await to(getWedaUserList(params, { callWedaApi, IS_WEDA_IDE }));
+        setLoading(false);
+        if (!err) {
+            originUserList.current = (result === null || result === void 0 ? void 0 : result.UserList) || [];
+            setUserList((result === null || result === void 0 ? void 0 : result.UserList) || []);
+        }
+    };
+    const onSourceTableChange = (keys, context) => {
+        if (multiple) {
+            setTargetKeys(keys);
+            const selectedRows = transSelectedRows(context);
+            setSelectedRows(selectedRows);
+            onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange({ keys, rows: selectedRows });
+        }
+        else {
+            setTargetKeys([keys]);
+            setSelectedRows([context === null || context === void 0 ? void 0 : context.record]);
+            onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange({ keys: [keys], rows: [context === null || context === void 0 ? void 0 : context.record] });
+        }
+    };
+    const transSelectedRows = (context) => {
+        const { checked, record, recordKey } = context;
+        const index = selectedRows.findIndex((val) => (val === null || val === void 0 ? void 0 : val.UserId) === recordKey);
+        const newSelectedRows = selectedRows.concat();
+        if (checked) {
+            newSelectedRows.push(record);
+        }
+        else {
+            newSelectedRows.splice(index, 1);
+        }
+        return newSelectedRows;
+    };
+    const onSearchUser = (value) => {
+        var _a;
+        setInputValue(value);
+        if (value) {
+            const list = (_a = originUserList.current) === null || _a === void 0 ? void 0 : _a.filter((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.Name) === null || _a === void 0 ? void 0 : _a.includes(value); });
+            setUserList(list);
+        }
+        else {
+            setUserList(originUserList.current);
+        }
+    };
+    const onSubmitUser = () => {
+        setOptions(selectedRows.map((item) => ({
+            text: item.Name,
+            value: item.UserId,
+        })));
+        onCloseModal();
+    };
+    const onRemoveUser = (key) => {
+        setTargetKeys(targetKeys === null || targetKeys === void 0 ? void 0 : targetKeys.filter((i) => i !== key));
+        setSelectedRows(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.filter((i) => i.UserId !== key));
+    };
+    const onCloseModal = () => {
+        setTargetKeys([]);
+        setSelectedRows([]);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    if (isMobile) {
+        if (loading) {
+            return React.createElement(LoadingTip, { loadingText: "\u52A0\u8F7D\u4E2D" });
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SearchBox, { className: "weda-workbench__flow-user-search", value: inputValue, onChange: (value) => onSearchUser(value) }),
+            React.createElement(SourceTable, { dataSource: userList, targetKeys: targetKeys, onChange: onSourceTableChange, multiple: multiple, className: tableClassName })));
+    }
+    return (React.createElement(Modal, { visible: visible, caption: "\u4EBA\u5458\u9009\u62E9", onClose: onCloseModal, size: "l" },
+        React.createElement(Modal.Body, null,
+            React.createElement(Transfer, { leftCell: React.createElement(Transfer.Cell, { scrollable: false, title: "\u8BF7\u9009\u62E9\u7528\u6237", header: React.createElement(SearchBox, { value: inputValue, onChange: (value) => onSearchUser(value) }) },
+                    React.createElement(SourceTable, { dataSource: userList, targetKeys: targetKeys, onChange: onSourceTableChange, multiple: multiple, className: tableClassName })), rightCell: React.createElement(Transfer.Cell, { title: `已选择 (${(targetKeys === null || targetKeys === void 0 ? void 0 : targetKeys.length) || 0})` },
+                    React.createElement(TargetTable, { dataSource: selectedRows, onRemove: onRemoveUser })) })),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Button, { type: "primary", onClick: onSubmitUser }, "\u786E\u5B9A"),
+            React.createElement(Button, { type: "weak", onClick: onCloseModal }, "\u53D6\u6D88"))));
+}
+const columns = [
+    {
+        key: 'Name',
+        header: '用户名',
+        render: (record) => (record === null || record === void 0 ? void 0 : record.Name) ? (React.createElement(Bubble, { content: record === null || record === void 0 ? void 0 : record.Name },
+            React.createElement(Text, { overflow: true, style: { cursor: 'pointer' } }, record === null || record === void 0 ? void 0 : record.Name))) : (React.createElement(Text, null, "-")),
+    },
+    {
+        key: 'UserDepartment',
+        header: '所属部门',
+        render: (record) => {
+            var _a, _b;
+            const showStr = (_a = record === null || record === void 0 ? void 0 : record.Orgs) === null || _a === void 0 ? void 0 : _a.map((i) => (i === null || i === void 0 ? void 0 : i.OrgName) || '').join();
+            return ((_b = record === null || record === void 0 ? void 0 : record.Orgs) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(Bubble, { content: showStr },
+                React.createElement(Text, { overflow: true, style: { cursor: 'pointer' } }, showStr))) : (React.createElement(Text, null, "-"));
+        },
+    },
+];
+function SourceTable({ dataSource, targetKeys, onChange, multiple, className, }) {
+    const addons = [
+        scrollable({
+            maxHeight: 310,
+        }),
+        multiple
+            ? selectable({
+                value: targetKeys,
+                onChange,
+                rowSelect: true,
+            })
+            : radioable({
+                value: targetKeys === null || targetKeys === void 0 ? void 0 : targetKeys[0],
+                onChange,
+                rowSelect: true,
+            }),
+    ];
+    return (React.createElement(Table, { records: dataSource, recordKey: "UserId", rowDisabled: (record) => record.status === 'stopped', rowClassName: (record) => record.status, columns: columns, addons: addons, className: className }));
+}
+function TargetTable({ dataSource, onRemove }) {
+    return (React.createElement(Table, { records: dataSource, recordKey: "UserId", columns: columns, addons: [removeable({ onRemove })] }));
+}

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

@@ -0,0 +1,7 @@
+export * from './HighLightComment';
+export * from './HighlightTextarea';
+export * from './WedaUserTransfer';
+export * from './FlowStatusText';
+export * from './FlowUserSelect';
+export * from './FlowModuleText';
+export * from './UserSelectModel';

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

@@ -0,0 +1,65 @@
+export const STATUS_NUMBER_MAPPING = {
+    1: 'START',
+    2: 'PASS',
+    3: 'DOWN',
+    4: 'TURN',
+    5: 'REVOKE',
+    6: 'TRANS',
+    7: 'COUNTERSIGN',
+    8: 'STOP',
+    9: 'SKIP_PASS',
+    10: 'SKIP_DOWN',
+    11: 'PENDING',
+    12: 'END',
+    13: 'HANDLED',
+    14: 'HANDLING',
+    15: 'CC',
+    16: 'DROP', // 作废
+};
+export const STATUS = {
+    START: 'start',
+    PASS: 'pass',
+    DOWN: 'down',
+    TURN: 'trun',
+    REVOKE: 'revoke',
+    TRANS: 'trans',
+    COUNTERSIGN: 'countersign',
+    STOP: 'stop',
+    SKIP_PASS: 'skip_pass',
+    SKIP_DOWN: 'skip_down',
+    PENDING: 'pending',
+    END: 'end',
+    HANDLED: 'handled',
+    HANDLING: 'handling',
+    CC: 'cc',
+    DROP: 'DROP', // 作废
+};
+export const STATUS_TEXT = {
+    pass: { theme: 'success', text: '审批通过' },
+    trun: { theme: 'primary', text: '已转办' },
+    down: { theme: 'error', text: '驳回' },
+    pending: { theme: 'warning', text: '待审批' },
+    trans: { theme: 'default', text: '回退' },
+    revoke: { theme: 'default', text: '撤销' },
+    skip_pass: { theme: 'success', text: '跳过(同意)' },
+    skip_down: { theme: 'error', text: '跳过(驳回)' },
+    end: { theme: 'error', text: '结束' },
+    countersign: { theme: 'default', text: '加签' },
+    stop: { theme: 'error', text: '终止' },
+    handled: { theme: 'success', text: '已处理' },
+    handling: { theme: 'warning', text: '待处理' },
+};
+export const PAGE_TYPE = {
+    /** 待我处理 */
+    TO_DO: 'TODO',
+    /** 我创建的 */
+    CREATE: 'CREATE',
+    /** 我已处理 */
+    DONE: 'DONE',
+    /** 抄送我的 */
+    COPY: 'CC',
+    /** 草稿箱 */
+    DRAFT: 'DRAFT',
+    /** 新建流程 */
+    CREATEFLOW: 'CREATEFLOW',
+};

package/dist/web/components/flow/frame/getCommonFlowData.js

@@ -0,0 +1,78 @@
+import to from 'await-to-js';
+import { fetchProcess, getApprovalPageDetail, fetchInstanceOperation, } from '../services';
+import { PAGE_TYPE } from '../constants';
+import { IFlowDetailProps, IPageInfoProps, } from './types';
+import { CommonFlowDataUtils } from './utils';
+export async function getCommonFlowData(config, flowTaskId) {
+    const { currentPageType } = config;
+    const pageTypeParams = currentPageType === PAGE_TYPE.CREATEFLOW
+        ? PAGE_TYPE.TO_DO
+        : currentPageType;
+    const flowDetail = await getProcessInstance(config, pageTypeParams, flowTaskId);
+    const pageInfo = await getPageInfo(config, flowDetail, pageTypeParams);
+    const flowSteps = await fetchFlowSteps(config, flowDetail);
+    return {
+        flowDetail,
+        ...pageInfo,
+        ...flowSteps,
+    };
+}
+export async function getProcessInstance(config, pageTypeParams, flowTaskId) {
+    const { isWedaIde, callWedaApi } = config;
+    const params = {
+        flowTaskId,
+        pageType: pageTypeParams,
+    };
+    const options = { isWedaIde, callWedaApi };
+    const [err, res] = await to(fetchProcess(params, options));
+    if (!err) {
+        return res;
+    }
+    return new IFlowDetailProps();
+}
+export async function getPageInfo(config, flowDetail, pageType) {
+    const params = {
+        instanceId: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.instanceId,
+        flowCode: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.flowCode,
+        nodeId: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.currentNodeId,
+        id: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.ccId,
+        appVersion: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.flowVersion,
+        isCompleted: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.isCompleted,
+        pageType,
+        taskId: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.taskId,
+    };
+    const [err, res] = await to(getApprovalPageDetail(params, config));
+    if (!err) {
+        const initialValues = CommonFlowDataUtils.translateObjectMap(res);
+        const { isReadonly } = CommonFlowDataUtils.getFormState(config);
+        const flowLoadData = {
+            initialValues,
+            formType: isReadonly ? 'read' : 'create',
+        };
+        return {
+            pageInfo: res,
+            flowLoadData,
+        };
+    }
+    return {
+        pageInfo: new IPageInfoProps(),
+        flowLoadData: { initialValues: {}, formType: 'read' },
+    };
+}
+export async function fetchFlowSteps(config, flowDetail) {
+    var _a;
+    const [err, res] = await to(fetchInstanceOperation({ instanceId: flowDetail.instanceId }, config));
+    if (!err) {
+        const processData = (res === null || res === void 0 ? void 0 : res.elementInfos) || [];
+        const steps = CommonFlowDataUtils.transProcessData(processData, config.safeJsonParse);
+        const ccUserMaps = ((_a = processData === null || processData === void 0 ? void 0 : processData[0]) === null || _a === void 0 ? void 0 : _a.ccUserMaps) || {};
+        return {
+            steps,
+            ccUserMaps,
+        };
+    }
+    return {
+        steps: [],
+        ccUserMaps: {},
+    };
+}

package/dist/web/components/flow/frame/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useCommonFlowRequest';
+export * from './useElementMediaQuery';

package/dist/web/components/flow/frame/hooks/useCommonFlowRequest.js

@@ -0,0 +1,148 @@
+import { useEffect, useRef } from 'react';
+import EventEmitter from 'eventemitter3'; // eslint-disable-line
+/** 流程通用接口请求hook */
+export function useCommonFlowRequest({ moduleName, request, onListen, }) {
+    const flowRequestRef = useRef();
+    useEffect(() => {
+        flowRequestRef.current = CommonRequestInstance.getFlow();
+        flowRequestRef.current.initModule(moduleName);
+        flowRequestRef.current.listen(moduleName, onListen);
+        flowRequestRef.current.request(requestData, moduleName);
+        return () => {
+            var _a;
+            (_a = flowRequestRef.current) === null || _a === void 0 ? void 0 : _a.destroyModule(moduleName);
+        };
+    }, []);
+    const requestData = async () => {
+        var _a;
+        const data = await request();
+        (_a = flowRequestRef.current) === null || _a === void 0 ? void 0 : _a.requestSuccess(data);
+    };
+    const reload = () => {
+        flowRequestRef.current.reload(requestData, moduleName);
+    };
+    return { reload };
+}
+const EVENT_NAME = 'flow-send-data';
+/**
+ * 流程各个组件的请求控制中心
+ * @description
+ * - 管理五个流程组件中公用的后端流程数据，只进行一次请求，将请求结果发送到流程中五个组件内部
+ */
+class CommonRequestInstance {
+    constructor() {
+        /** 请求状态 */
+        Object.defineProperty(this, "requestState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'init'
+        });
+        /** 数据接收状态 */
+        Object.defineProperty(this, "receivedState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        /** 模块卸载状态 */
+        Object.defineProperty(this, "moduleMountState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        /** 消息通知实体 */
+        Object.defineProperty(this, "messageHub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new EventEmitter()
+        });
+        /** 公用数据缓存 */
+        Object.defineProperty(this, "cacheData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    static getFlow() {
+        if (!CommonRequestInstance.flow) {
+            CommonRequestInstance.flow = new CommonRequestInstance();
+        }
+        return CommonRequestInstance.flow;
+    }
+    /** 初始化模块信息，为模块卸载状态注册初始化标记 */
+    initModule(moduleName) {
+        this.moduleMountState[moduleName] = true;
+    }
+    /**
+     * 模块销毁
+     * @description 模块对应的UI组件卸载之后，需要标记到`moduleMountState`中，当所有模块对应组件都被卸载，则将此实例属性重置
+     */
+    destroyModule(moduleName) {
+        this.moduleMountState[moduleName] = false;
+        this.receivedState[moduleName] = false;
+        const allUnmount = Object.values(this.moduleMountState).every((state) => !state);
+        if (allUnmount) {
+            this.requestState = 'init';
+            this.moduleMountState = {};
+            this.receivedState = {};
+        }
+        this.messageHub.removeAllListeners();
+    }
+    /**
+     * 流程请求控制
+     * @description
+     *  - 当请求状态是loading，执行return 避免重复请求
+     *  - 当请求状态是loaded，发送已请求的缓存数据
+     */
+    request(callback, moduleName) {
+        if (this.requestState === 'loaded') {
+            if (!this.receivedState[moduleName]) {
+                this.send(this.cacheData);
+                return;
+            }
+            return;
+        }
+        if (this.requestState === 'loading') {
+            return;
+        }
+        this.requestState = 'loading';
+        callback === null || callback === void 0 ? void 0 : callback();
+    }
+    /**
+     * 重新请求数据
+     */
+    reload(callback, moduleName) {
+        this.requestState = 'reload';
+        this.receivedState = {};
+        this.request(callback, moduleName);
+    }
+    /**
+     * 数据请求成功后的回调
+     */
+    requestSuccess(data) {
+        this.cacheData = data;
+        this.send(data);
+        this.requestState = 'loaded';
+    }
+    /**
+     * 向各个模块发送数据
+     */
+    send(data) {
+        this.messageHub.emit(EVENT_NAME, data);
+    }
+    /**
+     * 模块接收数据
+     */
+    listen(moduleName, callback) {
+        this.messageHub.on(EVENT_NAME, (data) => {
+            if (!this.receivedState[moduleName]) {
+                callback === null || callback === void 0 ? void 0 : callback(data);
+                this.receivedState[moduleName] = true;
+            }
+        });
+    }
+}

package/dist/web/components/flow/frame/hooks/useElementMediaQuery.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+export function useElementMediaQuery(element, maxWidth = 768) {
+    const [isNarrowElement, setIsNarrowElement] = useState(false);
+    useEffect(() => {
+        if (element) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                var _a, _b;
+                const width = (_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width;
+                setIsNarrowElement(width < maxWidth);
+            });
+            resizeObserver.observe(element);
+        }
+    }, [element]);
+    return isNarrowElement;
+}

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

@@ -0,0 +1,58 @@
+import React, { useState, useRef, useMemo } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { useMediaQuery } from '@react-hookz/web';
+import { useGlobalContext } from '../../../utils/hooks/context';
+import { globalContextConnect } from '../../../utils/hooks/globalConnect';
+import { safeJsonParse } from '../../../utils/tool';
+import { getCommonFlowData } from './getCommonFlowData';
+import { ICommonFlowDataProps } from './types';
+import { CommonFlowDataUtils } from './utils';
+import { useCommonFlowRequest, useElementMediaQuery, } from './hooks';
+export * from './types';
+/**
+ * 各个模块 通用的高阶函数 返回一个Container组件，包含一些公共属性和逻辑
+ */
+export function createModuleFrame(Component, moduleName) {
+    const BaseModuleContainer = (props) => {
+        const { events } = props;
+        const [loading, setLoading] = useState(false);
+        const [commonFlowData, setCommonFlowData] = useState(new ICommonFlowDataProps());
+        const containerRef = useRef();
+        const isH5 = useMediaQuery('(max-width: 1024px)');
+        const isNarrowElement = useElementMediaQuery(containerRef.current, 768);
+        const { IS_WEDA_IDE, callWedaApi } = useGlobalContext();
+        const { currentPageType, flowTaskId } = useMemo(() => {
+            return CommonFlowDataUtils.getCurrentFlowPageQuery(IS_WEDA_IDE);
+        }, [location.hash]);
+        const { reload } = useCommonFlowRequest({
+            moduleName,
+            request: async () => {
+                var _a;
+                setLoading(true);
+                const data = await getCommonFlowData({
+                    ...flowLocalProps,
+                    currentPageType: CommonFlowDataUtils.getCurrentFlowPageQuery(IS_WEDA_IDE)
+                        .currentPageType,
+                }, flowTaskId);
+                setLoading(false);
+                (_a = events === null || events === void 0 ? void 0 : events.flowLoad) === null || _a === void 0 ? void 0 : _a.call(events, data.flowLoadData);
+                return data;
+            },
+            onListen: (data) => {
+                setCommonFlowData(data);
+            },
+        });
+        const flowLocalProps = {
+            isH5,
+            isNarrowElement,
+            isWedaIde: IS_WEDA_IDE,
+            currentPageType,
+            callWedaApi,
+            safeJsonParse,
+        };
+        return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement("div", { ...props, ref: containerRef },
+                React.createElement(Component, { ide: props, flowLocalProps: flowLocalProps, commonFlowData: commonFlowData, loading: loading, reload: reload }))));
+    };
+    return globalContextConnect(BaseModuleContainer);
+}