@cloudbase/weda-ui 3.9.7 → 3.10.0

package/dist/web/components/form/select/h5.js

@@ -27,7 +27,7 @@ startDate, endDate, defaultDate,
 // time mode
 startTime, endTime, defaultTime, 
 // region mode
-defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, }) {
+defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, childRef, addRelationButtonText, enableAddRelationButton, }) {
     var _a;
     const { classPrefix } = useConfig();
     const [date, setDate] = React.useState(decodeIsoDatetime(defaultDate, 'date', dateMode));
@@ -339,14 +339,17 @@ defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onCh
         };
     }
     if (mode === 'selector') {
-        return (_jsx(PureSelectH5, { staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value, triggerEvent = false) => {
+        return (_jsx(PureSelectH5, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value, triggerEvent = false) => {
                 var _a;
                 setSelectedValue(value);
                 onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 if (triggerEvent) {
                     (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
                 }
-            }, onSearchValueInput: onSearchValueInput }));
+            }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+                var _a;
+                (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+            } }));
     }
     return (_jsx(WdFormItemReadOnly, { readValue: readValue, children: readOnly ? (_jsx("div", { className: classNames('weui-cell', `${classPrefix}-form-read-color`), children: readValue })) : (_jsx("div", { className: subCls, children: _jsxs("div", { className: `weui-cell__bd weui-flex ${clearCls}`, children: [_jsx("input", { onClick: onClick, className: "weui-input", type: "select", name: name, placeholder: placeholder, value: readValue, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), hasClearMode && (_jsx(WdIcon, { name: "td:close-circle-filled", onClick: (e) => {
                             var _a;

package/dist/web/components/form/select/index.css

@@ -59,6 +59,14 @@
   .wedatea2td-search--icon-front
   .wedatea2td-input--search:focus,
 :root
+  .wedatea2td-dropdown-box
+  .wedatea2td-search--simple
+  .wedatea2td-input--search:focus,
+:host
+  .wedatea2td-dropdown-box
+  .wedatea2td-search--icon-front
+  .wedatea2td-input--search:focus,
+:host
   .wedatea2td-dropdown-box
   .wedatea2td-search--simple
   .wedatea2td-input--search:focus {
@@ -69,12 +77,35 @@
   .weda-ui-custom-picker__cloumn-item.is-selected,
 :root .weda-ui-custom-search__btn-cancle,
 :root .weda-ui-custom-picker__loading-icon,
-:root .weda-ui-custom-picker__status--loading {
+:root .weda-ui-custom-picker__status--loading,
+:host
+  .weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item.is-selected,
+:host .weda-ui-custom-search__btn-cancle,
+:host .weda-ui-custom-picker__loading-icon,
+:host .weda-ui-custom-picker__status--loading {
   color: var(--wd-color-brand, #0052d9);
 }
-:root .is-expanded .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+:root .is-expanded .wedatea2td-dropdown-btn.wedatea2td-dropdown__header,
+:host .is-expanded .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
   border-color: var(--wd-color-brand, #0052d9);
 }
-:root .wedatea2td-list--option > li:hover {
+:root .wedatea2td-list--option > li:hover,
+:host .wedatea2td-list--option > li:hover {
   background-color: var(--wd-color-brand-light, #f3f3f3);
 }
+
+.wd-add-relation-button-wrap {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  color: var(--wd-color-brand, #0052d9);
+  cursor: pointer;
+}
+.wd-add-relation-button-wrap .wd-icon {
+  margin-right: 5px;
+}
+.weda-ui-custom-picker__cloumns .wd-add-relation-button-wrap {
+  margin: 10px 0;
+}

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

@@ -59,6 +59,9 @@ export interface PropsType extends CommonFormPropsType {
     ignoreCase?: boolean;
     staticSearchable?: boolean;
     popupContainer?: AttachContainer;
+    childRef?: any;
+    addRelationButtonText?: string;
+    enableAddRelationButton?: boolean;
 }
 export declare const defaultProps: {
     events: {};

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

@@ -70,7 +70,7 @@ export const defaultProps = {
     separator: ',',
 };
 // const button = <Button type="icon" icon="more" />;
-function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, enumName, defaultValue, placeholder = '请选择', mode = 'selector', dateMode = 'day', events = emptyObject, disabled = false, range = defaultProps.range, startDate, endDate, defaultDate, defaultTime, startTime, endTime, defaultRegion, defaultMutiRegion, regionType, separator = defaultProps.separator, size = defaultProps.size, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, popupContainer, }) {
+function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, enumName, defaultValue, placeholder = '请选择', mode = 'selector', dateMode = 'day', events = emptyObject, disabled = false, range = defaultProps.range, startDate, endDate, defaultDate, defaultTime, startTime, endTime, defaultRegion, defaultMutiRegion, regionType, separator = defaultProps.separator, size = defaultProps.size, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, popupContainer, childRef, addRelationButtonText, enableAddRelationButton, }) {
     const { classPrefix } = useConfig();
     // 两次默认值不同, 需要刷新
     const prevDefaultRef = React.useRef();
@@ -187,14 +187,17 @@ function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, e
     const createDropdown = () => {
         switch (mode) {
             case 'selector':
-                return (_jsx(PureSelectPc, { ignoreCase: ignoreCase, staticSearchable: staticSearchable, button: '', name: name, params: params, disabled: disabled, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent = false) => {
+                return (_jsx(PureSelectPc, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, ignoreCase: ignoreCase, staticSearchable: staticSearchable, button: '', name: name, params: params, disabled: disabled, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent = false) => {
                         var _a;
                         onChange === null || onChange === void 0 ? void 0 : onChange(value);
                         if (triggerEvent) {
                             (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
                         }
                         setSelectedValue(value);
-                    }, onSearchValueInput: onSearchValueInput }));
+                    }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+                        var _a;
+                        (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+                    } }));
             case 'date': {
                 const start = startDate ? decodeIsoDatetime(startDate, 'date') : null;
                 const end = endDate ? decodeIsoDatetime(endDate, 'date') : null;

package/dist/web/components/form/select/region/index.js

@@ -1,5 +1,6 @@
 import weui from '../../../../utils/weui';
 import { callWedaApi } from '../../../../utils/tcb';
+import { errorHandler } from '../../../../utils/error';
 let tree;
 export function getRegionTree(regionData, regionType, regionMode) {
     tree = [];
@@ -30,7 +31,10 @@ export async function getAreaCode() {
         return res === null || res === void 0 ? void 0 : res.AreaCodeList;
     }
     catch (error) {
-        console.error('错误', error);
+        errorHandler({
+            code: 'WdRegion.getAreaCodeError',
+            error,
+        });
         return [];
     }
 }

package/dist/web/components/form/select/request.js

@@ -73,7 +73,8 @@ export const requestFatherRelatedOption = async (params, pageNo, type, searchVal
         }
     }
     const defaultData = results === null || results === void 0 ? void 0 : results.map((opt) => ({
-        option: [{ label: opt._id, value: opt._id }],
+        label: opt._id,
+        value: opt._id,
     })); // 兜底 正常来说一定有primaryField
     return !isEmpty(defaultData)
         ? { option: defaultData, isLoadMore: false }

package/dist/web/components/form/select/status/index.d.ts

@@ -1,3 +1,5 @@
+import Loading from './loading';
+export { Loading };
 export declare const Status: {
     ALl_EMPTY: number;
     LOADING: number;

package/dist/web/components/form/select/status/index.js

@@ -1,3 +1,5 @@
+import Loading from './loading';
+export { Loading };
 export const Status = {
     ALl_EMPTY: -1,
     LOADING: 0,

package/dist/web/components/form/selectMultiple/dropdown-select/h5.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './style';
-export declare function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, getIsShow, onSearchValueInput, }: {
+export declare function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, getIsShow, onSearchValueInput, addRelationButton, portalContainer, }: {
     updateValue: any;
     selectedValue: any;
     options: any;
@@ -12,4 +12,6 @@ export declare function SelectPickerH5({ updateValue, selectedValue, options, is
     isShow: any;
     getIsShow: any;
     onSearchValueInput: any;
+    addRelationButton: any;
+    portalContainer: any;
 }): JSX.Element;

package/dist/web/components/form/selectMultiple/dropdown-select/h5.js

@@ -10,7 +10,7 @@ import { PAGE_SIZE } from '../request';
 import { alertErrorMessage } from '../../../../utils/platform';
 import classNames from '../../../../utils/classnames';
 import './style';
-export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, getIsShow, onSearchValueInput, }) {
+export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, getIsShow, onSearchValueInput, addRelationButton, portalContainer, }) {
     const focusRef = useRef();
     const contentRef = useRef();
     const heightRef = useRef(0);
@@ -90,7 +90,7 @@ export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPage
             loadMore();
         }
     };
-    return isShow ? (_jsx(Portal, { type: "div", disableOutsidePointerEvents: true, disableOutsideScroll: true, children: _jsxs("div", { className: "weda-ui-custom-picker", children: [_jsx("div", { className: "weda-ui-custom-backdrop", onClick: () => {
+    return isShow ? (_jsx(Portal, { type: "div", disableOutsidePointerEvents: true, disableOutsideScroll: true, portalContainer: portalContainer, children: _jsxs("div", { className: "weda-ui-custom-picker", children: [_jsx("div", { className: "weda-ui-custom-backdrop", onClick: () => {
                         setInputFocus(false);
                         setSearchValue('');
                         // confirm();
@@ -109,38 +109,38 @@ export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPage
                                                     } }))] }), _jsx("button", { className: "weda-ui-custom-search__btn-cancle", onClick: () => {
                                                 setInputFocus(false);
                                                 setSearchValue('');
-                                            }, children: "\u53D6\u6D88" })] }), status === Status.ALl_EMPTY ? (_jsx(AllEmpty, { height: inputFocus ? 'calc(100vh - 160px)' : '280px' })) : (_jsx("div", { className: "weda-ui-custom-picker__cloumns weda-ui-custom-picker__cloumns--select-multiple ", style: {
+                                            }, children: "\u53D6\u6D88" })] }), status === Status.ALl_EMPTY ? (_jsx(AllEmpty, { height: inputFocus ? 'calc(100vh - 160px)' : '280px' })) : (_jsxs("div", { className: "weda-ui-custom-picker__cloumns weda-ui-custom-picker__cloumns--select-multiple ", style: {
                                         height: inputFocus ? 'calc(100vh - 160px)' : '280px',
-                                    }, onScroll: contentScroll, ref: contentRef, children: _jsxs("ul", { className: "weda-ui-custom-picker__cloumn", style: {
-                                            height: inputFocus ? 'calc(100vh - 190px)' : '250px',
-                                        }, children: [options === null || options === void 0 ? void 0 : options.map((item, index) => {
-                                                // is-selected 选中态
-                                                // is-disabled 禁用态
-                                                const itemCls = classNames('weda-ui-custom-picker__cloumn-item', {
-                                                    'is-selected': checkIndex(item),
-                                                    'is-disabled': index === -1 || item.disabled,
-                                                });
-                                                return (_jsx("li", { className: itemCls, onClick: () => {
-                                                        if (item.disabled)
-                                                            return;
-                                                        if (selectedValueCache &&
-                                                            selectedValueCache.length > 49) {
-                                                            if (selectedValueCache.indexOf(item.value) !== -1) {
+                                    }, onScroll: contentScroll, ref: contentRef, children: [_jsxs("ul", { className: "weda-ui-custom-picker__cloumn", style: {
+                                                height: inputFocus ? 'calc(100vh - 190px)' : '250px',
+                                            }, children: [options === null || options === void 0 ? void 0 : options.map((item, index) => {
+                                                    // is-selected 选中态
+                                                    // is-disabled 禁用态
+                                                    const itemCls = classNames('weda-ui-custom-picker__cloumn-item', {
+                                                        'is-selected': checkIndex(item),
+                                                        'is-disabled': index === -1 || item.disabled,
+                                                    });
+                                                    return (_jsx("li", { className: itemCls, onClick: () => {
+                                                            if (item.disabled)
+                                                                return;
+                                                            if (selectedValueCache &&
+                                                                selectedValueCache.length > 49) {
+                                                                if (selectedValueCache.indexOf(item.value) !== -1) {
+                                                                    // updateValue(item);
+                                                                    setSelectedValueCache(dealSelectedValue(item.value));
+                                                                    setInd(Math.random());
+                                                                }
+                                                                else {
+                                                                    alertErrorMessage({
+                                                                        message: '最多选择50条数据',
+                                                                    });
+                                                                }
+                                                            }
+                                                            else {
                                                                 // updateValue(item);
                                                                 setSelectedValueCache(dealSelectedValue(item.value));
                                                                 setInd(Math.random());
                                                             }
-                                                            else {
-                                                                alertErrorMessage({
-                                                                    message: '最多选择50条数据',
-                                                                });
-                                                            }
-                                                        }
-                                                        else {
-                                                            // updateValue(item);
-                                                            setSelectedValueCache(dealSelectedValue(item.value));
-                                                            setInd(Math.random());
-                                                        }
-                                                    }, children: _jsx("p", { className: 'weda-ui-custom-picker__cloumn-item-text-multiple', children: item.label }) }, index));
-                                            }), status === Status.LOADING && (_jsx("li", { children: _jsx(Loading, {}) }, 'loading')), status === Status.ERROR && (_jsx("li", { children: _jsx(Retry, { reTry: reTry }) }, 'retry')), status === Status.EMPTY && (_jsx("li", { children: _jsx(Empty, {}) }, 'empty'))] }) }))] })] })] }) })) : null;
+                                                        }, children: _jsx("p", { className: 'weda-ui-custom-picker__cloumn-item-text-multiple', children: item.label }) }, index));
+                                                }), status === Status.LOADING && (_jsx("li", { children: _jsx(Loading, {}) }, 'loading')), status === Status.ERROR && (_jsx("li", { children: _jsx(Retry, { reTry: reTry }) }, 'retry')), status === Status.EMPTY && (_jsx("li", { children: _jsx(Empty, {}) }, 'empty'))] }), addRelationButton] }))] })] })] }) })) : null;
 }

