You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

64 lines
1.8 KiB

<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>