feat: 优化ApiTreeSelect参数,可自定义value等

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, unref, useAttrs, watch } from 'vue'
+import { computed, onMounted, ref, unref, useAttrs, watch, watchEffect } from 'vue'
 import { TreeSelect } from 'ant-design-vue'
 import { get, set } from 'lodash-es'
 import { LoadingOutlined } from '@ant-design/icons-vue'
@@ -14,6 +14,9 @@ const props = defineProps({
   params: { type: Object },
   immediate: { type: Boolean, default: true },
   resultField: propTypes.string.def(''),
+  labelField: propTypes.string.def('title'),
+  valueField: propTypes.string.def('value'),
+  childrenField: propTypes.string.def('children'),
   handleTree: { type: String, default: '' },
   parentId: { type: Number, default: 0 },
   parentLabel: { type: String, default: '' },
@@ -32,10 +35,20 @@ const getAttrs = computed(() => {
   }
 })
 
+const fieldNames = {
+  children: props.childrenField,
+  value: props.valueField,
+  label: props.labelField,
+}
+
 function handleChange(...args) {
   emit('change', ...args)
 }
 
+watchEffect(() => {
+  props.immediate && fetch()
+})
+
 watch(
   () => props.params,
   () => {
@@ -93,7 +106,7 @@ async function fetch() {
 </script>
 
 <template>
-  <TreeSelect v-bind="getAttrs" @change="handleChange">
+  <TreeSelect v-bind="getAttrs" :field-names="fieldNames" @change="handleChange">
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}" />
     </template>