package/dist/web/components/form/selectMultiple/dropdown-select/index.css

@@ -268,3 +268,26 @@
   background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNNC4wMDAwMSA0LjgwNTMxTDYuNjk0NjkgNy40OTk5OEw3LjUgNi42OTQ2N0w0LjgwNTMyIDRMNy41IDEuMzA1MzNMNi42OTQ2OSAwLjUwMDAyM0w0LjAwMDAxIDMuMTk0NjlMMS4zMDUzMSAwLjVMMC41IDEuMzA1MzFMMy4xOTQ3IDRMMC41IDYuNjk0NjlMMS4zMDUzMSA3LjVMNC4wMDAwMSA0LjgwNTMxWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+Cjwvc3ZnPg==)
     no-repeat center;
 }
+
+.wd-add-relation-button-wrap {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  color: var(--wd-color-brand, #0052d9);
+  cursor: pointer;
+}
+.wd-add-relation-button-wrap .wd-icon {
+  margin-right: 5px;
+}
+
+.weda-ui-custom-picker__cloumns {
+  display: flex;
+  flex-direction: column;
+}
+.weda-ui-custom-picker__cloumn {
+  width: 100%;
+}
+.weda-ui-custom-picker__cloumns .wd-add-relation-button-wrap {
+  margin: 10px 0;
+}

package/dist/web/components/form/selectMultiple/dropdown-select/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, closeModal, allOption, onSearchValueInput, ignoreCase, staticSearchable, }: {
+export declare function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, closeModal, allOption, onSearchValueInput, ignoreCase, staticSearchable, childRef, updateStatus, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, }: {
     params: any;
     selectedValue: any;
     updateValue: any;
@@ -12,4 +12,9 @@ export declare function PureSelect({ params, selectedValue, updateValue, placeho
     onSearchValueInput: any;
     ignoreCase?: boolean;
     staticSearchable?: boolean;
+    childRef: any;
+    updateStatus?: any;
+    addRelationButtonText: any;
+    enableAddRelationButton: any;
+    onAddRelationButtonClick: any;
 }): JSX.Element;

package/dist/web/components/form/selectMultiple/dropdown-select/index.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useCallback, useImperativeHandle, } from 'react';
 import { SelectPickerH5 } from './h5';
 import { formatNeedDataFetch, PAGE_SIZE, requestFatherRelatedOption, RequestOptionType, transFormatTeaSelectKey, } from '../request';
 import SelectPickerPc from './pc';
 import { usePlatform } from '../../../../utils/platform';
-import { Status } from '../status';
+import { Status, Loading } from '../status';
 import { useDeepCompareEffect } from '@react-hookz/web';
 import { useRecycle } from '../../../../utils/hooks/useRecycle';
-export function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, closeModal, allOption, onSearchValueInput, ignoreCase = true, staticSearchable = true, }) {
+import { errorHandler } from '../../../../utils/error';
+import WdIcon from '../../../wd-icon';
+export function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, closeModal, allOption, onSearchValueInput, ignoreCase = true, staticSearchable = true, childRef, updateStatus = undefined, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, }) {
     const isRequestingRef = useRef(false);
     const [status, setStatus] = useState(Status.ALl_EMPTY);
+    const [refreshStatus, setRefreshStatus] = useState(false);
     const [options, setOptions] = useState([]);
     const [page, setPage] = useState(1);
     const [searchOptions, setSearchOptions] = useState([]);
@@ -19,8 +22,27 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
     const [format, setFormat] = useState('');
     const [isTurnPages, setIsTurnPages] = useState(false);
     const platform = usePlatform();
-    const { recycleBack } = useRecycle();
+    const { recycleBack, portalContainer } = useRecycle();
     const isSearch = useMemo(() => searchValue !== '', [searchValue]);
+    const getOptionsByRequest = useCallback((isTurnPages) => {
+        if (isTurnPages) {
+            setStatus(Status.LOADING);
+            requestFatherRelatedOption(params, 1, RequestOptionType.ALL)
+                .then((value) => {
+                setOptions(value.option);
+                if (value.option.length === 0) {
+                    setStatus(platform === 'pc' ? Status.EMPTY : Status.ALl_EMPTY);
+                }
+                else {
+                    setStatus(value.isLoadMore ? Status.LOADING : Status.FINISH);
+                }
+            })
+                .catch(() => {
+                setStatus(Status.ERROR);
+            })
+                .finally(() => (isRequestingRef.current = false));
+        }
+    }, [params, platform]);
     useDeepCompareEffect(() => {
         const { format, controlledValue } = params || {
             format: '',
@@ -41,23 +63,7 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
             return;
         }
         // 接口请求
-        if (isTurnPages) {
-            setStatus(Status.LOADING);
-            requestFatherRelatedOption(params, 1, RequestOptionType.ALL)
-                .then((value) => {
-                setOptions(value.option);
-                if (value.option.length === 0) {
-                    setStatus(platform === 'pc' ? Status.EMPTY : Status.ALl_EMPTY);
-                }
-                else {
-                    setStatus(value.isLoadMore ? Status.LOADING : Status.FINISH);
-                }
-            })
-                .catch(() => {
-                setStatus(Status.ERROR);
-            })
-                .finally(() => (isRequestingRef.current = false));
-        }
+        getOptionsByRequest(isTurnPages);
     }, [params]);
     useEffect(() => {
         if (page > 1) {
@@ -91,7 +97,13 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
                 }
             }
         })
-            .catch(() => isSearch ? setSearchStatus(Status.ERROR) : setStatus(Status.ERROR))
+            .catch((error) => {
+            errorHandler({
+                code: 'WdSelectMultiple.requestFatherRelatedOption',
+                error,
+            });
+            isSearch ? setSearchStatus(Status.ERROR) : setStatus(Status.ERROR);
+        })
             .finally(() => (isRequestingRef.current = false));
     };
     const currentStatus = useMemo(() => {
@@ -214,5 +226,27 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
     const getIsShow = () => {
         closeModal();
     };
-    return platform === 'h5' ? (_jsx(SelectPickerH5, { updateValue: updateValue, options: currentOption, loadMore: loadMore, reTry: reTry, isTurnPages: isTurnPages, status: currentStatus, onSearchValue: onSearchValue, isShow: isShow, selectedValue: selectedValue, getIsShow: getIsShow, onSearchValueInput: onSearchValueInput })) : (_jsx(SelectPickerPc, { placeholder: placeholder, size: size, selectedValue: selectedValue, disabled: disabled, updateValue: updateValue, reTry: reTry, loadMore: loadMore, format: format, status: currentStatus, options: currentOption, allOptions: currentOption, onSearchValue: onSearchValue, defaultSearchValue: '', onSearchValueInput: onSearchValueInput }));
+    useImperativeHandle(childRef, () => {
+        return {
+            refresh: async () => {
+                setRefreshStatus(true);
+                updateStatus === null || updateStatus === void 0 ? void 0 : updateStatus(true);
+                await getOptionsByRequest(isTurnPages);
+                // eslint-disable-next-line rulesdir/no-timer
+                const timer = setTimeout(() => {
+                    setRefreshStatus(false);
+                    updateStatus === null || updateStatus === void 0 ? void 0 : updateStatus(false);
+                    clearTimeout(timer);
+                }, 500);
+            },
+        };
+    }, [getOptionsByRequest, isTurnPages, updateStatus]);
+    const addRelationButton = isTurnPages && enableAddRelationButton && (_jsxs("span", { className: "wd-add-relation-button-wrap", onClick: onAddRelationButtonClick, children: [_jsx(WdIcon, { size: 'xs', name: 'td:add-circle' }), addRelationButtonText] }));
+    if (refreshStatus && platform === 'pc') {
+        return _jsx(Loading, {});
+    }
+    if (refreshStatus && platform === 'h5') {
+        return null;
+    }
+    return platform === 'h5' ? (_jsx(SelectPickerH5, { portalContainer: portalContainer, addRelationButton: addRelationButton, updateValue: updateValue, options: currentOption, loadMore: loadMore, reTry: reTry, isTurnPages: isTurnPages, status: currentStatus, onSearchValue: onSearchValue, isShow: isShow, selectedValue: selectedValue, getIsShow: getIsShow, onSearchValueInput: onSearchValueInput })) : (_jsx(SelectPickerPc, { placeholder: placeholder, size: size, selectedValue: selectedValue, disabled: disabled, updateValue: updateValue, reTry: reTry, loadMore: loadMore, format: format, status: currentStatus, options: currentOption, allOptions: currentOption, onSearchValue: onSearchValue, defaultSearchValue: '', onSearchValueInput: onSearchValueInput, footer: addRelationButton }));
 }

package/dist/web/components/form/selectMultiple/dropdown-select/pc.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './style';
-export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, allOptions, onSearchValue, defaultSearchValue, onSearchValueInput, }: {
+export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, allOptions, onSearchValue, defaultSearchValue, onSearchValueInput, footer, }: {
     format: any;
     selectedValue: any;
     updateValue: any;
@@ -15,4 +15,5 @@ export default function SelectPickerPc({ format, selectedValue, updateValue: _up
     onSearchValue: any;
     defaultSearchValue: any;
     onSearchValueInput: any;
+    footer: any;
 }): JSX.Element;

package/dist/web/components/form/selectMultiple/dropdown-select/pc.js

@@ -11,7 +11,7 @@ import equal from '../../../../utils/isObjectEqual';
 import lodashGet from 'lodash.get';
 import { arrayToMap } from '../../../../utils/tool';
 import './style';
-export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, allOptions, onSearchValue, defaultSearchValue, onSearchValueInput, }) {
+export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, allOptions, onSearchValue, defaultSearchValue, onSearchValueInput, footer, }) {
     const [optList, setOptList] = useState(options);
     const findDataRef = useRef(undefined);
     const [readValue, setReadValue] = useState([]);
@@ -72,7 +72,7 @@ export default function SelectPickerPc({ format, selectedValue, updateValue: _up
             return '';
         }
     }, [format, status, optList]);
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(WdFormItemReadOnly, { readValue: readValue, children: _jsx("div", { className: 'form-select-multiple-pc', "data-testid": "form-item-select-multiple-pc", children: _jsx(SelectMultiple, { className: Array.isArray(selectedValue) && selectedValue.length > 0
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(WdFormItemReadOnly, { readValue: readValue, value: selectedValue, children: _jsx("div", { className: 'form-select-multiple-pc', "data-testid": "form-item-select-multiple-pc", children: _jsx(SelectMultiple, { footer: footer, className: Array.isArray(selectedValue) && selectedValue.length > 0
                         ? ''
                         : 'select-multiple__placeholder', searchable: true, staging: false, autoClearSearchValue: true, clearable: true, matchButtonWidth: true, defaultSearchValue: defaultSearchValue, value: Array.isArray(selectedValue) ? selectedValue : [], placeholder: placeholder, appearance: 'button', bottomTips: isShowBottomTips, size: size, disabled: disabled, options: optList, onChange: (v) => updateValue(v, true), onScrollBottom: loadMore, button: (selectedValue) => {
                         let str = '';

package/dist/web/components/form/selectMultiple/dropdown-select/ui.d.ts

@@ -12,6 +12,11 @@ interface IPureSelectProps extends Pick<SelectProps, 'size' | 'disabled' | 'plac
     onSearchValueInput?: (value: string) => void;
     ignoreCase?: boolean;
     staticSearchable?: boolean;
+    childRef?: any;
+    enableAddRelationButton?: boolean;
+    addRelationButtonText?: string;
+    onAddRelationButtonClick?: () => void;
+    format?: boolean;
 }
 export declare function PureSelectPc(props: IPureSelectProps): JSX.Element;
 export declare function PureSelectH5(props: IPureSelectProps): JSX.Element;

package/dist/web/components/form/selectMultiple/dropdown-select/ui.js

@@ -10,13 +10,14 @@ import { useDeepCompareEffect } from '@react-hookz/web';
 import lodashGet from 'lodash.get';
 import equal from '../../../../utils/isObjectEqual';
 import { arrayToMap } from '../../../../utils/tool';
+import Loading from '../status/loading';
 export function PureSelectPc(props) {
-    const { size, onChange, value, placeholder, params, disabled, ignoreCase, staticSearchable, onSearchValueInput, } = props;
+    const { size, onChange, value, placeholder, params, disabled, ignoreCase, staticSearchable, onSearchValueInput, childRef, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, } = props;
     const previousValueRef = useRef(value);
     useEffect(() => {
         previousValueRef.current = props.value;
     }, [props.value]);
-    return (_jsx(PureSelect, { staticSearchable: staticSearchable, ignoreCase: ignoreCase, isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, onSearchValueInput: onSearchValueInput, updateValue: (v, triggerEvent) => {
+    return (_jsx(PureSelect, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, onAddRelationButtonClick: onAddRelationButtonClick, onSearchValueInput: onSearchValueInput, updateValue: (v, triggerEvent) => {
             if (previousValueRef.current != v) {
                 if (Array.isArray(v) && v.length > 50) {
                     alertErrorMessage({ message: '最多选择50条数据' });
@@ -29,12 +30,13 @@ export function PureSelectPc(props) {
         }, closeModal: undefined, allOption: () => { } }));
 }
 export function PureSelectH5(props) {
-    const { placeholder, name, disabled, onChange = noop, layout, className, params, ignoreCase, onSearchValueInput, staticSearchable, } = props;
+    const { placeholder, name, disabled, onChange = noop, layout, className, params, ignoreCase, onSearchValueInput, staticSearchable, childRef, addRelationButtonText, enableAddRelationButton, onAddRelationButtonClick, } = props;
     const [value, setValue] = useSyncValue(props.value);
     const previousValueRef = useRef(value);
     const [currentMultiLabels, setCurrentMultiLabels] = useState([]);
     const [allOption, setAllOption] = useState([]);
     const [isShow, setIsShow] = useState(false);
+    const [status, setStatus] = useState(false);
     const subCls = classNames({
         'weui-cell': true,
         'weui-cell_active': true,
@@ -102,12 +104,12 @@ export function PureSelectH5(props) {
     const getAllOption = (val) => {
         setAllOption(val);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(WdFormItemReadOnly, { readValue: currentMultiLabels, children: _jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", children: [_jsx("div", { style: { width: '100%' }, onClick: disabled ? null : onClick, children: _jsx("input", { className: "weui-input multiple weda-ui-show-label", 
+    return status ? (_jsx(Loading, {})) : (_jsxs(_Fragment, { children: [_jsx(WdFormItemReadOnly, { readValue: currentMultiLabels, value: value, children: _jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", children: [_jsx("div", { style: { width: '100%' }, onClick: disabled ? null : onClick, children: _jsx("input", { className: "weui-input multiple weda-ui-show-label", 
                                     // style={{
                                     //   display: currentMultiLabels.length > 0 ? 'none' : 'block',
                                     // }}
                                     type: "select", name: name, placeholder: placeholder, value: currentMultiLabels, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select-multiple" }) }), Array.isArray(currentMultiLabels) &&
                                 currentMultiLabels.length > 0 && (_jsx("span", { className: 'weui-input-clear', onClick: () => {
                                     onChooseCallback(null);
-                                } })), _jsx("span", { className: 'weui-input-arrow' })] }) }) }), _jsx(PureSelect, { staticSearchable: staticSearchable, ignoreCase: ignoreCase, params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined, onSearchValueInput: onSearchValueInput, closeModal: close, allOption: getAllOption })] }));
+                                } })), _jsx("span", { className: 'weui-input-arrow' })] }) }) }), _jsx(PureSelect, { onAddRelationButtonClick: onAddRelationButtonClick, childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined, onSearchValueInput: onSearchValueInput, closeModal: close, allOption: getAllOption, updateStatus: setStatus })] }));
 }

package/dist/web/components/form/selectMultiple/h5.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { PropsType } from './index';
-export default function SelectH5({ events, name, placeholder, disabled, range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, }: PropsType): JSX.Element;
+export default function SelectH5({ events, name, placeholder, disabled, range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, childRef, addRelationButtonText, enableAddRelationButton, }: PropsType): JSX.Element;

package/dist/web/components/form/selectMultiple/h5.js

@@ -3,7 +3,7 @@ import { defaultProps } from './index';
 import { emptyObject } from '../../../utils/constant';
 import { PureSelectH5 } from './dropdown-select/ui';
 import { useSyncValue } from '../../../utils/hooks/useSyncValue';
-export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, }) {
+export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, childRef, addRelationButtonText, enableAddRelationButton, }) {
     const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
     let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
@@ -15,10 +15,13 @@ export default function SelectH5({ events = emptyObject, name, placeholder, disa
             controlledValue: range,
         };
     }
-    return (_jsx(PureSelectH5, { staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
+    return (_jsx(PureSelectH5, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
             var _a;
             setSelectedValue(value);
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
             (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-        }, onSearchValueInput: onSearchValueInput }));
+        }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+        } }));
 }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { CommonFormPropsType } from '../types';
 import { IUseoptionsParams } from './request';
