dinghao
6 months ago
6 changed files with 61 additions and 70 deletions
@ -1,72 +1,64 @@ |
|||||
<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, |
}); |
||||
}, |
const treeData = ref<TreeDataItem[]>([]); |
||||
transform: { |
const { httpRequest } = useApi(); |
||||
type: Function, |
const requestConfig: AxiosRequestConfig = { method: 'get' }; |
||||
default: null, |
const route = useRoute(); |
||||
}, |
const attrs = useAttrs(); |
||||
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 getData = () => { |
const getBindValue = computed(() => ({ |
||||
const { params, transform, resultField } = props; |
...attrs, |
||||
treeData.value = []; |
...props, |
||||
http.get(props.api, unref(params)).then((res) => { |
treeData: treeData.value, |
||||
let data = []; |
})); |
||||
if (resultField) { |
|
||||
data = get(res, resultField); |
|
||||
} |
|
||||
if (transform) { |
|
||||
treeData.value = transform(data); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
getData(); |
const getData = () => { |
||||
|
const { api, defaultParams, transform, resultField } = props; |
||||
|
|
||||
return { |
treeData.value = []; |
||||
treeData, |
if (!api) return; |
||||
getBindValue, |
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> |
</script> |
||||
<style lang="less" scoped></style> |
<style lang="less" scoped></style> |
||||
|
Loading…
Reference in new issue