mirror of
https://github.com/201206030/novel-plus.git
synced 2025-04-26 17:20:52 +00:00
221 lines
8.5 KiB
Java
221 lines
8.5 KiB
Java
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>小说精品屋 - 文件管理器</title>
|
|
<meta name="keywords" content="">
|
|
<meta name="description" content="">
|
|
<link rel="shortcut icon" href="/favicon.ico">
|
|
<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
|
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
|
|
<link href="/css/animate.css" rel="stylesheet">
|
|
<link href="/css/layui.css" rel="stylesheet">
|
|
<link href="/css/style.css?v=4.1.0" rel="stylesheet">
|
|
<style>
|
|
.aactive {
|
|
color: #13b5b7 !important;
|
|
}
|
|
.hactive:hover{
|
|
color: #13b5b7 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="gray-bg">
|
|
<div class="wrapper wrapper-content" id="app">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-content">
|
|
<div class="file-manager">
|
|
<button type="button" class="layui-btn" id="test1">
|
|
<i class="fa fa-cloud"></i>上传文件
|
|
</button>
|
|
<div class="hr-line-dashed"></div>
|
|
<ul class="folder-list" style="padding: 0">
|
|
<li><a href="javascript:void(0)" class="file-control hactive" :class="{'aactive':type === ''}"
|
|
v-on:click="changeType('')"><i class="fa fa-folder"></i>所有文件</a></li>
|
|
|
|
<li><a href="javascript:void(0)" class="file-control hactive" :class="{'aactive':type === 0}"
|
|
v-on:click="changeType(0)"><i class="fa fa-folder"></i>图片</a></li>
|
|
|
|
<li><a href="javascript:void(0)" :class="{'aactive':type === 1}"
|
|
v-on:click="changeType(1)" class="file-control hactive"><i class="fa fa-folder"></i>文档</a>
|
|
</li>
|
|
|
|
<li><a href="javascript:void(0)" v-on:click="changeType(2)" :class="{'aactive':type === 2}"
|
|
class="file-control hactive"><i class="fa fa-folder"></i>视频</a></li>
|
|
|
|
<li><a href="javascript:void(0)" v-on:click="changeType(3)" :class="{'aactive':type === 3}"
|
|
class="file-control hactive"><i class="fa fa-folder"></i>音乐</a></li>
|
|
|
|
<li><a href="javascript:void(0)" v-on:click="changeType(99)" :class="{'aactive':type === 99}"
|
|
class="file-control hactive"><i class="fa fa-folder"></i>其他</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-9 animated fadeInRight">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="file-box" v-for="row in rows">
|
|
<div class="file">
|
|
<a href="#">
|
|
<span class="corner"></span>
|
|
<div class="image">
|
|
<img alt="image" class="img-responsive" :src="row.url">
|
|
</div>
|
|
<div class="file-name">
|
|
<br/>
|
|
<small>{{row.createDate}}</small>
|
|
</div>
|
|
<button
|
|
class="btn btn-warning btn-xs copy" :url="row.url">复制
|
|
</button> <button class="btn btn-danger btn-xs"
|
|
@click="remove(row.id)">删除
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="incomeNum"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ul id="page"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全局js -->
|
|
<script src="/js/jquery.min.js?v=2.1.4"></script>
|
|
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
|
|
<script src="/js/bootstrap-paginator.min.js"></script>
|
|
|
|
<script src="/js/content.js?v=1.0.0"></script>
|
|
<script src="/js/layui.js"></script>
|
|
<script src="/js/plugins/clipboard/clipboard.min.js"></script>
|
|
<script src="/js/plugins/layer/layer.min.js"></script>
|
|
<script src="/js/vue.min.js"></script>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
limit: 12,
|
|
offset: 0,
|
|
total: 0,
|
|
file: '',
|
|
type: '',
|
|
rows: '',
|
|
},
|
|
methods: {
|
|
getData: function () {
|
|
$.getJSON("/common/sysFile/list", {
|
|
limit: this.limit,
|
|
offset: this.offset,
|
|
type: this.type
|
|
}, function (r) {
|
|
app.total = r.total;
|
|
app.rows = r.rows;
|
|
app.page();
|
|
});
|
|
},
|
|
page: function () {
|
|
var options = {
|
|
currentPage: app.offset / 12 + 1, //当前页
|
|
totalPages: Math.ceil(app.total / 12), //总页数
|
|
numberofPages: 4, //显示的页数
|
|
bootstrapMajorVersion: 3,
|
|
alignment: 'center',
|
|
size: 'large',
|
|
shouldShowPage: true,
|
|
itemTexts: function (type, page, current) { //修改显示文字
|
|
switch (type) {
|
|
case "first":
|
|
return "首页";
|
|
case "prev":
|
|
return "上一页";
|
|
case "next":
|
|
return "下一页";
|
|
case "last":
|
|
return "尾页";
|
|
case "page":
|
|
return page;
|
|
}
|
|
},
|
|
onPageClicked: function (event, originalEvent, type, page) {
|
|
app.offset = (page - 1) * 12;
|
|
app.getData();
|
|
}
|
|
};
|
|
$('#page').bootstrapPaginator(options);
|
|
},
|
|
remove: function (id) {
|
|
layer.confirm('确定要删除选中的记录？', {
|
|
btn: ['确定', '取消']
|
|
}, function () {
|
|
$.ajax({
|
|
url: "/common/sysFile/remove",
|
|
type: "post",
|
|
data: {
|
|
'id': id
|
|
},
|
|
success: function (r) {
|
|
if (r.code == 0) {
|
|
layer.msg(r.msg);
|
|
app.getData();
|
|
} else {
|
|
layer.msg(r.msg);
|
|
app.getData();
|
|
}
|
|
}
|
|
});
|
|
})
|
|
},
|
|
changeType: function (i) {
|
|
this.type = i;
|
|
this.offset = 0;
|
|
this.getData();
|
|
}
|
|
},
|
|
created: function () {
|
|
this.changeType('')
|
|
}
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
var clipboard = new Clipboard('button.copy', {
|
|
text: function (trigger) {
|
|
layer.msg('文件路径已复制到粘贴板');
|
|
return $(trigger).attr('url');
|
|
}
|
|
});
|
|
layui.use('upload', function () {
|
|
var upload = layui.upload;
|
|
//执行实例
|
|
var uploadInst = upload.render({
|
|
elem: '#test1', //绑定元素
|
|
url: '/common/sysFile/upload', //上传接口
|
|
size: 1000,
|
|
accept: 'file',
|
|
done: function (r) {
|
|
layer.msg(r.msg);
|
|
app.getData();
|
|
},
|
|
error: function (r) {
|
|
layer.msg(r.msg);
|
|
}
|
|
});
|
|
});
|
|
|
|
// function changeType(i) {
|
|
// app.type = i;
|
|
// app.offset = 0;
|
|
// app.getData();
|
|
// }
|
|
</script>
|
|
</body>
|
|
</html>
|