完成初版
This commit is contained in:
@@ -0,0 +1,311 @@
|
||||
/* 文件上传控件样式 */
|
||||
.file-upload-box {
|
||||
width: 100%;
|
||||
}
|
||||
.file-upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.file-upload-btn:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
.file-upload-btn::before {
|
||||
content: "📎";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 已上传文件列表 */
|
||||
.file-upload-list {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.file-upload-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.file-upload-item .file-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-upload-item .file-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
}
|
||||
.file-upload-item .file-size {
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-upload-item .file-del {
|
||||
color: #e74c3c;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-upload-item .file-del:hover {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* 文件选择弹框 */
|
||||
.file-picker-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 100000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.file-picker {
|
||||
width: 700px;
|
||||
max-width: 90vw;
|
||||
max-height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
}
|
||||
.file-picker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-picker-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.file-picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 22px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.file-picker-close:hover {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.file-picker-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-picker-toolbar .breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-picker-toolbar .breadcrumb-item {
|
||||
cursor: pointer;
|
||||
color: #e74c3c;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-picker-toolbar .breadcrumb-item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.file-picker-toolbar .breadcrumb-sep {
|
||||
color: #ccc;
|
||||
}
|
||||
.file-picker-toolbar .breadcrumb-current {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-picker-toolbar .toolbar-btn {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-picker-toolbar .toolbar-btn:hover {
|
||||
border-color: #e74c3c;
|
||||
color: #e74c3c;
|
||||
}
|
||||
.file-picker-toolbar .toolbar-btn.upload-btn {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border-color: #e74c3c;
|
||||
}
|
||||
.file-picker-toolbar .toolbar-btn.upload-btn:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
/* 文件列表 */
|
||||
.file-picker-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.file-picker-empty {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
.file-picker-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-picker-folder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: calc(50% - 4px);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.file-picker-folder:hover {
|
||||
border-color: #e74c3c;
|
||||
background: #fef8f7;
|
||||
}
|
||||
.file-picker-folder .folder-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-picker-folder .folder-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-picker-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: calc(50% - 4px);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.file-picker-file:hover {
|
||||
border-color: #e74c3c;
|
||||
background: #fef8f7;
|
||||
}
|
||||
.file-picker-file .file-icon-sm {
|
||||
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-picker-file .file-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.file-picker-file .file-info .name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-picker-file .file-info .size {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.file-picker-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-picker-footer .selected-count {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.file-picker-footer .footer-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-picker-footer .footer-btns button {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.file-picker-footer .btn-confirm {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
}
|
||||
.file-picker-footer .btn-confirm:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
.file-picker-footer .btn-cancel {
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,253 @@
|
||||
(function (factory) {
|
||||
var nameSpace = 'field_88661234567890123457';
|
||||
if (!window[nameSpace]) {
|
||||
var Builder = factory();
|
||||
window[nameSpace] = { instance: {} };
|
||||
window[nameSpace].init = function (options) {
|
||||
window[nameSpace].instance[options.privateId] = new Builder(options);
|
||||
};
|
||||
}
|
||||
})(function () {
|
||||
function App(options) {
|
||||
var self = this;
|
||||
self.adaptation = options.adaptation;
|
||||
self.privateId = options.privateId;
|
||||
self.preUrl = options.url_prefix;
|
||||
self.adaptation.formMessage = options.formMessage;
|
||||
self.messageObj = options.getData;
|
||||
self.folderId = ''; // 网盘文件夹ID，从弹框返回时更新
|
||||
self.initDom();
|
||||
self.events();
|
||||
}
|
||||
App.prototype = {
|
||||
initDom: function () {
|
||||
var self = this;
|
||||
self.appendChildDom();
|
||||
},
|
||||
|
||||
events: function () {
|
||||
var self = this;
|
||||
self.adaptation.ObserverEvent.listen('Event' + self.privateId, function () {
|
||||
self.messageObj = self.adaptation.childrenGetData(self.privateId);
|
||||
self.appendChildDom();
|
||||
});
|
||||
},
|
||||
|
||||
appendChildDom: function () {
|
||||
var self = this;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
console.log(params)
|
||||
const openFrom = params.get('openFrom'); // 返回"2025"
|
||||
const type = params.get('type');
|
||||
console.log(openFrom)
|
||||
console.log(type)
|
||||
var edit = !((openFrom != null && (openFrom =='listPending' || openFrom =='listDone' || openFrom =='listSent'))||(type != null && type =='browse'));
|
||||
console.log(edit)
|
||||
var domStructure = '<section class="cap4-attach is-one">' +
|
||||
'<div class="cap4-attach__left field-title" style="width: 70px;">'+
|
||||
'<div class="cap4-attach__label" style="text-align: right;">'+
|
||||
'<span class="label-margin" style="font-family: "Microsoft YaHei"; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; text-align: right; color: rgb(51, 51, 51); background: transparent;">'
|
||||
+ self.messageObj.display.escapeHTML()
|
||||
+ '</span></div></div>'
|
||||
+ '<div class="cap4-attach__right field-content-wrapper" style="margin-left: 77px;">'
|
||||
+'<div class="cap4-attach__cnt field-content" style="border: 1px solid rgb(212, 212, 212); width: 100%;">'
|
||||
+'<div class="cap4-attach__items ' + self.privateId + '"></div>'
|
||||
+ (edit ? '<div class="cap4-attach__picker ' + self.privateId + '"><div class="icon CAP cap-icon-fujian" style="height: 100%;"></div></idv>' : '')
|
||||
+ '</div>'
|
||||
+ '</section>';
|
||||
document.querySelector('#' + self.privateId).innerHTML = domStructure;
|
||||
var fileRef = function() {
|
||||
self.redirectToNewPage(self.privateId, self.messageObj, self.adaptation)
|
||||
}
|
||||
var attachArea = document.querySelector('.cap4-attach__items' + '.' + self.privateId);
|
||||
attachArea.innerHTML = "";
|
||||
if (self.messageObj.value) {
|
||||
console.log(self.messageObj.value)
|
||||
var values = JSON.parse(self.messageObj.value);
|
||||
var outFileDiv = document.createElement('div');
|
||||
attachArea.appendChild(outFileDiv);
|
||||
values.forEach(function(item) {
|
||||
// 创建一个新的 div 来包含超链接和文件名
|
||||
var fileDiv = document.createElement('div');
|
||||
fileDiv.className = "cap4-attach__att1 not-custome-btn";
|
||||
// 创建超链接元素
|
||||
var fileRightDiv = document.createElement('div');
|
||||
fileRightDiv.className = "cap4-attach__att";
|
||||
var innerArea = '<div class="cap4-attach__aleft"><i class="icon iconfont emptyfile" style="color: rgb(127, 142, 180);"></i></div>'
|
||||
+'<div class="cap4-attach__aright" style="border: 0px solid rgb(212, 212, 212);">'
|
||||
+'<span style="color: rgb(255, 65, 65);"></span>'
|
||||
+ '<span class="goToNewPage" style="word-break: break-all;" data-href="'+ item.previewUrl + '">'+item.name+'</span>'+ (edit ? '<em class="ico16 affix_del_16 '+ self.privateId+'"></em>' : '')
|
||||
+'</div>'
|
||||
fileRightDiv.innerHTML = innerArea;
|
||||
fileDiv.appendChild(fileRightDiv);
|
||||
outFileDiv.appendChild(fileDiv);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
var content = self.messageObj.formdata.content;
|
||||
const picker = document.querySelector('.cap4-attach__picker' + '.' + self.privateId);
|
||||
if(picker) {
|
||||
document.querySelector('.cap4-attach__picker' + '.' + self.privateId).removeEventListener(
|
||||
'click', fileRef);
|
||||
document.querySelector('.cap4-attach__picker' + '.' + self.privateId).addEventListener(
|
||||
'click', fileRef);
|
||||
}
|
||||
const goNewPages = document.querySelectorAll('.goToNewPage');
|
||||
if(goNewPages.length > 0){
|
||||
goNewPages.forEach(element => {
|
||||
element.addEventListener('click', function(e) {
|
||||
console.log(e.currentTarget.dataset.href)
|
||||
window.open(e.currentTarget.dataset.href, '_blank'); //
|
||||
});
|
||||
});
|
||||
}
|
||||
const deleteList = document.querySelectorAll('.ico16.' + self.privateId);
|
||||
if (deleteList.length > 0) {
|
||||
deleteList.forEach(element => {
|
||||
element.addEventListener('click', function (e) {
|
||||
console.log("触发删除操作");
|
||||
|
||||
let current = e.target;
|
||||
while (current && current !== document.documentElement) {
|
||||
if (
|
||||
current.classList.contains('cap4-attach__att1') &&
|
||||
current.classList.contains('not-custome-btn')
|
||||
) {
|
||||
console.log("开始清除");
|
||||
current.remove();
|
||||
break;
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
//渲染隐藏权限
|
||||
if (self.messageObj.auth === 'hide') {
|
||||
document.querySelector('#' + self.privateId).innerHTML =
|
||||
'<div class="cap4-text__browse" style="line-height: 1.8; color: rgb(0, 0, 0) !important;">***</div>';
|
||||
}
|
||||
},
|
||||
|
||||
/** 打开致远弹框 */
|
||||
redirectToNewPage: function (privateId, messageObj, adaptation) {
|
||||
var self = this;
|
||||
// 拼接folderId参数到弹框URL
|
||||
var tableName = messageObj.formdata.alldata.tableInfo.formmain.tableName
|
||||
var targetObj = messageObj.formdata.formmains[adaptation.formMessage.tableName];
|
||||
var oldValue = targetObj[privateId].showValue;
|
||||
if (!targetObj) return;
|
||||
var assetNo;
|
||||
for (var key in targetObj) {
|
||||
if (targetObj.hasOwnProperty(key) && !/^auxiliary/.test(key)) {
|
||||
if (targetObj[key].display === "资产编号") {
|
||||
assetNo = targetObj[key].showValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var dialogUrl = self.preUrl + '/html/fileUpload.html?bizId=' + assetNo;
|
||||
var dialog = $.dialog({
|
||||
id: 'fileRefDialog',
|
||||
url: dialogUrl,
|
||||
width: 1080,
|
||||
height: 720,
|
||||
title: '关联附件',
|
||||
type: 'panel',
|
||||
checkMax: true,
|
||||
transParams: { oldValue: oldValue},
|
||||
closeParam: { show: false, autoClose: false, handler: function () {} },
|
||||
buttons: [{
|
||||
text: '确认',
|
||||
handler: function () {
|
||||
var result = dialog.getReturnValue();
|
||||
console.log(result)
|
||||
if (result) {
|
||||
try {
|
||||
var data = JSON.parse(result);
|
||||
var selected = data.files || [];
|
||||
|
||||
if (selected.length > 0) {
|
||||
// 合并到已有文件列表
|
||||
|
||||
messageObj = adaptation.childrenGetData(privateId);
|
||||
saveFiles(selected, messageObj.id, messageObj.display, privateId,messageObj, adaptation,tableName);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析返回值失败:', e);
|
||||
}
|
||||
}
|
||||
dialog.close();
|
||||
}
|
||||
}, {
|
||||
text: '取消',
|
||||
handler: function () { dialog.close(); }
|
||||
}]
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
/** 保存文件列表到表单 */
|
||||
function saveFiles(files, fieldName, fieldDisplay, privateId, messageObj, adaptation,tableName) {
|
||||
var self = this;
|
||||
var param = new Object();
|
||||
param.masterId = messageObj.formdata.content.contentDataId;
|
||||
param.formId = messageObj.formdata.content.contentTemplateId;
|
||||
param.fieldDisplay = fieldDisplay;
|
||||
param.value = files;
|
||||
param.isFile = 'true';
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: '/seeyon/rest/assetsRegion/formBackFill',
|
||||
data: JSON.stringify(param),
|
||||
dataType: "json",
|
||||
contentType: 'application/json;charset=UTF-8',
|
||||
success: function(res) {
|
||||
// 后台解析数据后 将数据填写到表单中
|
||||
if (res.code == 0) {
|
||||
var backfill = {};
|
||||
backfill.tableName = tableName;
|
||||
// 回填主表
|
||||
backfill.tableCategory = 'formmain';
|
||||
// 后台组装的data数据
|
||||
console.log(res.data)
|
||||
backfill.updateData = res.data;
|
||||
adaptation.backfillFormControlData(backfill, privateId);
|
||||
} else {
|
||||
// 报错
|
||||
$.alert(res.message);
|
||||
}
|
||||
},
|
||||
complete: function() {},
|
||||
error: function(e) {
|
||||
top.$.error(e.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
var dynamicLoading = {
|
||||
css: function(path) {
|
||||
if (!path || path.length === 0) {
|
||||
throw new Error('argument "path" is required !');
|
||||
}
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var link = document.createElement('link');
|
||||
link.href = path;
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
head.appendChild(link);
|
||||
},
|
||||
js: function(path) {
|
||||
if (!path || path.length === 0) {
|
||||
throw new Error('argument "path" is required !');
|
||||
}
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var script = document.createElement('script');
|
||||
script.src = path;
|
||||
script.type = 'text/javascript';
|
||||
head.appendChild(script);
|
||||
}
|
||||
}
|
||||
return App;
|
||||
});
|
||||
@@ -0,0 +1,329 @@
|
||||
$(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;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user