feat: 文件库、列表管理的加载做了调整

This commit is contained in:
WANGFAN\wangf 2024-11-09 17:51:43 +08:00
parent 86a96043d4
commit e14af524f7
3 changed files with 29 additions and 20 deletions

View File

@ -6,22 +6,21 @@
</template> </template>
</a-input> </a-input>
<div class="tree-box"> <div class="tree-box">
<div v-if="loading"> <a-spin class="tree-loading" :loading="loading" tip="加载中...">
<a-empty /> <!-- TODO: 滚动条边距和宽度需要调整 -->
</div> <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
<!-- TODO: 滚动条边距和宽度需要调整 --> <a-tree ref="aTreeRef" :data="treeData" :default-expand-all="true" :show-line="true" @select="onNode">
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"> <template #title="node">
<a-tree ref="aTreeRef" :data="treeData" :default-expand-all="true" :show-line="true" @select="onNode"> <span class="tree-title">{{ node.title }}</span>
<template #title="node"> </template>
<span class="tree-title">{{ node.title }}</span> <template #icon="node">
</template> <SvgIcon name="folder-close" :size="16" v-if="!node.isLeaf && !node.expanded"></SvgIcon>
<template #icon="node"> <SvgIcon name="folder-open" :size="16" v-if="!node.isLeaf && node.expanded"></SvgIcon>
<SvgIcon name="folder-close" :size="16" v-if="!node.isLeaf && !node.expanded"></SvgIcon> <SvgIcon name="txt" :size="16" v-if="node.isLeaf"></SvgIcon>
<SvgIcon name="folder-open" :size="16" v-if="!node.isLeaf && node.expanded"></SvgIcon> </template>
<SvgIcon name="txt" :size="16" v-if="node.isLeaf"></SvgIcon> </a-tree>
</template> </a-scrollbar>
</a-tree> </a-spin>
</a-scrollbar>
</div> </div>
</div> </div>
</template> </template>
@ -106,6 +105,10 @@ getDocumentLibraryTree();
} }
.tree-box { .tree-box {
height: calc(100% - 32px - $margin); height: calc(100% - 32px - $margin);
.tree-loading {
width: 100%;
height: 100%;
}
.scrollbar { .scrollbar {
height: 100%; height: 100%;
.tree-title { .tree-title {

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="snow-page"> <div class="snow-page">
<div class="snow-inner-page"> <div class="snow-inner-page">
<a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"> <a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="6"> <a-col :span="6">
<a-form-item field="name" label="姓名"> <a-form-item field="name" label="姓名">
@ -20,13 +20,13 @@
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-space> <a-space>
<a-button type="primary"> <a-button type="primary" @click="getCommonTableList">
<template #icon> <template #icon>
<icon-search /> <icon-search />
</template> </template>
<template #default>查询</template> <template #default>查询</template>
</a-button> </a-button>
<a-button> <a-button @click="onReset">
<template #icon> <template #icon>
<icon-refresh /> <icon-refresh />
</template> </template>
@ -169,6 +169,11 @@ const columns = [
align: "center" align: "center"
} }
]; ];
const formRef = ref();
const onReset = () => {
formRef.value.resetFields();
getCommonTableList();
};
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const data = reactive<List[]>([]); const data = reactive<List[]>([]);
const getCommonTableList = async () => { const getCommonTableList = async () => {

View File

@ -20,7 +20,7 @@
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-space> <a-space>
<a-button type="primary"> <a-button type="primary" @click="getCustomTableList">
<template #icon> <template #icon>
<icon-search /> <icon-search />
</template> </template>
@ -189,6 +189,7 @@ const rowSelection = reactive<RowSelection>({
const formRef = ref(); const formRef = ref();
const onReset = () => { const onReset = () => {
formRef.value.resetFields(); formRef.value.resetFields();
getCustomTableList();
}; };
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 }); const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => { const pageChange = (page: number) => {