UI3/src/components/select/DySelectTree.vue

<script setup lang="ts">
import { ref, toRefs, withDefaults, onMounted } from "vue"
import Treeselect from "vue3-treeselect-ts"
import "vue3-treeselect-ts/dist/style.css"
import type { AxiosRequestConfig } from "axios"
import Rs from "@/core/services/RequestService"
interface TreeOption {
  id: string
  label: string
  children?: Array<TreeOption>
}
const props = withDefaults(
  defineProps<{
    value: string | null | undefined
    name?: string
    url?: string
    configs?: AxiosRequestConfig
    multiple?: boolean
    clearable?: boolean
    searchable?: boolean
    expandedKeys?: Array<string>
    defaultExpandLevel?: number
    placeholder?: string
    loadingText?: string
    staticOptions?: Array<TreeOption>
    dataFormatFunction?: (data: any) => TreeOption
    optionMap?: {
      id: string
      label: string
      children: string
    }
  }>(),
  {
    multiple: false,
    clearable: false,
    searchable: false,
    staticOptions: () => {
      return [] as Array<TreeOption>
    },
    optionMap: () => {
      return {
        id: "id",
        label: "name",
        children: "children",
      }
    },

    placeholder: "请选择...",
    loadingText: "加载中，请稍后...",
  }
)
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 ?? [])

function formatData(data: any) {
  if (props.dataFormatFunction) {
    return props.dataFormatFunction(data)
  } else {
    const item = {} as TreeOption
    if (props.optionMap.id in data) {
      item.id = data[props.optionMap.id]
    }
    if (props.optionMap.label in data) {
      item.label = data[props.optionMap.label]
    }
    if (props.optionMap.children in data) {
      const childrenItem = [] as Array<TreeOption>
      const children = data[props.optionMap.children]
      children.forEach((v: any) => {
        childrenItem.push(formatData(v))
      })
      item.children = childrenItem
    }
    return item
  }
}

function init() {
  if (url?.value) {
    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) {
  //console.log("data", data, data.id)
  emits("update:value", data.id)
  emits("select", data)
}
onMounted(() => {
  init()
})
</script>
<template>
  <treeselect
    v-model="value"
    :placeholder="placeholder"
    :loadingText="loadingText"
    :multiple="multiple"
    :options="options"
    :clearable="clearable"
    :searchable="searchable"
    :name="name"
    :default-expand-level="defaultExpandLevel"
    v-bind="$attrs"
    @select="onSelect"
  />
</template>