refactor(wms): 优化发货单组件代码格式和结构
This commit is contained in:
砂糖
@@ -3,148 +3,177 @@
|
||||
<div>
|
||||
<div class="waybill-container" ref="waybillRef">
|
||||
<div class="waybill-content">
|
||||
<!-- 头部信息 -->
|
||||
<!-- 标题信息 -->
|
||||
<div class="title">科伦普发货单</div>
|
||||
<div class="waybill-header">
|
||||
<div class="header-left">
|
||||
<span class="label">收货单位：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
|
||||
<!-- 头部信息 -->
|
||||
<!-- 标题信息 -->
|
||||
<div class="title">科伦普发货单</div>
|
||||
<div class="waybill-header">
|
||||
<div class="header-left">
|
||||
<span class="label">收货单位：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}
|
||||
</div>
|
||||
<span class="label date-label">年</span>
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}
|
||||
</div>
|
||||
<span class="label date-label">月</span>
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}
|
||||
</div>
|
||||
<span class="label date-label">日</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">发货单位：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}</div>
|
||||
<span class="label date-label">年</span>
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}</div>
|
||||
<span class="label date-label">月</span>
|
||||
<div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}</div>
|
||||
<span class="label date-label">日</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">发货单位：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="waybill-header">
|
||||
<div class="header-left">
|
||||
<span class="label">负责人：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
|
||||
<div class="waybill-header">
|
||||
<div class="header-left">
|
||||
<span class="label">负责人：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">电话：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.principalPhone }}</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">合同号：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<span class="label">车牌：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">电话：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.principalPhone }}</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="label">合同号：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<span class="label">车牌：</span>
|
||||
<div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<table class="waybill-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>品名</th>
|
||||
<th>切边</th>
|
||||
<th>包装</th>
|
||||
<th>仓库位置</th>
|
||||
<th>结算</th>
|
||||
<th>原料厂家</th>
|
||||
<th>卷号</th>
|
||||
<th>规格</th>
|
||||
<th>材质</th>
|
||||
<!-- <th>数量（件）</th> -->
|
||||
<th>重量(t)</th>
|
||||
<th>单价</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 无明细提示 -->
|
||||
<tr v-if="localWaybillDetails.length === 0">
|
||||
<td colspan="12" class="no-data">
|
||||
<div class="no-data-content">
|
||||
<el-empty description="暂无发货单明细" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 明细数据 -->
|
||||
<tr v-for="(item, index) in displayWaybillDetails" :key="index">
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.productName }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.rawMaterialFactory }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.specification }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.material }}</div></td>
|
||||
<!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
|
||||
<!-- 表格 -->
|
||||
<table class="waybill-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>品名</th>
|
||||
<th>切边</th>
|
||||
<th>包装</th>
|
||||
<th>仓库位置</th>
|
||||
<th>结算</th>
|
||||
<th>原料厂家</th>
|
||||
<th>卷号</th>
|
||||
<th>规格</th>
|
||||
<th>材质</th>
|
||||
<!-- <th>数量（件）</th> -->
|
||||
<th>重量(t)</th>
|
||||
<th>单价</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 无明细提示 -->
|
||||
<tr v-if="localWaybillDetails.length === 0">
|
||||
<td colspan="12" class="no-data">
|
||||
<div class="no-data-content">
|
||||
<el-empty description="暂无发货单明细" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 明细数据 -->
|
||||
<tr v-for="(item, index) in displayWaybillDetails" :key="index">
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.productName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.rawMaterialFactory }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.specification }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.material }}</div>
|
||||
</td>
|
||||
<!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
|
||||
placeholder="0" /></td> -->
|
||||
<td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
|
||||
placeholder="0.00" /></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div></td>
|
||||
<td><div class="table-input transparent-input" contenteditable>{{ item.remark }}</div></td>
|
||||
</tr>
|
||||
<!-- 加粗最后一行的线 -->
|
||||
<tr style="height: 0;">
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
|
||||
<td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
|
||||
placeholder="0.00" /></td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-input transparent-input" contenteditable>{{ item.remark }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 加粗最后一行的线 -->
|
||||
<tr style="height: 0;">
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
|
||||
placeholder="0" /></td> -->
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
<td style="height: 0;"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<!-- 备注说明 -->
|
||||
<div class="waybill-remarks">
|
||||
<p>
|
||||
1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
|
||||
</p>
|
||||
</div>
|
||||
<!-- 备注说明 -->
|
||||
<div class="waybill-remarks">
|
||||
<p>
|
||||
1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="waybill-pickup-location">
|
||||
<!-- <div class="pickup-location-item inline"> -->
|
||||
<span style="font-size: 18px; font-weight: bold;">取货地点：</span>
|
||||
<input type="text" class="editable-input full-input transparent-input" v-model="localWaybill.pickupLocation" />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="waybill-pickup-location">
|
||||
<!-- <div class="pickup-location-item inline"> -->
|
||||
<span style="font-size: 18px; font-weight: bold;">取货地点：</span>
|
||||
<input type="text" class="editable-input full-input transparent-input"
|
||||
v-model="localWaybill.pickupLocation" />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- 签名栏 -->
|
||||
<div class="waybill-footer">
|
||||
<div class="footer-item inline">
|
||||
<!-- 签名栏 -->
|
||||
<div class="waybill-footer">
|
||||
<!-- <div class="footer-item inline">
|
||||
<span class="label">销售：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
|
||||
</div> -->
|
||||
<div class="footer-item inline">
|
||||
<span class="label">发货：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">司机：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">磅房：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">发货：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}</div>
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">司机：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}</div>
|
||||
</div>
|
||||
<div class="footer-item inline">
|
||||
<span class="label">磅房：</span>
|
||||
<div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
@@ -152,7 +181,8 @@
|
||||
<div class="waybill-pagebar">
|
||||
<el-button size="mini" @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</el-button>
|
||||
<span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
|
||||
<el-button size="mini" @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</el-button>
|
||||
<el-button size="mini" @click="changePage(currentPage + 1)"
|
||||
:disabled="currentPage >= totalPages">下一页</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="saveAsImage">保存为图片</el-button>
|
||||
<el-button type="success" @click="printWaybill">打印</el-button>
|
||||
@@ -396,15 +426,15 @@ export default {
|
||||
scrollY: 0
|
||||
});
|
||||
|
||||
const png = canvas.toDataURL('image/png');
|
||||
const imgPng = await pdfDoc.embedPng(png);
|
||||
const png = canvas.toDataURL('image/png');
|
||||
const imgPng = await pdfDoc.embedPng(png);
|
||||
const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
|
||||
pdfPage.drawImage(imgPng, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pageWidthPt,
|
||||
height: pageHeightPt
|
||||
});
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pageWidthPt,
|
||||
height: pageHeightPt
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
// 恢复截图前的容器样式
|
||||
@@ -628,20 +658,20 @@ export default {
|
||||
|
||||
} */
|
||||
|
||||
/* 重量（kg） */
|
||||
/* 重量（kg） */
|
||||
.waybill-table th:nth-child(10),
|
||||
.waybill-table td:nth-child(10) {
|
||||
width: 70px;
|
||||
|
||||
}
|
||||
|
||||
/* 单价 */
|
||||
/* 单价 */
|
||||
.waybill-table th:nth-child(11),
|
||||
.waybill-table td:nth-child(11) {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* 备注 */
|
||||
/* 备注 */
|
||||
.waybill-table th:nth-child(12),
|
||||
.waybill-table td:nth-child(12) {
|
||||
/* width: 40px; */
|
||||
@@ -827,6 +857,7 @@ export default {
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user