353 lines
15 KiB
HTML
353 lines
15 KiB
HTML
{layout name="layout2" /}
|
||
<div class="file-manager">
|
||
<div id="cate-tree-more" class="cate-tree-more" style="width: 200px"></div>
|
||
<div class="gallery">
|
||
<div class="layui-card" style="box-shadow:none;">
|
||
<div class="layui-card-header">
|
||
<button type="button" class="layui-btn layui-btn layui-btn-sm layui-btn-normal layEvent" lay-event="addCate"><i class="layui-icon layui-icon-add-circle"></i> 添加分类</button>
|
||
<button type="button" class="layui-btn layui-btn layui-btn-sm layui-btn-normal" id="upload">
|
||
<i class="layui-icon layui-icon-upload"></i> {if $type == 10}上传图片{elseif $type == 20}上传视频{else/}上传文件{/if}
|
||
</button>
|
||
<button type="button" class="layui-btn layui-btn layui-btn-sm layEvent layui-btn layui-btn-warm" lay-event="move" style="margin-left:5px;"><i class="layui-icon layui-icon-water"></i> 移动分类</button>
|
||
<button type="button" class="layui-btn layui-btn layui-btn-sm layEvent layui-btn layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除文件</button>
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<script id="manager" type="text/html">
|
||
<ul class="warehouse">
|
||
{{# layui.each(d, function(index, item){ }}
|
||
<li lay-id="{{item.id}}" lay-href="{{item.uri}}">
|
||
<div class="file-icon"><img class="file-image" src="{{item.uri}}"></div>
|
||
<div class="file-name"><a href="javascript:">{{item.name}}</a></div>
|
||
</li>
|
||
{{# }); }}
|
||
</ul>
|
||
{{# if(d.length === 0){ }}
|
||
<div class="empty">
|
||
<i class="layui-icon layui-icon-release" style=""></i>
|
||
<p>木有数据，请去上传</p>
|
||
</div>
|
||
{{# } }}
|
||
</script>
|
||
<div id="view"></div>
|
||
<input type="hidden" id="fileUrl" value="">
|
||
</div>
|
||
</div>
|
||
<div style="height:55px;"></div>
|
||
<div class="footer">
|
||
<button type="button" id="okFile" class="layui-btn layui-btn layui-btn-sm layui-btn-normal">使用选中文件</button>
|
||
<div id="page"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
layui.use(["form", "element", "tree", "laytpl", "laypage", "upload"], function() {
|
||
var $ = layui.jquery;
|
||
var tree = layui.tree;
|
||
var laytpl = layui.laytpl;
|
||
var laypage = layui.laypage;
|
||
var upload = layui.upload;
|
||
var category = JSON.parse('{$category|raw}');
|
||
var curCid = 0;
|
||
|
||
var uploadIns = upload.render({
|
||
elem: "#upload"
|
||
,url: "{:url('Upload/image')}"
|
||
,accept: "images"
|
||
,exts: "jpg|png|gif|bmp|jpeg|ico"
|
||
,size: 4096
|
||
,data : {
|
||
"cid": curCid,
|
||
"type": "{$type}"
|
||
}
|
||
,number: 20
|
||
,multiple: true
|
||
,done: function (res) {
|
||
if (res.code === 1) {
|
||
var li = "<li lay-id='"+res.data.id+"' lay-href='"+res.data.uri+"'>\n";
|
||
li += "<div class='file-icon'><img class='file-image' src='"+res.data.uri+"'></div>\n"
|
||
li += "<div class='file-name'><a href='javascript:'>"+res.data.name+"</a></div>\n";
|
||
li += "</li>"
|
||
$(".warehouse").prepend(li)
|
||
}
|
||
|
||
layer.msg(res.msg);
|
||
}
|
||
});
|
||
|
||
var active = {
|
||
getFile: function (cid, page) {
|
||
cid = cid === undefined ? 0 : cid;
|
||
page = page === undefined ? 1 : page;
|
||
var data = {cid:cid, page:page, type: "{$type}"};
|
||
var index = layer.load(1, {shade: false});
|
||
like.ajax({
|
||
url: "{:url('File/lists')}",
|
||
type: "GET",
|
||
data: data,
|
||
success:function(res) {
|
||
layer.close(index);
|
||
if(res.code === 1) {
|
||
active.renderList(res.data.data);
|
||
laypage.render({
|
||
elem: "page"
|
||
,count: res.data.total
|
||
,curr: res.data.current_page
|
||
,limit: res.data.per_page
|
||
,last: res.data.last_page
|
||
,jump: function (obj, first) {
|
||
if (!first) {
|
||
active.getFile(cid, obj.curr)
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
renderList: function(data) {
|
||
var getTpl = document.getElementById("manager").innerHTML;
|
||
var view = document.getElementById('view');
|
||
laytpl(getTpl).render(data, function(html){
|
||
view.innerHTML = html;
|
||
});
|
||
},
|
||
getChoice: function() {
|
||
var ids = [];
|
||
var href = [];
|
||
$(".warehouse li.on").each(function () {
|
||
ids.push($(this).attr("lay-id"));
|
||
href.push($(this).attr("lay-href"));
|
||
});
|
||
|
||
return {ids:ids, href:href}
|
||
},
|
||
move: function () {
|
||
var fileData = active.getChoice();
|
||
if (fileData.ids.length === 0) {
|
||
layer.msg("尚未选择任何文件");
|
||
return false;
|
||
}
|
||
layer.open({
|
||
type: 2
|
||
,title: "移动文件"
|
||
,content: "{:url('File/move')}?type={$type}"
|
||
,area: ["400px", "440px"]
|
||
,btn: ["确定", "取消"]
|
||
,yes: function(index, layero){
|
||
var iframeWindow = window["layui-layer-iframe" + index];
|
||
var submit = layero.find("iframe").contents().find("#addSubmit");
|
||
iframeWindow.layui.form.on("submit(addSubmit)", function(data){
|
||
data.field["file_ids"] = fileData.ids;
|
||
data.field["type"] = "{$type}";
|
||
like.ajax({
|
||
url: "{:url('File/move')}",
|
||
data: data.field,
|
||
type: "POST",
|
||
success:function(res) {
|
||
if(res.code === 1) {
|
||
// if (data.field['cid'] !== '0') {
|
||
// $(".warehouse li.on").remove();
|
||
// }
|
||
active.getFile(curCid, 1);
|
||
layui.layer.msg(res.msg);
|
||
layer.close(index);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
submit.trigger("click");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
del: function () {
|
||
var fileData = active.getChoice();
|
||
if (fileData.ids.length === 0) {
|
||
layer.msg("尚未选择任何文件");
|
||
return false;
|
||
}
|
||
layer.confirm('确定删除所选文件？', function(index){
|
||
like.ajax({
|
||
url: "{:url('File/del')}",
|
||
data: {file_ids: fileData.ids, type: '{$type}'},
|
||
type: "POST",
|
||
success:function(res) {
|
||
console.log(res)
|
||
if(res.code === 1) {
|
||
active.getFile(curCid, 1);
|
||
layui.layer.msg(res.msg);
|
||
}
|
||
}
|
||
});
|
||
layer.close(index);
|
||
});
|
||
|
||
},
|
||
addCate: function () {
|
||
layer.open({
|
||
type: 2
|
||
,title: "新增分类"
|
||
,content: "{:url('File/addCate')}"
|
||
,area: ["400px", "400px"]
|
||
,btn: ["确定", "取消"]
|
||
,yes: function(index, layero){
|
||
var iframeWindow = window["layui-layer-iframe" + index];
|
||
var submit = layero.find("iframe").contents().find("#addSubmit");
|
||
iframeWindow.layui.form.on("submit(addSubmit)", function(data){
|
||
data.field["type"] = "{$type}";
|
||
like.ajax({
|
||
url: "{:url('File/addCate')}",
|
||
data: data.field,
|
||
type: "POST",
|
||
success:function(res) {
|
||
if(res.code === 1) {
|
||
category = res.data;
|
||
active.renderTree();
|
||
layui.layer.msg(res.msg);
|
||
layer.close(index);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
submit.trigger("click");
|
||
}
|
||
});
|
||
},
|
||
editCate: function (obj) {
|
||
if (obj.data.id === 0) {
|
||
layer.msg("此分类不允许编辑", {icon: 2});
|
||
return false;
|
||
}
|
||
layer.open({
|
||
type: 2
|
||
,title: "编辑分类"
|
||
,content: "{:url('File/editCate')}?id="+ obj.data.id + '&&type={$type}&&shop_id=0'
|
||
,area: ["400px", "400px"]
|
||
,btn: ["确定", "取消"]
|
||
,yes: function(index, layero){
|
||
var iframeWindow = window["layui-layer-iframe" + index];
|
||
var submit = layero.find("iframe").contents().find("#addSubmit");
|
||
iframeWindow.layui.form.on("submit(addSubmit)", function(data){
|
||
data.field['id'] = obj.data.id;
|
||
data.field["type"] = "{$type}";
|
||
like.ajax({
|
||
url: "{:url('File/editCate')}",
|
||
data: data.field,
|
||
type: "POST",
|
||
success:function(res) {
|
||
if(res.code === 1) {
|
||
category = res.data;
|
||
active.renderTree();
|
||
layui.layer.msg(res.msg);
|
||
layer.close(index);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
submit.trigger("click");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
delCate: function(obj) {
|
||
if (obj.data.id === 0) {
|
||
layer.msg("此分类不允许删除", {icon: 2});
|
||
return false;
|
||
}
|
||
like.ajax({
|
||
url: "{:url('File/delCate')}",
|
||
data: {id: obj.data.id, type: "{$type}"},
|
||
type: "POST",
|
||
success:function(res) {
|
||
if(res.code === 1) {
|
||
category = res.data;
|
||
active.renderTree();
|
||
layui.layer.msg(res.msg);
|
||
}else{
|
||
category = res.data;
|
||
active.renderTree();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
renderTree: function () {
|
||
tree.render({
|
||
elem: '#cate-tree-more'
|
||
,edit: ['update', 'del']
|
||
,customOperate: false
|
||
,onlyIconControl:true
|
||
,data: category
|
||
,click: function (obj) {
|
||
// 节点被点击
|
||
var cid = obj.data.id;
|
||
var page = 1;
|
||
curCid = cid;
|
||
active.getFile(cid, page);
|
||
uploadIns.reload({
|
||
elem: "#upload"
|
||
,url: "{:url('Upload/image')}"
|
||
,data : {
|
||
"cid": curCid,
|
||
"type": "{$type}"
|
||
}
|
||
});
|
||
}
|
||
,operate: function(obj){
|
||
switch (obj.type) {
|
||
case "update":
|
||
active.editCate(obj);
|
||
break;
|
||
case "del":
|
||
active.delCate(obj);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
like.eventClick(active);
|
||
active.renderTree();
|
||
active.getFile();
|
||
|
||
var globalUrls = [];
|
||
|
||
$(document).on("click", ".warehouse li", function () {
|
||
|
||
var isExist = $.inArray($(this).attr("lay-href"), globalUrls);
|
||
if (isExist >= 0){
|
||
globalUrls.splice(isExist, 1);
|
||
} else {
|
||
globalUrls.push($(this).attr("lay-href"));
|
||
}
|
||
|
||
if ($(this).hasClass("on")) {
|
||
$(this).removeClass("on");
|
||
} else {
|
||
$(this).addClass("on");
|
||
}
|
||
$('#fileUrl').val(globalUrls.join(','));
|
||
});
|
||
|
||
|
||
// 选择图片(用于富文本的图片选择)
|
||
// Author: 张无忌
|
||
$("#okFile").click(function () {
|
||
// var urls = [];
|
||
// $(".warehouse li.on").each(function () {
|
||
// urls.push($(this).attr("lay-href"));
|
||
// });
|
||
|
||
if (globalUrls.length <= 0) {
|
||
parent.layer.msg("请至少选择一张图片");
|
||
return false;
|
||
}
|
||
|
||
var index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index);
|
||
parent.window.callback && parent.window.callback(globalUrls.reverse());
|
||
});
|
||
|
||
})
|
||
</script> |