330 lines
12 KiB
JavaScript
330 lines
12 KiB
JavaScript
$(document).ready(async function () {
|
||
var apiBase = window.location.origin + '/seeyon/rest/fileUpload';
|
||
var rootFolders = [];
|
||
var activeFolder = null;
|
||
var currentFilePage = 1;
|
||
var filePageSize = 10;
|
||
var searchKeyword = null;
|
||
|
||
// ========== 初始化：获取bizId → 获取folderId → 加载文件列表 ==========
|
||
try {
|
||
// 从URL参数或window对象获取bizId
|
||
var urlParams = new URLSearchParams(window.location.search);
|
||
var bizId = urlParams.get('bizId') || window._bizId || '';
|
||
|
||
// 缓存folderId
|
||
var cachedFolderId = '';
|
||
|
||
// 如果有bizId，调接口获取folderId
|
||
if (bizId) {
|
||
cachedFolderId = await fetchFolderIdByBizId(bizId) || '';
|
||
}
|
||
// 如果没有通过bizId获取到，尝试用URL中的folderId
|
||
if (!cachedFolderId) {
|
||
cachedFolderId = urlParams.get('folderId') || '';
|
||
}
|
||
|
||
// 存储到全局变量供上传和OK()使用
|
||
window._currentFolderId = cachedFolderId;
|
||
window._bizId = bizId;
|
||
window._uploadedFiles = []; // 缓存本次上传成功的文件信息
|
||
|
||
// 加载文件列表
|
||
if (cachedFolderId) {
|
||
activeFolder = { id: cachedFolderId, name: '指定文件夹' };
|
||
var files = await fetchFiles(cachedFolderId);
|
||
renderFileList(files);
|
||
}
|
||
} catch (e) {
|
||
console.error('初始化失败:', e);
|
||
$('#file-list').html('<div style="padding:12px;color:#e74c3c;">加载文件夹失败</div>');
|
||
}
|
||
|
||
/**
|
||
* 通过业务ID调后端接口获取网盘文件夹ID
|
||
* @param {string} bizId - 业务ID（资产编号）
|
||
* @returns {Promise<string|null>} folderId
|
||
*/
|
||
async function fetchFolderIdByBizId(bizId) {
|
||
if (!bizId) return null;
|
||
try {
|
||
var res = await $.ajax({
|
||
url: apiBase + '/folder/by-bizid?bizId=' + encodeURIComponent(bizId),
|
||
type: 'GET',
|
||
dataType: 'json'
|
||
});
|
||
if (res.code === 0 && res.data) {
|
||
var folderId = res.data.folderId || res.data.id || '';
|
||
console.log('[fileUploadBiz] 获取folderId:', folderId, 'bizId:', bizId);
|
||
return folderId;
|
||
}
|
||
} catch (e) {
|
||
console.error('[fileUploadBiz] 获取folderId失败:', e);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// ========== API 调用 ==========
|
||
|
||
async function fetchFolders(folderId) {
|
||
var res = await $.ajax({
|
||
url: apiBase + '/folder/children?folderId=' + folderId,
|
||
type: 'GET',
|
||
dataType: 'json'
|
||
});
|
||
if (res.code === 0 && res.data) {
|
||
return res.data.folders || [];
|
||
}
|
||
return [];
|
||
}
|
||
|
||
async function fetchFiles(folderId, pageNum, pageSize) {
|
||
var res = await $.ajax({
|
||
url: apiBase + '/folder/children?folderId=' + folderId,
|
||
type: 'GET',
|
||
dataType: 'json'
|
||
});
|
||
if (res.code === 0 && res.data) {
|
||
return res.data.files || [];
|
||
}
|
||
return [];
|
||
}
|
||
|
||
async function searchFiles(keyword) {
|
||
var res = await $.ajax({
|
||
url: apiBase + '/file/search?keyword=' + encodeURIComponent(keyword),
|
||
type: 'GET',
|
||
dataType: 'json'
|
||
});
|
||
if (res.code === 0 && res.data) {
|
||
return Array.isArray(res.data) ? res.data : (res.data.files || []);
|
||
}
|
||
return [];
|
||
}
|
||
|
||
// ========== 左侧文件夹树 ==========
|
||
|
||
function renderSidebar() {
|
||
var sidebar = $('#sideBar');
|
||
sidebar.empty();
|
||
rootFolders.forEach(function (folder) {
|
||
var categoryEl = $(
|
||
'<div class="category">' +
|
||
'<div class="category-title"><span class="icon">▶</span> ' + (folder.name || '文件夹') + '</div>' +
|
||
'<div class="folder-list"></div>' +
|
||
'</div>'
|
||
);
|
||
var folderList = categoryEl.find('.folder-list');
|
||
categoryEl.find('.category-title').click(async function () {
|
||
if (!folder.loaded) {
|
||
var subFolders = await fetchFolders(folder.id);
|
||
subFolders.forEach(function (sub) { renderFolder(sub, folderList); });
|
||
folder.loaded = true;
|
||
}
|
||
folderList.slideToggle();
|
||
var icon = categoryEl.find('.icon');
|
||
icon.text(icon.text() === '▶' ? '▼' : '▶');
|
||
});
|
||
sidebar.append(categoryEl);
|
||
});
|
||
}
|
||
|
||
function renderFolder(node, container) {
|
||
var subFolderList = $('<div class="folder-list"></div>');
|
||
var paginationControls = $('<div class="folder-pagination"></div>');
|
||
var page = 1;
|
||
var pageSize = 10;
|
||
var hasMore = true;
|
||
|
||
var folderItem = $(
|
||
'<div class="folder-item"><span class="icon">▶</span> ' + (node.name || '文件夹') + '</div>'
|
||
);
|
||
|
||
folderItem.click(async function (e) {
|
||
e.stopPropagation();
|
||
activeFolder = node;
|
||
// 高亮当前选中文件夹
|
||
$('.folder-item').removeClass('active');
|
||
folderItem.addClass('active');
|
||
subFolderList.toggle();
|
||
|
||
if (subFolderList.is(':visible') && !node.loaded) {
|
||
await loadSubFolderPage();
|
||
node.loaded = true;
|
||
}
|
||
|
||
// 加载文件列表
|
||
var files = await fetchFiles(node.id);
|
||
renderFileList(files);
|
||
|
||
var icon = folderItem.find('.icon');
|
||
icon.text(icon.text() === '▶' ? '▼' : '▶');
|
||
});
|
||
|
||
async function loadSubFolderPage() {
|
||
var subFolders = await fetchFolders(node.id);
|
||
subFolderList.empty();
|
||
subFolders.forEach(function (sub) { renderFolder(sub, subFolderList); });
|
||
hasMore = false; // 简化：不分页子文件夹
|
||
renderFolderPagination();
|
||
}
|
||
|
||
function renderFolderPagination() {
|
||
paginationControls.empty();
|
||
var prevBtn = $('<button class="folder-page-btn">上一页</button>');
|
||
var nextBtn = $('<button class="folder-page-btn">下一页</button>');
|
||
var pageInfo = $('<span style="font-size:12px;color:#666;">第 ' + page + ' 页</span>');
|
||
prevBtn.prop('disabled', page === 1);
|
||
nextBtn.prop('disabled', !hasMore);
|
||
prevBtn.click(async function () { if (page > 1) { page--; await loadSubFolderPage(); } });
|
||
nextBtn.click(async function () { if (hasMore) { page++; await loadSubFolderPage(); } });
|
||
paginationControls.append(prevBtn, pageInfo, nextBtn);
|
||
subFolderList.append(paginationControls);
|
||
}
|
||
|
||
container.append(folderItem);
|
||
container.append(subFolderList);
|
||
}
|
||
|
||
// ========== 右侧文件列表 ==========
|
||
|
||
function renderFileList(files) {
|
||
var container = $('#file-list');
|
||
container.empty();
|
||
if (!files || files.length === 0) {
|
||
container.html('<div class="file-empty">此文件夹为空</div>');
|
||
return;
|
||
}
|
||
files.forEach(function (f) {
|
||
var ext = (f.extension || f.name.split('.').pop() || '').toUpperCase();
|
||
var isImage = /^(JPG|JPEG|PNG|GIF|BMP|WEBP|SVG|ICO)$/.test(ext);
|
||
var isVideo = /^(MP4|AVI|MOV|WMV|FLV|MKV|WEBM)$/.test(ext);
|
||
var previewUrl = f.previewUrl || f.preview_url || f.downloadUrl || f.download_url || '';
|
||
var thumbHtml = '';
|
||
|
||
if (isImage && previewUrl) {
|
||
thumbHtml = '<div class="file-thumb"><img src="' + previewUrl + '" loading="lazy" onerror="this.parentNode.innerHTML=\'<span class=file-ext>' + ext.substring(0, 4) + '</span>\'"></div>';
|
||
} else if (isVideo) {
|
||
thumbHtml = '<div class="file-thumb file-thumb-video"><span class="file-ext">' + ext.substring(0, 4) + '</span><span class="play-icon">▶</span></div>';
|
||
} else {
|
||
thumbHtml = '<div class="file-ext">' + ext.substring(0, 4) + '</div>';
|
||
}
|
||
|
||
var fileItem = $(
|
||
'<div class="file-item">' +
|
||
'<input type="checkbox" ' +
|
||
'data-filekey="' + (f.id || f.fileKey || '') + '" ' +
|
||
'data-filename="' + (f.name || '') + '" ' +
|
||
'data-filesize="' + (f.size || 0) + '" ' +
|
||
'data-fileext="' + ext + '" ' +
|
||
'data-previewurl="' + previewUrl + '">' +
|
||
thumbHtml +
|
||
'<div class="file-info">' +
|
||
'<div class="name">' + (f.name || '文件') + '</div>' +
|
||
'<div class="size">' + formatSize(f.size) + '</div>' +
|
||
'</div></div>'
|
||
);
|
||
// 点击整行切换勾选
|
||
fileItem.click(function (e) {
|
||
if (e.target.type !== 'checkbox') {
|
||
var cb = $(this).find('input[type="checkbox"]');
|
||
cb.prop('checked', !cb.prop('checked'));
|
||
}
|
||
$(this).toggleClass('selected', $(this).find('input[type="checkbox"]').prop('checked'));
|
||
});
|
||
container.append(fileItem);
|
||
});
|
||
}
|
||
|
||
function formatSize(bytes) {
|
||
if (!bytes) return '';
|
||
bytes = parseInt(bytes);
|
||
if (bytes < 1024) return bytes + ' B';
|
||
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
|
||
if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
|
||
return (bytes / 1073741824).toFixed(1) + ' GB';
|
||
}
|
||
|
||
// ========== 搜索 ==========
|
||
|
||
$('#searchBtn').click(async function () {
|
||
searchKeyword = $('#search').val().trim();
|
||
if (!searchKeyword) {
|
||
// 清空搜索，重新加载当前文件夹
|
||
if (activeFolder) {
|
||
var files = await fetchFiles(activeFolder.id);
|
||
renderFileList(files);
|
||
}
|
||
return;
|
||
}
|
||
var files = await searchFiles(searchKeyword);
|
||
renderFileList(files);
|
||
});
|
||
|
||
$('#search').keyup(function (e) {
|
||
if (e.key === 'Enter') $('#searchBtn').click();
|
||
});
|
||
|
||
// ========== 上传文件 ==========
|
||
|
||
$('#uploadBtn').click(function () {
|
||
var input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.multiple = true;
|
||
input.style.display = 'none';
|
||
input.addEventListener('change', async function () {
|
||
var fileArr = Array.from(input.files);
|
||
if (fileArr.length === 0) return;
|
||
var folderId = window._currentFolderId || 0;
|
||
for (var i = 0; i < fileArr.length; i++) {
|
||
await uploadFile(fileArr[i], folderId);
|
||
}
|
||
// 上传完成后刷新文件列表（不刷新页面，保留缓存数据）
|
||
var files = await fetchFiles(folderId);
|
||
renderFileList(files);
|
||
// 自动勾选刚上传的文件
|
||
window._uploadedFiles.forEach(function (uf) {
|
||
var cb = document.querySelector('#file-list input[data-filekey="' + uf.fileKey + '"]');
|
||
if (cb && !cb.checked) {
|
||
cb.checked = true;
|
||
cb.closest('.file-item').classList.add('selected');
|
||
}
|
||
});
|
||
input.remove();
|
||
});
|
||
document.body.appendChild(input);
|
||
input.click();
|
||
});
|
||
|
||
async function uploadFile(file, folderId) {
|
||
var formData = new FormData();
|
||
formData.append('file', file);
|
||
formData.append('folderId', folderId || 0);
|
||
formData.append('fileName', file.name);
|
||
try {
|
||
var res = await $.ajax({
|
||
url: apiBase + '/upload',
|
||
type: 'POST',
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false
|
||
});
|
||
if (res.code !== 0) {
|
||
alert('上传失败：' + (res.message || '未知错误'));
|
||
return false;
|
||
}
|
||
// 缓存上传成功的文件信息供OK()返回
|
||
if (res.data) {
|
||
window._uploadedFiles.push({
|
||
fileKey: res.data.id || '',
|
||
fileName: res.data.name || file.name
|
||
});
|
||
}
|
||
return true;
|
||
} catch (e) {
|
||
alert('上传失败：网络错误');
|
||
return false;
|
||
}
|
||
}
|
||
});
|