@cloudbase/weda-ui 3.1.9 → 3.2.1

package/dist/src/web/components/form/userOrgSelect/departTreeSelect/departTreeSelect.h5.js

@@ -0,0 +1,247 @@
+import React, { useState, useEffect } from 'react';
+import { emptyObject } from '../../../../utils/constant';
+import { renderDecorator } from '../../renderDecorator';
+import { IconFont } from 'tdesign-icons-react';
+import classNames from '../../../../utils/classnames';
+import { getDepartById, defaultRequest, } from '../../../../utils/getUserService';
+import { dealOrgData } from '../utils';
+import { Modal, Button, ConfigProvider, Radio, Status } from 'tea-component';
+import isObjectEqual from '../../../../utils/isObjectEqual';
+import '../userOrgSelect.css';
+import { ErrorStatus, ModalSearch } from '../comTool';
+export function DepartTreeSelectH5({ id, className, style, events = emptyObject, label = '部门选择', labelVisible = true, name = 'formDepartTreeSelect', placeholder = '请选择部门', defaultValueType = 'noneDepart', defaultValue = '', confirmValue = '', disabled = false, layout = 'horizontal', requiredFlag = false, size = 'l', decorator, request = defaultRequest, onChange = null, focus: autoFocus = false, }) {
+    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,
+    });
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef(null);
+    const prevConfirmRef = React.useRef(null);
+    const [value, setValue] = useState(null);
+    const [visible, setVisible] = React.useState(false);
+    const [isSearch, setIsSearch] = useState(false);
+    const [orgsTreeData, setOrgsTreeData] = useState([]);
+    const [originalOrgData, setOriginalOrgData] = useState([]);
+    const [count, setCount] = useState(1); //计数弹窗显示层级
+    const [selectItem, setSelectItem] = useState(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [loading, setLoading] = useState({ id: null, status: false });
+    const [titleText, setTitleText] = useState('');
+    const [errorInfo, setErrorInfo] = useState({
+        errorStatus: false,
+        errorMessage: null,
+    });
+    const handleFocus = (value) => {
+        setIsSearch(value);
+    };
+    const cancleSearch = () => {
+        setErrorInfo({ errorStatus: false, errorMessage: null });
+        handleFocus(false);
+        setSearchValue('');
+        initOrgsData();
+    };
+    const changeSearchValue = async (event) => {
+        var _a;
+        try {
+            setErrorInfo({ errorStatus: false, errorMessage: null });
+            const sValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+            setSearchValue(sValue);
+            if (sValue) {
+                const { Orgs = [] } = await request('SearchByCondition', {
+                    KeyWords: sValue.trim(),
+                    SearchCondition: {
+                        SearchType: 'SearchByOrg',
+                        NeedUser: false,
+                    },
+                });
+                setOrgsTreeData(dealOrgData(Orgs));
+            }
+            else {
+                setSearchValue('');
+                initOrgsData();
+            }
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    const onInputChange = function (e) {
+        const text = typeof e === 'string' ? e : e.target.value;
+        const newValue = text;
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        events.change({ value: newValue }, { originEvent: e });
+    };
+    const onFocus = function () {
+        setSearchValue('');
+        initOrgsData();
+        setVisible(true);
+    };
+    const onClose = () => {
+        setErrorInfo({ errorStatus: false, errorMessage: null });
+        setVisible(false);
+        initOrgsData();
+    };
+    const onConfirm = (selectItem) => {
+        var _a;
+        setErrorInfo({ errorStatus: false, errorMessage: null });
+        setValue(selectItem === null || selectItem === void 0 ? void 0 : selectItem.content);
+        onChange === null || onChange === void 0 ? void 0 : onChange(selectItem === null || selectItem === void 0 ? void 0 : selectItem.orgId);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: selectItem === null || selectItem === void 0 ? void 0 : selectItem.orgId, data: selectItem });
+        setVisible(false);
+    };
+    //获取组织结构
+    useEffect(() => {
+        initOrgsData();
+        if ((defaultValue &&
+            !isObjectEqual(prevDefaultRef.current !== defaultValue)) ||
+            (confirmValue && !isObjectEqual(prevConfirmRef.current !== confirmValue))) {
+            getdefaultUser();
+            prevDefaultRef.current = defaultValue;
+            prevConfirmRef.current = confirmValue;
+        }
+    }, [defaultValueType, confirmValue, defaultValue]);
+    const getdefaultUser = async () => {
+        var _a;
+        try {
+            if ((defaultValueType === 'confirmDepart' && confirmValue.length !== 0) ||
+                defaultValue.length !== 0) {
+                const orgId = confirmValue.length !== 0 ? confirmValue : defaultValue;
+                const defaultDepart = await getDepartById({
+                    _id: orgId,
+                });
+                setValue(defaultDepart);
+                onChange === null || onChange === void 0 ? void 0 : onChange(orgId);
+                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: orgId, data: { content: defaultDepart } });
+            }
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    // 初始化数据
+    const initOrgsData = async () => {
+        try {
+            setTitleText('选择部门');
+            const resData = (await request('InitRootOrgs', {})) || [];
+            const data = dealOrgData(resData);
+            setOrgsTreeData(data);
+            setOriginalOrgData([{ index: count, treeData: data, title: '选择部门' }]);
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    //点击部门节点，获取子部门节点
+    const loadDepartData = async (node, count) => {
+        try {
+            setLoading({ id: node.orgId, status: true });
+            const { Orgs = [] } = await request('LazyDescribeOrgs', {
+                OrgId: node.orgId,
+                DescribeCondition: {
+                    NeedUser: true,
+                },
+            });
+            // 如果不存在数据
+            if (!(Orgs === null || Orgs === void 0 ? void 0 : Orgs.length)) {
+                orgsTreeData.forEach((item, index, orgsTreeData) => {
+                    if (item.id == node.id) {
+                        orgsTreeData[index].expandable = false;
+                    }
+                });
+                setOrgsTreeData([...orgsTreeData]);
+            }
+            else {
+                const children = dealOrgData(Orgs);
+                setTitleText(node === null || node === void 0 ? void 0 : node.content);
+                setOrgsTreeData(children);
+                originalOrgData.push({ index: count + 1, treeData: children });
+                setCount(count + 1);
+                setOriginalOrgData(originalOrgData);
+            }
+            setLoading({ id: null, status: false });
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    //判断当前页结构为第几层，如首次渲染则添加至orgsTreeData，二次进入刷新index数据
+    const retLevel = (count) => {
+        const storageOriTreeData = [];
+        if (count !== 1) {
+            originalOrgData.map((item) => {
+                if ((item === null || item === void 0 ? void 0 : item.index) < count) {
+                    storageOriTreeData.push(item);
+                    if ((item === null || item === void 0 ? void 0 : item.index) === count - 1) {
+                        setCount(count - 1);
+                        setTitleText(item.title);
+                        setOrgsTreeData((item === null || item === void 0 ? void 0 : item.treeData) || []);
+                    }
+                }
+                else {
+                    return;
+                }
+            });
+            setOriginalOrgData(storageOriTreeData);
+        }
+        else {
+            onClose();
+        }
+    };
+    return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: subCls },
+            React.createElement("div", { className: "weui-cell__bd weui-flex" },
+                React.createElement("input", { className: "weui-input", placeholder: placeholder, value: value, disabled: disabled, name: name, autoFocus: autoFocus, onChange: onInputChange, onClick: onFocus, readOnly: true, role: "input" })),
+            React.createElement(Modal, { visible: visible, onClose: onClose, destroyOnClose: true, className: `weda-ui weda-select-user-dept__dialog` },
+                React.createElement(Modal.Body, { className: (selectItem === null || selectItem === void 0 ? void 0 : selectItem.userId) ? 'is-selected-value' : '' },
+                    React.createElement("div", { className: "weda-select-user-dept__dialog-header", id: count.toString() },
+                        React.createElement("div", { className: count == 1 ? '' : 'arrow-left', onClick: () => retLevel(count) }),
+                        titleText),
+                    React.createElement(ModalSearch, { value: searchValue, onChange: changeSearchValue, onCancel: cancleSearch, isSearch: isSearch, onFocus: () => {
+                            handleFocus(true);
+                        } }),
+                    (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.errorStatus) ? (React.createElement(ErrorStatus, { size: "l", title: "\u63A5\u53E3\u8C03\u7528\u5931\u8D25", description: (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.errorMessage) || null })) : orgsTreeData && orgsTreeData.length > 0 ? (React.createElement("div", { className: classNames('weda-select-user-dept__dialog-list') }, orgsTreeData.map((item) => (React.createElement("div", { className: "weda-select-user-dept__list-item", key: item === null || item === void 0 ? void 0 : item.id },
+                        React.createElement("div", { className: "weda-select-user-dept__list-item-wrap" },
+                            React.createElement(Radio.Group, { value: selectItem === null || selectItem === void 0 ? void 0 : selectItem.orgId, onChange: () => {
+                                    setSelectItem(item);
+                                }, layout: "column" },
+                                React.createElement(Radio, { name: item === null || item === void 0 ? void 0 : item.orgId },
+                                    React.createElement("div", { className: "weda-select-user-dept__item-detail" },
+                                        React.createElement("div", { className: "item-name" }, item === null || item === void 0 ? void 0 : item.content),
+                                        (item === null || item === void 0 ? void 0 : item.expandable) && loading.id !== item.orgId && (React.createElement("div", { className: "lcap-icon lcap-icon-chevronright", onClick: () => {
+                                                loadDepartData(item, count);
+                                            } }))))),
+                            loading.id === item.orgId && (loading === null || loading === void 0 ? void 0 : loading.status) && (React.createElement("div", null,
+                                React.createElement(IconFont, { name: "loading", className: `weda-grid-navigation__fonticon depart_loading` }))))))))) : (React.createElement(Status, { className: "dim-tree-select--blank", icon: 'blank', size: 's', title: `暂无部门数据` }))),
+                React.createElement(Modal.Footer, null,
+                    React.createElement("div", null,
+                        selectItem && (React.createElement("div", { className: "weda-select-user-dept__select-result" },
+                            React.createElement("div", { className: "weda-select-user-dept__select-label" }, "\u5DF2\u9009\u62E9"),
+                            React.createElement("div", { className: "weda-select-user-dept__result-list" },
+                                React.createElement("div", { className: "weda-select-user-dept__result-item", onClick: () => {
+                                        setSelectItem(null);
+                                        setSearchValue(null);
+                                    } },
+                                    selectItem.content,
+                                    React.createElement("div", { className: "close" }))))),
+                        React.createElement("div", { className: "weda-select-user-dept__btn-group" },
+                            React.createElement(Button, { type: "weak", onClick: onClose }, "\u53D6\u6D88"),
+                            React.createElement(Button, { type: "primary", onClick: () => onConfirm(selectItem) }, "\u786E\u5B9A"))))))))({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        multiCell: false,
+        requiredFlag,
+        layout,
+        size,
+        decorator,
+    });
+}

package/dist/src/web/components/form/userOrgSelect/departTreeSelect/departTreeSelect.pc.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IDepartTreeSelec } from './departTreeSelect.h5';
+import '../userOrgSelect.css';
+export declare function DepartTreeSelectPC({ id, className, style, events, label, labelVisible, placeholder, defaultValue, confirmValue, defaultValueType, disabled, layout, requiredFlag, size, decorator, multiple, onChange, request, }: IDepartTreeSelec): JSX.Element;

package/dist/src/web/components/form/userOrgSelect/departTreeSelect/departTreeSelect.pc.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { emptyObject } from '../../../../utils/constant';
+import { renderDecorator } from '../../renderDecorator';
+import classNames from 'classnames';
+import { Dropdown, ConfigProvider, Text } from 'tea-component';
+import { getNode, getRelationData, dealOrgData } from '../utils';
+import { getDepartById, defaultRequest, } from '../../../../utils/getUserService';
+import '../userOrgSelect.css';
+import { DimTreeContent } from '../comTool';
+import isObjectEqual from '../../../../utils/isObjectEqual';
+export function DepartTreeSelectPC({ id, className, style, events = emptyObject, label = '人员选择', labelVisible = true, placeholder, 
+// name = 'formUserTreeSelect',
+defaultValue = '', confirmValue = '', defaultValueType = 'noneDepart', disabled = false, layout = 'horizontal', requiredFlag = false, size = 'l', decorator, multiple = false, onChange = null, request = defaultRequest, }) {
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef(null);
+    const prevConfirmRef = React.useRef(null);
+    const [selectIds, setSelectIds] = useState([]);
+    // 用户单选
+    const [curSelectItem, setCurSelectItem] = useState({
+        orgId: null,
+        content: '',
+    });
+    const [treeData, setTreeData] = useState([]);
+    // 节点高亮
+    const [activeIds, setActiveIds] = useState([]);
+    //鼠标移入移除输入框
+    const [moveIn, setMoveIn] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [originalTreeData, setOriginalTreeData] = useState([]);
+    const [errorInfo, setErrorInfo] = useState({
+        errorStatus: false,
+        errorMessage: null,
+    });
+    useEffect(() => {
+        initOrgsData();
+        if ((defaultValue &&
+            !isObjectEqual(prevDefaultRef.current !== defaultValue)) ||
+            (confirmValue && !isObjectEqual(prevConfirmRef.current !== confirmValue))) {
+            getdefaultUser();
+            prevDefaultRef.current = defaultValue;
+            prevConfirmRef.current = confirmValue;
+        }
+    }, [defaultValueType, confirmValue, defaultValue]);
+    useEffect(() => {
+        if (open) {
+            setErrorInfo({ errorStatus: false, errorMessage: null });
+            const orgId = (curSelectItem === null || curSelectItem === void 0 ? void 0 : curSelectItem.orgId) || null;
+            const node = getNode(treeData, orgId, 'orgId');
+            setActiveIds(node ? [node.id] : []);
+            setSelectIds(node ? [node.id] : []);
+        }
+    }, [open, treeData]);
+    // 初始化数据
+    const initOrgsData = async () => {
+        try {
+            setErrorInfo({ errorStatus: false, errorMessage: null });
+            const resData = (await request('InitRootOrgs', {})) || [];
+            const data = dealOrgData(resData);
+            setTreeData(data);
+            setOriginalTreeData([...data]);
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    const getdefaultUser = async () => {
+        var _a;
+        try {
+            if ((defaultValueType === 'confirmDepart' && confirmValue.length !== 0) ||
+                defaultValue.length !== 0) {
+                const orgId = confirmValue.length !== 0 ? confirmValue : defaultValue;
+                const defaultUser = await getDepartById({
+                    _id: orgId,
+                });
+                setCurSelectItem({ orgId: orgId, content: defaultUser });
+                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: orgId, data: { content: defaultUser } });
+            }
+        }
+        catch (e) {
+            setErrorInfo({ errorStatus: true, errorMessage: e });
+        }
+    };
+    const reset = (close, value = '') => {
+        var _a;
+        setSelectIds([]);
+        setCurSelectItem({ orgId: null, content: '' });
+        setErrorInfo({ errorStatus: false, errorMessage: null });
+        setActiveIds([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
+        close && setOpen(false);
+    };
+    // 外层组件类
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-user-tree-select': true,
+        [className]: className,
+    });
+    return renderDecorator(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { onMouseEnter: () => {
+                setMoveIn(true);
+            }, onMouseLeave: () => {
+                setMoveIn(false);
+            } },
+            React.createElement(Dropdown, { className: classNames(`department-tree-select`, `size-${size}`), destroyOnClose: false, open: open, onOpenChange: (open) => {
+                    setOpen(open);
+                    setErrorInfo({ errorStatus: false, errorMessage: null });
+                }, button: React.createElement(SelectViewContainer, { curSelectItem: curSelectItem, multiple: multiple, placeholder: placeholder, moveIn: moveIn, onChange: () => reset(true) }), style: { width: '100%' }, appearance: multiple ? 'pure' : 'button', clickClose: false, disabled: disabled }, () => (React.createElement("div", { className: "dim-tree-select" },
+                React.createElement(DimTreeContent, { data: treeData, setTreeData: setTreeData, selectedIds: selectIds, activeIds: activeIds, needUser: false, request: request, errorInfo: errorInfo, searchType: "SearchByOrg", onActive: (ids) => {
+                        setActiveIds(ids);
+                        setSelectIds(ids);
+                    }, onReset: () => setTreeData(originalTreeData), onCancel: () => {
+                        setOpen(false);
+                        setErrorInfo({ errorStatus: false, errorMessage: null });
+                    }, onClear: () => reset(false), onConfirm: () => {
+                        var _a;
+                        const selectId = selectIds === null || selectIds === void 0 ? void 0 : selectIds[0];
+                        if (selectId) {
+                            const node = getNode(treeData, selectId, 'id');
+                            if (node) {
+                                setCurSelectItem(node);
+                                onChange === null || onChange === void 0 ? void 0 : onChange(node.orgId);
+                                setOpen(false);
+                                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: node.orgId, data: node });
+                            }
+                        }
+                    } })))))))({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+        size,
+        decorator,
+    });
+}
+const SelectViewContainer = (props) => {
+    const { curSelectItem, placeholder, onChange, moveIn } = props;
+    if (!(curSelectItem === null || curSelectItem === void 0 ? void 0 : curSelectItem.orgId))
+        return React.createElement(Text, { className: "placeholder" }, placeholder);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ViewCell, { data: curSelectItem, showType: "tree", relation: undefined }),
+        moveIn && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "weda-select-user-dept__dialog-input-clear", onClick: (e) => {
+                    e.stopPropagation();
+                    onChange === null || onChange === void 0 ? void 0 : onChange();
+                } },
+                React.createElement("p", { className: "weda-select-user-dept__dialog-input-clear-close" }))))));
+};
+const ViewCell = ({ data, showType, relation }) => {
+    if (showType === 'tree') {
+        return React.createElement(Text, { verticalAlign: "middle" }, (data === null || data === void 0 ? void 0 : data.content) || '-');
+    }
+    const defaultValue = getRelationData(relation);
+    return (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.id) ? (React.createElement(Text, { verticalAlign: "middle" }, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.content)) : (React.createElement(Text, null, "-"));
+};

package/dist/src/web/components/form/userOrgSelect/departTreeSelect/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DepartTreeSelect(props: any): JSX.Element;

package/dist/src/web/components/form/userOrgSelect/departTreeSelect/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+// import './index.less';
+import { usePlatform } from '../../../../utils/platform';
+import { DepartTreeSelectH5 as DepartSelectH5 } from './departTreeSelect.h5';
+import { DepartTreeSelectPC as DepartSelectPC } from './departTreeSelect.pc';
+export default function DepartTreeSelect(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(DepartSelectPC, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(DepartSelectH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(DepartSelectH5, { ...props }))) : (React.createElement(DepartSelectPC, { ...props }));
+}

package/dist/src/web/components/form/userOrgSelect/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function UserTreeSelect(props: any): JSX.Element;

package/dist/src/web/components/form/userOrgSelect/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+// import './index.less';
+import { usePlatform } from '../../../utils/platform';
+import { UserTreeSelectH5 as UserSelectH5 } from './userTreeSelect.h5';
+import { UserTreeSelectPC as UserSelectPC } from './userTreeSelect.pc';
+export default function UserTreeSelect(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(UserSelectPC, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(UserSelectH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(UserSelectH5, { ...props }))) : (React.createElement(UserSelectPC, { ...props }));
+}

package/dist/src/web/components/form/userOrgSelect/userTreeSelect.h5.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { CommonFormPropsType } from '../types';
+import './userOrgSelect.css';
+export declare function UserTreeSelectH5({ id, className, style, events, label, labelVisible, name, placeholder, defaultValueType, defaultValue, confirmValue, disabled, layout, requiredFlag, multiple, //是否多选
+focus: autoFocus, onChange, decorator, request, }: IUserTreeSelec): JSX.Element;
+export interface IUserTreeSelec extends CommonFormPropsType {
+    defaultValue?: Readonly<string | string[]>;
+    confirmValue?: string;
+    placeholder?: string;
+    modelType?: string;
+    defaultValueType?: 'noneUser' | 'confirmUser' | 'loginUser';
+    maxLength?: number;
+    focus?: boolean;
+    size?: 's' | 'm' | 'l' | 'full';
+    modelClassName?: string;
+    modelStyle?: React.CSSProperties;
+    clearable?: boolean;
+    multiple?: boolean;
+    relation?: object;
+    isMuti?: boolean;
+    matchButtonWidth?: boolean;
+    dropDownStyle?: React.CSSProperties;
+    onChange?: (v: any) => void;
+    request?: any;
+    getUserByIdRequest?: (v: any) => any;
+}