From 2c9f11bce3f0ff9b9aa0782b92c3a689f3a4f327 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Fri, 11 Aug 2023 20:11:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96ApiTreeSelect?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0,=E5=8F=AF=E8=87=AA=E5=AE=9A=E4=B9=89value?=
 =?UTF-8?q?=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/src/components/ApiTreeSelect.vue       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue
index e95bcdc..7d4c3c8 100644
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/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>