fix: tree select

.vscode/settings.json

@@ -121,6 +121,7 @@
     "antv",
     "brotli",
     "browserslist",
+    "Cascader",
     "codemirror",
     "commitlint",
     "cropperjs",

src/components/Form/src/components/ApiCascader.vue

@@ -11,14 +11,12 @@ import { useI18n } from '@/hooks/web/useI18n'
 defineOptions({ name: 'ApiCascader' })
 
 const props = defineProps({
-  value: {
+  value: propTypes.array.def([]),
-    type: Array,
-  },
   api: {
     type: Function as PropType<(arg?: Recordable) => Promise<Option[]>>,
     default: null,
   },
-  numberToString: propTypes.bool,
+  numberToString: propTypes.bool.def(false),
   resultField: propTypes.string.def(''),
   labelField: propTypes.string.def('label'),
   valueField: propTypes.string.def('value'),
@@ -55,7 +53,7 @@ const apiData = ref<any[]>([])
 const options = ref<Option[]>([])
 const loading = ref<boolean>(false)
 const emitData = ref<any[]>([])
-const isFirstLoad = ref(true)
+const isFirstLoad = ref(false)
 const { t } = useI18n()
 // Embedded in the form, just use the hook binding to perform form verification
 const [state]: any = useRuleFormItem(props, 'value', 'change', emitData)
@@ -150,10 +148,10 @@ watch(
   () => props.initFetchParams,
   () => {
     if (props.alwaysLoad)
-      !unref(isFirstLoad) && initialFetch()
+      initialFetch()
 
     else
-      initialFetch()
+      !unref(isFirstLoad) && initialFetch()
   },
   { deep: true },
 )
@@ -175,8 +173,10 @@ function handleRenderDisplay({ labels, selectedOptions }) {
 </script>
 
 <template>
-  <Cascader v-model:value="state" :options="options" :load-data="loadData" change-on-select
+  <Cascader
-    :display-render="handleRenderDisplay" @change="handleChange">
+    v-model:value="state" :options="options" :load-data="loadData" change-on-select
+    :display-render="handleRenderDisplay" @change="handleChange"
+  >
     <template v-if="loading" #suffixIcon>
       <LoadingOutlined spin />
     </template>

src/components/Form/src/components/ApiRadioGroup.vue

@@ -11,6 +11,7 @@ import { useAttrs } from '@/hooks/core/useAttrs'
 import { propTypes } from '@/utils/propTypes'
 
 defineOptions({ name: 'ApiRadioGroup' })
+
 const props = defineProps({
   api: {
     type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
@@ -70,10 +71,10 @@ watch(
   () => props.params,
   () => {
     if (props.alwaysLoad)
-      !unref(isFirstLoad) && fetch()
+      fetch()
 
     else
-      fetch()
+      !unref(isFirstLoad) && fetch()
   },
   { deep: true },
 )

src/components/Form/src/components/ApiSelect.vue

@@ -76,6 +76,10 @@ watch(
 watch(
   () => props.params,
   () => {
+    if (props.alwaysLoad)
+      fetch()
+
+    else
       !unref(isFirstLoad) && fetch()
   },
   { deep: true },
@@ -129,8 +133,10 @@ function handleChange(_, ...args) {
 </script>
 
 <template>
-  <Select v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-open-change="handleFetch"
+  <Select
-    @change="handleChange">
+    v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-open-change="handleFetch"
+    @change="handleChange"
+  >
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}" />
     </template>

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

@@ -39,10 +39,10 @@ watch(
   () => props.params,
   () => {
     if (props.alwaysLoad)
-      !unref(isFirstLoaded) && fetch()
+      fetch()
 
     else
-      fetch()
+      !unref(isFirstLoaded) && fetch()
   },
   { deep: true },
 )
@@ -51,10 +51,10 @@ watch(
   () => props.immediate,
   (v) => {
     if (props.alwaysLoad)
-      v && !isFirstLoaded.value && fetch()
+      v && fetch()
 
     else
-      v && fetch()
+      v && !isFirstLoaded.value && fetch()
   },
 )
 

src/components/Form/src/components/ApiTreeSelect.vue

@@ -12,12 +12,12 @@ defineOptions({ name: 'ApiTreeSelect' })
 const props = defineProps({
   api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
   params: { type: Object },
-  immediate: { type: Boolean, default: true },
+  immediate: propTypes.bool.def(true),
   resultField: propTypes.string.def(''),
-  handleTree: { type: String, default: '' },
+  handleTree: propTypes.string.def(''),
-  parentId: { type: Number, default: 0 },
+  parentId: propTypes.number.def(0),
-  parentLabel: { type: String, default: '' },
+  parentLabel: propTypes.string.def(''),
-  parentFiled: { type: String, default: 'name' },
+  parentFiled: propTypes.string.def('name'),
   alwaysLoad: propTypes.bool.def(true),
 })
 const emit = defineEmits(['optionsChange', 'change'])
@@ -41,10 +41,10 @@ watch(
   () => props.params,
   () => {
     if (props.alwaysLoad)
-      !unref(isFirstLoaded) && fetch()
+      fetch()
 
     else
-      fetch()
+      !unref(isFirstLoaded) && fetch()
   },
   { deep: true },
 )
@@ -53,10 +53,10 @@ watch(
   () => props.immediate,
   (v) => {
     if (props.alwaysLoad)
-      v && !isFirstLoaded.value && fetch()
+      v && fetch()
 
     else
-      v && fetch()
+      v && !isFirstLoaded.value && fetch()
   },
 )
 

src/components/Modal/src/props.ts

@@ -52,7 +52,7 @@ export const basicProps = Object.assign({}, modalProps, {
 
   confirmLoading: { type: Boolean },
 
-  destroyOnClose: { type: Boolean },
+  destroyOnClose: { type: Boolean, default: true },
 
   footer: Object as PropType<VueNode>,
 

src/views/system/dept/DeptModal.vue

@@ -52,7 +52,10 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit">
+  <BasicModal
+    v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal"
+    @ok="handleSubmit"
+  >
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>