98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue';
|
|
import { onMounted, ref } from 'vue';
|
|
import { Empty, Skeleton, Tree } from 'ant-design-vue';
|
|
import { communityTree } from "#/api/property/community";
|
|
import type { CommunityVO } from "#/api/property/community/model";
|
|
|
|
defineOptions({ inheritAttrs: false });
|
|
|
|
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
|
|
|
|
const emit = defineEmits<{
|
|
reload: [];
|
|
select: [];
|
|
}>();
|
|
|
|
const selectFloorId = defineModel('selectFloorId', {
|
|
type: Array as PropType<string[]>,
|
|
});
|
|
|
|
const searchValue = defineModel('searchValue', {
|
|
type: String,
|
|
default: '',
|
|
});
|
|
|
|
type TreeArray = CommunityVO[];
|
|
const treeArray = ref<TreeArray>([]);
|
|
const showTreeSkeleton = ref<boolean>(true);
|
|
|
|
async function loadTree() {
|
|
showTreeSkeleton.value = true;
|
|
searchValue.value = '';
|
|
selectFloorId.value = [];
|
|
treeArray.value = await communityTree(4);
|
|
showTreeSkeleton.value = false;
|
|
}
|
|
|
|
// async function handleReload() {
|
|
// await loadTree();
|
|
// emit('reload');
|
|
// }
|
|
|
|
onMounted(loadTree);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full flex flex-col">
|
|
<Skeleton
|
|
:loading="showTreeSkeleton"
|
|
:paragraph="{ rows: 8 }"
|
|
active
|
|
class="p-[8px] flex-1 min-h-0"
|
|
>
|
|
<div class="bg-background flex flex-col h-full rounded-lg">
|
|
<div class="flex-1 overflow-y-auto px-[8px] mt-2.5 min-h-0">
|
|
<Tree
|
|
class="tree-background"
|
|
v-bind="$attrs"
|
|
v-if="treeArray.length > 0"
|
|
v-model:selected-keys="selectFloorId"
|
|
:field-names="{ title: 'label', key: 'id' }"
|
|
:show-line="{ showLeafIcon: false }"
|
|
:tree-data="treeArray"
|
|
:virtual="false"
|
|
default-expand-all
|
|
@select="$emit('select')"
|
|
>
|
|
<template #title="{ label }">
|
|
<span v-if="label.indexOf(searchValue) > -1">
|
|
{{ label.substring(0, label.indexOf(searchValue)) }}
|
|
<span style="color: #f50">{{ searchValue }}</span>
|
|
{{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
|
|
</span>
|
|
<span v-else>{{ label }}</span>
|
|
</template>
|
|
</Tree>
|
|
<div v-else class="mt-5">
|
|
<Empty
|
|
:image="Empty.PRESENTED_IMAGE_SIMPLE"
|
|
description="暂无数据"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Skeleton>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.bg-background{
|
|
background-color: white;
|
|
:deep(.ant-tree){
|
|
background-color: white;
|
|
color: #333;
|
|
}
|
|
}
|
|
</style>
|