|
|
|
@ -1,13 +1,19 @@ |
|
|
|
<template> |
|
|
|
<a-spin :spinning="treeState.loading"> |
|
|
|
<div v-if="header" class="ns-tree-title"> |
|
|
|
<ns-icon :name="header.icon" size="14" /> |
|
|
|
<span>{{ header.title }}</span> |
|
|
|
</div> |
|
|
|
<div v-if="!formConfig?.schema"> |
|
|
|
<ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" /> |
|
|
|
</div> |
|
|
|
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys"> |
|
|
|
<template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index"> |
|
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
|
</template> |
|
|
|
</ns-tree> |
|
|
|
<div> |
|
|
|
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys"> |
|
|
|
<template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index"> |
|
|
|
<slot :name="item" v-bind="data || {}"></slot> |
|
|
|
</template> |
|
|
|
</ns-tree> |
|
|
|
</div> |
|
|
|
</a-spin> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
@ -17,13 +23,14 @@ |
|
|
|
import { AxiosRequestConfig } from 'axios'; |
|
|
|
import { get } from 'lodash-es'; |
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
import { isEmpty } from 'lodash-es'; |
|
|
|
import { debounce } from 'lodash-es'; |
|
|
|
import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props'; |
|
|
|
const formElRef = ref(); |
|
|
|
defineOptions({ |
|
|
|
name: 'NsTreeApi', |
|
|
|
}); |
|
|
|
const props = defineProps(treeProps); |
|
|
|
|
|
|
|
const treeData = ref<TreeDataItem[]>([]); |
|
|
|
const selectedKeys = ref(props.defaultSelectedKeys || []); |
|
|
|
const { httpRequest } = useApi(); |
|
|
|
@ -32,7 +39,7 @@ |
|
|
|
const attrs = useAttrs(); |
|
|
|
const formModel = reactive({}); |
|
|
|
const treeState = reactive({ |
|
|
|
loading: true, |
|
|
|
loading: false, |
|
|
|
}); |
|
|
|
const formConfig = computed(() => { |
|
|
|
return { |
|
|
|
@ -40,9 +47,9 @@ |
|
|
|
...props.formConfig, |
|
|
|
}; |
|
|
|
}); |
|
|
|
const formFinish = () => { |
|
|
|
getData(); |
|
|
|
}; |
|
|
|
const formFinish = debounce((data: object) => { |
|
|
|
getData(data); |
|
|
|
}, 200); |
|
|
|
const getBindValue = computed(() => ({ |
|
|
|
...attrs, |
|
|
|
...props, |
|
|
|
@ -55,19 +62,20 @@ |
|
|
|
return { ...route.params, ...route.query, ...props.defaultParams }; |
|
|
|
}); |
|
|
|
|
|
|
|
const getData = () => { |
|
|
|
const getData = (params = {}) => { |
|
|
|
const { api, transform, resultField } = props; |
|
|
|
treeData.value = []; |
|
|
|
if (!api) return; |
|
|
|
setLoading(true); |
|
|
|
httpRequest({ |
|
|
|
api, |
|
|
|
params: httpPrams, |
|
|
|
pathParams: { ...route.params, ...route.query }, |
|
|
|
requestConfig, |
|
|
|
params: { ...httpPrams.value, ...params }, |
|
|
|
pathParams: { ...route.params, ...route.query, ...params }, |
|
|
|
requestConfig: { ...requestConfig, data: { ...httpPrams.value, ...params } }, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
treeData.value = transform(get(res, resultField)); |
|
|
|
console.log(treeData.value, 'treeData.value'); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
setLoading(false); |
|
|
|
@ -76,4 +84,27 @@ |
|
|
|
|
|
|
|
getData(); |
|
|
|
</script> |
|
|
|
<style lang="less" scoped></style> |
|
|
|
<style lang="less" scoped> |
|
|
|
:deep(.ant-form-item) { |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ns-form::after) { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.ns-tree-title { |
|
|
|
font-weight: bold; |
|
|
|
user-select: text; |
|
|
|
padding: 16px; |
|
|
|
margin-bottom: 16px; |
|
|
|
padding-bottom: 10px; |
|
|
|
border-bottom: 1px solid #e9e9e9; |
|
|
|
> span { |
|
|
|
padding-left: 6px; |
|
|
|
} |
|
|
|
& ~ div { |
|
|
|
padding: 0 16px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
xuziqiang
8 months ago
