|
| 1 | +<template> |
| 2 | + <Select |
| 3 | + v-bind="getProps" |
| 4 | + :options="getOptions" |
| 5 | + @dropdown-visible-change="handleFetch" |
| 6 | + @change="handleChange" |
| 7 | + > |
| 8 | + <template v-for="item in Object.keys($slots)" #[item]="data"> |
| 9 | + <slot :name="item" v-bind="data || {}"></slot> |
| 10 | + </template> |
| 11 | + <template v-if="loading" #suffixIcon> |
| 12 | + <LoadingOutlined spin /> |
| 13 | + </template> |
| 14 | + <template v-if="loading" #notFoundContent> |
| 15 | + <span> |
| 16 | + <LoadingOutlined spin class="mr-1" /> |
| 17 | + {{ t('component.form.apiSelectNotFound') }} |
| 18 | + </span> |
| 19 | + </template> |
| 20 | + </Select> |
| 21 | +</template> |
| 22 | +<script lang="ts" setup> |
| 23 | + import { PropType, ref, watchEffect, computed, unref, watch } from 'vue'; |
| 24 | + import { get, omit } from 'lodash-es'; |
| 25 | + import { LoadingOutlined } from '@ant-design/icons-vue'; |
| 26 | + import { selectProps } from 'ant-design-vue/es/select'; |
| 27 | + import { Select } from 'ant-design-vue'; |
| 28 | + import { isFunction } from '@/utils/is'; |
| 29 | + import { useI18n } from '@/hooks/useI18n'; |
| 30 | + import { propTypes } from '@/utils/propTypes'; |
| 31 | +
|
| 32 | + type OptionsItem = { label: string; value: string; disabled?: boolean }; |
| 33 | +
|
| 34 | + defineOptions({ |
| 35 | + name: 'ApiSelect', |
| 36 | + inheritAttrs: false, |
| 37 | + }); |
| 38 | +
|
| 39 | + const props = defineProps({ |
| 40 | + ...selectProps(), |
| 41 | + value: [Array, Object, String, Number], |
| 42 | + numberToString: propTypes.bool, |
| 43 | + api: { |
| 44 | + type: Function as PropType<(arg?: Recordable) => Promise<any>>, |
| 45 | + default: null, |
| 46 | + }, |
| 47 | + // api params |
| 48 | + params: { |
| 49 | + type: Object as PropType<Recordable>, |
| 50 | + default: () => ({}), |
| 51 | + }, |
| 52 | + // support xxx.xxx.xx |
| 53 | + resultField: propTypes.string.def(''), |
| 54 | + labelField: propTypes.string.def('label'), |
| 55 | + valueField: propTypes.string.def('value'), |
| 56 | + immediate: propTypes.bool.def(true), |
| 57 | + alwaysLoad: propTypes.bool.def(false), |
| 58 | + }); |
| 59 | +
|
| 60 | + const emit = defineEmits(['options-change', 'change']); |
| 61 | +
|
| 62 | + const options = ref<OptionsItem[]>([]); |
| 63 | + const loading = ref(false); |
| 64 | + const isFirstLoad = ref(true); |
| 65 | + const emitData = ref<any[]>([]); |
| 66 | + const { t } = useI18n(); |
| 67 | +
|
| 68 | + const getProps = computed(() => props as Recordable); |
| 69 | +
|
| 70 | + // Embedded in the form, just use the hook binding to perform form verification |
| 71 | +
|
| 72 | + const getOptions = computed(() => { |
| 73 | + const { labelField, valueField, numberToString } = props; |
| 74 | +
|
| 75 | + return unref(options).reduce((prev, next: Recordable) => { |
| 76 | + if (next) { |
| 77 | + const value = next[valueField]; |
| 78 | + prev.push({ |
| 79 | + ...omit(next, [labelField, valueField]), |
| 80 | + label: next[labelField], |
| 81 | + value: numberToString ? `${value}` : value, |
| 82 | + }); |
| 83 | + } |
| 84 | + return prev; |
| 85 | + }, [] as OptionsItem[]); |
| 86 | + }); |
| 87 | +
|
| 88 | + watchEffect(() => { |
| 89 | + props.immediate && !props.alwaysLoad && fetch(); |
| 90 | + }); |
| 91 | +
|
| 92 | + watch( |
| 93 | + () => props.params, |
| 94 | + () => { |
| 95 | + !unref(isFirstLoad) && fetch(); |
| 96 | + }, |
| 97 | + { deep: true }, |
| 98 | + ); |
| 99 | +
|
| 100 | + async function fetch() { |
| 101 | + const api = props.api; |
| 102 | + if (!api || !isFunction(api)) return; |
| 103 | + options.value = []; |
| 104 | + try { |
| 105 | + loading.value = true; |
| 106 | + const res = await api(props.params); |
| 107 | + if (Array.isArray(res)) { |
| 108 | + options.value = res; |
| 109 | + emitChange(); |
| 110 | + return; |
| 111 | + } |
| 112 | + if (props.resultField) { |
| 113 | + options.value = get(res, props.resultField) || []; |
| 114 | + } |
| 115 | + emitChange(); |
| 116 | + } catch (error) { |
| 117 | + console.warn(error); |
| 118 | + } finally { |
| 119 | + loading.value = false; |
| 120 | + } |
| 121 | + } |
| 122 | +
|
| 123 | + async function handleFetch(visible) { |
| 124 | + if (visible) { |
| 125 | + if (props.alwaysLoad) { |
| 126 | + await fetch(); |
| 127 | + } else if (!props.immediate && unref(isFirstLoad)) { |
| 128 | + await fetch(); |
| 129 | + isFirstLoad.value = false; |
| 130 | + } |
| 131 | + } |
| 132 | + } |
| 133 | +
|
| 134 | + function emitChange() { |
| 135 | + emit('options-change', unref(getOptions)); |
| 136 | + } |
| 137 | +
|
| 138 | + function handleChange(_, ...args) { |
| 139 | + emitData.value = args; |
| 140 | + } |
| 141 | +</script> |
0 commit comments