dinghao
6 months ago
6 changed files with 61 additions and 70 deletions
@ -1,72 +1,64 @@ |
|||
<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"> |
|||
<slot :name="item" v-bind="data || {}"></slot> |
|||
</template> |
|||
</ns-tree> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { computed, defineComponent, ref, unref } from 'vue'; |
|||
<script lang="ts" setup> |
|||
import { computed, ref, unref, useAttrs } from 'vue'; |
|||
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'; |
|||
|
|||
export default defineComponent({ |
|||
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', |
|||
props: { |
|||
api: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
params: { |
|||
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 getBindValue = computed(() => ({ |
|||
...attrs, |
|||
...props, |
|||
treeData: treeData.value, |
|||
})); |
|||
}); |
|||
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 getData = () => { |
|||
const { params, transform, resultField } = props; |
|||
treeData.value = []; |
|||
http.get(props.api, unref(params)).then((res) => { |
|||
let data = []; |
|||
if (resultField) { |
|||
data = get(res, resultField); |
|||
} |
|||
if (transform) { |
|||
treeData.value = transform(data); |
|||
} |
|||
}); |
|||
}; |
|||
const getBindValue = computed(() => ({ |
|||
...attrs, |
|||
...props, |
|||
treeData: treeData.value, |
|||
})); |
|||
|
|||
getData(); |
|||
const getData = () => { |
|||
const { api, defaultParams, transform, resultField } = props; |
|||
|
|||
return { |
|||
treeData, |
|||
getBindValue, |
|||
}; |
|||
}, |
|||
}); |
|||
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> |
|||
|
Loading…
Reference in new issue