glhcp/server/app/admin/view/file/lists.html

353 lines
15 KiB
HTML
Raw Normal View History

2023-08-10 06:59:52 +00:00
{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>