426 lines
14 KiB
HTML
426 lines
14 KiB
HTML
{extend name="../../base/view/common/base" /}
|
||
|
||
<!-- 主体 -->
|
||
{block name="breadcrumb"}
|
||
<span class="layui-breadcrumb">
|
||
<a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
|
||
<a href="/application/nav/index"><cite>应用</cite></a>
|
||
<a><cite>文件中转模块</cite></a>
|
||
</span>
|
||
{/block}
|
||
{block name="body"}
|
||
<div class="table-content p-3">
|
||
<div class="layui-form-bar border-t border-x">
|
||
<button class="layui-btn layui-btn-sm add-new" lay-on="test-page-wrap">
|
||
上传文件
|
||
</button>
|
||
<button class="layui-btn layui-btn-sm" id="create-folder" lay-on="create-folder">
|
||
创建文件夹
|
||
</button>
|
||
<button class="layui-btn layui-btn-sm" id="batchmove-folder" lay-on="batchmove-folder">
|
||
批量移动
|
||
</button>
|
||
<button class="layui-btn layui-btn-sm" id="select-all" lay-on="select-all">
|
||
全选
|
||
</button>
|
||
|
||
<input type="text" id="folder-url" placeholder="输入文件夹链接地址" class="layui-input" />
|
||
</div>
|
||
<div class="layui-tab layui-tab-brief">
|
||
<ul class="layui-tab-title" id="folder-tabs">
|
||
<li class="layui-this" data-id="all">未分类</li>
|
||
</ul>
|
||
<div class="card-container" id="tab-content">
|
||
<div class="layui-tab-item layui-show" id="content-all">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="layui-btn layui-btn-sm" id="go-to-top">
|
||
回到顶部
|
||
</button>
|
||
{/block}
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script>
|
||
const moduleInit = ["tool", "gouguEdit", "gouguComment"];
|
||
let currentPage = 1;
|
||
|
||
function gouguInit() {
|
||
var table = layui.table;
|
||
var tool = layui.tool;
|
||
var tool = layui.laypage;
|
||
|
||
// 复制路径
|
||
$("body").on("click", ".copy-path", function () {
|
||
var path = $(this).parents(".card-item").find("img").attr("src");
|
||
if (path) {
|
||
copyToClipboard(path);
|
||
layui.layer.msg("复制成功");
|
||
} else {
|
||
layui.layer.msg("复制失败");
|
||
}
|
||
});
|
||
|
||
// 在脚本中添加获取文件夹链接地址的功能
|
||
$("#folder-url").on("input", function () {
|
||
var folderUrl = $(this).val(); // 获取输入的链接地址
|
||
// 这里可以添加逻辑来处理 folderUrl，例如调用 getfloderfiles() 接口
|
||
console.log("输入的文件夹链接地址: ", folderUrl); // 调试输出
|
||
});
|
||
|
||
// 新增获取文件夹文件的接口
|
||
function getFolderFiles(folderId) {
|
||
$.get(`/picbed/index/getfloderfiles`, { folder_id: folderId }, function (res) {
|
||
if (res.code === 0) {
|
||
console.log("文件列表: ", res.data); // 处理文件列表
|
||
} else {
|
||
layui.layer.msg(res.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 监听文件夹链接输入框变化
|
||
$("#folder-url").on("change", function () {
|
||
var folderId = $(this).val(); // 假设输入的是文件夹ID
|
||
if (folderId) {
|
||
getFolderFiles(folderId); // 调用接口获取文件
|
||
}
|
||
});
|
||
|
||
// 下载文件
|
||
$("body").on("click", ".action-item.download", function () {
|
||
var path = $(this).parents(".card-item").find("img").attr("src");
|
||
if (path) {
|
||
var domain = window.location.origin + '/'; // 获取当前域名
|
||
var fullPath = new URL(path, domain).href; // 拼接完整路径
|
||
console.log("下载路径: ", fullPath); // 调试路径
|
||
fetch(fullPath)
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
var link = document.createElement("a");
|
||
link.href = URL.createObjectURL(blob);
|
||
link.setAttribute('download', path.split('/').pop()); // 使用文件名作为下载名
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
})
|
||
.catch(() => {
|
||
layui.layer.msg("下载失败，无法获取文件");
|
||
});
|
||
} else {
|
||
layui.layer.msg("下载失败，路径不存在");
|
||
}
|
||
});
|
||
|
||
// 监听删除按钮点击事件
|
||
$("body").on("click", ".action-item.delete", function () {
|
||
var cardItem = $(this).closest(".card-item");
|
||
var id = cardItem.data("id"); // 获取文件 ID
|
||
|
||
layui.layer.confirm(
|
||
"确定删除该文件吗？",
|
||
{ icon: 3, title: "提示" },
|
||
function (index) {
|
||
$.ajax({
|
||
url: "/picbed/index/delete",
|
||
type: "POST",
|
||
data: { id: id },
|
||
success: function (res) {
|
||
if (res.code === 0) {
|
||
layui.layer.msg(res.msg);
|
||
cardItem.remove(); // 从 DOM 中删除该卡片
|
||
} else {
|
||
layui.layer.msg(res.msg);
|
||
}
|
||
},
|
||
error: function () {
|
||
layui.layer.msg("删除失败，请重试");
|
||
}
|
||
});
|
||
layui.layer.close(index);
|
||
}
|
||
);
|
||
});
|
||
|
||
// 复制文本到剪贴板
|
||
function copyToClipboard(text) {
|
||
var el = document.createElement("textarea");
|
||
el.value = text;
|
||
el.setAttribute("readonly", "");
|
||
el.style.position = "absolute";
|
||
el.style.left = "-9999px";
|
||
document.body.appendChild(el);
|
||
el.select();
|
||
document.execCommand("copy");
|
||
document.body.removeChild(el);
|
||
}
|
||
|
||
// 上传文件
|
||
$(".add-new").on("click", function () {
|
||
layer.open({
|
||
type: 2,
|
||
title: "上传文件",
|
||
content: "/picbed/index/add",
|
||
area: ["800px", "600px"],
|
||
maxmin: true,
|
||
});
|
||
});
|
||
$('.layui-form-bar').on('click', '.add-new', function () {
|
||
tool.open('/project/index/add');
|
||
});
|
||
|
||
// 创建文件夹
|
||
$("#create-folder").on("click", function () {
|
||
layer.open({
|
||
type: 2,
|
||
title: "创建文件夹",
|
||
shadeClose: true,
|
||
content: "/picbed/index/createfolder",
|
||
area: ["800px", "300px"],
|
||
maxmin: true,
|
||
end: function () { // 添加关闭回调
|
||
loadTableData(currentPage); // 重新加载数据
|
||
}
|
||
});
|
||
});
|
||
|
||
// 移动图片到文件夹
|
||
$(document).on("click", ".action-item.move", function () {
|
||
var currentImageId = $(this).closest(".card-item").data("id"); // 获取当前图片的ID
|
||
layer.open({
|
||
type: 2,
|
||
title: "移动文件",
|
||
shadeClose: true,
|
||
content: "/picbed/index/movefolder?imageId=" + currentImageId, // 传递当前图片ID
|
||
area: ["800px", "400px"],
|
||
maxmin: true,
|
||
end: function () { // 添加关闭回调
|
||
loadTableData(currentPage); // 重新加载数据
|
||
}
|
||
});
|
||
});
|
||
|
||
// 批量移动到文件夹
|
||
$(document).on("click", "#batchmove-folder", function () {
|
||
var selectedIds = []; // 初始化选中的ID数组
|
||
$(".select-item:checked").each(function () {
|
||
selectedIds.push($(this).data("id")); // 获取选中的ID
|
||
});
|
||
|
||
if (selectedIds.length === 0) {
|
||
layui.layer.msg("请至少选择一个文件进行移动"); // 提示用户选择文件
|
||
return;
|
||
}
|
||
|
||
layer.open({
|
||
type: 2,
|
||
title: "批量移动文件",
|
||
shadeClose: true,
|
||
content: "/picbed/index/movefolder?imageIds=" + selectedIds.join(","), // 传递选中的ID
|
||
area: ["800px", "400px"],
|
||
maxmin: true,
|
||
end: function () { // 添加关闭回调
|
||
loadTableData(currentPage); // 重新加载数据
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#refresh-btn").on("click", function () {
|
||
loadTableData(currentPage);
|
||
});
|
||
|
||
// 加载相册标签和内容
|
||
function loadFolderTabs() {
|
||
$.get("/picbed/index/getpicbedfolder", function (res) {
|
||
if (res.code === 0) {
|
||
var tabs = $("#folder-tabs");
|
||
var tabContent = $("#tab-content");
|
||
tabs.empty();
|
||
tabContent.empty();
|
||
|
||
// 添加固定的全部标签
|
||
tabs.append(`<li class="layui-this" data-id="all">未分类</li>`);
|
||
tabContent.append(`<div class="layui-tab-item layui-show" id="content-all"></div>`); // 全部内容
|
||
|
||
res.data.forEach(function (folder) {
|
||
tabs.append(`<li data-id="${folder.id}">${folder.name}</li>`); // 动态添加标签
|
||
tabContent.append(`<div class="layui-tab-item" id="content-${folder.id}"></div>`); // 动态添加内容
|
||
});
|
||
|
||
// 绑定点击事件
|
||
tabs.children().on("click", function () {
|
||
var id = $(this).data("id");
|
||
loadTabContent(id); // 加载对应的内容
|
||
loadTableData(currentPage, id); // 传递 id 以获取特定相册的数据
|
||
});
|
||
|
||
// 默认加载全部内容
|
||
loadTabContent("all");
|
||
} else {
|
||
layui.layer.msg(res.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 加载特定标签的内容
|
||
function loadTabContent(id) {
|
||
if (id === "all") {
|
||
loadTableData(currentPage); // 加载全部内容
|
||
} else {
|
||
$.get(`/picbed/index/index`, { folder: id }, function (res) { // 修改为传递参数
|
||
if (res.code === 0) {
|
||
$(`#content-${id}`).html(res.data); // 更新对应标签的内容
|
||
} else {
|
||
layui.layer.msg(res.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 获取所有员工信息
|
||
function loadEmployeeNames() {
|
||
return $.get('/api/index/getallstaff').then(function (res) {
|
||
if (res.code === 0) {
|
||
// 构建员工 ID 和名称的映射
|
||
return res.data.reduce((map, employee) => {
|
||
map[employee.id] = employee.name;
|
||
return map;
|
||
}, {});
|
||
}
|
||
return {};
|
||
});
|
||
}
|
||
|
||
// 加载数据
|
||
function loadTableData(page = null, folder = "all") {
|
||
const params = {}; // 初始化参数对象
|
||
if (folder) {
|
||
params.folder = folder; // 添加 folder 参数
|
||
}
|
||
|
||
$.get("/picbed/index/index", params, function (res) {
|
||
if (res.code === 0) {
|
||
var container = $("#content-all");
|
||
container.empty();
|
||
var domain = window.location.origin;
|
||
|
||
// 调用接口获取员工名称
|
||
loadEmployeeNames().then(employeeMap => {
|
||
res.data.forEach(function (item) {
|
||
var card = `
|
||
<div class="card-item" data-id="${item.id}">
|
||
<div class="items">
|
||
<div class="img-ids">
|
||
<div>
|
||
<input type="checkbox" class="select-item" data-id="${item.id}">
|
||
编号：<strong>${item.id}</strong>
|
||
上传者：<strong>${employeeMap[item.admin_id] || '未知'}</strong> <!-- 更新为员工名称 -->
|
||
</div>
|
||
</div>
|
||
<div class="item-image">
|
||
<img src="${domain}/${item.path}" alt="">
|
||
</div>
|
||
<div class="item-name">
|
||
<div class="path-row">
|
||
<div class="path-value">${item.name}</div>
|
||
</div>
|
||
<div class="action-row">
|
||
<div class="action-item copy-path">复制</div>
|
||
<div class="action-item download">下载</div>
|
||
<div class="action-item move">移动</div>
|
||
<div class="action-item delete">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
container.append(card);
|
||
});
|
||
$('#pagination').hide(); // 隐藏分页
|
||
});
|
||
} else {
|
||
layui.layer.msg(res.msg);
|
||
$('#pagination').hide(); // 隐藏分页
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始加载数据
|
||
loadTableData(currentPage);
|
||
loadFolderTabs();
|
||
|
||
$(document).on("click", ".item-image img", function () {
|
||
var src = $(this).attr("src");
|
||
|
||
// 使用layer弹窗展示图片，自适应大小，无背景、边框和阴影
|
||
layer.open({
|
||
type: 1, // 弹窗类型
|
||
title: false, // 不显示标题
|
||
shadeClose: true, // 点击遮罩关闭
|
||
area: 'auto', // 弹窗大小自适应内容
|
||
shade: [0.8, '#000'], // 透明度为0.8的黑色遮罩
|
||
content: `<div id="zoom-container" style="display: flex; justify-content: center; align-items: center; background: transparent; border: none;">
|
||
<img id="zoom-img" src="${src}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
|
||
</div>`,
|
||
skin: 'layui-layer-no-shadow' // 自定义皮肤，移除阴影
|
||
});
|
||
|
||
// 添加自定义样式，移除box-shadow
|
||
$('.layui-layer-no-shadow').css({
|
||
'box-shadow': 'none', // 移除阴影
|
||
'background': 'transparent', // 透明背景
|
||
'border': 'none', // 无边框
|
||
});
|
||
|
||
// 实现图片通过滚轮放大缩小的功能
|
||
var zoomLevel = 1;
|
||
var img = $('.layui-layer-page'); // 修改为动态选择
|
||
|
||
img.on('wheel', function (event) {
|
||
if (event.originalEvent.deltaY < 0) {
|
||
zoomLevel += 0.1; // 滚轮向上放大
|
||
} else {
|
||
zoomLevel = Math.max(0.1, zoomLevel - 0.1); // 滚轮向下缩小，最小缩放比例为0.1
|
||
}
|
||
img.css('transform', `scale(${zoomLevel})`);
|
||
event.preventDefault(); // 阻止默认滚动行为
|
||
});
|
||
});
|
||
|
||
// 回到顶部功能
|
||
$("#go-to-top").on("click", function () {
|
||
$('html, body').animate({ scrollTop: 0 }, 500); // 平滑滚动到顶部
|
||
});
|
||
|
||
// 显示或隐藏回到顶部按钮
|
||
$(window).on("scroll", function () {
|
||
if ($(this).scrollTop() > 200) {
|
||
$("#go-to-top").fadeIn();
|
||
} else {
|
||
$("#go-to-top").fadeOut();
|
||
}
|
||
});
|
||
|
||
// 全选功能
|
||
$("#select-all").on("click", function () {
|
||
var isChecked = $(this).hasClass("selected"); // 检查当前状态
|
||
$(".select-item").prop("checked", !isChecked); // 切换所有选择框状态
|
||
$(this).toggleClass("selected"); // 切换全选按钮状态
|
||
});
|
||
|
||
// 监听点击事件，选择当前数据
|
||
$(document).on("click", ".img-ids, .select-item", function (event) {
|
||
// 阻止事件冒泡，避免重复触发
|
||
event.stopPropagation();
|
||
var checkbox = $(this).find(".select-item");
|
||
if ($(this).hasClass("select-item")) {
|
||
checkbox.prop("checked", !checkbox.prop("checked")); // 切换选择状态
|
||
} else {
|
||
checkbox.prop("checked", !checkbox.prop("checked")); // 切换选择状态
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
{/block} |