diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue index 19f51f526..682cd16b8 100644 --- a/packages/effects/common-ui/src/components/api-component/api-component.vue +++ b/packages/effects/common-ui/src/components/api-component/api-component.vue @@ -46,6 +46,8 @@ interface Props { alwaysLoad?: boolean; /** 在api请求之前的回调函数 */ beforeFetch?: AnyPromiseFunction; + /** 在api请求之前的判断是否允许请求的回调函数 */ + shouldFetch?: AnyPromiseFunction; /** 在api请求之后的回调函数 */ afterFetch?: AnyPromiseFunction; /** 直接传入选项数据,也作为api返回空数据时的后备数据 */ @@ -88,6 +90,7 @@ const props = withDefaults(defineProps(), { alwaysLoad: false, loadingSlot: '', beforeFetch: undefined, + shouldFetch: undefined, afterFetch: undefined, modelPropName: 'modelValue', api: undefined, @@ -159,7 +162,7 @@ const bindProps = computed(() => { }); async function fetchApi() { - const { api, beforeFetch, afterFetch, resultField } = props; + const { api, beforeFetch, shouldFetch, afterFetch, resultField } = props; if (!api || !isFunction(api)) { return; @@ -178,6 +181,14 @@ async function fetchApi() { if (beforeFetch && isFunction(beforeFetch)) { finalParams = (await beforeFetch(cloneDeep(finalParams))) || finalParams; } + // 判断是否需要控制执行中断 + if ( + shouldFetch && + isFunction(shouldFetch) && + !(await shouldFetch(finalParams)) + ) { + return; + } let res = await api(finalParams); if (afterFetch && isFunction(afterFetch)) { res = (await afterFetch(res)) || res; diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index fd96ff4d0..4474df943 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -113,6 +113,10 @@ const [BaseForm, baseFormApi] = useVbenForm({ params: { keyword: keyword.value || undefined, }, + // 远程搜索判断。当为true时,才允许调用api + shouldFetch: (params: any) => { + return !!params?.keyword; + }, showSearch: true, }; }, @@ -120,6 +124,7 @@ const [BaseForm, baseFormApi] = useVbenForm({ fieldName: 'remoteSearch', // 界面显示的label label: '远程搜索', + help: '远程查询,仅有输入时方进行查询', renderComponentContent: () => { return { notFoundContent: fetching.value ? h(Spin) : undefined,