11 changed files with 1054 additions and 104 deletions
-
2package.json
-
3src/api/po/po.js
-
12src/assets/scss/global.scss
-
13src/router/index.js
-
35src/views/modules/handlingunit/handlingunit.vue
-
136src/views/modules/handlingunit/mergeHu.vue
-
276src/views/modules/handlingunit/packHu.vue
-
128src/views/modules/handlingunit/printHu.vue
-
201src/views/modules/handlingunit/splitHu.vue
-
160src/views/modules/handlingunit/viewHu.vue
-
192src/views/modules/recv/recv.vue
@ -0,0 +1,136 @@ |
|||
|
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div> |
|||
<div>合并Handling Unit</div> |
|||
<div class="network" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- 目标HU扫描 --> |
|||
<div class="scan-section"> |
|||
<div class="section-title">目标HU</div> |
|||
<div class="scan-box"> |
|||
<input v-model="targetHu" placeholder="扫描目标HU编码" |
|||
@keyup.enter="searchTargetHu" ref="targetHuInput"/> |
|||
</div> |
|||
<div v-if="targetHuInfo" class="info-box"> |
|||
<div class="info-item"> |
|||
<label>HU编码：</label> |
|||
<span>{{ targetHuInfo.huCode }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 来源HU扫描 --> |
|||
<div class="scan-section"> |
|||
<div class="section-title">来源HU</div> |
|||
<div class="scan-box"> |
|||
<input v-model="sourceHu" placeholder="扫描来源HU编码" |
|||
@keyup.enter="addSourceHu" :disabled="!targetHuInfo"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 来源HU列表 --> |
|||
<div class="hu-list"> |
|||
<el-table :data="sourceHus" height="240" border> |
|||
<el-table-column prop="huCode" label="HU编码"></el-table-column> |
|||
<el-table-column prop="itemCount" label="物料数" width="80"></el-table-column> |
|||
<el-table-column label="操作" width="60"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="danger" size="mini" @click="removeSourceHu(scope.$index)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="button-group"> |
|||
<el-button type="primary" @click="mergePlus" |
|||
:disabled="!targetHuInfo || sourceHus.length === 0"> |
|||
确认合并 |
|||
</el-button> |
|||
<el-button @click="resetForm">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
targetHu: '', |
|||
sourceHu: '', |
|||
targetHuInfo: null, |
|||
sourceHus: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
searchTargetHu() { |
|||
if (!this.targetHu) return |
|||
// TODO: 调用API查询目标HU信息 |
|||
this.targetHuInfo = { |
|||
huCode: this.targetHu, |
|||
itemCount: 0 |
|||
} |
|||
this.sourceHu = '' |
|||
}, |
|||
addSourceHu() { |
|||
if (!this.sourceHu || !this.targetHuInfo) return |
|||
if (this.sourceHu === this.targetHuInfo.huCode) { |
|||
this.$message.warning('不能合并相同的HU') |
|||
return |
|||
} |
|||
// TODO: 调用API查询来源HU信息 |
|||
this.sourceHus.push({ |
|||
huCode: this.sourceHu, |
|||
itemCount: 5 |
|||
}) |
|||
this.sourceHu = '' |
|||
}, |
|||
removeSourceHu(index) { |
|||
this.sourceHus.splice(index, 1) |
|||
}, |
|||
mergePlus() { |
|||
if (!this.targetHuInfo || this.sourceHus.length === 0) return |
|||
// TODO: 调用API提交合并 |
|||
this.$message.success('合并成功') |
|||
this.resetForm() |
|||
}, |
|||
resetForm() { |
|||
this.targetHu = '' |
|||
this.sourceHu = '' |
|||
this.targetHuInfo = null |
|||
this.sourceHus = [] |
|||
this.$nextTick(() => { |
|||
this.$refs.targetHuInput.focus() |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.targetHuInput.focus() |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.scan-section { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
} |
|||
.section-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 10px; |
|||
} |
|||
.hu-list { |
|||
margin: 10px; |
|||
margin-bottom: 60px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,276 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div> |
|||
<div>装Handling Unit</div> |
|||
<div class="network" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- HU扫描区域 --> |
|||
<div class="scan-section"> |
|||
<div class="section-title">扫描HU</div> |
|||
<div class="scan-box"> |
|||
<input v-model="huCode" |
|||
placeholder="扫描或输入HU编码" |
|||
@keyup.enter="searchHu" |
|||
ref="huInput"/> |
|||
</div> |
|||
<!-- HU信息展示 --> |
|||
<div v-if="huInfo" class="info-box"> |
|||
<div class="info-item"> |
|||
<label>HU编码：</label> |
|||
<span>{{ huInfo.huCode }}</span> |
|||
</div> |
|||
<div class="info-item"> |
|||
<label>状态：</label> |
|||
<span>{{ huInfo.status }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 物料扫描区域 --> |
|||
<div class="scan-section" v-if="huInfo"> |
|||
<div class="section-title">扫描物料</div> |
|||
<div class="scan-box"> |
|||
<input v-model="materialCode" |
|||
placeholder="扫描物料条码" |
|||
@keyup.enter="addMaterial"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 物料列表 --> |
|||
<div class="material-list" v-if="items.length > 0"> |
|||
<el-table :data="items" |
|||
height="calc(100vh - 400px)" |
|||
border> |
|||
<el-table-column prop="materialCode" |
|||
label="物料编码" |
|||
width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="materialName" |
|||
label="物料名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="batchNo" |
|||
label="批次" |
|||
width="100"> |
|||
</el-table-column> |
|||
<el-table-column label="数量" |
|||
width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-input-number v-model="scope.row.quantity" |
|||
:min="1" |
|||
:max="scope.row.availableQty" |
|||
size="mini"> |
|||
</el-input-number> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" |
|||
width="60" |
|||
fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="danger" |
|||
style="font-size: 18px" size="small" |
|||
@click="removeItem(scope.$index)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<div class="button-group"> |
|||
<el-button type="text" style="font-size: 18px" size="small" |
|||
@click="submitHu" |
|||
:disabled="!canSubmit"> |
|||
确认装箱 |
|||
</el-button> |
|||
<el-button @click="resetForm" type="text" style="font-size: 18px" size="small">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
huCode: '', |
|||
materialCode: '', |
|||
huInfo: null, |
|||
items: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
canSubmit() { |
|||
return this.huInfo && this.items.length > 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
searchHu() { |
|||
if (!this.huCode) return |
|||
// TODO: 调用API查询HU信息 |
|||
this.huInfo = { |
|||
huCode: this.huCode, |
|||
status: '新建' |
|||
} |
|||
this.materialCode = '' |
|||
}, |
|||
addMaterial() { |
|||
if (!this.materialCode || !this.huInfo) return |
|||
// TODO: 调用API查询物料信息 |
|||
this.items.push({ |
|||
materialCode: this.materialCode, |
|||
materialName: '测试物料', |
|||
batchNo: 'B001', |
|||
quantity: 1, |
|||
availableQty: 100 |
|||
}) |
|||
this.materialCode = '' |
|||
}, |
|||
removeItem(index) { |
|||
this.items.splice(index, 1) |
|||
}, |
|||
submitHu() { |
|||
if (!this.canSubmit) return |
|||
|
|||
const packData = { |
|||
huCode: this.huInfo.huCode, |
|||
items: this.items.map(item => ({ |
|||
materialCode: item.materialCode, |
|||
batchNo: item.batchNo, |
|||
quantity: item.quantity |
|||
})) |
|||
} |
|||
|
|||
// TODO: 调用API提交装箱 |
|||
console.log('装箱数据:', packData) |
|||
this.$message.success('装箱成功') |
|||
this.resetForm() |
|||
}, |
|||
resetForm() { |
|||
this.huCode = '' |
|||
this.materialCode = '' |
|||
this.huInfo = null |
|||
this.items = [] |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pda-container { |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f5f7fa; |
|||
} |
|||
|
|||
.status-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10px 15px; |
|||
background: #2196F3; |
|||
color: white; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.goBack { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.network { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.scan-section { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: white; |
|||
border-radius: 4px; |
|||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
margin-bottom: 10px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.scan-box { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.scan-box input { |
|||
width: 100%; |
|||
padding: 12px; |
|||
font-size: 16px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 4px; |
|||
outline: none; |
|||
} |
|||
|
|||
.scan-box input:focus { |
|||
border-color: #409EFF; |
|||
} |
|||
|
|||
.info-box { |
|||
background: #f5f7fa; |
|||
border-radius: 4px; |
|||
padding: 10px; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin: 5px 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.material-list { |
|||
flex: 1; |
|||
margin: 10px; |
|||
margin-bottom: 70px; |
|||
} |
|||
|
|||
.button-group { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: 10px 15px; |
|||
background: white; |
|||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); |
|||
display: flex; |
|||
justify-content: space-around; |
|||
z-index: 100; |
|||
} |
|||
|
|||
/* 适配小屏幕 */ |
|||
@media screen and (max-width: 375px) { |
|||
.scan-section { |
|||
margin: 5px; |
|||
padding: 8px; |
|||
} |
|||
|
|||
.material-list { |
|||
margin: 5px; |
|||
} |
|||
|
|||
.button-group { |
|||
padding: 8px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
|
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div> |
|||
<div>补打印HU标签</div> |
|||
<div class="network" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- 扫描区域 --> |
|||
<div class="scan-box"> |
|||
<input v-model="huCode" placeholder="扫描HU编码" |
|||
@keyup.enter="searchHu" ref="huInput"/> |
|||
</div> |
|||
|
|||
<!-- HU信息 --> |
|||
<div v-if="huInfo" class="info-box"> |
|||
<div class="info-item"> |
|||
<label>HU编码：</label> |
|||
<span>{{ huInfo.huCode }}</span> |
|||
</div> |
|||
<div class="info-item"> |
|||
<label>创建时间：</label> |
|||
<span>{{ huInfo.createTime }}</span> |
|||
</div> |
|||
<div class="info-item"> |
|||
<label>物料数：</label> |
|||
<span>{{ huInfo.itemCount }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 打印机选择 --> |
|||
<div class="printer-section" v-if="huInfo"> |
|||
<div class="section-title">选择打印机</div> |
|||
<el-select v-model="selectedPrinter" placeholder="请选择打印机" style="width: 100%"> |
|||
<el-option |
|||
v-for="printer in printers" |
|||
:key="printer.value" |
|||
:label="printer.label" |
|||
:value="printer.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<!-- 打印份数 --> |
|||
<div class="copies-section" v-if="huInfo"> |
|||
<div class="section-title">打印份数</div> |
|||
<el-input-number v-model="copies" :min="1" :max="10"></el-input-number> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="button-group"> |
|||
<el-button type="primary" @click="print" |
|||
:disabled="!canPrint"> |
|||
打印标签 |
|||
</el-button> |
|||
<el-button @click="resetForm">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
huCode: '', |
|||
huInfo: null, |
|||
selectedPrinter: '', |
|||
copies: 1, |
|||
printers: [ |
|||
{ label: '打印机1', value: 'printer1' }, |
|||
{ label: '打印机2', value: 'printer2' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
canPrint() { |
|||
return this.huInfo && this.selectedPrinter && this.copies > 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
searchHu() { |
|||
if (!this.huCode) return |
|||
// TODO: 调用API查询HU信息 |
|||
this.huInfo = { |
|||
huCode: this.huCode, |
|||
createTime: '2024-03-14 10:00:00', |
|||
itemCount: 5 |
|||
} |
|||
}, |
|||
print() { |
|||
if (!this.canPrint) return |
|||
// TODO: 调用API执行打印 |
|||
this.$message.success(`正在打印${this.copies}份标签`) |
|||
this.resetForm() |
|||
}, |
|||
resetForm() { |
|||
this.huCode = '' |
|||
this.huInfo = null |
|||
this.selectedPrinter = '' |
|||
this.copies = 1 |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.printer-section, |
|||
.copies-section { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
} |
|||
.section-title { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,201 @@ |
|||
|
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div> |
|||
<div>拆分Handling Unit</div> |
|||
<div class="network" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- 源HU扫描 --> |
|||
<div class="scan-box"> |
|||
<input v-model="sourceHuCode" placeholder="扫描需要拆分的HU" |
|||
@keyup.enter="searchSourceHu" ref="sourceHuInput"/> |
|||
</div> |
|||
|
|||
<!-- HU信息展示 --> |
|||
<div v-if="sourceHuInfo" class="info-box"> |
|||
<div class="info-row"> |
|||
<label>HU编码：</label> |
|||
<span>{{ sourceHuInfo.huCode }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<label>物料数：</label> |
|||
<span>{{ sourceHuInfo.itemCount }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 物料列表 --> |
|||
<div class="material-list" v-if="materials.length > 0"> |
|||
<el-table :data="materials" height="240" border> |
|||
<el-table-column prop="materialCode" label="物料编码"></el-table-column> |
|||
<el-table-column prop="materialName" label="物料名称"></el-table-column> |
|||
<el-table-column prop="totalQty" label="总数量" width="80"></el-table-column> |
|||
<el-table-column label="拆分数量" width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-input-number v-model="scope.row.splitQty" |
|||
:min="1" |
|||
:max="scope.row.totalQty" |
|||
size="mini"> |
|||
</el-input-number> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="选择" width="60"> |
|||
<template slot-scope="scope"> |
|||
<el-checkbox v-model="scope.row.selected"></el-checkbox> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 新HU编码 --> |
|||
<div class="new-hu-section" v-if="materials.length > 0"> |
|||
<div class="section-title">新HU信息</div> |
|||
<div class="scan-box"> |
|||
<input v-model="newHuCode" placeholder="扫描或输入新HU编码"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="button-group"> |
|||
<el-button type="primary" @click="submitSplit" |
|||
:disabled="!canSubmit"> |
|||
确认拆分 |
|||
</el-button> |
|||
<el-button @click="resetForm">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
sourceHuCode: '', |
|||
newHuCode: '', |
|||
sourceHuInfo: null, |
|||
materials: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
canSubmit() { |
|||
return this.sourceHuInfo && |
|||
this.newHuCode && |
|||
this.materials.some(m => m.selected && m.splitQty > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
searchSourceHu() { |
|||
if (!this.sourceHuCode) return |
|||
// TODO: 调用API查询HU信息 |
|||
this.sourceHuInfo = { |
|||
huCode: this.sourceHuCode, |
|||
itemCount: 3 |
|||
} |
|||
// TODO: 调用API获取物料列表 |
|||
this.materials = [ |
|||
{ |
|||
materialCode: 'M001', |
|||
materialName: '物料1', |
|||
totalQty: 100, |
|||
splitQty: 0, |
|||
selected: false |
|||
}, |
|||
{ |
|||
materialCode: 'M002', |
|||
materialName: '物料2', |
|||
totalQty: 50, |
|||
splitQty: 0, |
|||
selected: false |
|||
} |
|||
] |
|||
}, |
|||
submitSplit() { |
|||
// 验证 |
|||
if (!this.sourceHuInfo || !this.newHuCode) { |
|||
this.$message.warning('请完善HU信息') |
|||
return |
|||
} |
|||
|
|||
const splitItems = this.materials |
|||
.filter(m => m.selected && m.splitQty > 0) |
|||
.map(m => ({ |
|||
materialCode: m.materialCode, |
|||
quantity: m.splitQty |
|||
})) |
|||
|
|||
if (splitItems.length === 0) { |
|||
this.$message.warning('请选择需要拆分的物料') |
|||
return |
|||
} |
|||
|
|||
// TODO: 调用API执行拆分 |
|||
this.$message.success('拆分成功') |
|||
this.resetForm() |
|||
}, |
|||
resetForm() { |
|||
this.sourceHuCode = '' |
|||
this.newHuCode = '' |
|||
this.sourceHuInfo = null |
|||
this.materials = [] |
|||
this.$nextTick(() => { |
|||
this.$refs.sourceHuInput.focus() |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.sourceHuInput.focus() |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.scan-box { |
|||
padding: 10px; |
|||
} |
|||
.scan-box input { |
|||
width: 100%; |
|||
padding: 12px; |
|||
font-size: 16px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 4px; |
|||
} |
|||
.info-box { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: #f5f7fa; |
|||
border-radius: 4px; |
|||
} |
|||
.info-row { |
|||
margin: 5px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.material-list { |
|||
margin: 10px; |
|||
} |
|||
.new-hu-section { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
} |
|||
.section-title { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
margin-bottom: 10px; |
|||
} |
|||
.button-group { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: 10px; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<div class="pda-container"> |
|||
<div class="status-bar"> |
|||
<div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div> |
|||
<div>查看Handling Unit</div> |
|||
<div class="network" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- 扫描区域 --> |
|||
<div class="scan-box"> |
|||
<input v-model="huCode" |
|||
placeholder="扫描HU编码" |
|||
@keyup.enter="searchHu" |
|||
ref="huInput"/> |
|||
</div> |
|||
|
|||
<!-- HU基本信息 --> |
|||
<div v-if="huInfo" class="info-box"> |
|||
<div class="info-row"> |
|||
<label>HU编码:</label> |
|||
<span>{{ huInfo.huCode }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<label>创建时间:</label> |
|||
<span>{{ huInfo.createTime }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<label>状态:</label> |
|||
<span>{{ huInfo.status }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 物料列表 --> |
|||
<div v-if="materials.length > 0" class="material-list"> |
|||
<el-table :data="materials" |
|||
height="calc(100vh - 280px)" |
|||
border> |
|||
<el-table-column prop="materialCode" |
|||
label="物料编码" |
|||
width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="materialName" |
|||
label="物料名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="quantity" |
|||
label="数量" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="location" |
|||
label="库位" |
|||
width="100"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="button-group"> |
|||
<el-button @click="resetForm">重置</el-button> |
|||
<el-button type="primary" |
|||
@click="printHu" |
|||
:disabled="!huInfo"> |
|||
打印标签 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
huCode: '', |
|||
huInfo: null, |
|||
materials: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
searchHu() { |
|||
if (!this.huCode) return |
|||
|
|||
// TODO: 调用API查询HU信息 |
|||
this.huInfo = { |
|||
huCode: this.huCode, |
|||
createTime: '2024-03-14 10:00:00', |
|||
status: '已完成' |
|||
} |
|||
|
|||
// TODO: 调用API获取物料列表 |
|||
this.materials = [ |
|||
{ |
|||
materialCode: 'M001', |
|||
materialName: '物料1', |
|||
quantity: 100, |
|||
location: 'A-01-01' |
|||
}, |
|||
{ |
|||
materialCode: 'M002', |
|||
materialName: '物料2', |
|||
quantity: 50, |
|||
location: 'A-01-02' |
|||
} |
|||
] |
|||
}, |
|||
printHu() { |
|||
if (!this.huInfo) return |
|||
this.$message.success('开始打印标签') |
|||
}, |
|||
resetForm() { |
|||
this.huCode = '' |
|||
this.huInfo = null |
|||
this.materials = [] |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.$refs.huInput.focus() |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.scan-box { |
|||
padding: 10px; |
|||
} |
|||
.scan-box input { |
|||
width: 100%; |
|||
padding: 12px; |
|||
font-size: 16px; |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 4px; |
|||
} |
|||
.info-box { |
|||
margin: 10px; |
|||
padding: 10px; |
|||
background: #f5f7fa; |
|||
border-radius: 4px; |
|||
} |
|||
.info-row { |
|||
margin: 5px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.material-list { |
|||
margin: 10px; |
|||
} |
|||
.button-group { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: 10px; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue