@cloudbase/weda-ui 3.4.3 → 3.4.4

package/dist/web/components/form/userOrgSelect/component/user-select-h5/user-list-h5.js

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { Radio, Checkbox, List, StatusTip } from 'tea-component';
+import { NullStatus } from '../error-tips';
+import '../userOrgSelect.css';
+export const UserListH5 = (props) => {
+    const { multiple, selectedList, setSelectedList, userList, isEnd, isSearch = false, onScrollBottom, loading, onTouchMove, } = props;
+    const [checkAll, setCheckAll] = useState(1); //1:未选中；2:半选；3:选中
+    const [count, setCount] = useState(0);
+    // 用户列表当前页全选逻辑
+    const onChange = (value) => {
+        setCheckAll(value ? 3 : 1);
+        if (value) {
+            //全选逻辑
+            const storgeUsers = [];
+            userList.map((e) => {
+                var _a;
+                let isContain = false;
+                for (let i = 0; i < selectedList.length; i++) {
+                    //用户已被选中过
+                    if (((_a = selectedList[i]) === null || _a === void 0 ? void 0 : _a.id) === (e === null || e === void 0 ? void 0 : e.id)) {
+                        isContain = true;
+                        break;
+                    }
+                }
+                if (!isContain)
+                    storgeUsers.push(e);
+            });
+            setSelectedList((selectedList || []).concat(storgeUsers));
+        }
+        else {
+            // 取消全选
+            userList.map((e) => {
+                selectedList.splice(selectedList.findIndex((s) => (s === null || s === void 0 ? void 0 : s.id) === (e === null || e === void 0 ? void 0 : e.id)), 1);
+            });
+            setSelectedList([].concat(selectedList));
+        }
+    };
+    useEffect(() => {
+        setCount(0);
+        const pageTotal = (userList === null || userList === void 0 ? void 0 : userList.length) || 0;
+        // 值变更，检查全选状态
+        if (multiple && userList && userList.length > 0) {
+            // 当前页有部分用户被选中
+            let count = 0;
+            userList.map((e) => {
+                if (selectedList.findIndex((s) => (s === null || s === void 0 ? void 0 : s.id) === (e === null || e === void 0 ? void 0 : e.id)) !== -1) {
+                    count++;
+                }
+            });
+            if (count === 0) {
+                setCheckAll(1);
+            }
+            else if (count === pageTotal) {
+                setCheckAll(3);
+            }
+            setCount(count);
+        }
+    }, [selectedList, multiple, userList]);
+    return (React.createElement(React.Fragment, null,
+        multiple && (React.createElement("div", { className: "weda-select-user-dept__dialog-list-multiple-all" },
+            React.createElement("div", { className: "weda-select-user-dept__list-multiple-all", onTouchMove: (e) => onTouchMove(e) },
+                React.createElement("div", { className: "weda-select-user-dept__list-item-wrap" },
+                    React.createElement("div", { className: "weda-select-user-dept__group" },
+                        React.createElement(Checkbox, { value: checkAll === 3 ? true : false, indeterminate: checkAll === 2, onChange: (value) => {
+                                onChange(value);
+                            } },
+                            "\u6279\u91CF\u9009\u62E9(",
+                            count,
+                            "/",
+                            userList.length,
+                            ")")))))),
+        React.createElement(List, { className: "weda-select-user-dept__dialog-list", onScrollBottom: onScrollBottom }, userList && userList.length > 0 ? (React.createElement(React.Fragment, null,
+            (userList || []).map((item, index) => {
+                var _a, _b;
+                return (React.createElement("div", { className: "weda-select-user-dept__list-item", key: index + (item === null || item === void 0 ? void 0 : item.id), onTouchMove: (e) => onTouchMove(e) },
+                    React.createElement("div", { className: "weda-select-user-dept__list-item-wrap" },
+                        React.createElement("div", { className: "weda-select-user-dept__group" },
+                            multiple ? (React.createElement("div", null,
+                                React.createElement(Checkbox.Group, { value: selectedList.map((e) => e === null || e === void 0 ? void 0 : e.id), layout: "column" },
+                                    React.createElement(Checkbox, { name: item === null || item === void 0 ? void 0 : item.userId, onChange: (value) => {
+                                            if (value) {
+                                                setSelectedList((selectedList || []).concat([item]));
+                                            }
+                                            else {
+                                                setSelectedList(selectedList.filter((e) => e.id !== (item === null || item === void 0 ? void 0 : item.id)));
+                                            }
+                                        } },
+                                        React.createElement("div", { className: "wedatea2td-form-check-select__user_h5" },
+                                            React.createElement("div", { className: "item-radio-name" }, item === null || item === void 0 ? void 0 : item.content)))))) : (React.createElement(Radio.Group, { value: (_a = selectedList.filter((e) => (e === null || e === void 0 ? void 0 : e.userId) === (item === null || item === void 0 ? void 0 : item.userId))[0]) === null || _a === void 0 ? void 0 : _a.userId, onChange: (value) => {
+                                    const ids = selectedList.map((item) => item === null || item === void 0 ? void 0 : item.userId);
+                                    // 多选情况，取消选中某元素时
+                                    if (ids.indexOf(value) !== -1) {
+                                        setSelectedList(selectedList.filter((e) => e.userId !== value));
+                                    }
+                                    else {
+                                        setSelectedList([item]);
+                                    }
+                                }, layout: "column" },
+                                React.createElement(Radio, { name: item === null || item === void 0 ? void 0 : item.userId },
+                                    React.createElement("div", { className: "wedatea2td-form-check-select__user_h5" },
+                                        React.createElement("div", { className: "item-radio-name" }, item === null || item === void 0 ? void 0 : item.content))))),
+                            isSearch && (item === null || item === void 0 ? void 0 : item.mainOrg) && (item === null || item === void 0 ? void 0 : item.mainOrg.length) > 0 && (React.createElement("div", { className: "item-org-h5" }, (_b = item === null || item === void 0 ? void 0 : item.mainOrg[0]) === null || _b === void 0 ? void 0 : _b.OrgName))))));
+            }),
+            isEnd && (React.createElement("div", { className: "weda-select-user-dept__load-completed" }, "\u5DF2\u7ECF\u5230\u5E95\u4E86")),
+            (loading === null || loading === void 0 ? void 0 : loading.status) && (React.createElement("div", { className: "weda-select-user-dept__load-completed" },
+                React.createElement(StatusTip, { status: 'loading' }))))) : (React.createElement(NullStatus, { description: '无可选成员', size: 's' })))));
+};

package/dist/web/components/form/userOrgSelect/component/user-select-h5/user-select-h5.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { renderDecorator } from '../../../renderDecorator';
+import classNames from '../../../../../utils/classnames';
+import { defaultRequest } from '../../common/fetch-data-service';
+import { ConfigProvider } from 'tea-component';
+import { ModalSelectH5 } from '../modal-select-h5';
+import { InputTags } from '../input-tags';
+export function UserTreeSelectH5({ id, className, style, label = '成员选择', labelVisible = true, placeholder = '请选择成员', disabled = false, layout = 'horizontal', requiredFlag = false, decorator, multiple = false, //是否多选
+pageNo, setPageNo, pageSize, 
+// platform,
+request = defaultRequest, onCancel, onConfirm, selectedUserList, setSelectedUserList, confirmUserList, setConfirmUserList, open, setOpen, filterParams, treeData, error, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-select-user-dept': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-cell_disabled': disabled,
+        'weda-select-user-dept__select-result': true,
+    });
+    const [originalOrgData, setOriginalOrgData] = useState([]);
+    const [errorInfo, setErrorInfo] = useState({
+        errorStatus: false,
+        errorMessage: null,
+    });
+    const onFocus = function () {
+        setSelectedUserList(confirmUserList);
+        if (!disabled)
+            setOpen(true);
+    };
+    return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: subCls, onClick: onFocus },
+            React.createElement(InputTags, { tagsList: confirmUserList, placeholder: placeholder, multiple: multiple, errInfo: errorInfo, disabled: disabled, platForm: 'h5', onClose: (e, item) => {
+                    setConfirmUserList(confirmUserList.filter((l) => (l === null || l === void 0 ? void 0 : l.id) !== (item === null || item === void 0 ? void 0 : item.id)));
+                    e.stopPropagation();
+                } })),
+        React.createElement(ModalSelectH5, { open: open, request: request, treeData: treeData, originalOrgData: originalOrgData, setOriginalOrgData: setOriginalOrgData, multiple: multiple, errorInfo: errorInfo, selectedUserList: selectedUserList, setSelectedUserList: setSelectedUserList, confirmUserList: confirmUserList, onClose: onCancel, onConfirm: onConfirm, setErrorInfo: setErrorInfo, filterParams: filterParams, pageNo: pageNo, setPageNo: setPageNo, pageSize: pageSize, treeDataError: error })))({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        multiCell: false,
+        requiredFlag,
+        layout,
+        decorator,
+    });
+}

package/dist/web/components/form/userOrgSelect/component/user-select-pc/error-tips.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Status } from 'tea-component';
+export const ErrorStatus = ({ description, title = '接口调用失败' }) => {
+    return (React.createElement(Status, { icon: 'blank', size: 's', title: title, description: description }));
+};
+export const NullStatus = ({ title = null, size, description = null }) => {
+    return (React.createElement(Status, { icon: 'blank', size: size, title: title, description: description }));
+};
+export const LoadingStatus = () => {
+    return React.createElement(Status, { icon: 'loading', size: 's', description: '加载中' });
+};

package/dist/web/components/form/userOrgSelect/{user-select-pc → component/user-select-pc}/model-user-list.js

@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Checkbox, Button, Text } from 'tea-component';
-import { fetchUserList } from '../common/fetch-data-service';
-import { UserOrgContext } from './index';
-import { UserList } from './search-user';
-import './index.css';
-export const ModelUserList = (props) => {
-    const { selectedOrgId, curPageUserList, setCurPageUserList } = props;
-    const { selectedUserList, multiple, setSelectedUserList, request, pageNo, setPageNo, pageSize, } = React.useContext(UserOrgContext) || {};
+import { fetchUserList } from '../../common/fetch-data-service';
+import { UserOrgContext } from './user-select-pc';
+import { UserOrgList } from './../user-org-list';
+import '../index.css';
+export const ModelUserList = ({ selectedOrgId, curPageUserList, setCurPageUserList, filterParams, }) => {
+    const { selectedUserList, multiple, setSelectedUserList, request, pageNo, setPageNo, pageSize, selectedUserIds, setSelectedIds, } = React.useContext(UserOrgContext) || {};
     const [errInfo, setErrInfo] = useState({
         errorStatus: false,
         errorMessage: null,
@@ -18,7 +17,7 @@ export const ModelUserList = (props) => {
         try {
             if (selectedOrgId) {
                 setLoading(true);
-                fetchUserList({ OrgId: selectedOrgId, pageNo, pageSize }, request).then((res) => {
+                fetchUserList({ OrgId: selectedOrgId, pageNo, pageSize, ...filterParams }, request).then((res) => {
                     setLoading(false);
                     setTotal(res === null || res === void 0 ? void 0 : res.total);
                     setCurPageUserList(res.records);
@@ -29,6 +28,7 @@ export const ModelUserList = (props) => {
             setLoading(false);
             setErrInfo({ errorStatus: true, errorMessage: e });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedOrgId, pageNo]);
     useEffect(() => {
         const pageTotal = (curPageUserList === null || curPageUserList === void 0 ? void 0 : curPageUserList.length) || 0;
@@ -95,5 +95,5 @@ export const ModelUserList = (props) => {
                         "/ ",
                         Math.ceil(total / pageSize))),
                 React.createElement(Button, { type: "icon", icon: "arrowright--line", disabled: Math.ceil(total / pageSize) === pageNo, onClick: () => setPageNo(pageNo + 1) }))))),
-        React.createElement(UserList, { userList: curPageUserList, isOrg: false, loading: loading, errorStatus: errInfo === null || errInfo === void 0 ? void 0 : errInfo.errorStatus, errorMessage: errInfo === null || errInfo === void 0 ? void 0 : errInfo.errorMessage })));
+        React.createElement(UserOrgList, { userOrgList: curPageUserList, isOrg: false, loading: loading, errorStatus: errInfo === null || errInfo === void 0 ? void 0 : errInfo.errorStatus, errorMessage: errInfo === null || errInfo === void 0 ? void 0 : errInfo.errorMessage, selectedList: selectedUserList, multiple: multiple, setSelectedList: setSelectedUserList, selectedIds: selectedUserIds, setSelectedIds: setSelectedIds })));
 };

package/dist/web/components/form/userOrgSelect/component/user-select-pc/org-tree.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tree } from 'tea-component';
+import { LoadingStatus, ErrorStatus } from './error-tips';
+import '../index.css';
+export const OrgTree = (props) => {
+    const { selectedOrgId, treeData, treeDataError, onActive, 
+    //是否展示 Checkbox
+    selectable = false, } = props;
+    return (React.createElement(React.Fragment, null, treeDataError ? (React.createElement(ErrorStatus, { description: treeDataError || null })) : (React.createElement(React.Fragment, null, treeData && treeData.length > 0 && !treeDataError ? (React.createElement(Tree, { className: "depart-tree", data: treeData, fullActivable: true, activable: true, selectable: selectable, selectedIds: [selectedOrgId], activeIds: [selectedOrgId], selectStrictly: true, onActive: (ids) => onActive(ids) })) : (React.createElement(LoadingStatus, null))))));
+};

package/dist/web/components/form/userOrgSelect/component/user-select-pc/user-model.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Modal, Bubble } from 'tea-component';
+import { ModalSearch } from '../modal-search';
+import { UserOrgContext } from './user-select-pc';
+import { OrgTree } from '../org-tree';
+import { ModelUserList } from './model-user-list';
+import { SelectedList } from '../selected-list';
+import { fetchSearchUser } from '../../common/fetch-data-service';
+import debounce from '../../../../../utils/debounce';
+import '../index.css';
+export const UserModel = ({ open, setOpen, onCancel, onConfirm, treeData, treeDataError, filterParams, }) => {
+    var _a;
+    const { selectedUserList, setSelectedUserIds, request, selectedUserIds, setSelectedUserList, multiple, setPageNo, confirmUserList, } = React.useContext(UserOrgContext) || {};
+    const [selectedOrgId, setSelectedOrgId] = useState(null);
+    //当前页人员列表
+    const [curPageUserList, setCurPageUserList] = useState(null);
+    const [searchUserList, setSearchUserList] = useState([]);
+    // 是否有搜索项
+    const [keyWords, setKeyWords] = useState('');
+    const [errInfo, setErrInfo] = useState({
+        errorStatus: false,
+        errorMessage: null,
+    });
+    const [loading, setLoading] = useState(false);
+    treeData.length > 0 && !selectedOrgId
+        ? setSelectedOrgId((_a = treeData[0]) === null || _a === void 0 ? void 0 : _a.id)
+        : [];
+    useEffect(() => {
+        setSelectedUserIds((selectedUserList || []).map((e) => e === null || e === void 0 ? void 0 : e.id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedUserList]);
+    //搜索值变化延迟响应，节流处理
+    const onSearch = debounce((key) => {
+        try {
+            if (key && key.length > 0) {
+                setLoading(true);
+                fetchSearchUser({ key, ...filterParams }, request).then((res) => {
+                    setLoading(false);
+                    setSearchUserList(res);
+                });
+            }
+            else {
+                setSearchUserList([]);
+            }
+            setKeyWords(key);
+        }
+        catch (e) {
+            setLoading(false);
+            setErrInfo({ errorStatus: true, errorMessage: e });
+        }
+    }, 500);
+    return (React.createElement(Modal, { visible: open, caption: "\u9009\u62E9\u6210\u5458", onClose: () => setOpen(false), className: "weda-ui weda-ui-user-select-modal" },
+        React.createElement(Modal.Body, null,
+            React.createElement("div", { className: "weda-ui-user-select-container" },
+                React.createElement(ModalSearch, { searchList: searchUserList, errInfo: errInfo, loading: loading, keyWords: keyWords, selectedList: selectedUserList, multiple: multiple, setSelectedList: setSelectedUserList, selectedIds: selectedUserIds, filterParams: filterParams, onSearch: (key) => onSearch(key), onReset: () => setSearchUserList([]) }),
+                keyWords.length === 0 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "weda-ui-user-select-container-list" },
+                        React.createElement("div", { className: "weda-ui-user-select-container-list__start" },
+                            React.createElement(OrgTree, { selectedOrgId: [selectedOrgId], treeData: treeData, treeDataError: treeDataError, onActive: (ids) => {
+                                    setSelectedOrgId(ids[0]);
+                                    setPageNo(1);
+                                } })),
+                        React.createElement("div", { className: "weda-ui-user-select-container-list__end" },
+                            React.createElement(ModelUserList, { selectedOrgId: selectedOrgId, curPageUserList: curPageUserList, setCurPageUserList: setCurPageUserList, filterParams: filterParams })))))),
+            React.createElement(SelectedList, { selectedList: selectedUserList, onClose: (item) => {
+                    //检查是否当前页用户被关闭
+                    setSelectedUserList(selectedUserList.filter((e) => (e === null || e === void 0 ? void 0 : e.id) !== (item === null || item === void 0 ? void 0 : item.id)));
+                } })),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Button, { type: "weak", onClick: onCancel }, "\u53D6\u6D88"),
+            React.createElement(Bubble, { content: selectedUserList.length === 0 && confirmUserList.length == 0
+                    ? '请选择成员'
+                    : null },
+                React.createElement(Button, { type: "primary", onClick: onConfirm, disabled: selectedUserList.length === 0 && confirmUserList.length == 0 }, "\u786E\u5B9A")))));
+};

package/dist/web/components/form/userOrgSelect/component/user-select-pc/user-select-pc.js

@@ -0,0 +1,65 @@
+import React, { useImperativeHandle } from 'react';
+import { renderDecorator } from '../../../renderDecorator';
+import '../index.css';
+import { ConfigProvider, Dropdown } from 'tea-component';
+import { UserModel } from './user-model';
+import { defaultRequest } from '../../common/fetch-data-service';
+import { InputTags } from '../input-tags';
+import classNames from '../../../../../utils/classnames';
+export const UserOrgContext = React.createContext(null);
+export function UserSelectPC({ id, className, style, label = '人员选择', labelVisible = true, //标题显隐
+placeholder = '请选择人员', disabled = false, layout = 'horizontal', requiredFlag = false, size = 'l', multiple = false, //多选
+outerRef, request = defaultRequest, //接口请求
+decorator, onCancel, onConfirm, errInfo, open, setOpen, selectedUserList, setSelectedUserList, confirmUserList, setConfirmUserList, selectedUserIds, setSelectedUserIds, pageNo, setPageNo, pageSize, filterParams, treeData, error, }) {
+    // 外层组件类
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-user-tree-select': true,
+        [className]: className,
+    });
+    const selectInputCls = classNames({
+        'weda-ui-user-selected': true,
+    });
+    // 实例 ref 到外部
+    useImperativeHandle(outerRef, () => {
+        return {
+            methods: {
+                open: () => {
+                    setOpen(true);
+                },
+            },
+        };
+    }, [setOpen]);
+    return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(UserOrgContext.Provider, { value: {
+                selectedUserList,
+                multiple,
+                setSelectedUserList,
+                selectedUserIds,
+                setSelectedUserIds,
+                confirmUserList,
+                request,
+                pageNo,
+                setPageNo,
+                pageSize,
+            } },
+            React.createElement(Dropdown, { "data-testid": "userSelectDropdown", className: classNames(selectInputCls, `size-${size}`), disabled: disabled, open: open, onOpenChange: (open) => {
+                    if (open)
+                        setSelectedUserList(confirmUserList);
+                    setOpen(open);
+                }, appearance: 'button', button: React.createElement(InputTags, { tagsList: confirmUserList, placeholder: placeholder, multiple: multiple, errInfo: errInfo, disabled: disabled, onClose: (e, item) => {
+                        setConfirmUserList(confirmUserList.filter((l) => (l === null || l === void 0 ? void 0 : l.id) !== (item === null || item === void 0 ? void 0 : item.id)));
+                        e.stopPropagation();
+                    } }), overlayClassName: 'weda-ui-user-selected-overlay-hidden', style: { width: '100%' } },
+                React.createElement(UserModel, { open: open, setOpen: setOpen, onConfirm: onConfirm, onCancel: onCancel, treeData: treeData || [], treeDataError: error, filterParams: filterParams })))))({
+        id,
+        className: cls,
+        style,
+        size,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+        decorator,
+    });
+}