Merge branch 'master' of https://gitea.zianxin.com/zax/Distributor-City-pc
This commit is contained in:
dzc committed
commit
f447cf5b15
1 file changed
+159
-1
@@ -83,6 +83,9 @@
|
||||
<Icon class="mr-5px" icon="ep:upload" />
|
||||
导入商户发货信息
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="handleBatchPrint">
|
||||
一键打印 {{ selectedOrders.length > 0 ? `(已选${selectedOrders.length}项)` : '' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
@@ -91,7 +94,8 @@
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题 -->
|
||||
<el-table v-loading="loading" :data="list" row-key="id">
|
||||
<el-table v-loading="loading" :data="list" row-key="id" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center justify-center">
|
||||
@@ -193,6 +197,7 @@ const exportLoading = ref(false)
|
||||
const total = ref(2) // 列表的总页数
|
||||
const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
|
||||
const queryFormRef = ref<FormInstance>() // 搜索的表单
|
||||
const selectedOrders = ref<TradeOrderApi.OrderVO[]>([]) // 选中的订单列表
|
||||
// 表单搜索
|
||||
const queryParams = ref({
|
||||
pageNo: 1, // 页数
|
||||
@@ -287,6 +292,33 @@ const resetQuery = () => {
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 处理订单选择变化 */
|
||||
const handleSelectionChange = (selection: TradeOrderApi.OrderVO[]) => {
|
||||
selectedOrders.value = selection
|
||||
console.log('当前已选中订单数量:', selection.length)
|
||||
}
|
||||
|
||||
/** 批量打印 */
|
||||
const handleBatchPrint = () => {
|
||||
if (selectedOrders.value.length === 0) {
|
||||
ElMessage.warning('请先选择要打印的订单')
|
||||
return
|
||||
}
|
||||
|
||||
// 筛选有物流面单的订单
|
||||
const ordersWithLabel = selectedOrders.value.filter(order => order.logisticsLabel)
|
||||
|
||||
if (ordersWithLabel.length === 0) {
|
||||
ElMessage.warning('所选订单中没有可打印的物流面单')
|
||||
return
|
||||
}
|
||||
|
||||
ElMessage.success(`准备打印${ordersWithLabel.length}个订单的物流面单`)
|
||||
|
||||
// 在一个新窗口中展示所有面单
|
||||
openBatchPrintWindow(ordersWithLabel)
|
||||
}
|
||||
|
||||
/** 查看订单详情 */
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'TradeOrderDetail', params: { id } })
|
||||
@@ -347,6 +379,132 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
|
||||
/** 批量打开多个订单的面单在一个窗口 */
|
||||
const openBatchPrintWindow = (orders: TradeOrderApi.OrderVO[]) => {
|
||||
// 生成所有订单的HTML内容
|
||||
const ordersHtml = orders.map((order, index) => {
|
||||
const orderItems = order.items || []
|
||||
const productText = orderItems.map(item => `${item.spuName} × ${item.count}`).join('<br>')
|
||||
|
||||
return `
|
||||
<div class="order-container" ${index > 0 ? 'style="page-break-before: always;"' : ''}>
|
||||
<div class="label-wrapper">
|
||||
<img src="${order.logisticsLabel}" alt="物流面单 - 订单${order.no}" class="label-img" />
|
||||
<div class="custom-text">
|
||||
${productText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}).join('')
|
||||
|
||||
const htmlContent = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>批量打印物流面单 (共${orders.length}个订单)</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.print-btn {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
.print-btn button {
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
.print-btn button:hover {
|
||||
background-color: #337ecc;
|
||||
}
|
||||
.order-container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.label-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.label-img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-text {
|
||||
position: absolute;
|
||||
bottom: 165px;
|
||||
left: 50px;
|
||||
color: black;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media print {
|
||||
body {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
}
|
||||
.print-btn {
|
||||
display: none;
|
||||
}
|
||||
.order-container {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
page-break-after: always;
|
||||
}
|
||||
.order-container:last-child {
|
||||
page-break-after: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="print-btn">
|
||||
<button onclick="window.print()">打印全部 (${orders.length}个订单)</button>
|
||||
</div>
|
||||
${ordersHtml}
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
// 在新窗口中打开
|
||||
const newWindow = window.open('', '_blank', 'scrollbars=yes,resizable=yes')
|
||||
if (newWindow) {
|
||||
newWindow.document.write(htmlContent)
|
||||
newWindow.document.close()
|
||||
// 窗口最大化
|
||||
newWindow.moveTo(0, 0)
|
||||
newWindow.resizeTo(screen.width, screen.height)
|
||||
} else {
|
||||
ElMessage.error('无法打开新窗口，请检查浏览器弹窗设置')
|
||||
}
|
||||
}
|
||||
|
||||
/** 在新窗口打开带文字的图片 */
|
||||
const openInNewWindow = () => {
|
||||
if (!rowLogisticsLabel.value || !currentOrderRow.value) {
|
||||
|
||||
Reference in new issue
Block a user