fix(wms): 提高html2canvas缩放比例并优化发货单页面布局
调整wayBill和wayBill2组件的html2canvas缩放比例从3提高到6，以获得更清晰的打印效果 重构发货单页面布局，将表格和分页组件放入滚动容器，表单区域设为固定位置
This commit is contained in:
砂糖
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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,62 +35,64 @@
|
|||||||
</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
|
||||||
|
@row-click="handleRowClick">
|
||||||
|
<el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
|
||||||
|
<el-table-column label="发货单名称" align="center" prop="waybillName" />
|
||||||
|
<el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
|
||||||
|
<el-table-column label="收货单位" align="center" prop="consigneeUnit" />
|
||||||
|
<!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
|
||||||
|
<el-table-column label="订单编号" align="center" prop="orderNo">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
|
||||||
|
<span v-else>{{ scope.row.principalPhone }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<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 v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
|
<!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
|
||||||
@row-click="handleRowClick">
|
<el-table-column label="完成状态" align="center" prop="status" width="120">
|
||||||
<el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
|
<template slot-scope="scope">
|
||||||
<el-table-column label="发货单名称" align="center" prop="waybillName" />
|
<el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
|
||||||
<el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
|
<el-option label="已发货" :value="1" />
|
||||||
<el-table-column label="收货单位" align="center" prop="consigneeUnit" />
|
<el-option label="未发货" :value="0" />
|
||||||
<!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
|
<el-option label="已打印" :value="2" />
|
||||||
<el-table-column label="订单编号" align="center" prop="orderNo">
|
<el-option label="未打印" :value="3" />
|
||||||
<template slot-scope="scope">
|
</el-select>
|
||||||
<span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
|
</template>
|
||||||
<span v-else>{{ scope.row.principalPhone }}</span>
|
</el-table-column>
|
||||||
</template>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
</el-table-column>
|
<template slot-scope="scope">
|
||||||
<el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
|
<el-button size="mini" type="text" icon="el-icon-view"
|
||||||
<template slot-scope="scope">
|
@click.stop="handlePrint(scope.row)">打印发货单</el-button>
|
||||||
<span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
|
<el-button size="mini" type="text" icon="el-icon-view"
|
||||||
</template>
|
@click.stop="handlePrintSimple(scope.row)">简单打印</el-button>
|
||||||
</el-table-column>
|
<el-button size="mini" type="text" icon="el-icon-copy"
|
||||||
<el-table-column label="负责人" align="center" prop="principal" width="60" />
|
@click.stop="handleCopy(scope.row)">复制新增</el-button>
|
||||||
<el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip/>
|
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
|
||||||
|
title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
|
||||||
|
title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
<!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||||
<el-table-column label="完成状态" align="center" prop="status" width="120">
|
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
|
|
||||||
<el-option label="已发货" :value="1" />
|
|
||||||
<el-option label="未发货" :value="0" />
|
|
||||||
<el-option label="已打印" :value="2" />
|
|
||||||
<el-option label="未打印" :value="3" />
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-view"
|
|
||||||
@click.stop="handlePrint(scope.row)">打印发货单</el-button>
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-view"
|
|
||||||
@click.stop="handlePrintSimple(scope.row)">简单打印</el-button>
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-copy"
|
|
||||||
@click.stop="handleCopy(scope.row)">复制新增</el-button>
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
|
|
||||||
title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
|
|
||||||
title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
<el-divider style="margin: 20px 0;" />
|
||||||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
||||||
|
|
||||||
<el-divider style="margin: 20px 0;" />
|
<DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
|
||||||
|
<el-empty v-else description="已发货，不可修改，点击打印查看详情" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
|
|
||||||
<el-empty v-else description="已发货，不可修改，点击打印查看详情" />
|
|
||||||
</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="请输入内容" />
|
||||||
@@ -405,7 +407,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleCopy(row) {
|
handleCopy(row) {
|
||||||
this.form = {
|
this.form = {
|
||||||
waybillNo: new Date().getTime(),
|
waybillNo: new Date().getTime(),
|
||||||
waybillName: row.waybillName,
|
waybillName: row.waybillName,
|
||||||
planId: row.planId,
|
planId: row.planId,
|
||||||
@@ -485,7 +487,7 @@ export default {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/** 打印发货单 */
|
/** 打印发货单 */
|
||||||
handlePrintSimple(row) {
|
handlePrintSimple(row) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.printType = 1;
|
this.printType = 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user