DySelect,DySelectTree添加外部可以刷新的功能

src/components/Tree/OrgSelectTree.vue

@@ -4,13 +4,14 @@ import { toRefs, withDefaults } from "vue"
 const props = withDefaults(
   defineProps<{
     value: string | null | undefined
+    id?: string
     class?: string
   }>(),
   { class: "full-input" }
 )
 
 const emits = defineEmits<{ (e: "update:value", v: string): void; (e: "select", v: any): void }>()
-const { value } = toRefs(props)
+const { value, id } = toRefs(props)
 function onUpdateValue(v: string) {
   emits("update:value", v)
 }
@@ -22,6 +23,7 @@ function onSelect(v: any) {
   <DySelectTree
     v-model:value="value"
     :class="props.class"
+    :id="id"
     :static-options="[{ id: '0', label: '根节点' }]"
     :url="'sys/dict/getOrgList?type=1'"
     :defaultExpandLevel="1"

src/components/select/DySelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs, withDefaults, onMounted } from "vue"
+import { ref, toRefs, withDefaults, onMounted, watch } from "vue"
 import type { AxiosRequestConfig } from "axios"
 import Rs from "@/core/services/RequestService"
 export interface SelectOptionProp {
@@ -10,6 +10,7 @@ export interface SelectOptionProp {
 }
 export interface SelectProp {
   value: string | number | Array<string> | Array<number>
+  id: string
   name?: string
   url?: string
   method?: string
@@ -53,6 +54,7 @@ export interface SelectProp {
 }
 const props = withDefaults(defineProps<SelectProp>(), {
   value: "",
+  id: "",
   url: "",
   method: "get",
   configs: undefined,
@@ -176,6 +178,11 @@ function onClear() {
 onMounted(() => {
   init()
 })
+watch(() => props.id, init)
+function load() {
+  init()
+}
+defineExpose({ load })
 </script>
 <template>
   <el-select

src/components/select/DySelectTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs, withDefaults, onMounted } from "vue"
+import { ref, toRefs, withDefaults, onMounted, watch } from "vue"
 import Treeselect from "vue3-treeselect-ts"
 import "vue3-treeselect-ts/dist/style.css"
 import type { AxiosRequestConfig } from "axios"
@@ -12,6 +12,7 @@ interface TreeOption {
 const props = withDefaults(
   defineProps<{
     value: string | null | undefined
+    id?: string //id变化后重新加载树
     name?: string
     url?: string
     method?: string
@@ -55,8 +56,8 @@ const emits = defineEmits<{
   (e: "update:value", v: string): void
   (e: "select", v: any): void
 }>()
-const { staticOptions, url, value } = toRefs(props)
-const options = ref<Array<TreeOption>>(staticOptions.value ?? [])
+const { staticOptions, url, value, id } = toRefs(props)
+const options = ref<Array<TreeOption>>(Object.assign([], staticOptions.value ?? []))
 
 function formatData(data: any) {
   if (props.dataFormatFunction) {
@@ -82,6 +83,7 @@ function formatData(data: any) {
 }
 
 function init() {
+  options.value = Object.assign([], staticOptions.value ?? [])
   if (url?.value) {
     const processData = (data: any) => {
       data.forEach((v: any) => {
@@ -104,19 +106,6 @@ function init() {
         processData(res.data)
       })
     }
-
-    //const configs = Object.assign({}, { url: url.value, method: "get", successAlert: false }, props.configs)
-    // Rs.request(configs).then((res: any) => {
-    //   //const data = [] as Array<TreeOption>
-    //   res.data.forEach((v: any) => {
-    //     const item = formatData(v)
-    //     options.value.push(item)
-    //   })
-    //   if (!value.value) {
-    //     const val = options.value[0].id
-    //     emits("update:value", val)
-    //   }
-    // })
   }
 }
 function onSelect(data: any) {
@@ -124,13 +113,19 @@ function onSelect(data: any) {
   emits("update:value", data.id)
   emits("select", data)
 }
+watch(() => props.id, init)
 onMounted(() => {
   init()
 })
+function load() {
+  init()
+}
+defineExpose({ load })
 </script>
 <template>
   <treeselect
     v-model="value"
+    :id="id"
     :placeholder="placeholder"
     :loadingText="loadingText"
     :multiple="multiple"