fix(wms): 提高html2canvas缩放比例并优化发货单页面布局

调整wayBill和wayBill2组件的html2canvas缩放比例从3提高到6,以获得更清晰的打印效果
重构发货单页面布局,将表格和分页组件放入滚动容器,表单区域设为固定位置
This commit is contained in:
砂糖
2026-03-16 15:34:53 +08:00
parent d8821db4b2
commit e5821a3f68
3 changed files with 64 additions and 62 deletions

View File

@@ -440,7 +440,7 @@ export default {
// 固定按纸张尺寸截图:右侧留白来自于 contentEl 的缩放241 -> 211mm而不是扩大截图宽度 // 固定按纸张尺寸截图:右侧留白来自于 contentEl 的缩放241 -> 211mm而不是扩大截图宽度
const canvas = await html2canvas(node, { const canvas = await html2canvas(node, {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
scale: 3, scale: 6,
useCORS: true, useCORS: true,
willReadFrequently: true, willReadFrequently: true,
width: pageWidthPx, width: pageWidthPx,

View File

@@ -440,7 +440,7 @@ export default {
// 固定按纸张尺寸截图:右侧留白来自于 contentEl 的缩放241 -> 211mm而不是扩大截图宽度 // 固定按纸张尺寸截图:右侧留白来自于 contentEl 的缩放241 -> 211mm而不是扩大截图宽度
const canvas = await html2canvas(node, { const canvas = await html2canvas(node, {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
scale: 3, scale: 6,
useCORS: true, useCORS: true,
willReadFrequently: true, willReadFrequently: true,
width: pageWidthPx, width: pageWidthPx,

View File

@@ -2,16 +2,16 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="5"> <el-col :span="5">
<PlanList ref="planList" @select="handlePlanSelect"/> <PlanList ref="planList" @select="handlePlanSelect" />
</el-col> </el-col>
<el-col :span="19" style="height: calc(100vh - 124px); overflow-y: scroll;"> <el-col :span="19" style="position: relative;">
<el-card v-if="!selectedPlan"> <el-card v-if="!selectedPlan">
<el-empty description="请先选择发货计划" /> <el-empty description="请先选择发货计划" />
</el-card> </el-card>
<el-card v-else> <el-card v-else>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" <el-form style="position: sticky; left: 0; top: 0;" :model="queryParams" ref="queryForm" size="small"
label-width="68px"> :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="发货单名称" prop="waybillName"> <el-form-item label="发货单名称" prop="waybillName">
<el-input v-model="queryParams.waybillName" placeholder="请输入发货单名称" clearable <el-input v-model="queryParams.waybillName" placeholder="请输入发货单名称" clearable
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
@@ -35,7 +35,7 @@
</el-descriptions> </el-descriptions>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="height: calc(100vh - 184px); overflow-y: scroll; overflow-x: hidden;">
<el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
@row-click="handleRowClick"> @row-click="handleRowClick">
<el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" /> <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
@@ -55,7 +55,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="负责人" align="center" prop="principal" width="60" /> <el-table-column label="负责人" align="center" prop="principal" width="60" />
<el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip/> <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
<!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> --> <!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
<el-table-column label="完成状态" align="center" prop="status" width="120"> <el-table-column label="完成状态" align="center" prop="status" width="120">
@@ -91,6 +91,8 @@
<DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" /> <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
<el-empty v-else description="已发货,不可修改,点击打印查看详情" /> <el-empty v-else description="已发货,不可修改,点击打印查看详情" />
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@@ -119,10 +121,10 @@
<el-input v-model="form.principal" placeholder="请输入负责人" /> <el-input v-model="form.principal" placeholder="请输入负责人" />
</el-form-item> </el-form-item>
<el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId"> <el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
<el-input v-model="form.principalPhone" placeholder="请输入订单编号"/> <el-input v-model="form.principalPhone" placeholder="请输入订单编号" />
</el-form-item> </el-form-item>
<el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单"> <el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled/> <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled />
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />