first commit
This commit is contained in:
@@ -0,0 +1,426 @@
|
||||
{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}
|
||||
Reference in New Issue
Block a user