7 changed files with 797 additions and 89 deletions
-
1src/router/index.js
-
8src/views/main.vue
-
2src/views/modules/customerIssue/customerIssue.vue
-
55src/views/modules/customerIssue/customerIssuePDA.vue
-
647src/views/modules/customerIssue/customerIssuePDAIssueList.vue
-
6src/views/modules/customerIssue/customerIssuePDAList.vue
-
167src/views/modules/customerIssue/customerIssuePrintSelect.vue
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="header-bar"> |
|||
<div class="header-left" @click="toCustomerIssue()"> |
|||
<i class="el-icon-arrow-left"></i> |
|||
<span>选择打印标签</span> |
|||
</div> |
|||
<div class="header-right" @click="toMain()">首页</div> |
|||
</div> |
|||
|
|||
<div class="section-title"> |
|||
<div class="title-left"> |
|||
<i class="el-icon-tickets"></i> |
|||
<span>请选择需要打印的标签</span> |
|||
</div> |
|||
<div class="title-right"> |
|||
<el-checkbox v-model="allChecked" @change="toggleAll">全选</el-checkbox> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="label-list"> |
|||
<div class="list-header"> |
|||
<div class="col-no">NO.</div> |
|||
<div class="col-label">物料标签</div> |
|||
<div class="col-part">库位</div> |
|||
<div class="col-qty">发料数量</div> |
|||
<div class="col-check">选择</div> |
|||
</div> |
|||
<div v-for="(item, index) in items" :key="item.labelCode" class="list-item"> |
|||
<div class="col-no">{{ index + 1 }}</div> |
|||
<div class="col-label">{{ item.labelCode }}</div> |
|||
<div class="col-part">{{ item.locationId }}</div> |
|||
<div class="col-qty">{{ item.issueQty || item.quantity }}</div> |
|||
<div class="col-check"> |
|||
<el-checkbox v-model="item.__checked"></el-checkbox> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="items.length === 0" class="empty-labels"> |
|||
<p>暂无数据</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-actions"> |
|||
<button class="action-btn secondary" @click="onPrint('QC')">打印QC</button> |
|||
<button class="action-btn primary" @click="onPrint('BOX')">打印BOX</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CustomerIssuePrintSelect', |
|||
data() { |
|||
return { |
|||
items: [], |
|||
allChecked: true, |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleAll(checked) { |
|||
this.items.forEach(i => { |
|||
this.$set(i, '__checked', checked) |
|||
}) |
|||
}, |
|||
toCustomerIssue() { |
|||
this.$confirm('确认不打印就跳转？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
}) |
|||
.then(() => { |
|||
this.$router.push({ |
|||
name: 'customerIssuePDA', |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
// 用户选择继续操作 |
|||
}) |
|||
}, |
|||
|
|||
toMain() { |
|||
this.$confirm('确认不打印就跳转到首页？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
}) |
|||
.then(() => { |
|||
this.$router.push({ path: '/' }) |
|||
}) |
|||
.catch(() => { |
|||
// 用户选择继续操作 |
|||
}) |
|||
}, |
|||
onPrint(type) { |
|||
const selected = this.items.filter(i => i.__checked) |
|||
if (selected.length === 0) { |
|||
this.$message.warning('请至少选择一条记录') |
|||
return |
|||
} |
|||
// 将选择结果暂存，供后续打印页面使用 |
|||
sessionStorage.setItem('customerIssuePrintSelected', JSON.stringify(selected)) |
|||
sessionStorage.setItem('customerIssuePrintType', type) |
|||
this.$message.success('已准备打印：' + type) |
|||
// 根据实际打印流程跳转或调用打印 |
|||
// this.$router.push({ name: 'somePrintPage' }) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 从会话中读取数据 |
|||
try { |
|||
const raw = sessionStorage.getItem('customerIssueScannedLabels') |
|||
const list = raw ? JSON.parse(raw) : [] |
|||
// 标准化字段名与默认勾选 |
|||
this.items = (list || []).map(x => ({ |
|||
...x, |
|||
issueQty: x.issueQty != null ? x.issueQty : x.quantity, |
|||
__checked: true, |
|||
})) |
|||
this.allChecked = this.items.length > 0 && this.items.every(i => i.__checked) |
|||
} catch (e) { |
|||
this.items = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pda-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #f5f5f5; } |
|||
.header-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #17b3a3; color: white; height: 40px; min-height: 40px; } |
|||
.header-left { display: flex; align-items: center; cursor: pointer; font-size: 16px; font-weight: 500; } |
|||
.header-left i { margin-right: 8px; font-size: 18px; } |
|||
.header-right { cursor: pointer; font-size: 16px; font-weight: 500; } |
|||
.section-title { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: white; margin: 0 10px; margin-top: 4px; border-radius: 8px 8px 0 0; border-bottom: 2px solid #17b3a3; } |
|||
.title-left { display: flex; align-items: center; } |
|||
.title-left i { color: #17b3a3; font-size: 16px; margin-right: 8px; } |
|||
.title-left span { color: #17b3a3; font-size: 14px; font-weight: 500; } |
|||
.label-list { background: white; margin: 0 10px 12px; border-radius: 0 0 8px 8px; overflow: hidden; overflow-y: auto; position: relative; } |
|||
.list-header { display: flex; background: #f8f9fa; padding: 12px 8px; border-bottom: 1px solid #e0e0e0; font-size: 12px; color: #666; font-weight: 500; position: sticky; top: 0; z-index: 5; } |
|||
.list-item { display: flex; padding: 12px 8px; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #333; align-items: flex-start; min-height: 48px; } |
|||
.col-no { width: 30px; text-align: center; } |
|||
.col-label { flex: 1.5; text-align: center; word-break: break-all; white-space: normal; line-height: 1.2; } |
|||
.col-part { flex: 1.2; text-align: center; } |
|||
.col-qty { width: 80px; text-align: center; } |
|||
.col-check { width: 100px; text-align: center; display: flex; align-items: center; justify-content: center; } |
|||
/* 放大复选框（直接控制 ElementUI 内部方框尺寸，兼容 scoped） */ |
|||
.col-check ::v-deep .el-checkbox__inner { width: 26px; height: 26px; } |
|||
.col-check ::v-deep .el-checkbox__inner::after { left: 8px; top: 2px; height: 14px; width: 7px; } |
|||
/* 顶部“全选”复选框同步放大 */ |
|||
.section-title .title-right { display: flex; align-items: center; } |
|||
.section-title .title-right ::v-deep .el-checkbox__inner { width: 26px; height: 26px; } |
|||
.section-title .title-right ::v-deep .el-checkbox__inner::after { left: 8px; top: 2px; height: 14px; width: 7px; } |
|||
.empty-labels { padding: 40px 20px; text-align: center; color: #999; } |
|||
.bottom-actions { display: flex; padding: 16px; gap: 20px; background: white; } |
|||
.action-btn { flex: 1; padding: 12px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } |
|||
.action-btn.primary { border: 1px solid #17b3a3; background: #17b3a3; color: white; } |
|||
.action-btn.secondary { border: 1px solid #17b3a3; background: white; color: #17b3a3; } |
|||
.action-btn.primary:hover { background: #13998c; border-color: #13998c; } |
|||
.action-btn.secondary:hover { background: #17b3a3; color: white; } |
|||
.action-btn:active { transform: scale(0.98); } |
|||
@media (max-width: 360px) { |
|||
.section-title { margin: 0 12px; margin-top: 4px; } |
|||
.label-list { margin: 0 12px 8px; } |
|||
.list-header, .list-item { font-size: 11px; } |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue