|
|
@@ -24,14 +24,30 @@
|
|
|
<div class="upload-area" id="uploadArea">
|
|
|
<i class="layui-icon layui-icon-upload-drag"></i>
|
|
|
<p>点击上传文件或将文件拖拽到此处</p>
|
|
|
- <p style="font-size: 12px; margin-top: 5px;">支持 jpg、png、gif、pdf、doc、docx、xls、xlsx 等格式</p>
|
|
|
+ <p style="font-size: 12px; margin-top: 5px;">支持 jpg、png、gif、pdf、doc、docx、xls、xlsx、zip、rar 等格式</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form" style="margin-bottom: 15px;">
|
|
|
<div class="layui-inline">
|
|
|
- <input type="text" name="keyword" placeholder="搜索文件名" class="layui-input">
|
|
|
+ <select name="fileType" id="fileTypeSelect" class="layui-select" style="width: 120px;">
|
|
|
+ <option value="">全部类型</option>
|
|
|
+ <option value="jpg">JPG</option>
|
|
|
+ <option value="png">PNG</option>
|
|
|
+ <option value="gif">GIF</option>
|
|
|
+ <option value="pdf">PDF</option>
|
|
|
+ <option value="doc">DOC</option>
|
|
|
+ <option value="docx">DOCX</option>
|
|
|
+ <option value="xls">XLS</option>
|
|
|
+ <option value="xlsx">XLSX</option>
|
|
|
+ <option value="zip">ZIP</option>
|
|
|
+ <option value="rar">RAR</option>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
- <button type="button" class="layui-btn" id="btnSearch"><i class="layui-icon layui-icon-search"></i></button>
|
|
|
+ <div class="layui-inline">
|
|
|
+ <input type="text" name="keyword" id="keywordInput" placeholder="搜索文件名" class="layui-input">
|
|
|
+ </div>
|
|
|
+ <button type="button" class="layui-btn" id="btnSearch"><i class="layui-icon layui-icon-search"></i> 搜索</button>
|
|
|
+ <button type="button" class="layui-btn layui-btn-normal" id="btnReset"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="file-list" id="fileList">
|
|
|
@@ -45,20 +61,45 @@
|
|
|
<script src="../../js/config.js"></script>
|
|
|
<script src="../../js/common.js"></script>
|
|
|
<script>
|
|
|
- layui.use(['layer', 'upload', 'laypage'], function() {
|
|
|
+ layui.use(['layer', 'upload', 'laypage', 'form'], function() {
|
|
|
var layer = layui.layer;
|
|
|
var upload = layui.upload;
|
|
|
var laypage = layui.laypage;
|
|
|
+ var form = layui.form;
|
|
|
var $ = layui.jquery;
|
|
|
|
|
|
- var files = [];
|
|
|
var currentPage = 1;
|
|
|
var pageSize = 12;
|
|
|
+ var total = 0;
|
|
|
+
|
|
|
+ // 加载文件列表
|
|
|
+ function loadFileList() {
|
|
|
+ var params = {
|
|
|
+ pageNumber: currentPage,
|
|
|
+ pageSize: pageSize,
|
|
|
+ fileName: $('#keywordInput').val(),
|
|
|
+ fileType: $('#fileTypeSelect').val()
|
|
|
+ };
|
|
|
+
|
|
|
+ Common.ajax({
|
|
|
+ url: Config.api.file.page,
|
|
|
+ type: 'POST',
|
|
|
+ data: params,
|
|
|
+ success: function(res) {
|
|
|
+ // 兼容直接返回 Page 对象和包装格式
|
|
|
+ var data = res.data || res;
|
|
|
+ total = data.totalRow || data.total || 0;
|
|
|
+ renderFileList(data.records || data.list || []);
|
|
|
+ renderPagination();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
// 上传组件
|
|
|
upload.render({
|
|
|
elem: '#uploadArea',
|
|
|
url: Config.getApiUrl(Config.api.file.upload),
|
|
|
+ accept: 'file', // 支持所有文件类型
|
|
|
headers: function() {
|
|
|
var token = localStorage.getItem('token');
|
|
|
return token ? { 'Authorization': token } : {};
|
|
|
@@ -66,8 +107,7 @@
|
|
|
done: function(res) {
|
|
|
if (res.code === 200) {
|
|
|
Common.success('上传成功');
|
|
|
- files.unshift(res.data);
|
|
|
- renderFileList();
|
|
|
+ loadFileList();
|
|
|
} else {
|
|
|
Common.error(res.msg || '上传失败');
|
|
|
}
|
|
|
@@ -79,36 +119,45 @@
|
|
|
|
|
|
// 搜索
|
|
|
$('#btnSearch').click(function() {
|
|
|
- var keyword = $('input[name="keyword"]').val().toLowerCase();
|
|
|
- renderFileList(keyword);
|
|
|
+ currentPage = 1;
|
|
|
+ loadFileList();
|
|
|
});
|
|
|
|
|
|
- // 渲染文件列表
|
|
|
- function renderFileList(keyword) {
|
|
|
- var filtered = files;
|
|
|
- if (keyword) {
|
|
|
- filtered = files.filter(function(f) {
|
|
|
- return f.originalName.toLowerCase().indexOf(keyword) !== -1;
|
|
|
- });
|
|
|
+ // 重置
|
|
|
+ $('#btnReset').click(function() {
|
|
|
+ $('#keywordInput').val('');
|
|
|
+ $('#fileTypeSelect').val('');
|
|
|
+ layui.form.render('select');
|
|
|
+ currentPage = 1;
|
|
|
+ loadFileList();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 回车搜索
|
|
|
+ $('#keywordInput').on('keypress', function(e) {
|
|
|
+ if (e.which === 13) {
|
|
|
+ currentPage = 1;
|
|
|
+ loadFileList();
|
|
|
}
|
|
|
-
|
|
|
- var start = (currentPage - 1) * pageSize;
|
|
|
- var end = start + pageSize;
|
|
|
- var pageData = filtered.slice(start, end);
|
|
|
-
|
|
|
+ });
|
|
|
+
|
|
|
+ // 渲染文件列表
|
|
|
+ function renderFileList(files) {
|
|
|
var html = '';
|
|
|
- pageData.forEach(function(file) {
|
|
|
- var isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(file.originalName);
|
|
|
+ files.forEach(function(file) {
|
|
|
+ var fileName = file.originalFilename || file.filename || '';
|
|
|
+ var fileUrl = file.url || '';
|
|
|
+ var isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(fileName);
|
|
|
var preview = isImage
|
|
|
- ? '<img src="' + file.url + '" alt="' + file.originalName + '">'
|
|
|
+ ? '<img src="' + fileUrl + '" alt="' + fileName + '">'
|
|
|
: '<div style="height:120px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border-radius:4px;"><i class="layui-icon layui-icon-file-b" style="font-size:48px; color:#999;"></i></div>';
|
|
|
|
|
|
html += '<div class="file-item">';
|
|
|
html += preview;
|
|
|
- html += '<div class="file-name" title="' + file.originalName + '">' + file.originalName + '</div>';
|
|
|
+ html += '<div class="file-name" title="' + fileName + '">' + fileName + '</div>';
|
|
|
html += '<div class="file-actions">';
|
|
|
- html += '<a href="javascript:;" onclick="copyUrl(\'' + file.url + '\')">复制链接</a>';
|
|
|
- html += '<a href="javascript:;" onclick="deleteFile(\'' + file.url + '\', this)">删除</a>';
|
|
|
+ html += '<a href="javascript:;" onclick="downloadFile(\'' + fileUrl + '\', \'' + fileName + '\')">下载</a>';
|
|
|
+ html += '<a href="javascript:;" onclick="copyUrl(\'' + fileUrl + '\')">复制链接</a>';
|
|
|
+ html += '<a href="javascript:;" onclick="deleteFile(\'' + fileUrl + '\', this)">删除</a>';
|
|
|
html += '</div></div>';
|
|
|
});
|
|
|
|
|
|
@@ -117,25 +166,33 @@
|
|
|
}
|
|
|
|
|
|
$('#fileList').html(html);
|
|
|
-
|
|
|
- // 渲染分页
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染分页
|
|
|
+ function renderPagination() {
|
|
|
laypage.render({
|
|
|
elem: 'pagination',
|
|
|
- count: filtered.length,
|
|
|
+ count: total,
|
|
|
limit: pageSize,
|
|
|
curr: currentPage,
|
|
|
+ layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
|
|
|
+ limits: [12, 24, 48, 96],
|
|
|
jump: function(obj, first) {
|
|
|
if (!first) {
|
|
|
currentPage = obj.curr;
|
|
|
- renderFileList(keyword);
|
|
|
+ pageSize = obj.limit;
|
|
|
+ loadFileList();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ // 初始化加载
|
|
|
+ loadFileList();
|
|
|
+
|
|
|
// 复制链接
|
|
|
window.copyUrl = function(url) {
|
|
|
- var fullUrl = Config.baseUrl + url;
|
|
|
+ var fullUrl = url.startsWith('http') ? url : Config.baseUrl + url;
|
|
|
var input = document.createElement('input');
|
|
|
input.value = fullUrl;
|
|
|
document.body.appendChild(input);
|
|
|
@@ -145,19 +202,23 @@
|
|
|
Common.success('链接已复制到剪贴板');
|
|
|
};
|
|
|
|
|
|
+ // 下载文件（新标签页打开）
|
|
|
+ window.downloadFile = function(url, fileName) {
|
|
|
+ var fullUrl = url.startsWith('http') ? url : Config.baseUrl + url;
|
|
|
+ window.open(fullUrl, '_blank');
|
|
|
+ };
|
|
|
+
|
|
|
// 删除文件
|
|
|
window.deleteFile = function(url, el) {
|
|
|
Common.confirm('确定要删除这个文件吗？', function() {
|
|
|
Common.get(Config.api.file.delete + '?url=' + encodeURIComponent(url), function(res) {
|
|
|
Common.success('删除成功', function() {
|
|
|
$(el).closest('.file-item').remove();
|
|
|
+ loadFileList();
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
- // 初始化
|
|
|
- renderFileList();
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
