15 changed files with 3405 additions and 1262 deletions
-
4src/api/production/production-issue.js
-
6src/router/index.js
-
3src/views/common/login.vue
-
363src/views/modules/outsourcing-issue/DirectIssue.vue
-
50src/views/modules/outsourcing-issue/MoveIssue.vue
-
71src/views/modules/outsourcing-issue/PickingIssue.vue
-
58src/views/modules/outsourcing-issue/ReturnIssue.vue
-
283src/views/modules/outsourcing-issue/index.vue
-
402src/views/modules/outsourcing-issue/outsourcingPicking.vue
-
1030src/views/modules/outsourcing-issue/outsourcingPickingDetail.vue
-
358src/views/modules/outsourcing-issue/pick.vue
-
165src/views/modules/production-issue/production.vue
-
489src/views/modules/production-issue/productionIssuePda.vue
-
399src/views/modules/production-issue/productionPicking.vue
-
984src/views/modules/production-issue/productionPickingDetail.vue
@ -1,363 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div class="status-bar"> |
|
||||
<div class="goBack" @click="handleBack"><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 class="input-section"> |
|
||||
<!-- PO号输入 --> |
|
||||
<div v-if="processFlag === 1"> |
|
||||
<div class="input-group"> |
|
||||
<div class="input-group"> |
|
||||
<label>PO号</label> |
|
||||
<div class="input-with-scan"> |
|
||||
<input v-model="poNo" placeholder="请输入或扫描PO号" @keyup.enter="loadMaterials" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="input-group"> |
|
||||
<button @click="loadMaterials" class="scan-btn">确认</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="materials-section" v-if="materialList.length"> |
|
||||
<div class="material-list"> |
|
||||
<div v-for="(material, index) in materialList" :key="index" class="material-item" |
|
||||
:class="{ selected: selectedMaterial && selectedMaterial.partNo === material.partNo }" |
|
||||
@click="goToDetail(material)"> |
|
||||
<div class="material-info"> |
|
||||
<div class="part-no">{{ material.partNo }}</div> |
|
||||
<div class="part-desc">{{ material.desc }}</div> |
|
||||
<div class="qty-info"> |
|
||||
需求: {{ material.qty }} | 已发: {{ material.recvQty }} | 剩余: {{ material.thisRecvQty }} |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="material-status"> |
|
||||
<span v-if="material.thisRecvQty > 0" class="status-pending">待发料</span> |
|
||||
<span v-else class="status-complete">已完成</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 扫描标签/发料详情 --> |
|
||||
<div class="scan-section" v-if="processFlag === 2"> |
|
||||
<div class="label-info" v-if="labelInfo"> |
|
||||
<div class="info-row"><span class="label">物料编码:</span><span class="value">{{ labelInfo.partNo }}</span></div> |
|
||||
<div class="info-row"><span class="label">批次号:</span><span class="value">{{ labelInfo.batchNo }}</span></div> |
|
||||
<div class="info-row"><span class="label">可用数量:</span><span class="value">{{ labelInfo.availableQty }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="qty-input" v-if="labelInfo"> |
|
||||
<div class="input-group"> |
|
||||
<label>发料数量</label> |
|
||||
<input v-model="issueQty" type="number" |
|
||||
:max="Math.min(selectedMaterial.thisRecvQty, labelInfo.availableQty)" placeholder="请输入发料数量" /> |
|
||||
</div> |
|
||||
<div class="input-group"> |
|
||||
<label>备注</label> |
|
||||
<el-input type="textarea" v-model="remark" placeholder="可选" /> |
|
||||
</div> |
|
||||
<button @click="confirmIssue" class="confirm-btn" :disabled="!issueQty">确认发料</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 消息提示 --> |
|
||||
<div class="message" v-if="message" :class="messageType">{{ message }}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { getPoList } from '@/api/po/po.js' |
|
||||
export default { |
|
||||
name: 'DirectIssue', |
|
||||
props: { |
|
||||
functionTitle: { |
|
||||
type: String, |
|
||||
default: '', |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
processFlag: 1, // 1=PO号输入, 2=物料列表, 3=扫描标签/发料详情 |
|
||||
poNo: '', |
|
||||
materialList: [], |
|
||||
selectedMaterial: null, |
|
||||
scannedLabel: '', |
|
||||
labelInfo: null, |
|
||||
issueQty: null, |
|
||||
remark: '', |
|
||||
message: '', |
|
||||
messageType: 'info', |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleBack() { |
|
||||
if (this.processFlag === 2) { |
|
||||
this.processFlag = 1 |
|
||||
} else if (this.processFlag === 1) { |
|
||||
this.$emit('back') |
|
||||
} |
|
||||
}, |
|
||||
async loadMaterials() { |
|
||||
if (!this.poNo) { |
|
||||
this.showMessage('请输入PO号', 'error') |
|
||||
return |
|
||||
} |
|
||||
// 调用API获取PO物料 |
|
||||
try { |
|
||||
const { data } = await getPoList({ |
|
||||
poNumber: this.poNo, |
|
||||
site: localStorage.getItem('site'), |
|
||||
}) |
|
||||
if (data.code === 0 && data.rows && data.rows.length > 0) { |
|
||||
this.materialList = data.rows |
|
||||
} else { |
|
||||
this.showMessage(data.msg || '未找到PO物料', 'warning') |
|
||||
} |
|
||||
} catch (e) { |
|
||||
this.showMessage('网络错误', 'error') |
|
||||
} |
|
||||
}, |
|
||||
goToDetail(material) { |
|
||||
if (material.thisRecvQty <= 0) { |
|
||||
this.showMessage('该物料已发料完成', 'warning') |
|
||||
return |
|
||||
} |
|
||||
this.selectedMaterial = material |
|
||||
this.scannedLabel = '' |
|
||||
this.labelInfo = { |
|
||||
partNo: this.selectedMaterial.partNo, |
|
||||
batchNo: 'BATCH001', |
|
||||
availableQty: 100, |
|
||||
} |
|
||||
this.issueQty = null |
|
||||
this.processFlag = 2 |
|
||||
}, |
|
||||
resetPO() { |
|
||||
this.poNo = '' |
|
||||
this.materialList = [] |
|
||||
this.selectedMaterial = null |
|
||||
this.scannedLabel = '' |
|
||||
this.labelInfo = null |
|
||||
this.issueQty = null |
|
||||
this.processFlag = 1 |
|
||||
}, |
|
||||
parseMaterialLabel() { |
|
||||
// TODO: 调用解析标签API，获取labelInfo |
|
||||
this.labelInfo = { |
|
||||
partNo: this.selectedMaterial.partNo, |
|
||||
batchNo: 'BATCH001', |
|
||||
availableQty: 100, |
|
||||
} |
|
||||
this.issueQty = null |
|
||||
this.showMessage('标签解析成功', 'success') |
|
||||
}, |
|
||||
confirmIssue() { |
|
||||
if (!this.issueQty || this.issueQty <= 0) { |
|
||||
this.showMessage('请输入有效的发料数量', 'error') |
|
||||
return |
|
||||
} |
|
||||
// TODO: 调用发料API |
|
||||
this.showMessage('发料成功', 'success') |
|
||||
// 刷新物料列表 |
|
||||
this.loadMaterials() |
|
||||
this.selectedMaterial = null |
|
||||
this.scannedLabel = '' |
|
||||
this.labelInfo = null |
|
||||
this.issueQty = null |
|
||||
this.processFlag = 1 |
|
||||
}, |
|
||||
showMessage(text, type = 'info') { |
|
||||
this.message = text |
|
||||
this.messageType = type |
|
||||
setTimeout(() => { |
|
||||
this.message = '' |
|
||||
}, 2000) |
|
||||
}, |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.input-section { |
|
||||
background: white; |
|
||||
border-radius: 8px; |
|
||||
padding: 15px; |
|
||||
margin-bottom: 15px; |
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
.section-header { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin-bottom: 15px; |
|
||||
padding-bottom: 10px; |
|
||||
border-bottom: 1px solid #eee; |
|
||||
} |
|
||||
.reset-btn { |
|
||||
background: #17b3a3; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
padding: 6px 12px; |
|
||||
border-radius: 4px; |
|
||||
cursor: pointer; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.input-group { |
|
||||
margin-bottom: 15px; |
|
||||
} |
|
||||
.input-group label { |
|
||||
display: block; |
|
||||
margin-bottom: 5px; |
|
||||
font-weight: bold; |
|
||||
color: #333; |
|
||||
} |
|
||||
.input-with-scan { |
|
||||
display: flex; |
|
||||
gap: 10px; |
|
||||
} |
|
||||
.input-with-scan input { |
|
||||
flex: 1; |
|
||||
padding: 10px; |
|
||||
border: 1px solid #ddd; |
|
||||
border-radius: 4px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.scan-btn, |
|
||||
.confirm-btn { |
|
||||
background: #17b3a3; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
padding: 10px 15px; |
|
||||
border-radius: 4px; |
|
||||
cursor: pointer; |
|
||||
font-size: 14px; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.scan-btn:hover, |
|
||||
.confirm-btn:hover { |
|
||||
background: #13998c; |
|
||||
} |
|
||||
.confirm-btn:disabled { |
|
||||
background: #6c757d; |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
.material-list { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
gap: 10px; |
|
||||
} |
|
||||
.material-item { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 15px; |
|
||||
border: 1px solid #ddd; |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
transition: all 0.3s; |
|
||||
} |
|
||||
.material-item.selected { |
|
||||
border-color: #007bff; |
|
||||
background-color: #e3f2fd; |
|
||||
} |
|
||||
.material-info { |
|
||||
flex: 1; |
|
||||
} |
|
||||
.part-no { |
|
||||
font-weight: bold; |
|
||||
font-size: 16px; |
|
||||
color: #333; |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
.part-desc { |
|
||||
color: #666; |
|
||||
font-size: 14px; |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
.qty-info { |
|
||||
font-size: 12px; |
|
||||
color: #666; |
|
||||
} |
|
||||
.material-status { |
|
||||
text-align: right; |
|
||||
} |
|
||||
.status-pending { |
|
||||
background: #ffc107; |
|
||||
color: #212529; |
|
||||
padding: 4px 8px; |
|
||||
border-radius: 12px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.status-complete { |
|
||||
background: #28a745; |
|
||||
color: white; |
|
||||
padding: 4px 8px; |
|
||||
border-radius: 12px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
.label-info { |
|
||||
background: #f8f9fa; |
|
||||
border-radius: 6px; |
|
||||
padding: 15px; |
|
||||
margin-bottom: 15px; |
|
||||
} |
|
||||
.info-row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
margin-bottom: 8px; |
|
||||
padding: 5px 0; |
|
||||
border-bottom: 1px solid #eee; |
|
||||
} |
|
||||
.info-row:last-child { |
|
||||
border-bottom: none; |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
.info-row .label { |
|
||||
font-weight: bold; |
|
||||
color: #666; |
|
||||
} |
|
||||
.info-row .value { |
|
||||
color: #333; |
|
||||
} |
|
||||
.qty-input { |
|
||||
margin-top: 15px; |
|
||||
} |
|
||||
.qty-input input[type='number'] { |
|
||||
width: 100%; |
|
||||
padding: 10px; |
|
||||
border: 1px solid #ddd; |
|
||||
border-radius: 4px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.message { |
|
||||
margin-top: 10px; |
|
||||
padding: 8px 12px; |
|
||||
border-radius: 4px; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
.message.success { |
|
||||
background: #d4edda; |
|
||||
color: #155724; |
|
||||
border: 1px solid #c3e6cb; |
|
||||
} |
|
||||
.message.error { |
|
||||
background: #f8d7da; |
|
||||
color: #721c24; |
|
||||
border: 1px solid #f5c6cb; |
|
||||
} |
|
||||
.message.warning { |
|
||||
background: #fff3cd; |
|
||||
color: #856404; |
|
||||
border: 1px solid #ffeaa7; |
|
||||
} |
|
||||
.message.info { |
|
||||
background: #d1ecf1; |
|
||||
color: #0c5460; |
|
||||
border: 1px solid #bee5eb; |
|
||||
} |
|
||||
.confirm-btn { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.scan-btn { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,50 +0,0 @@ |
|||||
<template> |
|
||||
<div class="input-section"> |
|
||||
<!-- 申请单/PO号输入 --> |
|
||||
<div class="input-group"> |
|
||||
<label>申请单/PO号</label> |
|
||||
<div class="input-with-scan"> |
|
||||
<input v-model="orderNo" placeholder="请输入申请单号或PO号" /> |
|
||||
<button class="scan-btn">确认</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 选择库位 --> |
|
||||
<div class="input-group"> |
|
||||
<label>目标库位</label> |
|
||||
<div class="input-with-scan"> |
|
||||
<input v-model="location" placeholder="请输入目标库位" /> |
|
||||
<button class="scan-btn">选择</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 生成移库记录 --> |
|
||||
<div class="input-group"> |
|
||||
<button class="confirm-btn">生成移库记录</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'MoveIssue', |
|
||||
data() { |
|
||||
return { |
|
||||
orderNo: '', |
|
||||
location: '' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.input-section { background: white; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } |
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } |
|
||||
.reset-btn { background: #17b3a3; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; } |
|
||||
.input-group { margin-bottom: 15px; } |
|
||||
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } |
|
||||
.input-with-scan { display: flex; gap: 10px; } |
|
||||
.input-with-scan input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } |
|
||||
.scan-btn, .confirm-btn { background: #17b3a3; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; } |
|
||||
.scan-btn:hover, .confirm-btn:hover { background: #13998c; } |
|
||||
.confirm-btn:disabled { background: #6c757d; cursor: not-allowed; } |
|
||||
.confirm-btn { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,71 +0,0 @@ |
|||||
<template> |
|
||||
<div class="input-section"> |
|
||||
<!-- 申请单号输入 --> |
|
||||
<div class="input-group"> |
|
||||
<label>申请单号</label> |
|
||||
<div class="input-with-scan"> |
|
||||
<input v-model="notifyNo" placeholder="请输入申请单号" /> |
|
||||
<button class="scan-btn">创建托盘</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 扫描箱卷绑定 --> |
|
||||
<div class="input-group"> |
|
||||
<label>扫描箱/卷</label> |
|
||||
<div class="input-with-scan"> |
|
||||
<input v-model="scannedUnit" placeholder="请扫描处理单元条码" /> |
|
||||
<button class="scan-btn">绑定</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 已绑定单元列表 --> |
|
||||
<div class="bound-units"> |
|
||||
<div class="section-header"> |
|
||||
<h4>已绑定单元 (0)</h4> |
|
||||
</div> |
|
||||
<div class="unit-list"> |
|
||||
<!-- TODO: 列表渲染绑定单元 --> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 打印托盘标签 --> |
|
||||
<div class="print-section"> |
|
||||
<div class="input-group"> |
|
||||
<label>打印机</label> |
|
||||
<el-select v-model="selectedPrinter" placeholder="请选择打印机" style="width: 100%"> |
|
||||
<el-option value="">请选择打印机</el-option> |
|
||||
<el-option value="PRINTER_01">打印机01</el-option> |
|
||||
<el-option value="PRINTER_02">打印机02</el-option> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
<button class="print-btn">打印托盘标签</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'PickingIssue', |
|
||||
data() { |
|
||||
return { |
|
||||
notifyNo: '', |
|
||||
scannedUnit: '', |
|
||||
selectedPrinter: '', |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.input-section { background: white; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } |
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } |
|
||||
.reset-btn { background: #17b3a3; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; } |
|
||||
.input-group { margin-bottom: 15px; } |
|
||||
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } |
|
||||
.input-with-scan { display: flex; gap: 10px; } |
|
||||
.input-with-scan input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } |
|
||||
.scan-btn, .print-btn { background: #17b3a3; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; } |
|
||||
.scan-btn:hover, .print-btn:hover { background: #13998c; } |
|
||||
.print-btn:disabled { background: #6c757d; cursor: not-allowed; } |
|
||||
.bound-units { margin-top: 20px; } |
|
||||
.unit-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } |
|
||||
.unit-item { background: #e9ecef; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 14px; } |
|
||||
.print-btn { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,58 +0,0 @@ |
|||||
<template> |
|
||||
<div class="input-section"> |
|
||||
<!-- 退料类型选择 --> |
|
||||
<div class="input-group"> |
|
||||
<label>退料类型</label> |
|
||||
<select v-model="returnType"> |
|
||||
<option value="">请选择退料类型</option> |
|
||||
<option value="over">多发退料</option> |
|
||||
<option value="quality">质量退料</option> |
|
||||
<option value="other">其他退料</option> |
|
||||
</select> |
|
||||
</div> |
|
||||
<!-- 退料数量 --> |
|
||||
<div class="input-group"> |
|
||||
<label>退料数量</label> |
|
||||
<input v-model="returnQty" type="number" placeholder="请输入退料数量" /> |
|
||||
<!-- 生成退料记录 --> |
|
||||
|
|
||||
</div> |
|
||||
<button class="scan-btn">生成退料记录</button> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'ReturnIssue', |
|
||||
data() { |
|
||||
return { |
|
||||
returnType: '', |
|
||||
returnQty: '' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.input-section { background: white; border-radius: 8px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } |
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } |
|
||||
.reset-btn { background: #17b3a3; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; } |
|
||||
.input-group { margin-bottom: 15px; } |
|
||||
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; } |
|
||||
.input-group select, .input-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } |
|
||||
.scan-btn, .confirm-btn, .print-btn { |
|
||||
background: #17b3a3; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
padding: 10px 15px; |
|
||||
border-radius: 4px; |
|
||||
cursor: pointer; |
|
||||
font-size: 14px; |
|
||||
white-space: nowrap; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.scan-btn:hover, .confirm-btn:hover, .print-btn:hover { |
|
||||
background: #13998c; |
|
||||
} |
|
||||
.confirm-btn:disabled { background: #6c757d; cursor: not-allowed; } |
|
||||
</style> |
|
||||
@ -1,168 +1,193 @@ |
|||||
<template> |
<template> |
||||
<div> |
|
||||
<div class="pda-container"> |
|
||||
<div class="status-bar" v-if="selectedFunction != 'direct'"> |
|
||||
<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 class="pda-container"> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>委外发料</span> |
||||
</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">输入委外订单号，扫描物料标签直接发料</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> |
|
||||
<!-- 直接发料骨架 --> |
|
||||
<direct-issue v-if="selectedFunction === 'direct'" functionTitle="直接发料" @back="resetAll" /> |
|
||||
<!-- 拣选装托盘骨架 --> |
|
||||
<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 class="header-right" @click="$router.push({ path: '/' })">首页</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 功能菜单 --> |
||||
|
<div class="menu-grid"> |
||||
|
<div |
||||
|
class="menu-item" |
||||
|
v-for="(btn, index) in buttons" |
||||
|
:key="index" |
||||
|
:class="{ disabled: btn.disabled }" |
||||
|
@click="handleButtonClick(btn)" |
||||
|
> |
||||
|
<div class="menu-icon" :class="btn.iconClass"> |
||||
|
<van-icon :name="btn.icon" size="24" /> |
||||
</div> |
</div> |
||||
|
<div class="menu-text">{{ btn.label }}</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import DirectIssue from './DirectIssue.vue' |
|
||||
import PickingIssue from './PickingIssue.vue' |
|
||||
import MoveIssue from './MoveIssue.vue' |
|
||||
import ReturnIssue from './ReturnIssue.vue' |
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'OutsourcingIssuePDA', |
|
||||
components: { |
|
||||
DirectIssue, |
|
||||
PickingIssue, |
|
||||
MoveIssue, |
|
||||
ReturnIssue, |
|
||||
}, |
|
||||
data() { |
data() { |
||||
return { |
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 '委外发料' |
|
||||
}, |
|
||||
|
buttons: [ |
||||
|
{ |
||||
|
icon: "scan", |
||||
|
label: "直接发料", |
||||
|
iconClass: "direct", |
||||
|
to: "outsourcingPicking", |
||||
|
disabled: false, |
||||
|
}, |
||||
|
{ |
||||
|
icon: "records", |
||||
|
label: "申请单发料", |
||||
|
iconClass: "picking", |
||||
|
to: "outsourcingPicking", |
||||
|
disabled: false, |
||||
|
}, |
||||
|
{ |
||||
|
icon: "logistics", |
||||
|
label: "移库发料", |
||||
|
iconClass: "move", |
||||
|
to: "outsourcingPicking", |
||||
|
disabled: true, |
||||
|
}, |
||||
|
{ |
||||
|
icon: "revoke", |
||||
|
label: "退料", |
||||
|
iconClass: "return", |
||||
|
to: "outsourcingPicking", |
||||
|
disabled: true, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
selectFunction(func) { |
|
||||
this.selectedFunction = func |
|
||||
}, |
|
||||
resetAll() { |
|
||||
this.selectedFunction = null |
|
||||
}, |
|
||||
goBack() { |
|
||||
if (!this.selectedFunction) { |
|
||||
this.$router.push('/') |
|
||||
|
handleButtonClick(btn) { |
||||
|
if (btn.disabled) { |
||||
|
this.$message.warning("正在开发中，敬请期待..."); |
||||
} else { |
} else { |
||||
this.selectedFunction = null |
|
||||
|
this.$router.push(btn.to); |
||||
} |
} |
||||
}, |
}, |
||||
}, |
}, |
||||
} |
|
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
|
||||
.outsourcing-issue { |
|
||||
padding: 10px; |
|
||||
font-family: Arial, sans-serif; |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
<style> |
||||
|
:root { |
||||
|
--columns: 3; |
||||
|
--button-size: calc(100vw / var(--columns) - 20px); |
||||
} |
} |
||||
.function-selector { |
|
||||
|
|
||||
|
/* 头部栏 */ |
||||
|
.header-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 16px; |
||||
|
background: #17b3a3; |
||||
|
color: white; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
max-height: 40px; |
||||
|
} |
||||
|
|
||||
|
.header-left { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
|
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.menu-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
gap: 15px; |
gap: 15px; |
||||
padding: 20px 0; |
|
||||
|
padding: 20px; |
||||
|
justify-content: center; |
||||
|
align-content: center; |
||||
|
width: 100%; |
||||
} |
} |
||||
.function-card { |
|
||||
|
|
||||
|
.menu-item { |
||||
background: white; |
background: white; |
||||
border-radius: 8px; |
|
||||
padding: 20px; |
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
||||
cursor: pointer; |
|
||||
transition: all 0.3s; |
|
||||
|
border-radius: 12px; |
||||
|
padding: 12px 6px; |
||||
text-align: center; |
text-align: center; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
transition: transform 0.2s; |
||||
|
cursor: pointer; |
||||
} |
} |
||||
.function-card:hover { |
|
||||
transform: translateY(-2px); |
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|
||||
|
|
||||
|
.menu-item:active { |
||||
|
transform: scale(0.95); |
||||
} |
} |
||||
.function-icon { |
|
||||
font-size: 48px; |
|
||||
margin-bottom: 10px; |
|
||||
|
|
||||
|
.menu-item.disabled { |
||||
|
opacity: 0.6; |
||||
|
position: relative; |
||||
} |
} |
||||
.function-title { |
|
||||
font-size: 18px; |
|
||||
|
|
||||
|
.menu-item.disabled::after { |
||||
|
content: "开发中"; |
||||
|
position: absolute; |
||||
|
top: 8px; |
||||
|
right: 8px; |
||||
|
background: #ff9500; |
||||
|
color: white; |
||||
|
font-size: 8px; |
||||
|
padding: 2px 4px; |
||||
|
border-radius: 8px; |
||||
font-weight: bold; |
font-weight: bold; |
||||
margin-bottom: 8px; |
|
||||
color: #333; |
|
||||
} |
|
||||
.function-desc { |
|
||||
font-size: 14px; |
|
||||
color: #666; |
|
||||
} |
} |
||||
|
|
||||
/* 响应式设计 */ |
|
||||
@media (max-width: 768px) { |
|
||||
.production-issue-pda { |
|
||||
padding: 5px; |
|
||||
} |
|
||||
|
.menu-icon { |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 auto 6px; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
.function-card { |
|
||||
padding: 15px; |
|
||||
} |
|
||||
|
.menu-icon.direct { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
.function-icon { |
|
||||
font-size: 36px; |
|
||||
} |
|
||||
|
.menu-icon.picking { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
.input-with-scan { |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
.menu-icon.move { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
.material-item { |
|
||||
flex-direction: column; |
|
||||
align-items: flex-start; |
|
||||
gap: 10px; |
|
||||
} |
|
||||
|
.menu-icon.return { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
.material-status { |
|
||||
align-self: flex-end; |
|
||||
} |
|
||||
|
.menu-text { |
||||
|
font-size: 10px; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-top: 2px; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,402 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<!-- 头部栏 --> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>委外发料</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })"> |
||||
|
首页 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 搜索框 --> |
||||
|
<div class="search-container"> |
||||
|
<el-input clearable |
||||
|
v-model="searchCode" |
||||
|
placeholder="请扫描委外订单或申请单号" |
||||
|
prefix-icon="el-icon-search" |
||||
|
@keyup.enter.native="handleSearch" |
||||
|
ref="searchInput" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 委外发料单列表 --> |
||||
|
<div class="content-area"> |
||||
|
<div |
||||
|
v-for="(item, index) in outsourcingList" |
||||
|
:key="index" |
||||
|
class="outsourcing-card" |
||||
|
@click="goToPickingPage(item)" |
||||
|
> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">委外订单号</span> |
||||
|
<span class="title-value">{{ item.outsourcingNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">申请单号</div> |
||||
|
<div class="detail-value">{{ item.requestNo }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">标签张数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ item.pickedLabels }}</span><span class="total">{{ item.totalLabels }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">物料总数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ item.requestQty }}</span><span class="total">{{ item.remainQty }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="outsourcingList.length === 0 && !loading" class="empty-state"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<p>暂无待发料委外订单</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 加载状态 --> |
||||
|
<div v-if="loading" class="loading-state"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
<p>加载中...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getPoList } from '@/api/po/po.js' |
||||
|
import moment from 'moment'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchCode: '', |
||||
|
outsourcingList: [], |
||||
|
loading: false |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(date) { |
||||
|
return date ? moment(date).format('YYYY-MM-DD') : ''; |
||||
|
}, |
||||
|
// 处理搜索 |
||||
|
handleSearch() { |
||||
|
if (this.searchCode.trim()) { |
||||
|
this.searchOutsourcingList(this.searchCode.trim()); |
||||
|
} else { |
||||
|
this.loadOutsourcingList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载委外发料单列表 |
||||
|
loadOutsourcingList() { |
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
site: this.$store.state.user.site, |
||||
|
status: '待发料', |
||||
|
type: 'outsourcing' |
||||
|
} |
||||
|
console.log('params', params); |
||||
|
|
||||
|
// 使用现有的 PO API 来获取委外订单数据 |
||||
|
getPoList(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
// 转换数据格式以适配委外发料 |
||||
|
this.outsourcingList = (data.rows || []).map(item => ({ |
||||
|
outsourcingNo: item.poNumber || item.notifyNo, |
||||
|
requestNo: item.workOrderNo || item.relatedNo, |
||||
|
pickedLabels: item.pickedLabels || 0, |
||||
|
totalLabels: item.totalLabels || 0, |
||||
|
requestQty: item.requestQty || item.qty, |
||||
|
remainQty: item.remainQty || item.thisRecvQty |
||||
|
})); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取数据失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
console.error('获取委外发料单列表失败:', error); |
||||
|
this.$message.error('获取数据失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 搜索特定委外订单 |
||||
|
searchOutsourcingList(searchCode) { |
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
poNumber: searchCode, |
||||
|
site: this.$store.state.user.site, |
||||
|
status: '待发料', |
||||
|
type: 'outsourcing' |
||||
|
}; |
||||
|
|
||||
|
getPoList(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
if (data.rows.length === 0) { |
||||
|
this.$message.warning('未找到匹配的委外订单'); |
||||
|
} |
||||
|
// 转换数据格式 |
||||
|
this.outsourcingList = (data.rows || []).map(item => ({ |
||||
|
outsourcingNo: item.poNumber || item.notifyNo, |
||||
|
requestNo: item.workOrderNo || item.relatedNo, |
||||
|
pickedLabels: item.pickedLabels || 0, |
||||
|
totalLabels: item.totalLabels || 0, |
||||
|
requestQty: item.requestQty || item.qty, |
||||
|
remainQty: item.remainQty || item.thisRecvQty |
||||
|
})); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '查询失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
this.$message.error('查询失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到发料页面 |
||||
|
goToPickingPage(item) { |
||||
|
this.$router.push({ |
||||
|
name: 'outsourcingPickingDetail', |
||||
|
params: { |
||||
|
outsourcingNo: item.outsourcingNo, |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// 聚焦搜索框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.searchInput) { |
||||
|
this.$refs.searchInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 加载数据 |
||||
|
this.loadOutsourcingList(); |
||||
|
} |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
/* 搜索容器 */ |
||||
|
.search-container { |
||||
|
padding: 12px 16px; |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
/* 内容区域 */ |
||||
|
.content-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
|
||||
|
/* 委外卡片 */ |
||||
|
.outsourcing-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.outsourcing-card:hover { |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
.outsourcing-card:active { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
/* 卡片标题 */ |
||||
|
.card-title { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.title-label { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.title-value { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 卡片详情 */ |
||||
|
.card-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
min-width: 60px; |
||||
|
max-width: 60px; |
||||
|
} |
||||
|
|
||||
|
.detail-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
margin-bottom: 4px; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value .qualified { |
||||
|
color: #17B3A3; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total { |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total::before { |
||||
|
content: '/'; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-state i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.empty-state p { |
||||
|
font-size: 14px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* 加载状态 */ |
||||
|
.loading-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
.loading-state i { |
||||
|
font-size: 24px; |
||||
|
margin-bottom: 12px; |
||||
|
animation: spin 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes spin { |
||||
|
from { transform: rotate(0deg); } |
||||
|
to { transform: rotate(360deg); } |
||||
|
} |
||||
|
|
||||
|
.loading-state p { |
||||
|
font-size: 14px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 360px) { |
||||
|
.header-bar { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.content-area { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.outsourcing-card { |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.card-details { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 0 0 48%; |
||||
|
margin-bottom: 6px; |
||||
|
min-width: 50px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
1030
src/views/modules/outsourcing-issue/outsourcingPickingDetail.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,358 +0,0 @@ |
|||||
<template> |
|
||||
<div class="pick-container"> |
|
||||
<van-nav-bar title="委外拣料" left-arrow @click-left="$router.back()" /> |
|
||||
|
|
||||
<!-- 订单信息 --> |
|
||||
<div class="order-info"> |
|
||||
<div class="info-header"> |
|
||||
<div class="order-no">{{ orderInfo.orderNo }}</div> |
|
||||
<div class="order-status">{{ getStatusText(orderInfo.status) }}</div> |
|
||||
</div> |
|
||||
<van-cell-group> |
|
||||
<van-cell title="供应商" :value="orderInfo.supplier" /> |
|
||||
<van-cell title="委外产品" :value="orderInfo.productName" /> |
|
||||
<van-cell title="委外数量" :value="orderInfo.outsourcingQuantity" /> |
|
||||
<van-cell title="交货日期" :value="orderInfo.deliveryDate" /> |
|
||||
<van-cell title="联系人" :value="orderInfo.contactPerson" /> |
|
||||
</van-cell-group> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 物料清单 --> |
|
||||
<div class="material-section"> |
|
||||
<div class="section-title">发料清单</div> |
|
||||
<div |
|
||||
v-for="(item, index) in materialList" |
|
||||
:key="index" |
|
||||
class="material-item" |
|
||||
> |
|
||||
<div class="material-info"> |
|
||||
<div class="material-name">{{ item.materialCode }} - {{ item.materialName }}</div> |
|
||||
<div class="material-spec">规格：{{ item.specification }}</div> |
|
||||
<div class="material-location"> |
|
||||
<van-tag type="primary" size="small">{{ item.locationCode }}</van-tag> |
|
||||
<span class="stock-info">库存：{{ item.stock }}</span> |
|
||||
</div> |
|
||||
<div class="material-quantity"> |
|
||||
需求：{{ item.requiredQuantity }} | 已发：{{ item.issuedQuantity }} |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="pick-input"> |
|
||||
<van-stepper |
|
||||
v-model="item.currentPick" |
|
||||
:min="0" |
|
||||
:max="Math.min(item.requiredQuantity - item.issuedQuantity, item.stock)" |
|
||||
integer |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 供应商确认 --> |
|
||||
<div class="supplier-section"> |
|
||||
<div class="section-title">供应商确认</div> |
|
||||
<van-field |
|
||||
v-model="supplierInfo.contactPerson" |
|
||||
label="接收人" |
|
||||
placeholder="请输入供应商接收人" |
|
||||
/> |
|
||||
<van-field |
|
||||
v-model="supplierInfo.contactPhone" |
|
||||
label="联系电话" |
|
||||
placeholder="请输入联系电话" |
|
||||
/> |
|
||||
<van-field |
|
||||
v-model="supplierInfo.deliveryAddress" |
|
||||
label="送货地址" |
|
||||
placeholder="请输入送货地址" |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 运输信息 --> |
|
||||
<div class="transport-section"> |
|
||||
<div class="section-title">运输信息</div> |
|
||||
<van-field |
|
||||
v-model="transportInfo.transportMethod" |
|
||||
label="运输方式" |
|
||||
placeholder="请选择运输方式" |
|
||||
readonly |
|
||||
is-link |
|
||||
@click="showTransportPicker = true" |
|
||||
/> |
|
||||
<van-field |
|
||||
v-model="transportInfo.vehicleNo" |
|
||||
label="车牌号" |
|
||||
placeholder="请输入车牌号" |
|
||||
/> |
|
||||
<van-field |
|
||||
v-model="transportInfo.driverName" |
|
||||
label="司机姓名" |
|
||||
placeholder="请输入司机姓名" |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 备注 --> |
|
||||
<div class="remark-section"> |
|
||||
<van-field |
|
||||
v-model="remark" |
|
||||
label="备注" |
|
||||
type="textarea" |
|
||||
placeholder="请输入发料备注" |
|
||||
rows="3" |
|
||||
autosize |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 底部按钮 --> |
|
||||
<div class="bottom-actions"> |
|
||||
<van-button |
|
||||
type="primary" |
|
||||
block |
|
||||
:loading="submitting" |
|
||||
@click="handleSubmit" |
|
||||
> |
|
||||
确认发料 |
|
||||
</van-button> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 运输方式选择器 --> |
|
||||
<van-popup v-model="showTransportPicker" position="bottom"> |
|
||||
<van-picker |
|
||||
:columns="transportColumns" |
|
||||
@confirm="onTransportConfirm" |
|
||||
@cancel="showTransportPicker = false" |
|
||||
/> |
|
||||
</van-popup> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'OutsourcingIssuePick', |
|
||||
data() { |
|
||||
return { |
|
||||
orderInfo: { |
|
||||
orderNo: 'OS202401001', |
|
||||
supplier: '委外供应商A', |
|
||||
productName: '委外产品A', |
|
||||
outsourcingQuantity: 500, |
|
||||
deliveryDate: '2024-01-25', |
|
||||
contactPerson: '张经理', |
|
||||
status: 0 |
|
||||
}, |
|
||||
materialList: [ |
|
||||
{ |
|
||||
materialCode: 'MAT001', |
|
||||
materialName: '原材料A', |
|
||||
specification: '100*50*20mm', |
|
||||
locationCode: 'A01-01-01', |
|
||||
stock: 500, |
|
||||
requiredQuantity: 300, |
|
||||
issuedQuantity: 0, |
|
||||
currentPick: 0 |
|
||||
}, |
|
||||
{ |
|
||||
materialCode: 'MAT002', |
|
||||
materialName: '原材料B', |
|
||||
specification: '200*100*30mm', |
|
||||
locationCode: 'A01-02-01', |
|
||||
stock: 400, |
|
||||
requiredQuantity: 200, |
|
||||
issuedQuantity: 0, |
|
||||
currentPick: 0 |
|
||||
} |
|
||||
], |
|
||||
supplierInfo: { |
|
||||
contactPerson: '', |
|
||||
contactPhone: '', |
|
||||
deliveryAddress: '' |
|
||||
}, |
|
||||
transportInfo: { |
|
||||
transportMethod: '', |
|
||||
vehicleNo: '', |
|
||||
driverName: '' |
|
||||
}, |
|
||||
remark: '', |
|
||||
submitting: false, |
|
||||
showTransportPicker: false, |
|
||||
transportColumns: [ |
|
||||
'自提', |
|
||||
'物流配送', |
|
||||
'专车配送', |
|
||||
'快递' |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.loadOrderData() |
|
||||
}, |
|
||||
methods: { |
|
||||
loadOrderData() { |
|
||||
const orderNo = this.$route.params.orderNo |
|
||||
console.log('加载委外订单数据:', orderNo) |
|
||||
}, |
|
||||
onTransportConfirm(value) { |
|
||||
this.transportInfo.transportMethod = value |
|
||||
this.showTransportPicker = false |
|
||||
}, |
|
||||
async handleSubmit() { |
|
||||
// 验证发料数量 |
|
||||
const hasPick = this.materialList.some(item => item.currentPick > 0) |
|
||||
if (!hasPick) { |
|
||||
this.$toast('请输入发料数量') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
// 验证供应商信息 |
|
||||
if (!this.supplierInfo.contactPerson) { |
|
||||
this.$toast('请输入供应商接收人') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
// 验证运输方式 |
|
||||
if (!this.transportInfo.transportMethod) { |
|
||||
this.$toast('请选择运输方式') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
// 检查库存 |
|
||||
const insufficientStock = this.materialList.find(item => item.currentPick > item.stock) |
|
||||
if (insufficientStock) { |
|
||||
this.$toast(`${insufficientStock.materialName} 库存不足`) |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
this.submitting = true |
|
||||
|
|
||||
try { |
|
||||
await new Promise(resolve => setTimeout(resolve, 2000)) |
|
||||
|
|
||||
this.$toast.success('发料成功') |
|
||||
this.$router.back() |
|
||||
} catch (error) { |
|
||||
this.$toast.fail('发料失败') |
|
||||
} finally { |
|
||||
this.submitting = false |
|
||||
} |
|
||||
}, |
|
||||
getStatusText(status) { |
|
||||
const statusMap = { |
|
||||
0: '待发料', |
|
||||
1: '部分发料', |
|
||||
2: '已完成' |
|
||||
} |
|
||||
return statusMap[status] || '未知' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.pick-container { |
|
||||
min-height: 100vh; |
|
||||
background-color: #f7f8fa; |
|
||||
padding-bottom: 80px; |
|
||||
} |
|
||||
|
|
||||
.order-info { |
|
||||
background: white; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.info-header { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 16px; |
|
||||
border-bottom: 1px solid #ebedf0; |
|
||||
} |
|
||||
|
|
||||
.order-no { |
|
||||
font-size: 18px; |
|
||||
font-weight: bold; |
|
||||
color: #323233; |
|
||||
} |
|
||||
|
|
||||
.order-status { |
|
||||
padding: 4px 8px; |
|
||||
border-radius: 4px; |
|
||||
font-size: 12px; |
|
||||
color: white; |
|
||||
background-color: #ff976a; |
|
||||
} |
|
||||
|
|
||||
.material-section, |
|
||||
.supplier-section, |
|
||||
.transport-section, |
|
||||
.remark-section { |
|
||||
background: white; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.section-title { |
|
||||
padding: 16px; |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
color: #323233; |
|
||||
border-bottom: 1px solid #ebedf0; |
|
||||
} |
|
||||
|
|
||||
.material-item { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 16px; |
|
||||
border-bottom: 1px solid #ebedf0; |
|
||||
} |
|
||||
|
|
||||
.material-item:last-child { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
|
|
||||
.material-info { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.material-name { |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
color: #323233; |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
|
|
||||
.material-spec { |
|
||||
font-size: 12px; |
|
||||
color: #969799; |
|
||||
margin-bottom: 6px; |
|
||||
} |
|
||||
|
|
||||
.material-location { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
|
|
||||
.stock-info { |
|
||||
font-size: 12px; |
|
||||
color: #646566; |
|
||||
margin-left: 8px; |
|
||||
} |
|
||||
|
|
||||
.material-quantity { |
|
||||
font-size: 14px; |
|
||||
color: #646566; |
|
||||
} |
|
||||
|
|
||||
.pick-input { |
|
||||
margin-left: 16px; |
|
||||
} |
|
||||
|
|
||||
.bottom-actions { |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
padding: 16px; |
|
||||
background: white; |
|
||||
border-top: 1px solid #ebedf0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,165 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>生产领料</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })"> |
||||
|
首页 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 功能菜单 --> |
||||
|
<div class="menu-grid"> |
||||
|
<div |
||||
|
class="menu-item" |
||||
|
v-for="(btn, index) in buttons" |
||||
|
:key="index" |
||||
|
:class="{ 'disabled': btn.disabled }" |
||||
|
@click="handleButtonClick(btn)" |
||||
|
> |
||||
|
<div class="menu-icon" :class="btn.iconClass"> |
||||
|
<van-icon :name="btn.icon" size="24" /> |
||||
|
</div> |
||||
|
<div class="menu-text">{{ btn.label }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
buttons: [ |
||||
|
{ icon: 'scan', label: '直接领料', iconClass: 'purchase', to: 'productionPicking', disabled: true }, |
||||
|
{ icon: 'records', label: '申请单领料', iconClass: 'qualified', to: 'productionPicking', disabled: false }, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleButtonClick(btn) { |
||||
|
if (btn.disabled) { |
||||
|
this.$message.warning('正在开发中，敬请期待...'); |
||||
|
} else { |
||||
|
this.$router.push(btn.to); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
:root { |
||||
|
--columns: 3; |
||||
|
--button-size: calc(100vw / var(--columns) - 20px); |
||||
|
} |
||||
|
|
||||
|
/* 头部栏 */ |
||||
|
.header-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 8px 16px; |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
height: 40px; |
||||
|
min-height: 40px; |
||||
|
max-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; |
||||
|
} |
||||
|
|
||||
|
.menu-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 15px; |
||||
|
padding: 20px; |
||||
|
justify-content: center; /* 水平居中 */ |
||||
|
align-content: center; /* 垂直居中 */ |
||||
|
width: 100%; /* 确保占满容器宽度 */ |
||||
|
} |
||||
|
|
||||
|
.menu-item { |
||||
|
background: white; |
||||
|
border-radius: 12px; |
||||
|
padding: 12px 6px; |
||||
|
text-align: center; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
transition: transform 0.2s; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.menu-item:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
.menu-item.disabled { |
||||
|
opacity: 0.6; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.menu-item.disabled::after { |
||||
|
content: '开发中'; |
||||
|
position: absolute; |
||||
|
top: 8px; |
||||
|
right: 8px; |
||||
|
background: #ff9500; |
||||
|
color: white; |
||||
|
font-size: 8px; |
||||
|
padding: 2px 4px; |
||||
|
border-radius: 8px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.menu-icon { |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 auto 6px; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.menu-icon.purchase { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
|
.menu-icon.inspection { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
|
.menu-icon.qualified { |
||||
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%); |
||||
|
} |
||||
|
|
||||
|
.menu-text { |
||||
|
font-size: 10px; |
||||
|
color: #333; |
||||
|
font-weight: bold; /* 加粗字体 */ |
||||
|
white-space: nowrap; /* 防止文字换行 */ |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,399 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<!-- 头部栏 --> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>生产领料</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })"> |
||||
|
首页 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 搜索框 --> |
||||
|
<div class="search-container"> |
||||
|
<el-input clearable |
||||
|
v-model="searchCode" |
||||
|
placeholder="请扫描出库单或关联单号" |
||||
|
prefix-icon="el-icon-search" |
||||
|
@keyup.enter.native="handleSearch" |
||||
|
ref="searchInput" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 出库单列表 --> |
||||
|
<div class="content-area"> |
||||
|
<div |
||||
|
v-for="(item, index) in outboundList" |
||||
|
:key="index" |
||||
|
class="outbound-card" |
||||
|
@click="goToPickingPage(item)" |
||||
|
> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">出库单号</span> |
||||
|
<span class="title-value">{{ item.notifyNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">关联单号</div> |
||||
|
<div class="detail-value">{{ item.workOrderNo }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">标签张数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ item.pickedLabels }}</span><span class="total">{{ item.totalLabels }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">物料总数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ item.requestQty }}</span><span class="total">{{ item.remainQty }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="outboundList.length === 0 && !loading" class="empty-state"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<p>暂无待领料出库单</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 加载状态 --> |
||||
|
<div v-if="loading" class="loading-state"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
<p>加载中...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
getIssureNotifyByNo, |
||||
|
getIssureNotifyListByNo, |
||||
|
} from '@/api/production/production-issue' |
||||
|
import { getCurrentWarehouse } from '@/utils' |
||||
|
import moment from 'moment'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchCode: '', |
||||
|
outboundList: [], |
||||
|
loading: false |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(date) { |
||||
|
return date ? moment(date).format('YYYY-MM-DD') : ''; |
||||
|
}, |
||||
|
// 处理搜索 |
||||
|
handleSearch() { |
||||
|
if (this.searchCode.trim()) { |
||||
|
this.searchOutboundList(this.searchCode.trim()); |
||||
|
} else { |
||||
|
this.loadOutboundList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载生产出库单列表 |
||||
|
loadOutboundList() { |
||||
|
/* const currentWarehouse = getCurrentWarehouse(); |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库'); |
||||
|
return; |
||||
|
} */ |
||||
|
|
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
site: this.$store.state.user.site, |
||||
|
status: '待出库', |
||||
|
} |
||||
|
console.log('params', params); |
||||
|
|
||||
|
getIssureNotifyListByNo(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
this.outboundList = data.list || []; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取数据失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
console.error('获取生产出库单列表失败:', error); |
||||
|
this.$message.error('获取数据失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 搜索特定出库单 |
||||
|
searchOutboundList(searchCode) { |
||||
|
/* const currentWarehouse = getCurrentWarehouse(); |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库'); |
||||
|
return; |
||||
|
} */ |
||||
|
|
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
notifyNo: searchCode, |
||||
|
site: this.$store.state.user.site, |
||||
|
status: 'ISSUE' |
||||
|
}; |
||||
|
|
||||
|
getIssureNotifyListByNo(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
if (data.list.length === 0) { |
||||
|
this.$message.warning('未找到匹配的出库单'); |
||||
|
} |
||||
|
this.outboundList = data.list || []; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '查询失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
this.$message.error('查询失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到领料页面 |
||||
|
goToPickingPage(item) { |
||||
|
this.$router.push({ |
||||
|
name: 'productionPickingDetail', |
||||
|
params: { |
||||
|
outboundNo: item.notifyNo, |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// 聚焦搜索框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.searchInput) { |
||||
|
this.$refs.searchInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 加载数据 |
||||
|
this.loadOutboundList(); |
||||
|
} |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
/* 搜索容器 */ |
||||
|
.search-container { |
||||
|
padding: 12px 16px; |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
/* 内容区域 */ |
||||
|
.content-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
|
||||
|
/* 出库卡片 */ |
||||
|
.outbound-card { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 12px; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.outbound-card:hover { |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
.outbound-card:active { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
/* 卡片标题 */ |
||||
|
.card-title { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.title-label { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.title-value { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 卡片详情 */ |
||||
|
.card-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
min-width: 60px; |
||||
|
max-width: 60px; |
||||
|
} |
||||
|
|
||||
|
.detail-label { |
||||
|
font-size: 11px; |
||||
|
color: #666; |
||||
|
margin-bottom: 4px; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value .qualified { |
||||
|
color: #17B3A3; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total { |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total::before { |
||||
|
content: '/'; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-state i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.empty-state p { |
||||
|
font-size: 14px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* 加载状态 */ |
||||
|
.loading-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
.loading-state i { |
||||
|
font-size: 24px; |
||||
|
margin-bottom: 12px; |
||||
|
animation: spin 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes spin { |
||||
|
from { transform: rotate(0deg); } |
||||
|
to { transform: rotate(360deg); } |
||||
|
} |
||||
|
|
||||
|
.loading-state p { |
||||
|
font-size: 14px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 360px) { |
||||
|
.header-bar { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.content-area { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.outbound-card { |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.card-details { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 0 0 48%; |
||||
|
margin-bottom: 6px; |
||||
|
min-width: 50px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,984 @@ |
|||||
|
<template> |
||||
|
<div class="pda-container"> |
||||
|
<!-- 头部栏 --> |
||||
|
<div class="header-bar"> |
||||
|
<div class="header-left" @click="$router.back()"> |
||||
|
<i class="el-icon-arrow-left"></i> |
||||
|
<span>生产领料</span> |
||||
|
</div> |
||||
|
<div class="header-right" @click="$router.push({ path: '/' })"> |
||||
|
首页 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 搜索框 --> |
||||
|
<div class="search-container"> |
||||
|
<el-input clearable class="compact-input" |
||||
|
v-model="scanCode" |
||||
|
placeholder="请扫描标签条码" |
||||
|
prefix-icon="el-icon-search" |
||||
|
@keyup.enter.native="handleScan" |
||||
|
ref="scanInput" |
||||
|
/> |
||||
|
<div class="mode-switch"> |
||||
|
<el-switch |
||||
|
class="custom-switch" |
||||
|
v-model="isRemoveMode" |
||||
|
active-color="#ff4949" |
||||
|
inactive-color="#13ce66"> |
||||
|
</el-switch> |
||||
|
<span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span> |
||||
|
<span v-else class="switch-text2">{{ '添加' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 出库单信息卡片 --> |
||||
|
<div class="material-info-card" v-if="outboundInfo.outboundNo"> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">出库单号</span> |
||||
|
<span class="title-value">{{ outboundInfo.outboundNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-details"> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">关联单号</div> |
||||
|
<div class="detail-value">{{ outboundInfo.relatedNo }}</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">标签张数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ outboundInfo.pickedLabels }}</span><span class="total">{{ outboundInfo.totalLabels }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<div class="detail-label">物料总数</div> |
||||
|
<div class="detail-value"> |
||||
|
<span class="qualified">{{ outboundInfo.pickedQty }}</span><span class="total">{{ outboundInfo.totalQty }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 出库信息确认标题 --> |
||||
|
<div class="section-title"> |
||||
|
<div class="title-left"> |
||||
|
<i class="el-icon-circle-check"></i> |
||||
|
<span>出库信息确认</span> |
||||
|
</div> |
||||
|
<div class="title-right"> |
||||
|
<span class="material-list-link" @click="showMaterialListDialog">物料清单</span> |
||||
|
</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-unit">单位</div> |
||||
|
<div class="col-qty">标签数量</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-for="(label, index) in labelList" |
||||
|
:key="label.id" |
||||
|
class="list-item" |
||||
|
> |
||||
|
<div class="col-no">{{ labelList.length - index }}</div> |
||||
|
<div class="col-label">{{ label.labelCode }}</div> |
||||
|
<div class="col-part">{{ label.partNo }}</div> |
||||
|
<div class="col-unit">{{ label.unit || '个' }}</div> |
||||
|
<div class="col-qty">{{ label.quantity }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="labelList.length === 0" class="empty-labels"> |
||||
|
<p>暂无扫描标签</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部操作按钮 --> |
||||
|
<div class="bottom-actions"> |
||||
|
<button class="action-btn secondary" @click="confirmOutbound"> |
||||
|
确定 |
||||
|
</button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels"> |
||||
|
打印 |
||||
|
</button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelOutbound"> |
||||
|
取消 |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 物料清单弹窗 --> |
||||
|
<div v-if="showMaterialDialog" class="material-overlay"> |
||||
|
<div class="material-modal"> |
||||
|
<div class="modal-header"> |
||||
|
<span class="modal-title">物料清单</span> |
||||
|
<i class="el-icon-close close-btn" @click="closeMaterialDialog"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<!-- 加载状态 --> |
||||
|
<div v-if="materialListLoading" class="loading-container"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
<span>加载中...</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 物料表格 --> |
||||
|
<div v-else-if="materialList.length > 0" class="material-table"> |
||||
|
<div class="table-header"> |
||||
|
<div class="col-no">NO.</div> |
||||
|
<div class="col-material-code">物料编码</div> |
||||
|
<div class="col-required-qty">需求数量</div> |
||||
|
<div class="col-picked-qty">已领数量</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-body"> |
||||
|
<div |
||||
|
v-for="(item, index) in materialList" |
||||
|
:key="index" |
||||
|
class="table-row" |
||||
|
> |
||||
|
<div class="col-no">{{ index + 1 }}</div> |
||||
|
<div class="col-material-code">{{ item.materialCode || item.partNo }}</div> |
||||
|
<div class="col-required-qty">{{ item.requiredQty || 0 }}</div> |
||||
|
<div class="col-picked-qty">{{ item.pickedQty || 0 }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空数据状态 --> |
||||
|
<div v-else class="empty-material"> |
||||
|
<i class="el-icon-document"></i> |
||||
|
<p>暂无物料数据</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
<button class="btn-close" @click="closeMaterialDialog">关闭</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { scanMaterialLabel,getRequestMaterials } from '@/api/production/production-issue'; |
||||
|
import moment from 'moment'; |
||||
|
import { notify } from 'node-notifier'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scanCode: '', |
||||
|
outboundInfo: {}, |
||||
|
labelList: [], |
||||
|
outboundNo: '', |
||||
|
buNo: '', |
||||
|
showMaterialDialog: false, |
||||
|
materialList: [], |
||||
|
materialListLoading: false, |
||||
|
isRemoveMode: false // 默认为添加模式 |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(date) { |
||||
|
return date ? moment(date).format('YYYY-MM-DD') : ''; |
||||
|
}, |
||||
|
// 处理扫描 |
||||
|
handleScan() { |
||||
|
if (!this.scanCode.trim()) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.isRemoveMode) { |
||||
|
this.removeLabelByCode(this.scanCode.trim()); |
||||
|
} else { |
||||
|
this.validateAndAddLabel(this.scanCode.trim()); |
||||
|
} |
||||
|
this.scanCode = ''; |
||||
|
}, |
||||
|
|
||||
|
// 验证标签并添加到列表 |
||||
|
validateAndAddLabel(labelCode) { |
||||
|
const params = { |
||||
|
labelCode: labelCode, |
||||
|
notifyNo: this.outboundNo, |
||||
|
site: this.$store.state.user.site, |
||||
|
}; |
||||
|
|
||||
|
scanMaterialLabel(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
// 检查是否已经扫描过 |
||||
|
const exists = this.labelList.find(item => item.labelCode === labelCode); |
||||
|
if (exists) { |
||||
|
this.$message.warning('该标签已扫描，请勿重复扫描'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 添加到列表 |
||||
|
this.labelList.push({ |
||||
|
id: Date.now(), |
||||
|
labelCode: labelCode, |
||||
|
partNo: data.labelInfo.partNo, |
||||
|
quantity: data.labelInfo.quantity, |
||||
|
unit: data.labelInfo.unit, |
||||
|
batchNo: data.labelInfo.batchNo |
||||
|
}); |
||||
|
|
||||
|
this.$message.success('操作成功'); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '该标签与出库单不符，请检查'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('操作失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 通过条码移除标签 |
||||
|
removeLabelByCode(labelCode) { |
||||
|
const index = this.labelList.findIndex(item => item.labelCode === labelCode); |
||||
|
if (index !== -1) { |
||||
|
this.labelList.splice(index, 1); |
||||
|
this.$message.success('操作成功'); |
||||
|
} else { |
||||
|
this.$message.warning('未找到该标签'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 确认出库 |
||||
|
confirmOutbound() { |
||||
|
if (this.labelList.length === 0) { |
||||
|
this.$message.warning('请先扫描标签'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const params = { |
||||
|
site: this.outboundInfo.site, |
||||
|
outboundNo: this.outboundNo, |
||||
|
labels: this.labelList.map(label => ({ |
||||
|
labelCode: label.labelCode, |
||||
|
quantity: label.quantity, |
||||
|
batchNo: label.batchNo, |
||||
|
partNo: label.partNo |
||||
|
})) |
||||
|
}; |
||||
|
|
||||
|
confirmProductionPicking(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('操作成功'); |
||||
|
this.$router.back(); |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '操作失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('出库确认失败:', error); |
||||
|
this.$message.error('操作失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 打印标签 |
||||
|
printLabels() { |
||||
|
if (this.labelList.length === 0) { |
||||
|
this.$message.warning('暂无标签可打印'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.$message.warning('打印功能开发中...'); |
||||
|
}, |
||||
|
|
||||
|
// 取消出库 |
||||
|
cancelOutbound() { |
||||
|
if (this.labelList.length > 0) { |
||||
|
this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '继续操作', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.$router.back(); |
||||
|
}).catch(() => { |
||||
|
// 用户选择继续操作 |
||||
|
}); |
||||
|
} else { |
||||
|
this.$router.back(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 显示物料清单弹窗 |
||||
|
showMaterialListDialog() { |
||||
|
this.showMaterialDialog = true; |
||||
|
this.loadMaterialList(); |
||||
|
}, |
||||
|
|
||||
|
// 加载物料清单 |
||||
|
loadMaterialList() { |
||||
|
console.log('加载物料清单', this.outboundInfo, this.outboundNo); |
||||
|
|
||||
|
if (!this.$store.state.user.site || !this.outboundNo) { |
||||
|
this.$message.error('缺少必要参数，无法获取物料清单'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.materialListLoading = true; |
||||
|
const params = { |
||||
|
site: this.$store.state.user.site, |
||||
|
outboundNo: this.outboundNo |
||||
|
}; |
||||
|
|
||||
|
getRequestMaterials(params).then(({ data }) => { |
||||
|
this.materialListLoading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
this.materialList = data.materials || []; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取物料清单失败'); |
||||
|
this.materialList = []; |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.materialListLoading = false; |
||||
|
this.$message.error('获取物料清单失败'); |
||||
|
this.materialList = []; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 关闭物料清单弹窗 |
||||
|
closeMaterialDialog() { |
||||
|
this.showMaterialDialog = false; |
||||
|
}, |
||||
|
|
||||
|
// 加载出库单详情 |
||||
|
loadOutboundDetails() { |
||||
|
const params = { |
||||
|
outboundNo: this.outboundNo, |
||||
|
site: this.$store.state.user.site, |
||||
|
}; |
||||
|
console.log('加载出库单详情参数:', params); |
||||
|
|
||||
|
/* getOutboundDetails(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.outboundInfo = data.data; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取出库单详情失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('获取出库单详情失败:', error); |
||||
|
this.$message.error('获取出库单详情失败'); |
||||
|
}); */ |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// 获取路由参数 |
||||
|
this.outboundNo = this.$route.params.outboundNo; |
||||
|
console.log("11111",this.outboundNo); |
||||
|
|
||||
|
|
||||
|
if (!this.outboundNo) { |
||||
|
this.$message.error('参数错误'); |
||||
|
this.$router.back(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 聚焦扫描框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.scanInput) { |
||||
|
this.$refs.scanInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 加载出库单详情 |
||||
|
this.loadOutboundDetails(); |
||||
|
} |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
/* 搜索容器 */ |
||||
|
.search-container { |
||||
|
padding: 12px 16px; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container .el-input { |
||||
|
width: 240px; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
/* 紧凑型输入框样式 */ |
||||
|
.compact-input ::v-deep .el-input__inner { |
||||
|
height: 36px; |
||||
|
padding: 0 12px 0 35px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.compact-input ::v-deep .el-input__prefix { |
||||
|
left: 10px; |
||||
|
} |
||||
|
|
||||
|
.compact-input ::v-deep .el-input__suffix { |
||||
|
right: 30px; |
||||
|
} |
||||
|
|
||||
|
/* 模式切换开关 */ |
||||
|
.mode-switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.custom-switch { |
||||
|
transform: scale(1.3); |
||||
|
} |
||||
|
/* 中间文字 */ |
||||
|
.switch-text { |
||||
|
position: absolute; |
||||
|
left: 25%; |
||||
|
transform: translateX(-50%); |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%) translateX(-50%); |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #606266; |
||||
|
white-space: nowrap; |
||||
|
pointer-events: none; |
||||
|
z-index: 1; |
||||
|
top: 53%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
color: white; |
||||
|
pointer-events: none; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.switch-text2 { |
||||
|
position: absolute; |
||||
|
left: 75%; |
||||
|
transform: translateX(-50%); |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%) translateX(-50%); |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #606266; |
||||
|
white-space: nowrap; |
||||
|
pointer-events: none; |
||||
|
z-index: 1; |
||||
|
top: 53%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
color: white; |
||||
|
pointer-events: none; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
/* 调整 switch 尺寸以便容纳文字 */ |
||||
|
.custom-switch ::v-deep .el-switch__core { |
||||
|
width: 60px; |
||||
|
height: 28px; |
||||
|
} |
||||
|
|
||||
|
/* 物料信息卡片 */ |
||||
|
.material-info-card { |
||||
|
background: white; |
||||
|
margin: 4px 16px; |
||||
|
padding: 6px 20px; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
border: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.title-label { |
||||
|
font-size: 11px; |
||||
|
color: #999; |
||||
|
display: block; |
||||
|
margin-bottom: 6px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.title-value { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
line-height: 1.2; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.card-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
min-width: 60px; |
||||
|
max-width: 60px; |
||||
|
} |
||||
|
|
||||
|
.detail-label { |
||||
|
font-size: 11px; |
||||
|
color: #999; |
||||
|
margin-bottom: 6px; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.2; |
||||
|
margin-left: -12px; |
||||
|
} |
||||
|
|
||||
|
.detail-value .qualified { |
||||
|
color: #17B3A3; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total { |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-value .total::before { |
||||
|
content: '/'; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 区域标题 */ |
||||
|
.section-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 6px 8px; |
||||
|
background: white; |
||||
|
margin: 0 16px; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.title-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.material-list-link { |
||||
|
color: #17B3A3; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
text-decoration: underline; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.material-list-link:hover { |
||||
|
color: #0d8f7f; |
||||
|
} |
||||
|
|
||||
|
/* 标签列表 */ |
||||
|
.label-list { |
||||
|
background: white; |
||||
|
margin: 0 16px 12px; |
||||
|
border-radius: 0 0 8px 8px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.list-header { |
||||
|
display: flex; |
||||
|
background: #f8f9fa; |
||||
|
padding: 12px 8px; |
||||
|
border-bottom: 1px solid #e0e0e0; |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
padding: 12px 8px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
font-size: 12px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.list-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.col-no { |
||||
|
width: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-label { |
||||
|
flex: 2; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-part { |
||||
|
flex: 2; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-unit { |
||||
|
width: 40px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.col-qty { |
||||
|
width: 60px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.empty-labels { |
||||
|
padding: 40px 20px; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-labels p { |
||||
|
margin: 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 底部操作按钮 */ |
||||
|
.bottom-actions { |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
gap: 20px; |
||||
|
background: white; |
||||
|
margin-top: auto; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
border: 1px solid #17B3A3; |
||||
|
background: white; |
||||
|
color: #17B3A3; |
||||
|
border-radius: 20px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.action-btn:hover { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.action-btn:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 物料清单弹窗样式 */ |
||||
|
.material-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
z-index: 9999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.material-modal { |
||||
|
background: white; |
||||
|
border-radius: 12px; |
||||
|
width: 100%; |
||||
|
max-width: 800px; |
||||
|
max-height: 80vh; |
||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.material-modal .modal-header { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
padding: 5px 16px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
min-height: 28px; |
||||
|
} |
||||
|
|
||||
|
.close-btn { |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
color: white; |
||||
|
transition: color 0.2s ease; |
||||
|
padding: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.close-btn:hover { |
||||
|
color: #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.material-modal .modal-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
margin: 0; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
.material-modal .modal-body { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.material-table { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.table-header { |
||||
|
display: flex; |
||||
|
background: #f8f9fa; |
||||
|
padding: 10px 6px; |
||||
|
border-bottom: 2px solid #17B3A3; |
||||
|
font-size: 12px; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.table-body { |
||||
|
max-height: 400px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.table-row { |
||||
|
display: flex; |
||||
|
padding: 10px 6px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
font-size: 12px; |
||||
|
color: #333; |
||||
|
transition: background-color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.table-row:hover { |
||||
|
background-color: #f8f9fa; |
||||
|
} |
||||
|
|
||||
|
.table-row:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.material-table .col-no { |
||||
|
width: 25px; |
||||
|
text-align: center; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.material-table .col-material-code { |
||||
|
flex: 1.8; |
||||
|
text-align: center; |
||||
|
min-width: 100px; |
||||
|
font-size: 12px; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.material-table .col-required-qty { |
||||
|
flex: 0.8; |
||||
|
text-align: center; |
||||
|
min-width: 65px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.material-table .col-picked-qty { |
||||
|
flex: 0.8; |
||||
|
text-align: center; |
||||
|
min-width: 65px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.material-modal .modal-footer { |
||||
|
padding: 15px 20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.btn-close { |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 6px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s; |
||||
|
border: 1px solid #17B3A3; |
||||
|
background: white; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
.btn-close:hover { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
/* 加载状态样式 */ |
||||
|
.loading-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.loading-container i { |
||||
|
font-size: 24px; |
||||
|
margin-bottom: 12px; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
.loading-container span { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 空数据状态样式 */ |
||||
|
.empty-material { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 60px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-material i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 16px; |
||||
|
color: #ddd; |
||||
|
} |
||||
|
|
||||
|
.empty-material p { |
||||
|
margin: 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 360px) { |
||||
|
.header-bar { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
.material-info-card { |
||||
|
margin: 4px 12px; |
||||
|
padding: 6px 16px; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
margin: 0 12px; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.label-list { |
||||
|
margin: 0 12px 8px; |
||||
|
} |
||||
|
|
||||
|
.card-details { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
.detail-item { |
||||
|
flex: 0 0 48%; |
||||
|
margin-bottom: 6px; |
||||
|
min-width: 50px; |
||||
|
} |
||||
|
|
||||
|
.list-header, .list-item { |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
|
||||
|
.col-label, .col-part { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue