Authored by 李靖

展开更多

... ... @@ -38,71 +38,22 @@
</div>
<div class="form-group col-sm-12">
<label class="control-label col-sm-1">上传日志:</label>
<div class="col-sm-5">
<div class="col-sm-8">
<div class="logs panel-body yoho-log-dark" style="height: 150px; overflow-y: scroll; color: #fff;"></div>
</div>
</div>
<div class="form-group col-sm-12">
<label class="control-label col-sm-1">上传记录:</label>
<div class="col-sm-11">
<table style="word-break: break-all;" class="table table-bordered table-hover">
<tr>
<table id="upload-list" style="word-break: break-all;" class="table table-bordered table-hover">
<tr class="title">
<th style="text-align:center;">ID</th>
<th style="text-align:center;">文件路径</th>
<th style="text-align:center;">文件大小</th>
<th style="text-align:center;">文件名称</th>
<th style="text-align:center;">上传时间</th>
<th style="text-align:center;">上传用户</th>
<th style="text-align:center;">操作</th>
</tr>
{{#if fileList}}
{{#fileList}}
<tr>
<td>{{key}}</td>
<td style="text-align:center;">{{fsizekb}}</td>
<td style="text-align:center;">{{putTimeFormat}}</td>
<td style="text-align:center;">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">
展开详情
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu">
<table style="white-space: nowrap; margin-bottom: 0;" class="table table-bordered">
<tr>
<th style="text-align:center;">文件目录</th>
<th style="text-align:center;">文件大小</th>
<th style="text-align:center;">文件格式</th>
<th style="text-align:center;">上传时间</th>
</tr>
<tr>
<td>{{key}}</td>
<td>{{fsizekb}}</td>
<td>{{mimeType}}</td>
<td>{{putTimeFormat}}</td>
</tr>
<tr>
<td>{{key}}</td>
<td>{{fsizekb}}</td>
<td>{{mimeType}}</td>
<td>{{putTimeFormat}}</td>
</tr>
<tr>
<td>{{key}}</td>
<td>{{fsizekb}}</td>
<td>{{mimeType}}</td>
<td>{{putTimeFormat}}</td>
</tr>
<tr>
<td>{{key}}</td>
<td>{{fsizekb}}</td>
<td>{{mimeType}}</td>
<td>{{putTimeFormat}}</td>
</tr>
</table>
</ul>
</div>
</td>
</tr>
{{/fileList}}
{{/if}}
</table>
</div>
</div>
... ... @@ -112,15 +63,17 @@
</div>
<script>
let $uploadList = $('#upload-list tbody');
let marker = '';
$('#upload').on('click', function() {
var formData = new FormData();
var file = $('#fileInput').prop('files')[0];
var actPath = $('#actPath').val();
actPath = `https://huodong.yoho.cn/activity/${actPath}/index.html`;
actPath = `/${actPath}`;
formData.append('file', file);
formData.append('actPath', actPath);
$.ajax({
type: 'POST',
url: '/files/upload',
... ... @@ -133,7 +86,9 @@
if (result) {
if (result.code === 200) {
$('.logs').prepend('<p>state: 上传成功!</p>');
} else if (result.code === 500) {
$('#upload-list tr[class!=title]').remove();
getList();
} else if (result.code === 400) {
$('.logs').prepend('<p>state: 请选择上传文件!</p>');
}
} else {
... ... @@ -143,6 +98,113 @@
});
});
// 上传记录列表
function getList(){
$.ajax({
type: 'GET',
url: '/files/listlogs',
cache: false,
dataType: 'json',
success: function(result) {
if (result && result.data) {
let $uploadList = $('#upload-list tbody');
result.data.forEach(function(item){
$uploadList.append(`
<tr>
<td>${item._id}</td>
<td>${item.actPath}</td>
<td>${item.fileName}</td>
<td>${item.date}</td>
<td>${item.username}</td>
<td style="text-align: center;">
<a class="detail-btn btn btn-warning btn-block" data-path="${item.actPath}">展开详情</a>
<a class="get-more btn btn-success btn-block hide" data-path="${item.actPath}">加载更多</a>
</td>
</tr>
<tr class="detail-c hide">
<td colspan=6>
<table class="table table-bordered detail-table">
<tr>
<th style="text-align: center">文件路径</th>
<th style="text-align: center">文件大小</th>
<th style="text-align: center">文件格式</th>
<th style="text-align: center">上传时间</th>
</tr>
</table>
</td>
</tr>
`);
});
}
}
});
};
// 上传记录详情
function getDetail(e, marker) {
let $this = $(e.currentTarget);
let path = $this.data('path');
let $uploadDetail = $this.parents('tr');
let detail = '';
$.ajax({
type: 'GET',
url: '/files/listfiles',
cache: false,
dataType: 'json',
data: {
actPath: `/uploads${path}`,
marker: marker
},
success: (result) => {
if (result && result.data &&result.data.items) {
$this.siblings('.get-more').attr('data-marker', result.data.marker);
result.data.items.forEach(function(item){
detail += `<tr class="detail-list">
<td>${item.key}</td>
<td>${item.fsize}</td>
<td>${item.mimeType}</td>
<td>${item.putTimeFormat}</td>
</tr>`;
});
$uploadDetail.next('.detail-c').find('.detail-table tbody').append(detail);
}
}
});
}
// 上传记录详情,插入tr
$uploadList.on('click', '.detail-btn', function(e) {
let $this = $(e.currentTarget);
let $detailC = $this.parents('tr').next('.detail-c');
let $detailList = $this.parents('tr').next('.detail-c').find('.detail-list');
if ($detailC.is(':hidden')) {
$('.detail-c').addClass('hide');
$detailC.removeClass('hide');
$('.detail-btn').text('展开详情');
$this.text('关闭详情');
$this.siblings('.get-more').removeClass('hide');
} else {
$detailC.addClass('hide');
$this.text('展开详情');
$this.siblings('.get-more').addClass('hide');
}
if ($detailList.length <= 0) {
getDetail(e, marker);
}
});
// 加载更多
$uploadList.on('click', '.get-more', function(e) {
let $this = $(e.currentTarget);
let marker = $this.data('marker');
getDetail(e, marker);
})
// 打印日志
$(() => {
var ws = io();
ws.on('connect', function() {
... ... @@ -150,6 +212,8 @@
$('.logs').prepend(`<p>state: ${data.state}</p>`);
});
});
getList();
});
</script>
... ...