<template><a-tree-selectv-bind="getAttrs"><template#[item]="data"v-for="item in Object.keys($slots)"><slot:name="item"v-bind="data"></slot></template><template#suffixIconv-if="loading"><LoadingOutlinedspin/></template></a-tree-select></template><scriptlang="ts">import{computed,defineComponent,watch,ref,onMounted,unref}from'vue';import{TreeSelect}from'ant-design-vue';import{isArray,isFunction}from'/@/utils/is';import{get}from'lodash-es';import{propTypes}from'/@/utils/propTypes';import{LoadingOutlined}from'@ant-design/icons-vue';exportdefaultdefineComponent({name:'ApiTreeSelect',components:{ATreeSelect:TreeSelect,LoadingOutlined},props:{api:{type:FunctionasPropType<(arg?:Recordable)=>Promise<Recordable>>},params:{type:Object},immediate:{type:Boolean,default:true},resultField:propTypes.string.def(''),},emits:['options-change'],setup(props,{attrs,emit}){consttreeData=ref<Recordable[]>([]);constisFirstLoaded=ref<Boolean>(false);constloading=ref(false);constgetAttrs=computed(()=>{return{...(props.api?{treeData:unref(treeData)}:{}),...attrs,};});watch([()=>props.params,()=>props.immediate],()=>{isFirstLoaded.value&&fetch();});onMounted(()=>{props.immediate&&fetch();});asyncfunctionfetch(){const{api}=props;if(!api||!isFunction(api))return;loading.value=true;treeData.value=[];letresult;try{result=awaitapi(props.params);}catch(e){console.error(e);}loading.value=false;if(!result)return;if(!isArray(result)){result=get(result,props.resultField);}treeData.value=(resultasRecordable[])||[];isFirstLoaded.value=true;emit('options-change',treeData.value);}return{getAttrs,loading};},});</script>
\ No newline at end of file
<template><a-tree-selectv-bind="getAttrs"><template#[item]="data"v-for="item in Object.keys($slots)"><slot:name="item"v-bind="data"></slot></template><template#suffixIconv-if="loading"><LoadingOutlinedspin/></template></a-tree-select></template><scriptlang="ts">import{computed,defineComponent,watch,ref,onMounted,unref}from'vue';import{TreeSelect}from'ant-design-vue';import{isArray,isFunction}from'/@/utils/is';import{get}from'lodash-es';import{propTypes}from'/@/utils/propTypes';import{LoadingOutlined}from'@ant-design/icons-vue';exportdefaultdefineComponent({name:'ApiTreeSelect',components:{ATreeSelect:TreeSelect,LoadingOutlined},props:{api:{type:FunctionasPropType<(arg?:Recordable)=>Promise<Recordable>>},params:{type:Object},immediate:{type:Boolean,default:true},resultField:propTypes.string.def(''),},emits:['options-change'],setup(props,{attrs,emit}){consttreeData=ref<Recordable[]>([]);constisFirstLoaded=ref<Boolean>(false);constloading=ref(false);constgetAttrs=computed(()=>{return{...(props.api?{treeData:unref(treeData)}:{}),...attrs,};});watch(()=>props.params,()=>{isFirstLoaded.value&&fetch();});watch(()=>props.immediate,(v)=>{v&&!isFirstLoaded.value&&fetch();});onMounted(()=>{props.immediate&&fetch();});asyncfunctionfetch(){const{api}=props;if(!api||!isFunction(api))return;loading.value=true;treeData.value=[];letresult;try{result=awaitapi(props.params);}catch(e){console.error(e);}loading.value=false;if(!result)return;if(!isArray(result)){result=get(result,props.resultField);}treeData.value=(resultasRecordable[])||[];isFirstLoaded.value=true;emit('options-change',treeData.value);}return{getAttrs,loading};},});</script>