Browse Source

fix: 完善ApiTree组件的重置回显功能

main
xingyu 2 years ago
parent
commit
9915eab368
  1. 15
      src/components/Form/src/components/ApiTree.vue
  2. 3
      src/components/Form/src/hooks/useFormEvents.ts

15
src/components/Form/src/components/ApiTree.vue

@ -6,6 +6,7 @@ import type { DataNode } from 'ant-design-vue/es/tree'
import { isArray, isFunction } from '@/utils/is' import { isArray, isFunction } from '@/utils/is'
import { handleTree as handleTreeFn } from '@/utils/tree' import { handleTree as handleTreeFn } from '@/utils/tree'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useRuleFormItem } from '@/hooks/component/useFormItem'
defineOptions({ name: 'ApiTree' }) defineOptions({ name: 'ApiTree' })
@ -17,14 +18,17 @@ const props = defineProps({
afterFetch: { type: Function as PropType<Fn> }, afterFetch: { type: Function as PropType<Fn> },
handleTree: propTypes.string.def(''), handleTree: propTypes.string.def(''),
alwaysLoad: propTypes.bool.def(true), alwaysLoad: propTypes.bool.def(true),
value: [Array, Object, String, Number],
}) })
const emit = defineEmits(['optionsChange', 'change']) const emit = defineEmits(['optionsChange', 'change', 'update:value'])
const attrs = useAttrs() const attrs = useAttrs()
const slots = useSlots() const slots = useSlots()
const treeData = ref<DataNode[]>([]) const treeData = ref<DataNode[]>([])
const isFirstLoaded = ref<boolean>(false) const isFirstLoaded = ref<boolean>(false)
const loading = ref(false) const loading = ref(false)
const emitData = ref<any[]>([])
const [state] = useRuleFormItem(props, 'value', 'change', emitData)
const getAttrs = computed(() => { const getAttrs = computed(() => {
return { return {
@ -37,6 +41,13 @@ function handleChange(...args) {
emit('change', ...args) emit('change', ...args)
} }
watch(
() => state.value,
(v) => {
emit('update:value', v)
},
)
watch( watch(
() => props.params, () => props.params,
() => { () => {
@ -96,7 +107,7 @@ async function fetch() {
</script> </script>
<template> <template>
<Tree v-bind="getAttrs" @select="handleChange"> <Tree v-bind="getAttrs" v-model:selected-keys="state" @select="handleChange">
<template v-for="item in Object.keys(slots)" #[item]="data"> <template v-for="item in Object.keys(slots)" #[item]="data">
<slot :name="item" v-bind="data || {}" /> <slot :name="item" v-bind="data || {}" />
</template> </template>

3
src/components/Form/src/hooks/useFormEvents.ts

@ -424,6 +424,9 @@ function getDefaultValue(
if (!defaultValue && schema && checkIsRangeSlider(schema)) if (!defaultValue && schema && checkIsRangeSlider(schema))
defaultValue = [0, 0] defaultValue = [0, 0]
if (!defaultValue && schema && schema.component === 'ApiTree')
defaultValue = []
return defaultValue return defaultValue
} }