This commit is contained in:
oneao committed 2026-03-24 21:27:27 +08:00
1 parent b7f50f3ccb
commit 11bcef03e1
8 files changed
+437 -537

No files matched your search

+1 -1
View File
@@ -1,3 +1,3 @@
VITE_APP_PORT = 8080 VITE_APP_PORT = 8081
VITE_ALIYUN_BUCKET = 'g3hy' VITE_ALIYUN_BUCKET = 'g3hy'
@@ -1,3 +1,3 @@
{ {
"g3hd": "http://192.168.1.137:8085/api" "g3hd": "http://127.0.0.1:8085/api"
} }
+153 -436
View File
@@ -1,470 +1,187 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据看板</title>
<title>拖拽触发文件下载演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body { <!-- Tailwind -->
background-color: #f5f7fa; <script src="https://cdn.tailwindcss.com"></script>
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
header { <!-- ECharts -->
text-align: center; <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid #e1e4e8;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.5rem;
}
.subtitle {
color: #7f8c8d;
font-size: 1.1rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
.demo-area,
.explanation {
background-color: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.demo-area h2,
.explanation h2 {
color: #3498db;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
.draggable-item {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
cursor: grab;
user-select: none;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.draggable-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(106, 17, 203, 0.2);
}
.draggable-item:active {
cursor: grabbing;
transform: translateY(-2px);
}
.draggable-icon {
font-size: 3.5rem;
margin-bottom: 15px;
}
.download-hint {
background-color: #f8f9fa;
border-left: 4px solid #3498db;
padding: 15px;
margin-top: 20px;
border-radius: 0 8px 8px 0;
}
.file-list {
margin-top: 20px;
}
.file-item {
display: flex;
align-items: center;
padding: 12px 15px;
margin-bottom: 10px;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.file-icon {
font-size: 1.5rem;
margin-right: 12px;
color: #3498db;
}
.file-info {
flex-grow: 1;
}
.file-name {
font-weight: 600;
margin-bottom: 3px;
}
.file-size {
font-size: 0.85rem;
color: #7f8c8d;
}
.code-container {
background-color: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
overflow-x: auto;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9rem;
}
.code-keyword {
color: #3498db;
}
.code-string {
color: #e74c3c;
}
.code-comment {
color: #7f8c8d;
}
.code-function {
color: #9b59b6;
}
.limitations {
background-color: #fff8e1;
border: 1px solid #ffd54f;
padding: 20px;
border-radius: 8px;
margin-top: 30px;
}
.limitations h3 {
color: #f39c12;
margin-bottom: 15px;
}
footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e1e4e8;
color: #7f8c8d;
font-size: 0.9rem;
}
.status-message {
margin-top: 20px;
padding: 12px;
border-radius: 8px;
text-align: center;
font-weight: 600;
display: none;
}
.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.drag-target {
border: 3px dashed #3498db;
background-color: rgba(52, 152, 219, 0.05);
}
</style>
</head> </head>
<body> <body class="bg-gray-100">
<header>
<h1>拖拽触发文件下载演示</h1>
<p class="subtitle">演示如何通过拖拽操作触发浏览器文件下载</p>
</header>
<div class="container"> <div class="p-4">
<div class="demo-area">
<h2>演示区域</h2>
<p>将下面的元素拖拽到桌面或文件夹,会触发文件下载到浏览器的默认下载目录。</p>
<div class="draggable-item" id="draggableElement" draggable="true"> <!-- 顶部 -->
<div class="draggable-icon">📦</div> <div class="flex justify-between items-center mb-4">
<h3>拖拽我下载文件</h3> <h1 class="text-xl font-bold">数据看板</h1>
<p>按住鼠标左键拖拽到桌面或文件夹</p> <button id="refreshBtn"
</div> class="bg-blue-500 text-white px-3 py-1 rounded"
onclick="refreshData()">
🔄 刷新
</button>
</div>
<div class="download-hint"> <!-- KPI -->
<p><strong>提示:</strong> 文件将下载到浏览器的默认下载目录(如"下载"文件夹),而不是直接保存到拖拽的目标位置。</p> <div id="kpi" class="grid grid-cols-6 gap-3 mb-4"></div>
</div>
<div class="file-list"> <!-- 趋势 -->
<p><strong>可下载的文件:</strong></p> <div class="bg-white p-4 rounded shadow mb-4">
<div class="file-item"> <div class="mb-2 font-semibold">近7天上传趋势</div>
<div class="file-icon">📄</div> <div id="trend" style="height:260px;"></div>
<div class="file-info"> </div>
<div class="file-name">示例文档.txt</div>
<div class="file-size">文本文件,约 20 字节</div>
</div>
</div>
<div class="file-item">
<div class="file-icon">🖼️</div>
<div class="file-info">
<div class="file-name">demo-image.png</div>
<div class="file-size">图片文件,约 45 KB</div>
</div>
</div>
<div class="file-item">
<div class="file-icon">📊</div>
<div class="file-info">
<div class="file-name">数据报告.pdf</div>
<div class="file-size">PDF文档,约 120 KB</div>
</div>
</div>
</div>
<div id="statusMessage" class="status-message"></div> <!-- 中间区域 -->
</div> <div class="grid grid-cols-3 gap-4 mb-4">
<div class="explanation"> <!-- 排行 -->
<h2>技术原理</h2> <div class="bg-white p-4 rounded shadow col-span-2">
<p>这个演示通过以下步骤实现拖拽触发下载:</p> <div class="mb-2 font-semibold">操作员上传排行</div>
<ol> <div id="rank" style="height:260px;"></div>
<li>为可拖拽元素添加 <code>draggable="true"</code> 属性</li>
<li>监听 <code>dragstart</code> 事件</li>
<li>在事件处理函数中,动态创建隐藏的下载链接</li>
<li>设置链接的 <code>href</code> 和 <code>download</code> 属性</li>
<li>通过 JavaScript 模拟点击链接,触发下载</li>
</ol>
<div class="code-container">
<pre><code><span class="code-comment">// 获取可拖拽元素</span>
<span class="code-keyword">const</span> draggable = document.<span class="code-function">getElementById</span>(<span class="code-string">'draggableElement'</span>);
<span class="code-comment">// 监听拖拽开始事件</span>
draggable.<span class="code-function">addEventListener</span>(<span class="code-string">'dragstart'</span>, <span class="code-keyword">function</span>(e) {
<span class="code-comment">// 设置拖拽效果为"复制"</span>
e.dataTransfer.effectAllowed = <span class="code-string">'copy'</span>;
<span class="code-comment">// 设置拖拽数据(某些系统需要)</span>
e.dataTransfer.<span class="code-function">setData</span>(<span class="code-string">'text/plain'</span>, <span class="code-string">'下载文件'</span>);
<span class="code-comment">// 创建隐藏的下载链接</span>
<span class="code-keyword">const</span> link = document.<span class="code-function">createElement</span>(<span class="code-string">'a'</span>);
<span class="code-comment">// 可以根据需要切换不同的文件</span>
<span class="code-keyword">const</span> fileType = <span class="code-function">getSelectedFileType</span>(); <span class="code-comment">// 假设的函数</span>
link.href = <span class="code-function">getFileUrl</span>(fileType); <span class="code-comment">// 文件URL</span>
link.download = <span class="code-function">getFileName</span>(fileType); <span class="code-string">// 下载的文件名</span>
<span class="code-comment">// 模拟点击触发下载</span>
document.body.<span class="code-function">appendChild</span>(link);
link.<span class="code-function">click</span>();
document.body.<span class="code-function">removeChild</span>(link);
<span class="code-comment">// 显示状态消息</span>
<span class="code-function">showStatus</span>(<span class="code-string">'下载已开始,请检查浏览器的下载列表'</span>, <span class="code-string">'success'</span>);
});</code></pre>
</div>
</div>
</div> </div>
<div class="limitations"> <!-- 右侧 -->
<h3>技术限制与注意事项</h3> <div class="flex flex-col gap-4">
<ul>
<li>拖拽操作实际上触发的是浏览器的标准下载流程,文件会保存到默认下载目录,而不是拖拽的目标位置</li> <!-- 最新上传 -->
<li>某些浏览器可能对拖拽触发下载有安全限制</li> <div class="bg-white p-4 rounded shadow">
<li>下载行为受浏览器下载设置的影响(如下载前询问保存位置)</li> <div class="mb-2 font-semibold">最新上传</div>
<li>需要服务器正确设置CORS头部(如果文件来自不同源)</li> <table class="w-full text-sm">
<li>对于大文件,下载可能在后台进行,用户可能不会立即察觉</li> <thead>
</ul> <tr class="text-gray-500">
<th>箱号</th><th>操作员</th><th>时间</th><th>数量</th>
</tr>
</thead>
<tbody id="table"></tbody>
</table>
</div>
<!-- 企业公告 -->
<div class="bg-white p-4 rounded shadow">
<div class="mb-2 font-semibold">📢 企业公告</div>
<div id="notice" class="text-sm space-y-2 max-h-[120px] overflow-auto"></div>
</div>
</div> </div>
<footer> </div>
<p>演示:拖拽触发文件下载 | 使用 HTML、CSS 和 JavaScript 实现</p>
<p>注意:这是一个前端技术演示,实际文件下载功能需要配合服务器端或Blob API</p>
</footer>
<script> <!-- 异常 -->
document.addEventListener('DOMContentLoaded', function () { <div class="bg-white p-4 rounded shadow">
const draggableElement = document.getElementById('draggableElement'); <div class="mb-2 font-semibold text-red-500">⚠️ 数据异常</div>
const statusMessage = document.getElementById('statusMessage'); <div id="warn" class="text-sm text-red-500 space-y-1"></div>
</div>
// 模拟可下载的文件数据 </div>
const files = {
txt: {
name: "示例文档.txt",
content: "这是一个通过拖拽下载的示例文件。\n创建时间: " + new Date().toLocaleString(),
type: "text/plain"
},
png: {
name: "demo-image.png",
// 这里使用一个实际存在的在线图片URL作为示例
url: "https://via.placeholder.com/300x200/3498db/FFFFFF?text=Demo+Image",
type: "image/png"
},
pdf: {
name: "数据报告.pdf",
// 使用一个简单的PDF数据URL作为示例(实际应用中应使用真实文件)
content: "data:application/pdf;base64,JVBERi0xLjcNCiWhs8XXDQoxIDAgb2JqDQo8PC9QYWdlcyAyIDAgUi9UeXBlL0NhdGFsb2cvTWV0YWRhdGEgNTUgMCBSL1ZpZXdlclByZWZlcmVuY2VzIDU2IDAgUj4+DQplbmRvYmoNCjIgMCBvYmoNCjw8L0NvdW50IDEvVHlwZS9QYWdlcy9LaWRzWyAzIDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9YT2JqZWN0PDwvSW1hZ2U1IDUgMCBSPj4vRm9udDw8L0YxIDYgMCBSPj4+Pi9NZWRpYUJveFswIDAgNTk1LjMyIDg0MS45Ml0vQ29udGVudHMgNCAwIFI+Pg0KZW5kb2JqDQo0IDAgb2JqDQo8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDQ3Pj4NCnN0cmVhbQ0KeJwr5DI2UzC2NFcI5TIAQqgMhKGuMZeJoYEhl6mBCZcJF4hrymUJkgWxTCDKzLjMuUy4TKDKQKq4DADa8g6JDQplbmRzdHJlYW0NCmVuZG9iag0KNSAwIG9iag0KPDwvVHlwZS9YT2JqZWN0L1N1YnR5cGUvSW1hZ2UvV2lkdGggMzAwL0hlaWdodCAyMDAvQ29sb3JTcGFjZS9EZXZpY2VSR0IvQml0c1BlckNvbXBvbmVudCA4L0ZpbHRlci9EQ1REZWNvZGUvTGVuZ3RoIDM2OTc+Pg0Kc3RyZWFtDQr/2Q==",
type: "application/pdf"
}
};
// 当前选中的文件类型 <script>
let currentFileType = 'txt'; // ===== 模拟数据 =====
function getData() {
return {
kpi: [
["今日箱数", rand(80,150)],
["照片总数", rand(300,800)],
["活跃操作员", rand(5,20)],
["最近上传", "10:" + rand(10,59)],
["异常箱数", rand(0,10)],
["待处理", rand(0,5)],
],
trend: Array.from({length:7},()=>rand(50,150)),
rank: Array.from({length:5},()=>rand(40,120)),
users: ["张三","李四","王五","赵六","钱七"],
list: [
["MSCU1234567","张三","10:30",5],
["TEMU7654321","李四","10:20",4],
["CMAU9988776","王五","10:10",6],
],
notice: [
"📌 今日起必须上传封条照片",
"📌 晚班请补录遗漏数据",
"📌 周五晚系统维护"
],
warn: [
"图片少于3张:" + rand(0,5),
"箱号为空:" + rand(0,3),
"OCR失败:" + rand(0,3)
]
}
}
// 显示状态消息 function rand(min,max){return Math.floor(Math.random()*(max-min)+min)}
function showStatus(message, type) {
statusMessage.textContent = message;
statusMessage.className = 'status-message ' + type;
statusMessage.style.display = 'block';
// 3秒后隐藏消息 // ===== 渲染 =====
setTimeout(() => { let trendChart = echarts.init(document.getElementById('trend'));
statusMessage.style.display = 'none'; let rankChart = echarts.init(document.getElementById('rank'));
}, 3000);
}
// 获取文件URL function render() {
function getFileUrl(fileType) { const data = getData();
if (fileType === 'png') {
return files.png.url;
} else if (fileType === 'pdf') {
return files.pdf.content; // 使用base64数据URL
} else {
// 为文本文件创建Blob URL
const blob = new Blob([files.txt.content], { type: files.txt.type });
return URL.createObjectURL(blob);
}
}
// 获取文件名 // KPI
function getFileName(fileType) { document.getElementById("kpi").innerHTML = data.kpi.map(i=>`
return files[fileType].name; <div class="bg-white p-3 rounded shadow">
} <div class="text-gray-400 text-xs">${i[0]}</div>
<div class="text-xl font-bold mt-1">${i[1]}</div>
</div>
`).join("");
// 处理拖拽开始事件 // 表格
draggableElement.addEventListener('dragstart', function (e) { document.getElementById("table").innerHTML = data.list.map(i=>`
// 设置拖拽效果为"复制" <tr class="border-t">
e.dataTransfer.effectAllowed = 'copy'; <td>${i[0]}</td>
e.dataTransfer.setData('text/plain', '下载文件: ' + getFileName(currentFileType)); <td>${i[1]}</td>
<td>${i[2]}</td>
<td>${i[3]}</td>
</tr>
`).join("");
// 添加拖拽视觉效果 // 公告
this.classList.add('drag-target'); document.getElementById("notice").innerHTML =
data.notice.map(i=>`<div>${i}</div>`).join("");
// 创建隐藏的下载链接 // 异常
const link = document.createElement('a'); document.getElementById("warn").innerHTML =
link.href = getFileUrl(currentFileType); data.warn.map(i=>`<div>${i}</div>`).join("");
link.download = getFileName(currentFileType);
// 模拟点击触发下载 // 趋势图
document.body.appendChild(link); trendChart.setOption({
link.click(); xAxis: { type: 'category', data: ['一','二','三','四','五','六','日'] },
document.body.removeChild(link); yAxis: { type: 'value' },
series: [{
data: data.trend,
type: 'line',
smooth: true
}]
});
// 显示成功消息 // 排行
showStatus(`"${getFileName(currentFileType)}" 下载已开始,请检查浏览器的下载列表`, 'success'); rankChart.setOption({
xAxis: { type: 'category', data: data.users },
yAxis: { type: 'value' },
series: [{
data: data.rank,
type: 'bar'
}]
});
}
// 如果是文本文件,需要释放Blob URL // ===== 刷新 =====
if (currentFileType === 'txt') { function refreshData() {
setTimeout(() => URL.revokeObjectURL(link.href), 100); const btn = document.getElementById("refreshBtn");
} btn.innerText = "刷新中...";
btn.disabled = true;
// 循环切换文件类型(用于演示多种文件) setTimeout(()=>{
if (currentFileType === 'txt') { render();
currentFileType = 'png'; btn.innerText = "🔄 刷新";
} else if (currentFileType === 'png') { btn.disabled = false;
currentFileType = 'pdf'; }, 800);
} else { }
currentFileType = 'txt';
}
// 更新拖拽元素的提示文本 render();
updateDraggableText(); </script>
});
// 拖拽结束事件
draggableElement.addEventListener('dragend', function () {
this.classList.remove('drag-target');
});
// 更新拖拽元素的提示文本
function updateDraggableText() {
const fileTypeNames = {
'txt': '文本文件',
'png': '图片文件',
'pdf': 'PDF文档'
};
const fileTypeElement = draggableElement.querySelector('p');
if (fileTypeElement) {
fileTypeElement.textContent = `下次拖拽将下载: ${getFileName(currentFileType)} (${fileTypeNames[currentFileType]})`;
}
}
// 初始化文本
updateDraggableText();
// 添加文件类型选择功能
const fileItems = document.querySelectorAll('.file-item');
fileItems.forEach((item, index) => {
item.addEventListener('click', function () {
const types = ['txt', 'png', 'pdf'];
currentFileType = types[index];
updateDraggableText();
// 高亮显示选中的文件
fileItems.forEach(el => el.style.backgroundColor = '#f8f9fa');
this.style.backgroundColor = '#e3f2fd';
showStatus(`已选择 "${getFileName(currentFileType)}",现在可以拖拽下载`, 'success');
});
});
// 默认选中第一个文件
if (fileItems.length > 0) {
fileItems[0].style.backgroundColor = '#e3f2fd';
}
});
</script>
</body> </body>
</html> </html>
+4
View File
@@ -13,6 +13,7 @@ declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Directory: typeof import('./src/components/wang-editor/modules/directory.vue')['default'] Directory: typeof import('./src/components/wang-editor/modules/directory.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -27,9 +28,12 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSplitter: typeof import('element-plus/es')['ElSplitter'] ElSplitter: typeof import('element-plus/es')['ElSplitter']
ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel'] ElSplitterPanel: typeof import('element-plus/es')['ElSplitterPanel']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree'] ElTree: typeof import('element-plus/es')['ElTree']
G3Column: typeof import('./src/components/g3-table/g3-column.vue')['default'] G3Column: typeof import('./src/components/g3-table/g3-column.vue')['default']
@@ -19,3 +19,14 @@
.el-button--large { .el-button--large {
height: 32px; height: 32px;
} }
.el-loading-mask {
&.is-fullscreen {
.el-loading-spinner .path {
stroke: #fff !important;
}
.el-loading-text {
color: #fff;
}
}
}
+14 -18
View File
@@ -287,7 +287,6 @@ export function getAliyunFileBlob(url) {
// 检查响应状态 // 检查响应状态
if (!response.ok) { if (!response.ok) {
ElMessage.error(`下载失败:${response.status}`);
reject(new Error(`下载失败:${response.status}`)); reject(new Error(`下载失败:${response.status}`));
return; return;
} }
@@ -298,8 +297,6 @@ export function getAliyunFileBlob(url) {
// 返回blob // 返回blob
resolve(blob); resolve(blob);
} catch (error) { } catch (error) {
// 捕获网络请求失败或其他错误
ElMessage.error("下载文件时发生错误");
reject(error); reject(error);
} }
} }
@@ -311,27 +308,26 @@ export function getAliyunFileBlob(url) {
export function downloadZip(files, fileName = "文件合集", callback) { export function downloadZip(files, fileName = "文件合集", callback) {
const zip = new JSZip(); const zip = new JSZip();
const addedFiles = new Set(); // 用来存储已添加的文件名 const addedFiles = new Set();
let result = files.map((item) => { const tasks = files.map((item) => {
let promise = getAliyunFileBlob(item.mx_mapfilename).then((res) => { return getAliyunFileBlob(item.mx_mapfilename).then((res) => {
// 处理文件名重复的情况 const uniqueFileName = getUniqueFileName(item.mx_filename, addedFiles);
let uniqueFileName = getUniqueFileName(item.mx_filename, addedFiles);
zip.file(uniqueFileName, res, { binary: true }); zip.file(uniqueFileName, res, { binary: true });
addedFiles.add(uniqueFileName); // 添加文件名到已添加的集合中 addedFiles.add(uniqueFileName);
}); });
return promise;
}); });
Promise.all(result) // ✅ 关键:return
.then(() => { return Promise.all(tasks)
zip.generateAsync({ type: "blob" }).then((res) => { .then(() => zip.generateAsync({ type: "blob" }))
callback && callback(); .then((res) => {
saveAs(res, `${fileName}.zip`); saveAs(res, `${fileName}.zip`);
});
})
.catch(() => {
callback && callback(); callback && callback();
})
.catch((err) => {
callback && callback();
throw err; // ✅ 继续往外抛
}); });
} }
@@ -8,7 +8,11 @@ import {
} from "@/request/api"; } from "@/request/api";
import { getAlignByFormat, formatValueByFormat } from "@/utils/columns"; import { getAlignByFormat, formatValueByFormat } from "@/utils/columns";
import { updateViewTableColumns } from "@/utils/columns"; import { updateViewTableColumns } from "@/utils/columns";
import { ElMessage } from "element-plus"; import { downloadZip } from "@/utils/file";
import { formatToDate } from "@/utils/time";
import { ElLoading, ElMessage } from "element-plus";
import { saveAs } from "file-saver";
import JSZip from "jszip";
const tableRef = ref(); const tableRef = ref();
@@ -49,7 +53,9 @@ const viewName = "v_container";
const showPreview = ref(false); const showPreview = ref(false);
const previewIndex = ref(-1); const previewIndex = ref(-1);
const previewImageList = computed(() => { const previewImageList = computed(() => {
return tableData.value.map((item) => item.b_container_img).filter((img) => img); return tableData.value
.map((item) => item.b_container_img)
.filter((img) => img);
}); });
const currentRow = ref({}); const currentRow = ref({});
@@ -172,38 +178,53 @@ async function deleteRows(rows = []) {
return; return;
} }
// 确保 deleteIds 数组中的值是数字,防止 SQL 注入 const loading = ElLoading.service({
const safeDeleteIds = deleteIds.map((id) => Number(id)); lock: true,
text: "正在删除中...",
// 使用安全的 SQL 查询
const fileRes = await loadDataApi("bf_file", `father IN (${safeDeleteIds.join(",")})`, "", [
"subid",
]);
if (!fileRes.success) {
return;
}
for (const file of fileRes.data) {
await deleteFileApi(file.subid);
}
const requestData = [
{
tableName: "b_container",
keyField: "b_id",
inserts: [],
updates: [],
deletes: deleteIds.map((id) => ({ b_id: id })),
},
];
await saveObjectApi(requestData).then((res) => {
if (res.success) {
ElMessage.success("删除成功");
loadTableDatas();
}
}); });
try {
// 确保 deleteIds 数组中的值是数字,防止 SQL 注入
const safeDeleteIds = deleteIds.map((id) => Number(id));
// 使用安全的 SQL 查询
const fileRes = await loadDataApi(
"bf_file",
`father IN (${safeDeleteIds.join(",")})`,
"",
["subid"],
);
if (!fileRes.success) {
return;
}
for (const file of fileRes.data) {
await deleteFileApi(file.subid);
}
const requestData = [
{
tableName: "b_container",
keyField: "b_id",
inserts: [],
updates: [],
deletes: deleteIds.map((id) => ({ b_id: id })),
},
];
await saveObjectApi(requestData).then((res) => {
if (res.success) {
ElMessage.success("删除成功");
loadTableDatas();
}
});
} catch (err) {
ElMessage.error("删除失败");
console.log(err);
} finally {
loading.close();
}
} }
function handleSearch() { function handleSearch() {
@@ -241,9 +262,167 @@ function handleFileShow(data) {
showFile.value = true; showFile.value = true;
} }
function handleDownloadOne(data) { async function handleDownloadOne(data) {
console.log(data); const loading = ElLoading.service({
// 获取 lock: true,
text: "正在下载并打包文件,请稍候...",
});
try {
const fileRes = await loadDataApi(
"bf_file",
`father = '${data.b_id}'`,
"mx_xh asc",
);
if (!fileRes.success) {
ElMessage.error("获取附件失败");
return;
}
const downloadFiles = fileRes.data.map((item, index) => ({
mx_filename: buildFileName(
data.b_container_no,
index + 1,
item.mx_filename,
),
mx_mapfilename: item.mx_mapfilename,
}));
await downloadZip(
downloadFiles,
`${data.b_container_no}_${formatToDate(data.b_inputdatetime)}`,
);
ElMessage.success("下载完成");
} catch (e) {
console.log(e);
ElMessage.error("下载失败");
} finally {
loading.close();
}
}
async function runWithLimit(tasks, limit = 3) {
const results = [];
const executing = [];
for (const task of tasks) {
const p = task().then((res) => {
executing.splice(executing.indexOf(p), 1);
return res;
});
results.push(p);
executing.push(p);
if (executing.length >= limit) {
await Promise.race(executing);
}
}
return Promise.all(results);
}
async function handleDownloadBatch() {
const $table = tableRef.value;
if (!$table) return;
const records = $table.getCheckboxRecords();
if (records.length === 0) {
ElMessage.warning("请选择需要下载的数据");
return;
}
const loading = ElLoading.service({
lock: true,
text: "正在下载并打包文件,请稍候...",
});
const zip = new JSZip();
try {
let total = 0;
let finished = 0;
// 👉 先统计总文件数(用于进度)
for (const item of records) {
const fileRes = await loadDataApi(
"bf_file",
`father = '${item.b_id}'`,
"",
);
if (fileRes.success) {
total += (fileRes.data || []).length;
}
}
// 👉 正式处理
for (const item of records) {
const folderName = `${item.b_container_no}_${formatToDate(
item.b_inputdatetime,
)}`;
const folder = zip.folder(folderName);
const fileRes = await loadDataApi(
"bf_file",
`father = '${item.b_id}'`,
"mx_xh asc",
);
if (!fileRes.success) {
ElMessage.error("获取附件失败");
continue;
}
const files = fileRes.data || [];
const tasks = files.map((file, index) => async () => {
const fileUrl = file.mx_mapfilename;
try {
const res = await fetch(fileUrl);
const blob = await res.blob();
const fileName =
buildFileName(item.b_container_no, index + 1, file.mx_filename) ||
"未命名文件";
folder.file(fileName, blob);
} catch (e) {
ElMessage.error(item.b_container_no + "箱号部分图片下载失败");
console.error("下载失败:", fileUrl);
} finally {
finished++;
loading.setText(`正在下载 ${finished}/${total} 个文件...`);
}
});
// 控制并发数
await runWithLimit(tasks, 3);
}
// 👉 生成 zip
loading.setText("正在生成压缩包...");
const content = await zip.generateAsync({ type: "blob" });
saveAs(content, "批量下载.zip");
ElMessage.success("下载完成");
} catch (error) {
console.error(error);
ElMessage.error("打包失败");
} finally {
loading.close();
}
}
function buildFileName(containerNo, index, fileName) {
const formattedIndex = String(index).padStart(2, "0");
return `${containerNo}_${formattedIndex}.${fileName.split(".").pop()}`;
} }
</script> </script>
@@ -299,7 +478,7 @@ function handleDownloadOne(data) {
<div class="g3-content"> <div class="g3-content">
<div class="content-top"> <div class="content-top">
<div> <div>
<el-button type="primary"> <el-button type="primary" @click="handleDownloadBatch">
<el-icon class="el-icon--left"> <el-icon class="el-icon--left">
<G3Icon icon="lucide:cloud-download" /> <G3Icon icon="lucide:cloud-download" />
</el-icon> </el-icon>
@@ -368,7 +547,14 @@ function handleDownloadOne(data) {
}" }"
height="100%" height="100%"
> >
<vxe-column field="seq" type="seq" width="50" align="center" title=" " fixed="left" /> <vxe-column
field="seq"
type="seq"
width="50"
align="center"
title=" "
fixed="left"
/>
<vxe-column type="checkbox" width="50" align="center" fixed="left" /> <vxe-column type="checkbox" width="50" align="center" fixed="left" />
<vxe-column <vxe-column
v-for="column in columns" v-for="column in columns"
@@ -389,7 +575,12 @@ function handleDownloadOne(data) {
/> />
</template> </template>
<template v-else> <template v-else>
{{ formatValueByFormat(row[column.col_FieldName], column.col_DisplayFormat) }} {{
formatValueByFormat(
row[column.col_FieldName],
column.col_DisplayFormat,
)
}}
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
+23 -42
View File
@@ -1,49 +1,30 @@
<script setup lang="js"> <script setup lang="js">
const value = ref(""); import { saveAs } from "file-saver";
import JSZip from "jszip";
const options = [ // 假设这些是文件数据和它们的路径
{ const files = [
value: "Option1", { name: "file1.txt", folder: "folder1", content: "This is file 1 content" },
label: "Option1", { name: "file2.txt", folder: "folder2", content: "This is file 2 content" },
}, { name: "file3.txt", folder: "folder1", content: "This is file 3 content" },
{ { name: "file4.txt", folder: "folder3", content: "This is file 4 content" },
value: "Option2",
label: "Option2",
},
{
value: "Option3",
label: "Option3",
},
{
value: "Option4",
label: "Option4",
},
{
value: "Option5",
label: "Option5",
},
]; ];
async function createZip() {
const zip = new JSZip();
// 遍历文件列表,将文件按文件夹添加到 ZIP 文件中
files.forEach((file) => {
// 创建文件夹并将文件添加到对应的文件夹下
zip.folder(file.folder).file(file.name, file.content);
});
// 生成并下载 ZIP 文件
const content = await zip.generateAsync({ type: "blob" });
saveAs(content, "files.zip");
}
</script> </script>
<template> <template>
<G3Grid direction="row"> <el-button @click="createZip">测试</el-button>
<G3GridGroup :label-width="80" :width="440" :column="2">
<G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
<el-input type="textarea" v-model="value" />
</G3GridItem>
<G3GridItem label="3" :span="1">
<el-input />
</G3GridItem>
</G3GridGroup>
<G3GridGroup :label-width="80" :width="440" :column="2">
<G3GridItem label="1222222222222222222222222" content="2" :span="1" required>
<el-input type="textarea" v-model="value" />
</G3GridItem>
<G3GridItem label="3" :span="1">
<el-input />
</G3GridItem>
</G3GridGroup>
</G3Grid>
</template> </template>