diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index da4f2ccb3..5615a5108 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -912,6 +912,7 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le "selectMode": "associated", "leftMode": "tree", "source": "/api/mock2/form/departUser", + "searchApi": '/api/mock2/form/departUserSearch?term=${term}', "deferApi": "/api/mock2/form/departUser?ref=${ref}&dep=${value}" } ] diff --git a/mock/cfc/mock/form/departUserSearch.js b/mock/cfc/mock/form/departUserSearch.js new file mode 100644 index 000000000..8c0e6a32b --- /dev/null +++ b/mock/cfc/mock/form/departUserSearch.js @@ -0,0 +1,74 @@ +// 与departUser.js中的users一致 +const users = [ + { + label: '用户 1', + value: 'user1' + }, + { + label: '用户 2', + value: 'user2' + }, + { + label: '用户 a', + value: 'usera' + }, + { + label: '用户 b', + value: 'userb' + }, + { + label: '用户 x', + value: 'userx' + }, + { + label: '用户 y', + value: 'usery' + }, + { + label: '用户 I', + value: 'useri' + }, + { + label: '用户 II', + value: 'userii' + }, + { + label: '用户一', + value: 'useryi' + }, + { + label: '用户二', + value: 'userer' + }, + { + label: '用户k', + value: 'userk' + }, + { + label: '用户j', + value: 'userj' + } +]; + +module.exports = function (req, res) { + // 关键词为term + if (req.query.term) { + const result = users.find(item => item.value === req.query.term); + + res.json({ + status: 0, + msg: '', + data: { + options: result ? [result] : [] + } + }); + } + + res.json({ + status: 0, + msg: '', + data: { + options: users + } + }); +}; diff --git a/packages/amis-ui/src/components/PopOverContainer.tsx b/packages/amis-ui/src/components/PopOverContainer.tsx index c9f9b0180..50a29ac38 100644 --- a/packages/amis-ui/src/components/PopOverContainer.tsx +++ b/packages/amis-ui/src/components/PopOverContainer.tsx @@ -16,6 +16,10 @@ export interface PopOverContainerProps { popOverClassName?: string; useMobileUI?: boolean; placement?: string; + /** Popover层隐藏前触发的事件 */ + onBeforeHide?: () => void; + /** Popover层隐藏后触发的事件 */ + onAfterHide?: () => void; } export interface PopOverContainerState { @@ -46,9 +50,19 @@ export class PopOverContainer extends React.Component< @autobind close() { + const {onBeforeHide, onAfterHide} = this.props; + + if (onBeforeHide && typeof onBeforeHide === 'function') { + onBeforeHide?.(); + } + this.setState({ isOpened: false }); + + if (onAfterHide && typeof onAfterHide === 'function') { + onAfterHide?.(); + } } @autobind diff --git a/packages/amis-ui/src/components/TransferDropDown.tsx b/packages/amis-ui/src/components/TransferDropDown.tsx index 244eb11cf..0d97da719 100644 --- a/packages/amis-ui/src/components/TransferDropDown.tsx +++ b/packages/amis-ui/src/components/TransferDropDown.tsx @@ -1,7 +1,7 @@ import {localeable} from 'amis-core'; import {themeable} from 'amis-core'; import {Transfer, TransferProps} from './Transfer'; -import {uncontrollable} from 'amis-core'; +import {uncontrollable, autobind} from 'amis-core'; import React from 'react'; import ResultBox from './ResultBox'; import {Icon} from './icons'; @@ -23,6 +23,11 @@ export interface TransferDropDownProps extends TransferProps { } export class TransferDropDown extends Transfer { + @autobind + handleAfterPopoverHide() { + this.setState({inputValue: '', searchResult: null}); + } + render() { const { classnames: cx, @@ -43,10 +48,11 @@ export class TransferDropDown extends Transfer { overflowTagPopover } = this.props; const {inputValue, searchResult} = this.state; - const mobileUI = useMobileUI && isMobile(); + return (