431 lines
11 KiB
HTML
431 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>G3File Demo</title>
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.min.js"></script>
|
|
|
|
<!-- G3File 依赖 -->
|
|
<script type="text/javascript" src="./g3-file/language.js"></script>
|
|
<script type="text/javascript" src="./g3-file/icon.js"></script>
|
|
<script type="text/javascript" src="./g3-file/common.js"></script>
|
|
<script type="text/javascript" src="./g3-file/index.js"></script>
|
|
|
|
<!-- 样式 -->
|
|
<link rel="stylesheet" href="./g3-file/index.css" />
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
background: #ffffff;
|
|
padding: 20px 30px;
|
|
border-bottom: 1px solid #eef0f2;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
color: #1f2329;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 14px;
|
|
color: #646a73;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.container {
|
|
padding: 30px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-section {
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section-header {
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #f0f1f5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 16px;
|
|
color: #1f2329;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
color: #606266;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #f5f7fa;
|
|
border-color: #c0c4cc;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #5D87FF;
|
|
border-color: #5D87FF;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #4a6fcf;
|
|
border-color: #4a6fcf;
|
|
}
|
|
|
|
.file-container {
|
|
height: 400px;
|
|
border: 1px dashed #dcdfe6;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.console {
|
|
background: #1f2329;
|
|
color: #e6e6e6;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 13px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.console .log {
|
|
color: #909399;
|
|
}
|
|
|
|
.console .success {
|
|
color: #67c23a;
|
|
}
|
|
|
|
.console .warning {
|
|
color: #e6a23c;
|
|
}
|
|
|
|
.console .error {
|
|
color: #f56c6c;
|
|
}
|
|
|
|
.info-box {
|
|
background: #ecf5ff;
|
|
border-left: 4px solid #5D87FF;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.info-box p {
|
|
margin: 0;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #f0f1f5;
|
|
}
|
|
|
|
.tab {
|
|
font-size: 14px;
|
|
color: #646a73;
|
|
cursor: pointer;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab.active {
|
|
color: #5D87FF;
|
|
border-bottom-color: #5D87FF;
|
|
}
|
|
|
|
.code-block {
|
|
background: #f5f7fa;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 13px;
|
|
overflow-x: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>G3File 文件管理组件</h1>
|
|
<p>演示文件上传、预览、下载、删除等功能</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- 基础功能演示 -->
|
|
<div class="demo-section">
|
|
<div class="section-header">
|
|
<h2>基础功能演示</h2>
|
|
<div class="button-group">
|
|
<button class="btn" onclick="reloadFiles()">重新加载</button>
|
|
<button class="btn" onclick="clearSelection()">清空选择</button>
|
|
<button class="btn btn-primary" onclick="addFiles()">添加文件</button>
|
|
</div>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="info-box">
|
|
<p><strong>提示：</strong>双击文件可预览（如果配置了预览地址且文件已上传），或触发自定义双击事件。</p>
|
|
</div>
|
|
<div id="basicDemo" class="file-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 回调事件演示 -->
|
|
<div class="demo-section">
|
|
<div class="section-header">
|
|
<h2>回调事件演示</h2>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="info-box">
|
|
<p><strong>提示：</strong>操作文件时，下方控制台会显示相应的回调信息。</p>
|
|
</div>
|
|
<div id="eventDemo" class="file-container"></div>
|
|
<div style="margin-top: 20px;">
|
|
<h3 style="font-size: 14px; margin-bottom: 10px; color: #606266;">事件日志：</h3>
|
|
<div id="eventConsole" class="console"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API 操作演示 -->
|
|
<div class="demo-section">
|
|
<div class="section-header">
|
|
<h2>API 操作演示</h2>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="button-group">
|
|
<button class="btn" onclick="getSelected()">获取选中文件</button>
|
|
<button class="btn" onclick="getFileCount()">获取文件数量</button>
|
|
<button class="btn" onclick="updateFileList()">更新文件列表</button>
|
|
<button class="btn btn-primary" onclick="destroyComponent()">销毁组件</button>
|
|
</div>
|
|
<div id="apiDemo" class="file-container"></div>
|
|
<div style="margin-top: 20px;">
|
|
<h3 style="font-size: 14px; margin-bottom: 10px; color: #606266;">API 调用结果：</h3>
|
|
<div id="apiResult" class="console"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 全局变量存储组件实例
|
|
var basicFile = null;
|
|
var eventFile = null;
|
|
var apiFile = null;
|
|
|
|
// 模拟文件数据
|
|
var mockFiles = [
|
|
{
|
|
name: '项目需求文档.pdf',
|
|
size: 2048000,
|
|
uploadDate: '2024-01-15T10:30:00',
|
|
url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg'
|
|
},
|
|
{
|
|
name: '设计稿.png',
|
|
size: 1536000,
|
|
uploadDate: '2024-01-16T14:20:00',
|
|
url: ''
|
|
},
|
|
{
|
|
name: '数据报表.xlsx',
|
|
size: 1024000,
|
|
uploadDate: '2024-01-17T09:15:00',
|
|
url: 'http://118.89.70.199:9000/test/data.xlsx'
|
|
},
|
|
{
|
|
name: '会议记录.docx',
|
|
size: 512000,
|
|
uploadDate: '2024-01-18T16:45:00',
|
|
url: ''
|
|
}
|
|
];
|
|
|
|
function logEvent(type, message) {
|
|
var consoleEl = document.getElementById('eventConsole');
|
|
var colorClass = 'log';
|
|
if (type === 'success') colorClass = 'success';
|
|
else if (type === 'warning') colorClass = 'warning';
|
|
else if (type === 'error') colorClass = 'error';
|
|
|
|
var time = new Date().toLocaleTimeString();
|
|
consoleEl.innerHTML += '<span class="' + colorClass + '">[' + time + '] ' + message + '</span>\n';
|
|
consoleEl.scrollTop = consoleEl.scrollHeight;
|
|
}
|
|
|
|
function logApiResult(message) {
|
|
var resultEl = document.getElementById('apiResult');
|
|
var time = new Date().toLocaleTimeString();
|
|
resultEl.innerHTML += '[' + time + '] ' + message + '\n';
|
|
resultEl.scrollTop = resultEl.scrollHeight;
|
|
}
|
|
|
|
$(function () {
|
|
// 基础功能演示
|
|
basicFile = $('#basicDemo').G3File({
|
|
data: mockFiles,
|
|
previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
|
|
customActionMenu: function (file) {
|
|
return [
|
|
{
|
|
title: '审核',
|
|
onClick: function (f) {
|
|
alert('审核文件: ' + f.name);
|
|
}
|
|
},
|
|
{
|
|
title: '编辑',
|
|
onClick: function (f) {
|
|
alert('编辑文件: ' + f.name);
|
|
}
|
|
}
|
|
];
|
|
}
|
|
});
|
|
|
|
// 回调事件演示
|
|
eventFile = $('#eventDemo').G3File({
|
|
data: mockFiles.slice(0, 2),
|
|
onSelect: function (files) {
|
|
logEvent('success', 'onSelect: 选中了 ' + files.length + ' 个文件');
|
|
},
|
|
onUpload: function (pendingFiles) {
|
|
logEvent('success', 'onUpload: 开始上传 ' + pendingFiles.length + ' 个文件');
|
|
},
|
|
onUploadBefore: function (pendingFiles) {
|
|
logEvent('warning', 'onUploadBefore: 准备上传 ' + pendingFiles.length + ' 个文件');
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
logEvent('success', 'onUploadBefore: 确认上传');
|
|
resolve(true);
|
|
}, 500);
|
|
});
|
|
},
|
|
onUploadSuccess: function (file) {
|
|
logEvent('success', 'onUploadSuccess: 上传成功 - ' + file.name);
|
|
},
|
|
onUploadError: function (file, error) {
|
|
logEvent('error', 'onUploadError: 上传失败 - ' + file.name + ', 错误: ' + error);
|
|
},
|
|
onUploadComplete: function (successCount, failCount) {
|
|
logEvent('success', 'onUploadComplete: 上传完成 - ' + successCount + '成功, ' + failCount + '失败');
|
|
},
|
|
onDelete: function (files) {
|
|
logEvent('success', 'onDelete: 删除了 ' + files.length + ' 个文件');
|
|
}
|
|
});
|
|
|
|
// API 操作演示
|
|
apiFile = $('#apiDemo').G3File({
|
|
data: mockFiles.slice(2),
|
|
onSelect: function (files) {
|
|
logApiResult('选中文件: ' + files.length + ' 个');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 基础演示操作
|
|
function reloadFiles() {
|
|
basicFile.setFiles(mockFiles);
|
|
alert('文件已重新加载');
|
|
}
|
|
|
|
function clearSelection() {
|
|
basicFile.updateState({ selectedFiles: [] });
|
|
}
|
|
|
|
function addFiles() {
|
|
basicFile.$btnSelect.click();
|
|
}
|
|
|
|
// API 演示操作
|
|
function getSelected() {
|
|
var selected = apiFile.getSelectedFiles();
|
|
logApiResult('选中的文件: ' + selected.map(f => f.name).join(', ') || '无');
|
|
}
|
|
|
|
function getFileCount() {
|
|
var count = apiFile.files.length;
|
|
var uploadedCount = apiFile.getUploadedFiles().length;
|
|
logApiResult('文件总数: ' + count + ', 已上传: ' + uploadedCount);
|
|
}
|
|
|
|
function updateFileList() {
|
|
var newFiles = [
|
|
{
|
|
name: '新文件_' + Date.now() + '.txt',
|
|
size: 1024,
|
|
uploadDate: new Date().toISOString(),
|
|
url: ''
|
|
}
|
|
];
|
|
apiFile.setFiles(newFiles);
|
|
logApiResult('文件列表已更新');
|
|
}
|
|
|
|
function destroyComponent() {
|
|
if (confirm('确定要销毁组件吗？')) {
|
|
apiFile.destroy();
|
|
$('#apiDemo').html('<p style="text-align:center; padding:50px; color:#999;">组件已销毁</p>');
|
|
logApiResult('组件已销毁');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |