chore: 部门面板骨架屏加载效果
This commit is contained in:
parent
dacb49d0db
commit
bc2f5be973
@ -44,54 +44,65 @@ onMounted(reload);
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
|
<div :class="$attrs.class">
|
||||||
<div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
|
<Skeleton
|
||||||
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
|
:loading="showTreeSkeleton"
|
||||||
<div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
|
:paragraph="{ rows: 8 }"
|
||||||
<InputSearch
|
active
|
||||||
v-model:value="searchValue"
|
class="p-[8px]"
|
||||||
placeholder="Search"
|
>
|
||||||
size="small"
|
<div
|
||||||
>
|
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
|
||||||
<template #enterButton>
|
>
|
||||||
<a-button @click="reload">
|
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
|
||||||
<SyncOutlined class="text-primary" />
|
<div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
|
||||||
</a-button>
|
<InputSearch
|
||||||
</template>
|
v-model:value="searchValue"
|
||||||
</InputSearch>
|
placeholder="Search"
|
||||||
</div>
|
size="small"
|
||||||
<div class="px-[8px]">
|
>
|
||||||
<Tree
|
<template #enterButton>
|
||||||
v-bind="$attrs"
|
<a-button @click="reload">
|
||||||
v-if="deptTreeArray.length > 0"
|
<SyncOutlined class="text-primary" />
|
||||||
v-model:selected-keys="selectDeptId"
|
</a-button>
|
||||||
:class="$attrs.class"
|
</template>
|
||||||
:field-names="{ title: 'label', key: 'id' }"
|
</InputSearch>
|
||||||
:show-line="{ showLeafIcon: false }"
|
</div>
|
||||||
:tree-data="deptTreeArray"
|
<div class="h-full overflow-x-hidden px-[8px]">
|
||||||
:virtual="false"
|
<Tree
|
||||||
default-expand-all
|
v-bind="$attrs"
|
||||||
@select="$emit('select')"
|
v-if="deptTreeArray.length > 0"
|
||||||
>
|
v-model:selected-keys="selectDeptId"
|
||||||
<template #title="{ label }">
|
:class="$attrs.class"
|
||||||
<span v-if="label.indexOf(searchValue) > -1">
|
:field-names="{ title: 'label', key: 'id' }"
|
||||||
{{ label.substring(0, label.indexOf(searchValue)) }}
|
:show-line="{ showLeafIcon: false }"
|
||||||
<span style="color: #f50">{{ searchValue }}</span>
|
:tree-data="deptTreeArray"
|
||||||
{{
|
:virtual="false"
|
||||||
label.substring(label.indexOf(searchValue) + searchValue.length)
|
default-expand-all
|
||||||
}}
|
@select="$emit('select')"
|
||||||
</span>
|
>
|
||||||
<span v-else>{{ label }}</span>
|
<template #title="{ label }">
|
||||||
</template>
|
<span v-if="label.indexOf(searchValue) > -1">
|
||||||
</Tree>
|
{{ label.substring(0, label.indexOf(searchValue)) }}
|
||||||
<!-- 仅本人数据权限 可以考虑直接不显示 -->
|
<span style="color: #f50">{{ searchValue }}</span>
|
||||||
<div v-else class="mt-5">
|
{{
|
||||||
<Empty
|
label.substring(
|
||||||
:image="Empty.PRESENTED_IMAGE_SIMPLE"
|
label.indexOf(searchValue) + searchValue.length,
|
||||||
description="无部门数据"
|
)
|
||||||
/>
|
}}
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ label }}</span>
|
||||||
|
</template>
|
||||||
|
</Tree>
|
||||||
|
<!-- 仅本人数据权限 可以考虑直接不显示 -->
|
||||||
|
<div v-else class="mt-5">
|
||||||
|
<Empty
|
||||||
|
:image="Empty.PRESENTED_IMAGE_SIMPLE"
|
||||||
|
description="无部门数据"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Skeleton>
|
||||||
</Skeleton>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user