|
@ -1,45 +1,41 @@ |
|
|
<template> |
|
|
<template> |
|
|
<ns-tree v-bind="getBindValue"> |
|
|
<ns-tree v-if="treeData.length" v-bind="getBindValue"> |
|
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item"> |
|
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item"> |
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
</template> |
|
|
</template> |
|
|
</ns-tree> |
|
|
</ns-tree> |
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts"> |
|
|
<script lang="ts" setup> |
|
|
import { computed, defineComponent, ref, unref } from 'vue'; |
|
|
import { computed, ref, unref, useAttrs } from 'vue'; |
|
|
import { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; |
|
|
import { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
import { useApi } from '/nerv-lib/use/use-api'; |
|
|
|
|
|
import { AxiosRequestConfig } from 'axios'; |
|
|
import { get } from 'lodash-es'; |
|
|
import { get } from 'lodash-es'; |
|
|
|
|
|
import { useRoute } from 'vue-router'; |
|
|
export default defineComponent({ |
|
|
interface Props { |
|
|
|
|
|
api: string | Function | object; |
|
|
|
|
|
params?: object; |
|
|
|
|
|
defaultParams?: object; |
|
|
|
|
|
transform?: Function; |
|
|
|
|
|
resultField?: string; |
|
|
|
|
|
defaultExpandAll?: boolean; |
|
|
|
|
|
blockNode?: boolean; |
|
|
|
|
|
} |
|
|
|
|
|
defineOptions({ |
|
|
name: 'NsTreeApi', |
|
|
name: 'NsTreeApi', |
|
|
props: { |
|
|
}); |
|
|
api: { |
|
|
const props = withDefaults(defineProps<Props>(), { |
|
|
type: String, |
|
|
resultField: 'data', |
|
|
required: true, |
|
|
blockNode: true, |
|
|
}, |
|
|
defaultExpandAll: true, |
|
|
params: { |
|
|
transform: (data) => data, |
|
|
type: Object, |
|
|
}); |
|
|
}, |
|
|
|
|
|
transform: { |
|
|
|
|
|
type: Function, |
|
|
|
|
|
default: null, |
|
|
|
|
|
}, |
|
|
|
|
|
resultField: { |
|
|
|
|
|
type: String, |
|
|
|
|
|
default: 'data.data', |
|
|
|
|
|
}, |
|
|
|
|
|
defaultExpandAll: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: true, |
|
|
|
|
|
}, |
|
|
|
|
|
blockNode: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: true, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
setup(props, { attrs }) { |
|
|
|
|
|
const treeData = ref<TreeDataItem[]>([]); |
|
|
const treeData = ref<TreeDataItem[]>([]); |
|
|
|
|
|
const { httpRequest } = useApi(); |
|
|
|
|
|
const requestConfig: AxiosRequestConfig = { method: 'get' }; |
|
|
|
|
|
const route = useRoute(); |
|
|
|
|
|
const attrs = useAttrs(); |
|
|
|
|
|
|
|
|
const getBindValue = computed(() => ({ |
|
|
const getBindValue = computed(() => ({ |
|
|
...attrs, |
|
|
...attrs, |
|
|
...props, |
|
|
...props, |
|
@ -47,26 +43,22 @@ |
|
|
})); |
|
|
})); |
|
|
|
|
|
|
|
|
const getData = () => { |
|
|
const getData = () => { |
|
|
const { params, transform, resultField } = props; |
|
|
const { api, defaultParams, transform, resultField } = props; |
|
|
|
|
|
|
|
|
treeData.value = []; |
|
|
treeData.value = []; |
|
|
http.get(props.api, unref(params)).then((res) => { |
|
|
if (!api) return; |
|
|
|
|
|
httpRequest({ |
|
|
|
|
|
api, |
|
|
|
|
|
params: { ...route.params, ...route.query, ...defaultParams }, |
|
|
|
|
|
pathParams: { ...route.params, ...route.query }, |
|
|
|
|
|
requestConfig, |
|
|
|
|
|
}).then((res) => { |
|
|
let data = []; |
|
|
let data = []; |
|
|
if (resultField) { |
|
|
|
|
|
data = get(res, resultField); |
|
|
data = get(res, resultField); |
|
|
} |
|
|
|
|
|
if (transform) { |
|
|
|
|
|
treeData.value = transform(data); |
|
|
treeData.value = transform(data); |
|
|
} |
|
|
|
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
getData(); |
|
|
getData(); |
|
|
|
|
|
|
|
|
return { |
|
|
|
|
|
treeData, |
|
|
|
|
|
getBindValue, |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style lang="less" scoped></style> |
|
|
<style lang="less" scoped></style> |
|
|