新增待办信息

This commit is contained in:
2025-12-20 23:30:49 +08:00
parent dbae70d2c2
commit 112335b110
4 changed files with 122 additions and 81 deletions

View File

@@ -46,6 +46,9 @@ export const bizMyfilesForm = (params?: BizMyfiles | any) =>
export const bizMyfilesSave = (params?: any, data?: BizMyfiles | any) =>
defHttp.postJson<BizMyfiles>({ url: adminPath + '/biz/myfiles/save', params, data });
export const bizMyfilesEdit = (params?: any, data?: BizMyfiles | any) =>
defHttp.postJson<BizMyfiles>({ url: adminPath + '/biz/myfiles/edit', params, data });
export const bizMyfilesImportData = (
params: UploadFileParams,
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,

View File

@@ -23,9 +23,7 @@
:class="{ active: folder.expanded }"
:style="{ paddingLeft: '0px' }"
>
<!-- 重新组织布局省略号 文件夹图标 文件夹名称 删除按钮 折叠箭头 -->
<div class="folder-info">
<!-- 省略号菜单按钮 - 最左侧 -->
<span
class="folder-more-btn"
v-if="folder.id !== '0'"
@@ -33,8 +31,6 @@
>
<Icon icon="ant-design:ellipsis-outlined" />
</span>
<!-- 文件夹图标 -->
<span class="folder-icon">
<Icon
:icon="folder.expanded
@@ -44,7 +40,6 @@
/>
</span>
<!-- 文件夹名称 -->
<template v-if="editingInfo.id === folder.id && editingInfo.type === 'parent' && folder.id !== '0'">
<a-input
ref="editInputRef"
@@ -61,9 +56,7 @@
</span>
</div>
<!-- 右侧操作区域删除按钮 折叠箭头 -->
<div class="folder-actions">
<!-- 删除按钮 -->
<span
class="folder-delete-btn"
v-if="showDeleteBtn === folder.id"
@@ -71,8 +64,6 @@
>
<Icon icon="ant-design:delete-filled" color="#ff4d4f" />
</span>
<!-- 折叠/展开箭头 - 最右侧 -->
<span class="tree-toggle" v-if="folder.children && folder.children.length">
<Icon
:icon="folder.expanded ? 'simple-line-icons:arrow-down' : 'simple-line-icons:arrow-right'"
@@ -96,15 +87,12 @@
:style="{ paddingLeft: '16px' }"
>
<div class="folder-info">
<!-- 省略号按钮 -->
<span
class="folder-more-btn"
@click.stop="toggleFolderMenu(second.id)"
>
<Icon icon="ant-design:ellipsis-outlined" />
</span>
<!-- 文件夹图标 -->
<span class="folder-icon">
<Icon
:icon="second.expanded
@@ -114,7 +102,6 @@
/>
</span>
<!-- 文件夹名称 -->
<template v-if="editingInfo.id === second.id && editingInfo.type === 'child'">
<a-input
:ref="el => childEditInputRef[`level1-${idx2}`] = el"
@@ -131,9 +118,7 @@
</span>
</div>
<!-- 右侧操作区域 -->
<div class="folder-actions">
<!-- 删除按钮 -->
<span
class="folder-delete-btn"
v-if="showDeleteBtn === second.id"
@@ -141,8 +126,6 @@
>
<Icon icon="ant-design:delete-filled" color="#ff4d4f" />
</span>
<!-- 折叠箭头 -->
<span class="tree-toggle" v-if="second.children && second.children.length">
<Icon
:icon="second.expanded ? 'simple-line-icons:arrow-down' : 'simple-line-icons:arrow-right'"
@@ -166,7 +149,6 @@
:style="{ paddingLeft: '32px' }"
>
<div class="folder-info">
<!-- 省略号按钮 -->
<span
class="folder-more-btn"
@click.stop="toggleFolderMenu(third.id)"
@@ -174,7 +156,6 @@
<Icon icon="ant-design:ellipsis-outlined" />
</span>
<!-- 文件夹图标 -->
<span class="folder-icon">
<Icon
:icon="third.expanded
@@ -184,7 +165,6 @@
/>
</span>
<!-- 文件夹名称 -->
<template v-if="editingInfo.id === third.id && editingInfo.type === 'child'">
<a-input
:ref="el => childEditInputRef[`level2-${idx2}-${idx3}`] = el"
@@ -201,9 +181,7 @@
</span>
</div>
<!-- 右侧操作区域 -->
<div class="folder-actions">
<!-- 删除按钮 -->
<span
class="folder-delete-btn"
v-if="showDeleteBtn === third.id"
@@ -212,7 +190,6 @@
<Icon icon="ant-design:delete-filled" color="#ff4d4f" />
</span>
<!-- 折叠箭头 -->
<span class="tree-toggle" v-if="third.children && third.children.length">
<Icon
:icon="third.expanded ? 'simple-line-icons:arrow-down' : 'simple-line-icons:arrow-right'"
@@ -236,7 +213,6 @@
:style="{ paddingLeft: '48px' }"
>
<div class="folder-info">
<!-- 省略号按钮 -->
<span
class="folder-more-btn"
@click.stop="toggleFolderMenu(fourth.id)"
@@ -244,7 +220,6 @@
<Icon icon="ant-design:ellipsis-outlined" />
</span>
<!-- 文件夹图标 -->
<span class="folder-icon">
<Icon
:icon="fourth.expanded
@@ -254,7 +229,6 @@
/>
</span>
<!-- 文件夹名称 -->
<template v-if="editingInfo.id === fourth.id && editingInfo.type === 'child'">
<a-input
:ref="el => childEditInputRef[`level3-${idx2}-${idx3}-${idx4}`] = el"
@@ -271,9 +245,7 @@
</span>
</div>
<!-- 右侧操作区域 -->
<div class="folder-actions">
<!-- 删除按钮 -->
<span
class="folder-delete-btn"
v-if="showDeleteBtn === fourth.id"
@@ -282,7 +254,6 @@
<Icon icon="ant-design:delete-filled" color="#ff4d4f" />
</span>
<!-- 折叠箭头 -->
<span class="tree-toggle" v-if="fourth.children && fourth.children.length">
<Icon
:icon="fourth.expanded ? 'simple-line-icons:arrow-down' : 'simple-line-icons:arrow-right'"
@@ -305,7 +276,6 @@
:style="{ paddingLeft: '64px' }"
>
<div class="folder-info">
<!-- 省略号按钮 -->
<span
class="folder-more-btn"
@click.stop="toggleFolderMenu(fifth.id)"
@@ -313,7 +283,6 @@
<Icon icon="ant-design:ellipsis-outlined" />
</span>
<!-- 文件夹图标 -->
<span class="folder-icon">
<Icon
icon="ant-design:folder-outlined"
@@ -321,7 +290,6 @@
/>
</span>
<!-- 文件夹名称 -->
<template v-if="editingInfo.id === fifth.id && editingInfo.type === 'child'">
<a-input
:ref="el => childEditInputRef[`level4-${idx2}-${idx3}-${idx4}-${idx5}`] = el"
@@ -338,9 +306,7 @@
</span>
</div>
<!-- 右侧操作区域 -->
<div class="folder-actions">
<!-- 删除按钮 -->
<span
class="folder-delete-btn"
v-if="showDeleteBtn === fifth.id"
@@ -390,7 +356,25 @@
<div class="file-card-header">
<div class="file-name-wrap">
<span class="file-card-icon"><Icon :icon="file.svgIcon" size="24" /></span>
<span class="file-card-name" :title="file.fileName">{{ file.fileName }} </span>
<!-- 新增文件编辑输入框切换逻辑 -->
<template v-if="editingInfo.id === file.id && editingInfo.type === 'file'">
<a-input
:ref="el => fileEditInputRef[file.id] = el"
v-model:value="editingInfo.name"
class="file-edit-input"
@blur="confirmRename"
@keyup.enter="confirmRename"
@keyup.esc="cancelRename"
/>
</template>
<span
v-else
class="file-card-name"
:title="file.fileName"
@dblclick="handleFileDblClick(file)"
>
{{ file.fileName }}
</span>
</div>
<span class="file-card-size">{{ file.fileSize }}</span>
</div>
@@ -421,7 +405,7 @@ import UploadModal from './upload.vue';
import FolderModal from './folder.vue';
import { bizFoldersSave, bizFoldersAllData, bizFolderItemAll, bizFoldersDelete } from '@jeesite/biz/api/biz/folders';
import { BizMyfiles, bizMyfilesListAll, bizMyfilesDelete } from '@jeesite/biz/api/biz/myfiles';
import { BizMyfiles, bizMyfilesEdit, bizMyfilesListAll, bizMyfilesDelete } from '@jeesite/biz/api/biz/myfiles';
import { useUserStore } from '@jeesite/core/store/modules/user';
const userStore = useUserStore();
@@ -452,9 +436,10 @@ interface FolderNode {
totalCount?: number; // 总数量 = 所有下级文件数 + 所有下级文件夹数
}
// 修改扩展editingInfo类型支持file类型
interface EditingInfo {
id: string | null;
type: 'parent' | 'child' | '';
type: 'parent' | 'child' | 'file' | '';
name: string;
index: number;
originalName: string;
@@ -463,7 +448,9 @@ interface EditingInfo {
const expandedState = ref<Record<string, boolean>>({});
const currentEditingNode = ref<FolderNode | null>(null);
const showDeleteBtn = ref<string | null>(null); // 新增:控制删除按钮显示
// 新增:当前编辑的文件
const currentEditingFile = ref<BizMyfiles | null>(null);
const showDeleteBtn = ref<string | null>(null);
const editingInfo = ref<EditingInfo>({
id: null,
@@ -475,7 +462,8 @@ const editingInfo = ref<EditingInfo>({
});
const editInputRef = ref<any>(null);
const childEditInputRef = ref<Record<string, any>>({}); // 修改为字符串key
const childEditInputRef = ref<Record<string, any>>({});
const fileEditInputRef = ref<Record<string, any>>({});
let UploadFile = true;
const ParamsFolders = ref<{ folderId?: string; [key: string]: any }>({});
@@ -483,10 +471,9 @@ const folderSearchText = ref<string>('');
const fileSearchText = ref<string>('');
const folderList = ref<FolderNode[]>([]);
const fileList = ref<BizMyfiles[]>([]);
const folderFileCountMap = ref<Record<string, number>>({}); // 文件夹直接文件数量映射
const folderChildCountMap = ref<Record<string, number>>({}); // 文件夹直接子文件夹数量映射
const folderFileCountMap = ref<Record<string, number>>({});
const folderChildCountMap = ref<Record<string, number>>({});
// 获取文件夹直接文件数量
const getFolderFileCount = async (folderId: string) => {
try {
const reqParams = {
@@ -501,14 +488,12 @@ const getFolderFileCount = async (folderId: string) => {
}
};
// 批量获取所有文件夹的直接文件数量
const getAllFolderFileCounts = async (folders: FolderNode[]) => {
const countMap: Record<string, number> = {};
// 递归遍历所有文件夹
const traverseFolders = async (folderNodes: FolderNode[]) => {
for (const folder of folderNodes) {
if (folder.id !== '0') { // 根目录跳过
if (folder.id !== '0') {
countMap[folder.id] = await getFolderFileCount(folder.id);
}
if (folder.children && folder.children.length) {
@@ -521,7 +506,6 @@ const getAllFolderFileCounts = async (folders: FolderNode[]) => {
return countMap;
};
// 获取文件夹直接子文件夹数量
const getFolderChildCount = async (folderId: string) => {
try {
const reqParams = {
@@ -536,14 +520,11 @@ const getFolderChildCount = async (folderId: string) => {
}
};
// 批量获取所有文件夹的直接子文件夹数量
const getAllFolderChildCounts = async (folders: FolderNode[]) => {
const countMap: Record<string, number> = {};
// 递归遍历所有文件夹
const traverseFolders = async (folderNodes: FolderNode[]) => {
for (const folder of folderNodes) {
if (folder.id !== '0') { // 根目录也统计
if (folder.id !== '0') {
countMap[folder.id] = await getFolderChildCount(folder.id);
}
if (folder.children && folder.children.length) {
@@ -556,20 +537,15 @@ const getAllFolderChildCounts = async (folders: FolderNode[]) => {
return countMap;
};
// 递归计算文件夹的所有下级文件和文件夹总数 - 修复核心逻辑
const calculateRecursiveCounts = (folder: FolderNode): { totalFiles: number, totalFolders: number } => {
// 初始值仅当前文件夹的直接文件数文件夹数初始为0因为子文件夹数要从子节点累加
let totalFiles = folder.fileCount || 0;
let totalFolders = 0; // 修复初始化为0不再包含当前文件夹的直接子文件夹数
let totalFolders = 0;
// 递归遍历所有子文件夹
if (folder.children && folder.children.length) {
folder.children.forEach(child => {
const childCounts = calculateRecursiveCounts(child);
// 累加子文件夹的所有文件数
totalFiles += childCounts.totalFiles;
// 累加子文件夹的数量(子文件夹自身 + 其子文件夹数)
totalFolders += 1 + childCounts.totalFolders; // 修复:+1 表示当前子文件夹本身,再累加其子文件夹数
totalFolders += 1 + childCounts.totalFolders;
});
}
@@ -587,15 +563,12 @@ const bindParentReferences = (folders: FolderNode[], _parent: FolderNode | null
if (expandedState.value[folder.id]) {
folder.expanded = true;
}
// 设置直接文件数量和直接子文件夹数量(仅用于单独展示,不参与递归统计)
folder.fileCount = folderFileCountMap.value[folder.id] || 0;
folder.folderCount = folderChildCountMap.value[folder.id] || 0;
if (folder.children && folder.children.length) {
bindParentReferences(folder.children, folder);
}
// 递归计算所有下级的总数
calculateRecursiveCounts(folder);
});
};
@@ -762,12 +735,9 @@ const getDataList = async (params: {}, keepExpanded = true) => {
});
}
// 获取所有文件夹的直接文件数量
folderFileCountMap.value = await getAllFolderFileCounts(folders);
// 获取所有文件夹的直接子文件夹数量
folderChildCountMap.value = await getAllFolderChildCounts(folders);
// 绑定父引用并递归计算总数
bindParentReferences(folders);
folderList.value = folders;
getFileList({});
@@ -817,7 +787,6 @@ const toggleFolder = async (targetFolder: FolderNode) => {
UploadFile = false;
}
// 点击文件夹时关闭删除按钮
showDeleteBtn.value = null;
if (editingInfo.value.id === targetFolder.id && editingInfo.value.type === 'parent' && targetFolder.id !== '0') return;
@@ -863,9 +832,7 @@ const toggleFolder = async (targetFolder: FolderNode) => {
};
const handleChildClick = (child: FolderNode) => {
// 点击子文件夹时关闭删除按钮
showDeleteBtn.value = null;
if (editingInfo.value.id === child.id && editingInfo.value.type === 'child') return;
ParamsFolders.value = {
folderId: child.id,
@@ -917,8 +884,6 @@ const handleFolderDblClick = (
level: number
) => {
if (item.id === '0') return;
// 双击编辑时关闭删除按钮
showDeleteBtn.value = null;
currentEditingNode.value = item;
@@ -962,20 +927,37 @@ const handleFolderDblClick = (
});
};
const handleFileDblClick = (file: BizMyfiles) => {
currentEditingFile.value = file;
editingInfo.value = {
id: file.id,
type: 'file',
index: -1,
originalName: file.fileName,
name: file.fileName,
level: 0
};
nextTick(() => {
const inputComp = fileEditInputRef.value[file.id];
if (inputComp) {
const inputEl = inputComp?.$el?.querySelector('input') || inputComp;
if (inputEl && typeof inputEl.focus === 'function') {
inputEl.focus();
inputEl.select();
}
}
});
};
const confirmRename = async () => {
const { id, type, name, originalName } = editingInfo.value;
if (!id || !type) return;
if (id === '0') {
cancelRename();
message.warning('根目录不允许重命名');
return;
}
const newName = name.trim();
if (!newName) {
message.warning('文件夹名称不能为空');
message.warning('名称不能为空');
return;
}
@@ -985,13 +967,37 @@ const confirmRename = async () => {
}
try {
const res = await bizFoldersSave({ folderId: id, folderName: newName });
message.success(res.message);
if (currentEditingNode.value) {
currentEditingNode.value.folderName = newName;
currentEditingNode.value.name = newName;
if (type === 'file') {
if (!currentEditingFile.value) return;
const res = await bizMyfilesEdit({
id: id,
fileName: newName,
folderId: currentEditingFile.value.folderId,
loginCode: userinfo.value.loginCode
});
message.success(res.message);
if (currentEditingFile.value) {
currentEditingFile.value.fileName = newName;
const fileIndex = fileList.value.findIndex(f => f.id === id);
if (fileIndex !== -1) {
fileList.value[fileIndex].fileName = newName;
}
}
await getFileList({});
} else {
if (id === '0') {
cancelRename();
message.warning('根目录不允许重命名');
return;
}
const res = await bizFoldersSave({ folderId: id, folderName: newName });
message.success(res.message);
if (currentEditingNode.value) {
currentEditingNode.value.folderName = newName;
currentEditingNode.value.name = newName;
}
await getDataList({}, true);
}
await getDataList({}, true);
cancelRename();
} catch (error) {
console.error('重命名失败:', error);
@@ -1008,6 +1014,7 @@ const cancelRename = () => {
level: 0
};
currentEditingNode.value = null;
currentEditingFile.value = null;
};
const handleFolderModalClose = () => {
@@ -1249,6 +1256,18 @@ onMounted(() => {
flex: 1;
}
/* 新增:文件编辑输入框样式 */
.file-edit-input {
width: 100%;
font-size: 14px;
padding: 2px 6px;
border: 1px solid #1890ff;
border-radius: 4px;
background: rgba(255, 255, 255, 0.95);
flex: 1;
max-width: calc(100% - 40px);
}
/* 右侧操作区域样式 */
.folder-actions {
display: flex;
@@ -1509,6 +1528,15 @@ onMounted(() => {
border-radius: 4px;
}
/* 新增:文件编辑输入框深度样式 */
:deep(.file-edit-input .ant-input) {
padding: 2px 8px;
height: 28px;
line-height: 28px;
border-radius: 4px;
font-size: 14px;
}
/* 响应式样式 */
@media (max-width: 1400px) {
.file-list {