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