+import { AttachContainer } from 'tea-component/lib/_util/get-overlay-root';
 import './style';
 export default function SelectMultiple(props: any): JSX.Element;
 export interface PropsType extends CommonFormPropsType {
@@ -41,6 +42,10 @@ export interface PropsType extends CommonFormPropsType {
     readOnly?: boolean;
     ignoreCase?: boolean;
     staticSearchable?: boolean;
+    childRef?: any;
+    addRelationButtonText?: string;
+    enableAddRelationButton?: boolean;
+    popupContainer?: AttachContainer;
 }
 export declare const defaultProps: {
     events: {};

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

@@ -54,7 +54,7 @@ export const defaultProps = {
     requiredFlag: false,
     range: [],
 };
-function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, where, }) {
+function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, where, childRef, addRelationButtonText, enableAddRelationButton, popupContainer, }) {
     const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
     let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
@@ -67,13 +67,16 @@ function SelectPc({ dataSourceName, format, primaryField, defaultValue, placehol
         };
     }
     const createDropdown = () => {
-        return (_jsx(PureSelectPc, { ignoreCase: ignoreCase, staticSearchable: staticSearchable, params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent) => {
+        return (_jsx(PureSelectPc, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, ignoreCase: ignoreCase, staticSearchable: staticSearchable, params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent) => {
                 var _a;
                 onChange && onChange(value);
                 setSelectedValue(value);
                 triggerEvent && ((_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value }));
-            }, onSearchValueInput: onSearchValueInput }));
+            }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+                var _a;
+                (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+            } }));
     };
     const dropdown = createDropdown();
-    return _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: dropdown });
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", popupContainer: popupContainer, children: dropdown }));
 }