zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(BasicForm->ApiRadioGroup): when options click, duplicate requests. resolve #3387

This commit is contained in:
invalid w 2023-12-13 17:25:45 +08:00
parent 2828ed304a
commit fdde6f06b2
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Form/src/components/ApiRadioGroup.vue
View File

@ -2,7 +2,7 @@
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
--> -->
<template> <template>
<Radio.Group v-bind="attrs" v-model:value="state" button-style="solid"> <Radio.Group v-bind="attrs" v-model:value="state" button-style="solid" @change="handleChange">
<template v-for="item in getOptions" :key="`${item.value}`"> <template v-for="item in getOptions" :key="`${item.value}`">
<Radio.Button <Radio.Button
v-if="props.isBtn" v-if="props.isBtn"
@ -19,13 +19,13 @@
</Radio.Group> </Radio.Group>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { type PropType, ref, watchEffect, computed, unref, watch } from 'vue'; import { type PropType, ref, computed, unref, watch } from 'vue';
import { Radio } from 'ant-design-vue'; import { Radio } from 'ant-design-vue';
import { isFunction } from '@/utils/is'; import { isFunction } from '@/utils/is';
import { useRuleFormItem } from '@/hooks/component/useFormItem'; import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { useAttrs } from '@vben/hooks'; import { useAttrs } from '@vben/hooks';
import { propTypes } from '@/utils/propTypes'; import { propTypes } from '@/utils/propTypes';
import { get, omit } from 'lodash-es'; import { get, omit, isEqual } from 'lodash-es';
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }; type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
@ -54,11 +54,10 @@
immediate: propTypes.bool.def(true), immediate: propTypes.bool.def(true),
}); });
const emit = defineEmits(['options-change', 'change']); const emit = defineEmits(['options-change', 'change', 'update:value']);
const options = ref<OptionsItem[]>([]); const options = ref<OptionsItem[]>([]);
const loading = ref(false); const loading = ref(false);
const isFirstLoad = ref(true);
const emitData = ref<any[]>([]); const emitData = ref<any[]>([]);
const attrs = useAttrs(); const attrs = useAttrs();
// Embedded in the form, just use the hook binding to perform form verification // Embedded in the form, just use the hook binding to perform form verification
@ -81,16 +80,13 @@
}, [] as OptionsItem[]); }, [] as OptionsItem[]);
}); });
watchEffect(() => {
props.immediate && fetch();
});
watch( watch(
() => props.params, () => props.params,
() => { (value, oldValue) => {
!unref(isFirstLoad) && fetch(); if (isEqual(value, oldValue)) return;
fetch();
}, },
{ deep: true }, { deep: true, immediate: props.immediate },
); );
async function fetch() { async function fetch() {
@ -123,4 +119,9 @@
function handleClick(...args) { function handleClick(...args) {
emitData.value = args; emitData.value = args;
} }
function handleChange(e) {
emit('change', e.target.value);
emit('update:value', e.target.value);
}
</script> </script>