You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.0 KiB
141 lines
4.0 KiB
<template>
|
|
<div>
|
|
<div class="pda-container">
|
|
<div class="status-bar">
|
|
<div class="goBack" @click="goBack"><i class="el-icon-arrow-left"></i>上一页</div>
|
|
<div class="goBack">{{ functionTitle }}</div>
|
|
<div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div>
|
|
</div>
|
|
<div style="overflow-y: auto">
|
|
<!-- 功能选择 -->
|
|
<div class="function-selector" v-if="!selectedFunction">
|
|
<div class="function-card" @click="selectFunction('direct')">
|
|
<div class="function-icon">📦</div>
|
|
<div class="function-title">直接发料</div>
|
|
<div class="function-desc">输入工单/PO号，扫描物料标签直接发料</div>
|
|
</div>
|
|
<div class="function-card" @click="selectFunction('picking')">
|
|
<div class="function-icon">🏗️</div>
|
|
<div class="function-title">拣选装托盘</div>
|
|
<div class="function-desc">基于申请单创建托盘，扫描箱卷绑定</div>
|
|
</div>
|
|
<div class="function-card" @click="selectFunction('move')">
|
|
<div class="function-icon">🚚</div>
|
|
<div class="function-title">移库发料</div>
|
|
<div class="function-desc">输入申请单/PO号，选择库位，生成移库记录</div>
|
|
</div>
|
|
<div class="function-card" @click="selectFunction('return')">
|
|
<div class="function-icon">↩️</div>
|
|
<div class="function-title">退料</div>
|
|
<div class="function-desc">选择退料类型，录入退料数量，生成退料记录</div>
|
|
</div>
|
|
</div>
|
|
<!-- 直接发料骨架 -->
|
|
<div v-if="selectedFunction === 'direct'">
|
|
<direct-issue @back="resetAll" />
|
|
</div>
|
|
<!-- 拣选装托盘骨架 -->
|
|
<div v-if="selectedFunction === 'picking'">
|
|
<picking-issue @back="resetAll" />
|
|
</div>
|
|
<!-- 移库发料骨架 -->
|
|
<div v-if="selectedFunction === 'move'">
|
|
<move-issue @back="resetAll" />
|
|
</div>
|
|
<!-- 退料骨架 -->
|
|
<div v-if="selectedFunction === 'return'">
|
|
<return-issue @back="resetAll" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DirectIssue from './DirectIssue.vue'
|
|
import PickingIssue from './PickingIssue.vue'
|
|
import MoveIssue from './MoveIssue.vue'
|
|
import ReturnIssue from './ReturnIssue.vue'
|
|
|
|
export default {
|
|
name: 'OutsourcingIssuePDA',
|
|
components: {
|
|
DirectIssue,
|
|
PickingIssue,
|
|
MoveIssue,
|
|
ReturnIssue
|
|
},
|
|
data() {
|
|
return {
|
|
selectedFunction: null
|
|
}
|
|
},
|
|
computed: {
|
|
functionTitle() {
|
|
if (!this.selectedFunction) return '委外发料';
|
|
if (this.selectedFunction === 'direct') return '直接发料';
|
|
if (this.selectedFunction === 'picking') return '拣选装托盘';
|
|
if (this.selectedFunction === 'move') return '移库发料';
|
|
if (this.selectedFunction === 'return') return '退料';
|
|
return '委外发料';
|
|
}
|
|
},
|
|
methods: {
|
|
selectFunction(func) {
|
|
this.selectedFunction = func
|
|
},
|
|
resetAll() {
|
|
this.selectedFunction = null
|
|
},
|
|
goBack() {
|
|
if (!this.selectedFunction) {
|
|
this.$router.push('/')
|
|
} else {
|
|
this.selectedFunction = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.outsourcing-issue {
|
|
padding: 10px;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
.function-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding: 20px 0;
|
|
}
|
|
.function-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-align: center;
|
|
}
|
|
.function-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.function-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.function-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
color: #333;
|
|
}
|
|
.function-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
</style>
|