438 lines
18 KiB
HTML
438 lines
18 KiB
HTML
{extend name="../../base/view/common/base" /}
|
||
{block name="style"}
|
||
<style>
|
||
body { display: flex; overflow: hidden; height: 100vh; }
|
||
::-webkit-scrollbar { display: none; width: 6px; height: 6px; }
|
||
::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #e1e1e1; }
|
||
.layui-tab{margin:0;}
|
||
.container { display: flex; flex: 1; flex-direction: column; overflow: hidden; padding:12px;}
|
||
.file-container { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: 2px; background: #ffffff; box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0; }
|
||
.file-item {display: flex; flex: 1; justify-content: space-between; overflow: hidden; }
|
||
.file-header {padding-top: 4px; }
|
||
|
||
/** 分组 **/
|
||
.file-item .group { position: relative; display: flex; flex-direction: column; padding-top: 8px; width: 200px; border-right: 1px solid #f6f6f6; }
|
||
.file-item .group ul::-webkit-scrollbar { display: block; }
|
||
.file-item .group ul { flex: 1; overflow: hidden; overflow-y: auto; }
|
||
.file-item .group ul li {display: flex; align-items: center; justify-content: space-between; cursor:pointer; padding: 0 12px; height: 38px; font-size: 13px; color: #666666; }
|
||
.file-item .group ul li i.iconfont{ margin-right:8px; font-size:24px; color:#E1AF1A; font-weight:800;}
|
||
.file-item .group ul li > span { display: flex; flex: 1; overflow: hidden; margin-right: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
|
||
.file-item .group ul li.active { background: #edefff; }
|
||
.file-item .group ul li:hover { background: #f5f7fa; }
|
||
.file-item .group ul li .dropdown:hover dl { display: block; }
|
||
.file-item .group ul li .dropdown dl { position: absolute; top: 36px; right: -15px; z-index: 10000; display: none; padding: 5px 0; width: 88px; border-radius: 2px; text-align: center; background-color: #ffffff; box-shadow: #cccccc 0 0 10px; }
|
||
.file-item .group ul li .dropdown dl dd { height: 32px; line-height: 32px; }
|
||
.file-item .group ul li .dropdown dl dd:hover { color: #4a5dff; background-color: #edefff; }
|
||
.file-item .group ul li .dropdown dl::before { position: absolute; top: -16px; left: 44px; z-index: 12; display: block; padding: 0; width: 0; height: 0; border-top: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; border-left: 8px solid transparent; content: ""; box-sizing: content-box; }
|
||
.file-item .group .footer { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-top: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; }
|
||
|
||
/** 菜单 **/
|
||
.file-item .attach #move:hover { position: relative; opacity: 1; }
|
||
.file-item .attach #move:hover .dropdown { display: block; background-color: #ffffff; }
|
||
.file-item .attach .dropdown { position: absolute; top: 38px; z-index: 100000; display: none; padding: 5px 0; width: 150px; border: 1px solid #dddddd; text-align: left; background-color: #ffffff; line-height: 1.6; }
|
||
.file-item .attach .dropdown em { font-size: 13px; font-weight: 400; color: #333333; font-style: normal; }
|
||
.file-item .attach .dropdown em { display: block; clear: both; padding: 6px 20px; white-space: nowrap; }
|
||
.file-item .attach .dropdown em:hover { background: #eeeeee; }
|
||
.file-item .attach .dropdown em:first-child { font-size: 12px; color: #999999; }
|
||
.file-item .attach .dropdown::before { position: absolute; top: -16px; left: 21px; z-index: 12; display: block; padding: 0; width: 0; height: 0; border-top: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; border-left: 8px solid transparent; content: ""; box-sizing: content-box; }
|
||
.file-item .attach .dropdown::after { position: absolute; top: -18px; left: 20px; z-index: 10; display: block; padding: 0; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #cccccc; border-left: 9px solid transparent; content: ""; box-sizing: content-box; }
|
||
|
||
/** 文件 **/
|
||
.file-item .attach { position: relative; display: flex; flex: 1; flex-direction: column; }
|
||
.file-item .attach .header { display: flex; align-items: center; justify-content: space-between; padding:12px 15px; margin:0;}
|
||
.file-item .attach .header .search{ display: flex; }
|
||
.file-item .attach .header .search input { height: 30px; border-color: #eeeeee; border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||
.file-item .attach .header .search button { border-color: #eeeeee; background: #f5f7fa; border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||
.file-item .attach .header .search button:hover { background-color: #eeeeef; }
|
||
.file-item .attach .subject { flex: 1; overflow: hidden; overflow-y: auto; margin: 10px; box-sizing: border-box; }
|
||
.file-item .attach .subject:hover::-webkit-scrollbar { display: block; }
|
||
.file-item .attach .subject ul { display: flex; flex-wrap: wrap; }
|
||
.file-item .attach .subject ul li { position: relative; height: 120px; margin: 5px; padding: 9px; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 3px; transition: all 0.2s ease-in-out; }
|
||
.file-item .attach .subject ul li:hover {border: 1px solid #cccccc; }
|
||
.file-item .attach .subject ul li.on {border: 1px solid #ff5722; }
|
||
.file-item .attach .subject ul li img { width: 100px; height: 100px; border-radius: 2px; }
|
||
.file-item .attach .subject ul li video { width: 100px; height: 100px; border-radius: 3px; }
|
||
.file-item .attach .subject ul li p { overflow: hidden; margin: 5px 0 0; width: 98px; font-size: 13px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||
.file-item .attach .subject ul li::after {position: absolute; width:22px; height:22px; right: -1px; bottom: -1px; display: none; font-size: 14px; font-family: layui-icon, serif; border-radius:3px 0 3px 0; text-align: center; color: #ffffff; background: #ff5722; content: "\e605"; line-height: 24px; }
|
||
.file-item .attach .subject ul li.on::after { display: block; }
|
||
.file-item .attach .subject ul li .layui-btn-group{position:absolute; top:3px; right:3px; display:none;}
|
||
.file-item .attach .subject ul li:hover .layui-btn-group{display:block}
|
||
|
||
.file-item .attach .footer { display: flex; align-items: center; justify-content: end; padding: 5px 15px 0; height: 45px; border-top: 1px solid #f2f2f2; text-align: center; background: #ffffff; }
|
||
|
||
/** 无数据 **/
|
||
.file-item .empty { display: flex; flex: 1; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; text-align: center; color: #cccccc; }
|
||
.file-item .empty i { font-size: 180px; }
|
||
.file-item .empty p { width: 180px; text-align: center; }
|
||
</style>
|
||
{/block}
|
||
<!-- 主体 -->
|
||
{block name="body"}
|
||
<div class="container">
|
||
<div class="file-container">
|
||
<div class="file-header">
|
||
<div class="layui-tab layui-tab-brief" lay-filter="tab">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" data-tab="0">全部</li>
|
||
<li data-tab="1">图片</li>
|
||
<li data-tab="2">视频</li>
|
||
<li data-tab="3">文档</li>
|
||
<li data-tab="4">压缩包</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="file-item">
|
||
<!-- 分组 -->
|
||
<div class="group">
|
||
<ul id="group" class="groups">
|
||
<li data-id="" class="active"><i class="iconfont icon-sucaiziyuan"></i><span>全部</span></li>
|
||
<li data-id="0"><i class="iconfont icon-sucaiziyuan"></i><span>未分组</span></li>
|
||
</ul>
|
||
<div class="footer">
|
||
<span class="layui-btn layui-btn-primary layui-btn-sm add-new">添加分组</span>
|
||
</div>
|
||
</div>
|
||
<!-- 文件 -->
|
||
<div class="attach">
|
||
<!-- 工具 -->
|
||
<form class="layui-form" lay-filter="barsearchform" style="display:block; margin:0;padding:0;">
|
||
<div class="header">
|
||
<div class="layui-btn-group">
|
||
<span class="layui-btn layui-btn-sm layui-btn-normal" id="fileUpload">上传文件</span>
|
||
<span class="layui-btn layui-btn-sm layui-btn-danger" id="fileDelete">批量删除</span>
|
||
<span class="layui-btn layui-btn-sm layui-btn-warm" id="fileMove">移动至 <i class="layui-icon layui-icon-triangle-d"></i></span>
|
||
<span style="margin-left:36px;"><input type="checkbox" name="select_all" lay-filter="all" title="全选"></span>
|
||
</div>
|
||
|
||
<div class="search">
|
||
<input type="hidden" name="limit" value="44" />
|
||
<input type="hidden" name="page" value="1" />
|
||
<input type="hidden" name="tab" value="0" />
|
||
<input type="hidden" name="group_id" value="" />
|
||
<label><input type="text" name="keywords" placeholder="请输入名称" autocomplete="off" class="layui-input"></label>
|
||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search"></i></button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!-- 主体 -->
|
||
<div class="subject">
|
||
<ul id="filesBox"></ul>
|
||
</div>
|
||
<!-- 页脚 -->
|
||
<div class="footer">
|
||
<div id="laypage"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/html" id="toolbarDemo">
|
||
<h3 class="h3-title" style="height:28px;">审批列表</h3>
|
||
</script>
|
||
{/block}
|
||
<!-- /主体 -->
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script>
|
||
const moduleInit = ['tool'];
|
||
function gouguInit() {
|
||
var table = layui.table, tool = layui.tool ,form = layui.form,laypage = layui.laypage,upload = layui.upload, element=layui.element, dropdown=layui.dropdown ;
|
||
element.on('tab(tab)', function(data){
|
||
$('[name="tab"]').val(data.index);
|
||
$('[lay-filter="webform"]').click();
|
||
return false;
|
||
});
|
||
|
||
//监听多选框点击事件 通过 lay-filter="menu"来监听
|
||
form.on('checkbox(all)', function (data) {
|
||
let val = data.value;
|
||
if(data.elem.checked){
|
||
//判断当前多选框是选中还是取消选中
|
||
$('#filesBox li').addClass('on');
|
||
}
|
||
else{
|
||
$('#filesBox li').removeClass('on');
|
||
}
|
||
});
|
||
|
||
var uploadInst = upload.render({
|
||
elem: '#fileUpload'
|
||
,url: "/api/index/upload"
|
||
, accept: 'file' //普通文件
|
||
, exts: 'jpeg|jpg|png|gif|doc|docx|ppt|pptx|xls|xlsx|pdf|zip|rar|7z|txt|mp4|psd|svg' //只允许上传文件
|
||
, before: function (obj) {
|
||
layer.msg('上传中...', { time: 3600000 });
|
||
}
|
||
,done: function (res) {
|
||
layer.msg(res.msg);
|
||
$('[lay-filter="webform"]').click();
|
||
}, error: function (index, upload) {
|
||
layer.msg('上传失败');
|
||
}
|
||
});
|
||
|
||
$('body').on('click','.add-new',function(){
|
||
add_group(0,'');
|
||
});
|
||
|
||
$('#group').on('click','li',function(){
|
||
let id=$(this).data('id');
|
||
$(this).siblings().removeClass('active');
|
||
$(this).addClass('active');
|
||
$('[name="group_id"]').val(id);
|
||
$('[lay-filter="webform"]').click();
|
||
});
|
||
|
||
$('#fileDelete').on('click',function(){
|
||
let select_array = [];
|
||
$('#filesBox').find('li.on').each(function(index,item){
|
||
select_array.push($(item).data('id'));
|
||
})
|
||
if(select_array.length<1){
|
||
layer.msg('请先选择文件');
|
||
}
|
||
else{
|
||
layer.confirm('确定要删除这些文件吗？请慎重', { icon: 3, title: '提示' }, function (index) {
|
||
let callback = function (e) {
|
||
layer.closeAll();
|
||
layer.msg(e.msg);
|
||
$('[lay-filter="webform"]').click();
|
||
}
|
||
tool.delete("/home/files/delete", {ids:select_array.join(',')}, callback);
|
||
});
|
||
}
|
||
});
|
||
|
||
function add_group(id,val){
|
||
var title = '新增分组';
|
||
if(id>0){
|
||
title = '编辑分组';
|
||
}
|
||
layer.prompt({
|
||
title: title,
|
||
value: val,
|
||
yes: function(index, layero) {
|
||
// 获取文本框输入的值
|
||
var value = layero.find(".layui-layer-input").val();
|
||
if (value!='') {
|
||
let callback = function (e) {
|
||
layer.msg(e.msg);
|
||
if(e.code==0){
|
||
location.reload();
|
||
}
|
||
/*
|
||
if(id==0){
|
||
let item='<li data-id="'+e.data+'"><i class="iconfont icon-sucaiziyuan"></i><span>'+value+'</span></li>';
|
||
$('#group').append(item);
|
||
}
|
||
else{
|
||
$('#group').find('[data-id="'+id+'"]').data('title',value).find('span').html(value);
|
||
}
|
||
*/
|
||
}
|
||
tool.post("/home/files/add_group", {id: id,title: value}, callback);
|
||
layer.close(index);
|
||
} else {
|
||
layer.msg('请填写分组名称');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
var data = form.val('barsearchform');
|
||
get_files(data);
|
||
get_group();
|
||
|
||
function get_group(param){
|
||
$.ajax({
|
||
url:"/home/files/get_group",
|
||
success:function(res){
|
||
if(res.code==0){
|
||
var group=res.data,item='';
|
||
if(group.length>0){
|
||
for(var a=0;a<group.length;a++){
|
||
item+='<li data-id="'+group[a].id+'" data-title="'+group[a].title+'"><i class="iconfont icon-sucaiziyuan"></i><span>'+group[a].title+'</span><i class="layui-icon layui-icon-more-vertical dropdown-on"></i></li>';
|
||
}
|
||
$('#group').append(item);
|
||
// 自定义事件
|
||
dropdown.render({
|
||
elem: '.dropdown-on',
|
||
trigger: 'hover',
|
||
align: 'right',
|
||
data: [{
|
||
title: '重命名分组',
|
||
id: 100
|
||
},{
|
||
title: '删除该分组',
|
||
id: 101
|
||
}],
|
||
click: function(data, othis){
|
||
let id = $(this.elem).parent().data('id');
|
||
let title = $(this.elem).parent().data('title');
|
||
if(data.id==100){
|
||
add_group(id,title);
|
||
}else{
|
||
del_group(id);
|
||
}
|
||
}
|
||
});
|
||
|
||
group.push({id:0,title:'未分组'});
|
||
dropdown.render({
|
||
elem: '#fileMove',
|
||
data: group,
|
||
click: function(obj){
|
||
let select_array = [];
|
||
$('#filesBox').find('li.on').each(function(index,item){
|
||
select_array.push($(item).data('id'));
|
||
})
|
||
if(select_array.length<1){
|
||
layer.msg('请先选择文件');
|
||
}
|
||
else{
|
||
layer.confirm('确定要把选中的文件移动到『'+obj.title+'』分组吗？', { icon: 3, title: '提示' }, function (index) {
|
||
let callback = function (e) {
|
||
layer.closeAll();
|
||
layer.msg(e.msg);
|
||
$('[lay-filter="webform"]').click();
|
||
}
|
||
tool.delete("/home/files/move", {group_id:obj.id,ids:select_array.join(',')}, callback);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function del_group(id) {
|
||
layer.confirm('确定要删除该分组吗？请慎重', { icon: 3, title: '提示' }, function (index) {
|
||
let callback = function (e) {
|
||
layer.closeAll();
|
||
layer.msg(e.msg);
|
||
//$('#group').find('[data-id="'+id+'"]').remove();
|
||
if(e.code==0){
|
||
location.reload();
|
||
}
|
||
}
|
||
tool.delete("/home/files/del_group", {ids:id}, callback);
|
||
});
|
||
}
|
||
|
||
|
||
function get_files(param){
|
||
var loadIndex = layer.load(0);
|
||
$.ajax({
|
||
url:"/home/files/index",
|
||
data:param,
|
||
complete:function(){
|
||
setTimeout(function(){
|
||
layer.close(loadIndex)
|
||
}, 200);
|
||
},
|
||
success:function(res){
|
||
$('[name="select_all"]').prop('checked', false);
|
||
form.render('checkbox');
|
||
if(res.code==0){
|
||
laypage.render({
|
||
elem: 'laypage',
|
||
limit:param['limit'],
|
||
curr:param['page'],
|
||
count: res.count, // 数据总数
|
||
jump: function(obj, first){
|
||
console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
|
||
console.log(obj.limit); // 得到每页显示的条数
|
||
// 首次不执行
|
||
if(!first){
|
||
var data = form.val('barsearchform');
|
||
data['page'] = obj.curr;
|
||
get_files(data);
|
||
}
|
||
}
|
||
});
|
||
|
||
var item=res.data,li='';
|
||
if(item.length>0){
|
||
for(var a=0;a<item.length;a++){
|
||
let image = ['jpg','jpeg','png','gif'];
|
||
let doc = ['doc','docx','xls','xlsx','ppt','pptx','txt','pdf','zip','rar','7z'];
|
||
let down = '<a href="'+item[a].filepath+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="'+item[a].name+'">下载</a>';
|
||
// 判断元素是否在数组中
|
||
let path='/static/home/images/icon/file.png';
|
||
if (image.includes(item[a].fileext)) {
|
||
path=item[a].filepath;
|
||
down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-img">预览</span>';
|
||
} else if (doc.includes(item[a].fileext)){
|
||
path='/static/home/images/icon/'+item[a].fileext+'.png';
|
||
}
|
||
|
||
if(item[a].fileext == 'pdf'){
|
||
down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-pdf">预览</span>';
|
||
}
|
||
li+='<li data-id="'+item[a].id+'" data-title="'+item[a].name+'" data-ext="'+item[a].fileext+'"><img src="'+path+'" alt="'+item[a].filename+'" style="object-fit: contain;" class="file-item"><p title="'+item[a].name+'">'+item[a].name+'</p><div class="layui-btn-group"><span class="layui-btn layui-btn-xs file-edit">重命名</span>'+down+'<span class="layui-btn layui-btn-xs layui-btn-danger file-del">删除</span></div></li>';
|
||
}
|
||
$('#filesBox').html(li);
|
||
$('#laypage').show();
|
||
}
|
||
else{
|
||
$('#filesBox').html('<div class="empty"><i class="layui-icon layui-icon-upload"></i><p>无文件文件，赶紧去上传吧!</p></div>');
|
||
$('#laypage').hide();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
$('#filesBox').on('click','.file-item',function(){
|
||
$(this).parent().toggleClass("on");
|
||
})
|
||
|
||
$('#filesBox').on('click','.file-del',function(){
|
||
let id = $(this).parent().parent().data('id');
|
||
layer.confirm('确定要删除该文件吗？请慎重', { icon: 3, title: '提示' }, function (index) {
|
||
let callback = function (e) {
|
||
layer.closeAll();
|
||
layer.msg(e.msg);
|
||
$('[lay-filter="webform"]').click();
|
||
}
|
||
tool.delete("/home/files/delete", {ids:id}, callback);
|
||
});
|
||
})
|
||
|
||
$('#filesBox').on('click','.file-edit',function(){
|
||
let id = $(this).parent().parent().data('id');
|
||
let title = $(this).parent().parent().data('title');
|
||
let ext = $(this).parent().parent().data('ext');
|
||
layer.prompt({
|
||
title: '重命名',
|
||
value: title,
|
||
yes: function(index, layero) {
|
||
// 获取文本框输入的值
|
||
var value = layero.find(".layui-layer-input").val();
|
||
if (value!='') {
|
||
let callback = function (e) {
|
||
layer.msg(e.msg);
|
||
$('[lay-filter="webform"]').click();
|
||
}
|
||
tool.post("/home/files/edit", {id: id,title: value+'.'+ext}, callback);
|
||
layer.close(index);
|
||
} else {
|
||
layer.msg('请填写分组名称');
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
//监听搜索提交
|
||
form.on('submit(webform)', function(data) {
|
||
get_files(data.field);
|
||
return false;
|
||
});
|
||
|
||
}
|
||
</script>
|
||
{/block}
|
||
<!-- /脚本 --> |