SaaS-lib/lib/component/tree/tree-api.vue

<template>
  <ns-tree v-if="treeData.length" v-bind="getBindValue">
    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </ns-tree>
</template>
<script lang="ts" setup>
  import { computed, ref, unref, useAttrs } from 'vue';
  import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
  import { useApi } from '/nerv-lib/use/use-api';
  import { AxiosRequestConfig } from 'axios';
  import { get } from 'lodash-es';
  import { useRoute } from 'vue-router';
  interface Props {
    api: string | Function | object;
    params?: object;
    defaultParams?: object;
    transform?: Function;
    resultField?: string;
    defaultExpandAll?: boolean;
    blockNode?: boolean;
  }
  defineOptions({
    name: 'NsTreeApi',
  });
  const props = withDefaults(defineProps<Props>(), {
    resultField: 'data',
    blockNode: true,
    defaultExpandAll: true,
    transform: (data) => data,
  });
  const treeData = ref<TreeDataItem[]>([]);
  const { httpRequest } = useApi();
  const requestConfig: AxiosRequestConfig = { method: 'get' };
  const route = useRoute();
  const attrs = useAttrs();

  const getBindValue = computed(() => ({
    ...attrs,
    ...props,
    treeData: treeData.value,
  }));

  const getData = () => {
    const { api, defaultParams, transform, resultField } = props;

    treeData.value = [];
    if (!api) return;
    httpRequest({
      api,
      params: { ...route.params, ...route.query, ...defaultParams },
      pathParams: { ...route.params, ...route.query },
      requestConfig,
    }).then((res) => {
      let data = [];
      data = get(res, resultField);
      treeData.value = transform(data);
    });
  };

  getData();
</script>
<style lang="less" scoped></style>