u
This commit is contained in:
oneao committed
1 parent
04491e14a3
commit
12fdf320c2
12 files changed
+2493
-824
No files matched your search
+138
-12
@@ -23,16 +23,41 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #5D87FF;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-group button:hover {
|
||||
background: #4a6fcf;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<button id="reloadBtn">重新加载文件</button>
|
||||
<button id="reloadBtn2">重新加载文件2</button>
|
||||
<div class="button-group">
|
||||
<button id="reloadBtn">加载文件组1</button>
|
||||
<button id="reloadBtn2">加载文件组2</button>
|
||||
<button id="addFileBtn">添加文件</button>
|
||||
<button id="clearBtn">清空选择</button>
|
||||
<button id="destroyBtn">销毁组件</button>
|
||||
</div>
|
||||
|
||||
<div style="height: 600px;width: 400px;">
|
||||
<div style="height: 600px;width: 500px;">
|
||||
<div id="fileContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,32 +69,133 @@
|
||||
data: [
|
||||
{ name: 'test.jar', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/XI26033384.rar' },
|
||||
],
|
||||
permissions: {
|
||||
globalPermission: {
|
||||
select: true,
|
||||
upload: true,
|
||||
download: true,
|
||||
delete: true,
|
||||
view: true
|
||||
},
|
||||
onUpload: function () {
|
||||
console.log('Upload clicked');
|
||||
alert('上传功能');
|
||||
onUpload: function (pendingFiles) {
|
||||
console.log('上传文件:', pendingFiles);
|
||||
alert('上传功能，共 ' + pendingFiles.length + ' 个文件待上传');
|
||||
},
|
||||
onDelete: function (files, callback) {
|
||||
console.log('删除文件:', files);
|
||||
if (confirm('确定要删除 ' + files.length + ' 个文件吗？')) {
|
||||
callback(true);
|
||||
} else {
|
||||
callback(false);
|
||||
}
|
||||
},
|
||||
onPreview: function (files) {
|
||||
console.log('预览文件:', files);
|
||||
alert('预览文件: ' + files[0].name);
|
||||
},
|
||||
onSelect: function (files) {
|
||||
console.log('选择文件:', files);
|
||||
},
|
||||
getActionMenu: function (file) {
|
||||
const menuItems = [];
|
||||
|
||||
menuItems.push({
|
||||
title: '审批',
|
||||
onClick: function (f) {
|
||||
console.log('审批文件:', f.name);
|
||||
alert('审批功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '修改',
|
||||
onClick: function (f) {
|
||||
console.log('修改文件:', f.name);
|
||||
alert('修改功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '重命名',
|
||||
onClick: function (f) {
|
||||
console.log('重命名文件:', f.name);
|
||||
const newName = prompt('请输入新文件名:', f.name);
|
||||
if (newName && newName !== f.name) {
|
||||
console.log('文件已重命名为:', newName);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '复制',
|
||||
disabled: false,
|
||||
onClick: function (f) {
|
||||
console.log('复制文件:', f.name);
|
||||
alert('复制功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '移动到文件夹',
|
||||
disabled: false,
|
||||
onClick: function (f) {
|
||||
console.log('移动文件:', f.name);
|
||||
alert('移动功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '分享',
|
||||
disabled: false,
|
||||
onClick: function (f) {
|
||||
console.log('分享文件:', f.name);
|
||||
alert('分享功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
title: '历史版本',
|
||||
disabled: false,
|
||||
onClick: function (f) {
|
||||
console.log('查看历史版本:', f.name);
|
||||
alert('历史版本功能：' + f.name);
|
||||
}
|
||||
});
|
||||
|
||||
return menuItems;
|
||||
}
|
||||
});
|
||||
|
||||
$('#reloadBtn').click(function () {
|
||||
file.loadFiles([
|
||||
{ name: '测试文档1.pdf', uploadDate: '2024-01-15T10:30:00', url: '' },
|
||||
{ name: 'test.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
|
||||
file.setFiles([
|
||||
{ name: '测试文档1.pdf', size: 2048000, uploadDate: '2024-01-15T10:30:00', url: '' },
|
||||
{ name: 'test.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
|
||||
{ name: '项目报告.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: 'http://118.89.70.199:9000/test/report.docx' },
|
||||
]);
|
||||
});
|
||||
|
||||
$('#reloadBtn2').click(function () {
|
||||
file.loadFiles([
|
||||
{ name: '测试文档2.pdf', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: '' },
|
||||
file.setFiles([
|
||||
{ name: '测试文档2.pdf', size: 4096000, uploadDate: '2024-01-15T10:30:00', url: '' },
|
||||
{ name: '项目报告2.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: '' },
|
||||
{ name: '数据表.xlsx', size: 1572864, uploadDate: '2024-03-01T09:00:00', url: 'http://118.89.70.199:9000/test/data.xlsx' },
|
||||
{ name: '演示文稿.pptx', size: 3145728, uploadDate: '2024-03-05T16:30:00', url: '' },
|
||||
]);
|
||||
});
|
||||
|
||||
$('#addFileBtn').click(function () {
|
||||
file.$btnSelect.click();
|
||||
});
|
||||
|
||||
$('#clearBtn').click(function () {
|
||||
file.updateState({ selectedFiles: [] });
|
||||
});
|
||||
|
||||
$('#destroyBtn').click(function () {
|
||||
if (confirm('确定要销毁组件吗？')) {
|
||||
file.destroy();
|
||||
$('#fileContainer').html('<p style="text-align:center;padding:50px;color:#999;">组件已销毁</p>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in new issue
Block a user