优化项目管理
This commit is contained in:
hero920103 committed
1 parent
a26c98b92b
commit
4ab5effce6
10 files changed
+434
-158
No files matched your search
@@ -85,50 +85,84 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<!-- 列表视图：子文件夹（在前）与同级文件混排展示 -->
|
||||
<el-table
|
||||
v-if="viewMode === 'list'"
|
||||
:data="list"
|
||||
:data="listRows"
|
||||
v-loading="loading"
|
||||
stripe
|
||||
border
|
||||
size="small"
|
||||
>
|
||||
<el-table-column label="文件名" min-width="150" show-overflow-tooltip>
|
||||
<el-table-column label="名称" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<a :href="row.file_url" target="_blank" class="file-link">
|
||||
<!-- 子文件夹：点击进入（与左侧树点击一致） -->
|
||||
<span v-if="row.__isFolder" class="folder-link" @click="enterFolder(row)">
|
||||
<el-icon class="folder-link-icon"><Folder /></el-icon>
|
||||
<span class="folder-link-name">{{ row.name }}</span>
|
||||
<span v-if="row.doc_count > 0" class="tree-node-count">{{ row.doc_count }}</span>
|
||||
</span>
|
||||
<a v-else :href="row.file_url" target="_blank" class="file-link">
|
||||
{{ row.file_name || row.title || "-" }}
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="64" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" effect="plain">{{ docTypeText(row.doc_type) }}</el-tag>
|
||||
<el-tag v-if="row.__isFolder" size="small" type="warning" effect="plain">文件夹</el-tag>
|
||||
<el-tag v-else size="small" effect="plain">{{ docTypeText(row.doc_type) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所在文件夹" min-width="88" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.folder_name || projectName || "-" }}</template>
|
||||
<template #default="{ row }">
|
||||
{{ row.__isFolder ? currentFolderLabel : row.folder_name || projectName || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" min-width="72" align="right">
|
||||
<template #default="{ row }">{{ formatFileSize(row.size) }}</template>
|
||||
<template #default="{ row }">{{ row.__isFolder ? "-" : formatFileSize(row.size) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creator_name" label="上传人" min-width="70" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.__isFolder ? "-" : row.creator_name || "-" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creator_name" label="上传人" min-width="70" show-overflow-tooltip />
|
||||
<el-table-column label="上传时间" min-width="132">
|
||||
<template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
|
||||
<template #default="{ row }">{{ row.__isFolder ? "-" : formatDateTime(row.create_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="64" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
<el-button
|
||||
v-if="row.__isFolder"
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="enterFolder(row)"
|
||||
>打开</el-button
|
||||
>
|
||||
<el-button v-else link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty><el-empty description="暂无项目文档" :image-size="60" /></template>
|
||||
<template #empty>
|
||||
<el-empty description="该文件夹暂无内容" :image-size="60" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 图标视图：文件卡片（点击文件图标/名称打开，删除在卡片底部） -->
|
||||
<!-- 图标视图：子文件夹卡片 + 文件卡片混排（文件夹点击进入；文件点击打开，删除在卡片底部） -->
|
||||
<div v-else class="doc-grid" v-loading="loading">
|
||||
<div
|
||||
v-for="f in subFolders"
|
||||
:key="`folder_${f.id}`"
|
||||
class="doc-card folder-card"
|
||||
:title="`${f.name}（文件夹）`"
|
||||
@click="enterFolder(f)"
|
||||
>
|
||||
<span class="doc-card-icon folder-card-icon">
|
||||
<el-icon><FolderOpened /></el-icon>
|
||||
</span>
|
||||
<span class="doc-card-name">{{ f.name }}</span>
|
||||
<span class="doc-card-meta">{{ f.doc_count > 0 ? `${f.doc_count} 个文件` : "文件夹" }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in list"
|
||||
:key="row.id"
|
||||
:key="`doc_${row.id}`"
|
||||
class="doc-card"
|
||||
:title="`${row.file_name || row.title || '-'}（${formatFileSize(row.size)}）`"
|
||||
>
|
||||
@@ -144,7 +178,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="!list.length && !loading"
|
||||
v-if="!list.length && !subFolders.length && !loading"
|
||||
description="暂无项目文档"
|
||||
:image-size="60"
|
||||
class="grid-empty"
|
||||
@@ -282,6 +316,33 @@ function findFolder(nodes, id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前选中文件夹下的子文件夹（与同级文件一起展示）。
|
||||
* 例：点击二级文件夹后，里面的子文件夹与文件同级，两者一并列出（列表/图标视图均如此）。
|
||||
*/
|
||||
const subFolders = computed(() => {
|
||||
const node = findFolder(folderTree.value, selectedFolder.value);
|
||||
return node?.children || [];
|
||||
});
|
||||
|
||||
/** 列表视图数据：子文件夹在前（点击进入），其后为当前页文件 */
|
||||
const listRows = computed(() => [
|
||||
...subFolders.value.map((f) => ({
|
||||
...f,
|
||||
__isFolder: true,
|
||||
creator_name: "-", // 文件夹行占位，避免各列显示异常
|
||||
})),
|
||||
...list.value.map((r) => ({ ...r, __isFolder: false })),
|
||||
]);
|
||||
|
||||
/** 进入（浏览）子文件夹：与左侧树点击行为一致 */
|
||||
function enterFolder(folder) {
|
||||
if (!folder?.id || folder.id === selectedFolder.value) return;
|
||||
selectedFolder.value = folder.id;
|
||||
pagination.page = 1;
|
||||
reload();
|
||||
}
|
||||
|
||||
/** 左侧树节点点击：切换筛选文件夹（回到第一页） */
|
||||
function handleNodeClick(data) {
|
||||
if (!data.id || data.id === selectedFolder.value) return;
|
||||
@@ -554,18 +615,19 @@ defineExpose({ reload });
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node-count {
|
||||
flex-shrink: 0;
|
||||
min-width: 16px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
/* 文件夹数量角标：左侧树与右侧列表（子文件夹行）共用 */
|
||||
.tree-node-count {
|
||||
flex-shrink: 0;
|
||||
min-width: 16px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 右侧：文档列表 */
|
||||
@@ -630,6 +692,24 @@ defineExpose({ reload });
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表视图：子文件夹名称（点击进入） */
|
||||
.folder-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.folder-link-icon {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页：列表 / 图标视图共用 */
|
||||
.docs-pagination {
|
||||
display: flex;
|
||||
@@ -707,6 +787,20 @@ defineExpose({ reload });
|
||||
}
|
||||
}
|
||||
|
||||
/* 文件夹卡片：点击进入该文件夹 */
|
||||
.folder-card {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .doc-card-name {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.folder-card-icon {
|
||||
display: inline-flex;
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.grid-empty {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user