156 lines
6.9 KiB
HTML
156 lines
6.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>文件选择</title>
|
|||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|||
|
|
body { display:flex; height:100vh; font-family:"Microsoft YaHei",Arial,sans-serif; background:#f5f5f7; }
|
|||
|
|
|
|||
|
|
/* 左侧文件夹树 */
|
|||
|
|
#sideBar {
|
|||
|
|
width:280px; background:#fff; border-right:1px solid #e0e0e0;
|
|||
|
|
overflow-y:auto; padding:12px; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.category { margin-bottom:12px; }
|
|||
|
|
.category-title {
|
|||
|
|
font-size:13px; font-weight:bold; color:#333; cursor:pointer;
|
|||
|
|
display:flex; align-items:center; gap:6px; padding:6px 0;
|
|||
|
|
}
|
|||
|
|
.category-title:hover { color:#e74c3c; }
|
|||
|
|
.folder-list { display:none; padding-left:16px; }
|
|||
|
|
.folder-item {
|
|||
|
|
cursor:pointer; padding:5px 8px; font-size:12px; color:#555;
|
|||
|
|
display:flex; align-items:center; gap:6px; border-radius:4px;
|
|||
|
|
}
|
|||
|
|
.folder-item:hover { background:#f8f9fa; }
|
|||
|
|
.folder-item.active { background:#fdedec; color:#e74c3c; }
|
|||
|
|
.folder-pagination { margin-top:4px; display:flex; gap:6px; }
|
|||
|
|
.folder-page-btn { padding:2px 8px; font-size:12px; color:#e74c3c; cursor:pointer; background:none; border:1px solid #ddd; border-radius:3px; }
|
|||
|
|
.folder-page-btn:hover { background:#f8f9fa; }
|
|||
|
|
|
|||
|
|
/* 右侧内容区 */
|
|||
|
|
#content { flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; }
|
|||
|
|
.search-bar { display:flex; gap:8px; margin-bottom:12px; flex-shrink:0; }
|
|||
|
|
.search-bar input { flex:1; padding:8px 12px; border:1px solid #ddd; border-radius:6px; font-size:13px; }
|
|||
|
|
.search-bar input:focus { outline:none; border-color:#e74c3c; }
|
|||
|
|
.search-bar button { padding:8px 16px; background:#e74c3c; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; }
|
|||
|
|
.search-bar button:hover { background:#c0392b; }
|
|||
|
|
.search-bar .upload-btn { background:#3498db; }
|
|||
|
|
.search-bar .upload-btn:hover { background:#2980b9; }
|
|||
|
|
|
|||
|
|
/* 文件列表 */
|
|||
|
|
#file-list { flex:1; overflow-y:auto; }
|
|||
|
|
.file-item {
|
|||
|
|
display:flex; align-items:center; gap:10px; padding:10px 12px;
|
|||
|
|
background:#fff; border:1px solid #eee; border-radius:6px;
|
|||
|
|
margin-bottom:6px; cursor:pointer; transition:border-color 0.15s;
|
|||
|
|
}
|
|||
|
|
.file-item:hover { border-color:#e74c3c; }
|
|||
|
|
.file-item.selected { border-color:#e74c3c; background:#fdedec; }
|
|||
|
|
.file-item input[type="checkbox"] { margin-right:4px; flex-shrink:0; }
|
|||
|
|
.file-item .file-ext {
|
|||
|
|
width:32px; height:32px; background:#f0f0f0; border-radius:4px;
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
font-size:11px; font-weight:bold; color:#666; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.file-thumb {
|
|||
|
|
width:48px; height:48px; border-radius:4px; overflow:hidden;
|
|||
|
|
flex-shrink:0; position:relative; background:#f0f0f0;
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
}
|
|||
|
|
.file-thumb img {
|
|||
|
|
width:100%; height:100%; object-fit:cover;
|
|||
|
|
}
|
|||
|
|
.file-thumb-video {
|
|||
|
|
background:#333;
|
|||
|
|
}
|
|||
|
|
.file-thumb-video .play-icon {
|
|||
|
|
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
|
|||
|
|
width:24px; height:24px; background:rgba(255,255,255,0.8);
|
|||
|
|
border-radius:50%; display:flex; align-items:center; justify-content:center;
|
|||
|
|
font-size:10px; color:#333;
|
|||
|
|
}
|
|||
|
|
.file-item .file-info { flex:1; min-width:0; }
|
|||
|
|
.file-item .file-info .name { font-size:13px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|||
|
|
.file-item .file-info .size { font-size:11px; color:#999; margin-top:2px; }
|
|||
|
|
.file-empty { text-align:center; padding:40px; color:#ccc; font-size:14px; }
|
|||
|
|
|
|||
|
|
/* 分页 */
|
|||
|
|
.pagination { display:flex; justify-content:center; gap:6px; padding:12px 0; flex-shrink:0; }
|
|||
|
|
.pagination button { padding:4px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; }
|
|||
|
|
.pagination button:hover { border-color:#e74c3c; color:#e74c3c; }
|
|||
|
|
.pagination button:disabled { opacity:0.4; cursor:default; color:#999; }
|
|||
|
|
.pagination span { font-size:12px; color:#666; line-height:28px; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 左侧文件夹树（暂屏蔽）
|
|||
|
|
<div id="sideBar"></div>
|
|||
|
|
-->
|
|||
|
|
<div id="content">
|
|||
|
|
<div class="search-bar">
|
|||
|
|
<input type="text" id="search" placeholder="搜索文件...">
|
|||
|
|
<button id="searchBtn">搜索</button>
|
|||
|
|
<button id="uploadBtn" class="upload-btn">上传文件</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="file-list"></div>
|
|||
|
|
<div id="file-pagination" class="pagination"></div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../js/fileUploadBiz.js"></script>
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 弹框确认时调用，返回勾选的文件信息JSON字符串
|
|||
|
|
* 格式: { folderId: "xxx", files: [{fileKey, fileName, fileSize, fileExtension, previewUrl}, ...] }
|
|||
|
|
*/
|
|||
|
|
// 从父页面获取资产编号
|
|||
|
|
var oldValue;
|
|||
|
|
try {
|
|||
|
|
oldValue = window.parentDialogObj['fileRefDialog'].getTransParams().oldValue;
|
|||
|
|
console.log('父页面传入的参数:', JSON.stringify(oldValue));
|
|||
|
|
} catch(e) {
|
|||
|
|
console.warn('获取父页面参数异常:', e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function OK() {
|
|||
|
|
var files = [];
|
|||
|
|
// 1. 解析已有文件（oldValue）
|
|||
|
|
try {
|
|||
|
|
if (oldValue && typeof oldValue === 'string' && oldValue.length > 2) {
|
|||
|
|
var oldFiles = JSON.parse(oldValue);
|
|||
|
|
if (Array.isArray(oldFiles)) {
|
|||
|
|
oldFiles.forEach(function (f) {
|
|||
|
|
files.push({ fileKey: f.id || f.fileKey || '', fileName: f.name || f.fileName || '' });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {}
|
|||
|
|
// 2. 追加勾选的文件（去重）
|
|||
|
|
document.querySelectorAll('#file-list input[type="checkbox"]:checked').forEach(function (cb) {
|
|||
|
|
var fk = cb.getAttribute('data-filekey');
|
|||
|
|
var dup = files.some(function (f) { return f.fileKey === fk; });
|
|||
|
|
if (!dup) {
|
|||
|
|
files.push({
|
|||
|
|
fileKey: fk,
|
|||
|
|
fileName: cb.getAttribute('data-filename')
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 3. 如果没有勾选，追加本次上传成功的文件
|
|||
|
|
if (window._uploadedFiles && window._uploadedFiles.length > 0) {
|
|||
|
|
window._uploadedFiles.forEach(function (uf) {
|
|||
|
|
var dup = files.some(function (f) { return f.fileKey === uf.fileKey; });
|
|||
|
|
if (!dup) files.push(uf);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return JSON.stringify({
|
|||
|
|
folderId: window._currentFolderId || '',
|
|||
|
|
files: files
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|