5 changed files with 1198 additions and 0 deletions
-
47src/api/production/production-issue-return.js
-
10src/router/index.js
-
10src/views/main.vue
-
732src/views/modules/production/productionIssueReturnDetail.vue
-
399src/views/modules/production/productionIssueReturnList.vue
@ -0,0 +1,47 @@ |
|||||
|
import http from '@/utils/httpRequest' |
||||
|
|
||||
|
/** |
||||
|
* 搜索领料工单(模糊查询,返回top3) |
||||
|
*/ |
||||
|
export function searchIssueOrders(data) { |
||||
|
return http({ |
||||
|
url: http.adornUrl('/production/issueReturn/searchOrders'), |
||||
|
method: 'post', |
||||
|
data: http.adornData(data) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取工单详情(包括工序信息) |
||||
|
*/ |
||||
|
export function getOrderDetail(data) { |
||||
|
return http({ |
||||
|
url: http.adornUrl('/production/issueReturn/getOrderDetail'), |
||||
|
method: 'post', |
||||
|
data: http.adornData(data) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 扫描标签获取信息 |
||||
|
*/ |
||||
|
export function scanLabel(data) { |
||||
|
return http({ |
||||
|
url: http.adornUrl('/production/issueReturn/scanLabel'), |
||||
|
method: 'post', |
||||
|
data: http.adornData(data) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 提交生产领退料 |
||||
|
* 包含:退仓+领料申请+过账+回传ERP |
||||
|
*/ |
||||
|
export function submitIssueReturn(data) { |
||||
|
return http({ |
||||
|
url: http.adornUrl('/production/issueReturn/submit'), |
||||
|
method: 'post', |
||||
|
data: http.adornData(data) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,732 @@ |
|||||
|
<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"> |
||||
|
<!-- 第一行:退库工单 + 空白输入框 --> |
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item" style="flex: 0 0 70%;"> |
||||
|
<span class="info-label">退库工单</span> |
||||
|
<span class="info-value">{{ returnOrderNo }}</span> |
||||
|
</div> |
||||
|
<div class="info-item" style="flex: 0 0 25%;"> |
||||
|
<el-input |
||||
|
v-model="blankInput" |
||||
|
placeholder="不允许编辑" |
||||
|
disabled |
||||
|
style="width: 100%;"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 第二行:领料工单 + 工序 --> |
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item" style="flex: 0 0 70%;"> |
||||
|
<span class="info-label">领料工单</span> |
||||
|
<el-select |
||||
|
v-model="issueOrderNo" |
||||
|
filterable |
||||
|
remote |
||||
|
reserve-keyword |
||||
|
placeholder="请选择领料工单 下拉选择TOP3" |
||||
|
:remote-method="searchIssueOrder" |
||||
|
:loading="orderSearchLoading" |
||||
|
@change="handleIssueOrderChange" |
||||
|
style="width: 100%;"> |
||||
|
<el-option |
||||
|
v-for="item in issueOrderOptions" |
||||
|
:key="item.orderNo" |
||||
|
:label="item.orderNo" |
||||
|
:value="item.orderNo"> |
||||
|
<span style="float: left">{{ item.orderNo }}</span> |
||||
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.partNo }}</span> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="info-item" style="flex: 0 0 25%;"> |
||||
|
<el-select |
||||
|
v-model="operationSeq" |
||||
|
placeholder="工序" |
||||
|
@change="handleOperationChange" |
||||
|
style="width: 100%;"> |
||||
|
<el-option |
||||
|
v-for="item in operationOptions" |
||||
|
:key="item.seqNo" |
||||
|
:label="item.operationName" |
||||
|
:value="item.seqNo"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 第三行:备注说明 --> |
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item full-width"> |
||||
|
<span class="info-label">备注说明</span> |
||||
|
<el-input |
||||
|
v-model="remark" |
||||
|
placeholder="请输入备注" |
||||
|
style="width: 100%;"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 退料信息确认标题 --> |
||||
|
<div class="section-title"> |
||||
|
<div class="title-left"> |
||||
|
<i class="el-icon-circle-check"></i> |
||||
|
<span>退料信息确认</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-qty">标签数量</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="list-body"> |
||||
|
<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-qty">{{ label.quantity }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="labelList.length === 0" class="empty-labels"> |
||||
|
<p>暂无扫描标签</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部操作按钮 --> |
||||
|
<div class="bottom-actions"> |
||||
|
<button class="action-btn secondary" @click="confirmIssueReturn"> |
||||
|
确定 |
||||
|
</button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels"> |
||||
|
打印 |
||||
|
</button> |
||||
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelOperation"> |
||||
|
取消 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getCurrentWarehouse } from '@/utils' |
||||
|
import moment from 'moment' |
||||
|
import { searchIssueOrders, getOrderDetail, scanLabel, submitIssueReturn } from '@/api/production/production-issue-return.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scanCode: '', |
||||
|
isRemoveMode: false, |
||||
|
returnOrderNo: '', // 退库工单(从路由参数获取) |
||||
|
blankInput: '', // 空白输入框 |
||||
|
issueOrderNo: '', // 领料工单 |
||||
|
operationSeq: '', // 工序序号 |
||||
|
operationName: '', // 工序名称 |
||||
|
remark: '', // 备注说明 |
||||
|
labelList: [], // 扫描的标签列表 |
||||
|
issueOrderOptions: [], // 领料工单选项 |
||||
|
operationOptions: [], // 工序选项 |
||||
|
orderSearchLoading: false, |
||||
|
selectedIssueOrder: null, // 选中的领料工单完整信息 |
||||
|
submitting: false // 提交中标识 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 从路由参数获取退库工单信息 |
||||
|
if (this.$route.query.inboundNo) { |
||||
|
this.returnOrderNo = this.$route.query.inboundNo |
||||
|
} |
||||
|
|
||||
|
// 如果没有退库工单号,返回列表页 |
||||
|
if (!this.returnOrderNo) { |
||||
|
this.$message.error('缺少退库工单信息') |
||||
|
this.$router.back() |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 聚焦到扫描输入框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.scanInput) { |
||||
|
this.$refs.scanInput.focus() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理扫描 |
||||
|
handleScan() { |
||||
|
if (!this.scanCode.trim()) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.isRemoveMode) { |
||||
|
this.removeLabel(this.scanCode.trim()) |
||||
|
} else { |
||||
|
this.addLabel(this.scanCode.trim()) |
||||
|
} |
||||
|
|
||||
|
this.scanCode = '' |
||||
|
}, |
||||
|
|
||||
|
// 添加标签 |
||||
|
addLabel(labelCode) { |
||||
|
// 检查是否已存在 |
||||
|
const exists = this.labelList.find(item => item.labelCode === labelCode) |
||||
|
if (exists) { |
||||
|
this.$message.warning('该标签已扫描') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
const currentWarehouse = getCurrentWarehouse() |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 调用后端接口获取标签信息 |
||||
|
const params = { |
||||
|
site: localStorage.getItem('site'), |
||||
|
buNo: localStorage.getItem('buNo'), |
||||
|
warehouseId: currentWarehouse, |
||||
|
labelCode: labelCode |
||||
|
} |
||||
|
|
||||
|
scanLabel(params).then(({ data }) => { |
||||
|
if (data && data.code === 0 && data.labelInfo) { |
||||
|
const newLabel = { |
||||
|
id: Date.now(), |
||||
|
labelCode: labelCode, |
||||
|
partNo: data.labelInfo.partNo, |
||||
|
partDesc: data.labelInfo.partDesc, |
||||
|
quantity: data.labelInfo.quantity, |
||||
|
rollNo: data.labelInfo.rollNo, |
||||
|
warehouseId: data.labelInfo.warehouseId, |
||||
|
locationId: data.labelInfo.locationId |
||||
|
} |
||||
|
|
||||
|
this.labelList.unshift(newLabel) |
||||
|
this.$message.success('标签添加成功') |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '标签信息获取失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('扫描标签失败:', error) |
||||
|
this.$message.error('标签信息获取失败') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 移除标签 |
||||
|
removeLabel(labelCode) { |
||||
|
const index = this.labelList.findIndex(item => item.labelCode === labelCode) |
||||
|
if (index === -1) { |
||||
|
this.$message.warning('未找到该标签') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.labelList.splice(index, 1) |
||||
|
this.$message.success('标签移除成功') |
||||
|
}, |
||||
|
|
||||
|
// 搜索领料工单(模糊查询,返回top3) |
||||
|
searchIssueOrder(query) { |
||||
|
if (!query) { |
||||
|
this.issueOrderOptions = [] |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.orderSearchLoading = true |
||||
|
|
||||
|
const params = { |
||||
|
site: localStorage.getItem('site'), |
||||
|
buNo: localStorage.getItem('buNo'), |
||||
|
searchKey: query, |
||||
|
limit: 3 // top3 |
||||
|
} |
||||
|
|
||||
|
searchIssueOrders(params).then(({ data }) => { |
||||
|
this.orderSearchLoading = false |
||||
|
if (data && data.code === 0) { |
||||
|
this.issueOrderOptions = data.orders || [] |
||||
|
} else { |
||||
|
this.issueOrderOptions = [] |
||||
|
this.$message.error(data.msg || '搜索工单失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.orderSearchLoading = false |
||||
|
console.error('搜索工单失败:', error) |
||||
|
this.$message.error('搜索工单失败') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 领料工单选择变化 |
||||
|
handleIssueOrderChange(value) { |
||||
|
const selected = this.issueOrderOptions.find(item => item.orderNo === value) |
||||
|
if (selected) { |
||||
|
this.selectedIssueOrder = selected |
||||
|
|
||||
|
// 清空工序选择 |
||||
|
this.operationSeq = '' |
||||
|
this.operationName = '' |
||||
|
this.operationOptions = [] |
||||
|
|
||||
|
// 加载工序列表 |
||||
|
this.loadOperationList(value) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载工序列表(参考PC端领料申请管理) |
||||
|
loadOperationList(orderNo) { |
||||
|
const params = { |
||||
|
site: localStorage.getItem('site'), |
||||
|
buNo: localStorage.getItem('buNo'), |
||||
|
orderNo: orderNo |
||||
|
} |
||||
|
|
||||
|
getOrderDetail(params).then(({ data }) => { |
||||
|
if (data && data.code === 0 && data.operations) { |
||||
|
// 后端返回工序集合 |
||||
|
this.operationOptions = data.operations || [] |
||||
|
|
||||
|
// 如果只有一个工序,自动选中 |
||||
|
if (this.operationOptions.length === 1) { |
||||
|
this.operationSeq = this.operationOptions[0].seqNo |
||||
|
this.operationName = this.operationOptions[0].operationName |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取工序列表失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('获取工序列表失败:', error) |
||||
|
this.$message.error('获取工序列表失败') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 工序选择变化 |
||||
|
handleOperationChange(value) { |
||||
|
const selected = this.operationOptions.find(item => item.seqNo === value) |
||||
|
if (selected) { |
||||
|
this.operationName = selected.operationName |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 确定操作(退仓+领料) |
||||
|
confirmIssueReturn() { |
||||
|
// 验证必填项 |
||||
|
if (this.labelList.length === 0) { |
||||
|
this.$message.warning('请先扫描标签') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (!this.issueOrderNo) { |
||||
|
this.$message.warning('请选择领料工单') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (!this.operationSeq || !this.operationName) { |
||||
|
this.$message.warning('请选择工序') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.$confirm('确认提交生产领退料?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.submitIssueReturn() |
||||
|
}).catch(() => { |
||||
|
// 取消操作 |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 提交领退料 |
||||
|
submitIssueReturn() { |
||||
|
const currentWarehouse = getCurrentWarehouse() |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (this.submitting) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.submitting = true |
||||
|
|
||||
|
const params = { |
||||
|
site: localStorage.getItem('site'), |
||||
|
buNo: localStorage.getItem('buNo'), |
||||
|
warehouseId: currentWarehouse, |
||||
|
userName: localStorage.getItem('userName'), |
||||
|
returnOrderNo: this.returnOrderNo, |
||||
|
issueOrderNo: this.issueOrderNo, |
||||
|
operationSeq: this.operationSeq, |
||||
|
operationName: this.operationName, |
||||
|
remark: this.remark, |
||||
|
labelList: this.labelList.map(label => ({ |
||||
|
labelCode: label.labelCode, |
||||
|
rollNo: label.rollNo, |
||||
|
partNo: label.partNo, |
||||
|
partDesc: label.partDesc, |
||||
|
quantity: label.quantity, |
||||
|
warehouseId: label.warehouseId, |
||||
|
locationId: label.locationId |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
// 调用后端接口提交(退仓+领料申请+过账+回传ERP) |
||||
|
submitIssueReturn(params).then(({ data }) => { |
||||
|
this.submitting = false |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('提交成功') |
||||
|
|
||||
|
// 延迟返回列表 |
||||
|
setTimeout(() => { |
||||
|
this.$router.back() |
||||
|
}, 1000) |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '提交失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.submitting = false |
||||
|
console.error('提交失败:', error) |
||||
|
this.$message.error('提交失败,请稍后重试') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 打印标签 |
||||
|
printLabels() { |
||||
|
if (this.labelList.length === 0) { |
||||
|
this.$message.warning('暂无可打印的标签') |
||||
|
return |
||||
|
} |
||||
|
this.$message.info('打印功能开发中') |
||||
|
}, |
||||
|
|
||||
|
// 取消操作 |
||||
|
cancelOperation() { |
||||
|
this.$confirm('确认取消当前操作?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.$router.back() |
||||
|
}).catch(() => { |
||||
|
// 取消操作 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 基础容器 */ |
||||
|
.pda-container { |
||||
|
min-height: 100vh; |
||||
|
background: #f5f7fa; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
/* 头部栏 */ |
||||
|
.header-bar { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
padding: 12px 16px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.header-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.header-left i { |
||||
|
font-size: 20px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.header-left span { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.header-right { |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
padding: 4px 12px; |
||||
|
border-radius: 12px; |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* 搜索容器 */ |
||||
|
.search-container { |
||||
|
padding: 12px 16px; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.compact-input { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.mode-switch { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.switch-text, .switch-text2 { |
||||
|
font-size: 13px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.switch-text { |
||||
|
color: #ff4949; |
||||
|
} |
||||
|
|
||||
|
.switch-text2 { |
||||
|
color: #13ce66; |
||||
|
} |
||||
|
|
||||
|
/* 物料信息卡片 */ |
||||
|
.material-info-card { |
||||
|
background: white; |
||||
|
margin: 4px 16px; |
||||
|
padding: 12px 16px; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
border: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
/* 卡片信息行 */ |
||||
|
.card-info-row { |
||||
|
margin-bottom: 12px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.card-info-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
flex: 0 0 auto; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.info-item.full-width { |
||||
|
flex: 1 1 100%; |
||||
|
} |
||||
|
|
||||
|
.info-item.half-width { |
||||
|
flex: 1 1 48%; |
||||
|
min-width: 48%; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 13px; |
||||
|
color: #666; |
||||
|
white-space: nowrap; |
||||
|
margin-right: 8px; |
||||
|
min-width: 70px; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
word-break: break-all; |
||||
|
line-height: 1.4; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
/* 区域标题 */ |
||||
|
.section-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 8px 12px; |
||||
|
background: white; |
||||
|
margin: 4px 16px 0; |
||||
|
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 { |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
color: #17B3A3; |
||||
|
} |
||||
|
|
||||
|
/* 标签列表 */ |
||||
|
.label-list { |
||||
|
background: white; |
||||
|
margin: 0 16px 80px; |
||||
|
border-radius: 0 0 8px 8px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.list-header { |
||||
|
display: flex; |
||||
|
background: #f5f7fa; |
||||
|
padding: 10px 8px; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
color: #666; |
||||
|
border-bottom: 1px solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.list-body { |
||||
|
max-height: 400px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
padding: 12px 8px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.list-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.col-no { |
||||
|
width: 50px; |
||||
|
text-align: center; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.col-label { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
padding: 0 8px; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.col-part { |
||||
|
width: 100px; |
||||
|
padding: 0 8px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.col-qty { |
||||
|
width: 80px; |
||||
|
text-align: right; |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.empty-labels { |
||||
|
padding: 40px 20px; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 底部操作按钮 */ |
||||
|
.bottom-actions { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background: white; |
||||
|
padding: 12px 16px; |
||||
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
flex: 1; |
||||
|
padding: 12px 20px; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
font-size: 15px; |
||||
|
font-weight: bold; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.action-btn.secondary { |
||||
|
background: #17B3A3; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.action-btn.secondary:active { |
||||
|
transform: scale(0.98); |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
</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 qualifiedList" |
||||
|
:key="index" |
||||
|
class="inbound-card" |
||||
|
@click="goToDetailPage(item)" |
||||
|
> |
||||
|
<div class="card-title"> |
||||
|
<span class="title-label">生产订单</span> |
||||
|
<span class="title-value">{{ item.inboundNo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item"> |
||||
|
<span class="info-label">物料编码:</span> |
||||
|
<span class="info-value">{{ item.partNo }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item full-width"> |
||||
|
<span class="info-label">物料名称:</span> |
||||
|
<span class="info-value">{{ item.partDesc }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-info-row"> |
||||
|
<div class="info-item"> |
||||
|
<span class="info-label">订单数量:</span> |
||||
|
<span class="info-value highlight">{{ item.lotSize }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<div v-if="qualifiedList.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 { getQualifiedReturnList } from "@/api/production/production-return2.js"; |
||||
|
import { getCurrentWarehouse } from '@/utils' |
||||
|
import moment from 'moment'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchCode: '', |
||||
|
qualifiedList: [], |
||||
|
loading: false |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(date) { |
||||
|
return date ? moment(date).format('YYYY-MM-DD') : ''; |
||||
|
}, |
||||
|
|
||||
|
// 处理搜索 |
||||
|
handleSearch() { |
||||
|
if (this.searchCode.trim()) { |
||||
|
this.searchQualifiedList(this.searchCode.trim()); |
||||
|
} else { |
||||
|
this.loadQualifiedList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载生产待退仓列表 |
||||
|
loadQualifiedList() { |
||||
|
const currentWarehouse = getCurrentWarehouse(); |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
warehouseId: currentWarehouse, |
||||
|
site: localStorage.getItem('site'), |
||||
|
status: '待入库', // 待入库状态 |
||||
|
}; |
||||
|
|
||||
|
getQualifiedReturnList(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
this.qualifiedList = data.data || []; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取数据失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
console.error('获取生产待退仓列表失败:', error); |
||||
|
this.$message.error('获取数据失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 搜索特定入库单 |
||||
|
searchQualifiedList(searchCode) { |
||||
|
const currentWarehouse = getCurrentWarehouse(); |
||||
|
if (!currentWarehouse) { |
||||
|
this.$message.error('请先选择仓库'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.loading = true; |
||||
|
const params = { |
||||
|
warehouseId: currentWarehouse, |
||||
|
searchCode: searchCode, |
||||
|
site: localStorage.getItem('site'), |
||||
|
status: '待入库' |
||||
|
}; |
||||
|
|
||||
|
getQualifiedReturnList(params).then(({ data }) => { |
||||
|
this.loading = false; |
||||
|
if (data && data.code === 0) { |
||||
|
if (data.data.length === 0) { |
||||
|
this.$message.warning('未找到匹配的入库单'); |
||||
|
} |
||||
|
this.qualifiedList = data.data || []; |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '查询失败'); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.loading = false; |
||||
|
console.error('搜索失败:', error); |
||||
|
this.$message.error('查询失败'); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到生产领退料详情页面 |
||||
|
goToDetailPage(item) { |
||||
|
this.$router.push({ |
||||
|
name: 'productionIssueReturnDetail', |
||||
|
params: { |
||||
|
buNo: item.buNo, |
||||
|
inboundNo: item.inboundNo |
||||
|
}, |
||||
|
query: { |
||||
|
inboundNo: item.inboundNo, |
||||
|
buNo: item.buNo, |
||||
|
partNo: item.partNo, |
||||
|
partDesc: item.partDesc, |
||||
|
lotSize: item.lotSize |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// 聚焦搜索框 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.searchInput) { |
||||
|
this.$refs.searchInput.focus(); |
||||
|
} |
||||
|
}); |
||||
|
// 加载数据 |
||||
|
this.loadQualifiedList(); |
||||
|
} |
||||
|
}; |
||||
|
</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; |
||||
|
} |
||||
|
|
||||
|
/* 入库卡片 */ |
||||
|
.inbound-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; |
||||
|
} |
||||
|
|
||||
|
.inbound-card:hover { |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
transform: translateY(-1px); |
||||
|
} |
||||
|
|
||||
|
.inbound-card:active { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
/* 卡片标题 */ |
||||
|
.card-title { |
||||
|
margin-bottom: 12px; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.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-info-row { |
||||
|
margin-bottom: 8px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.card-info-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
flex: 0 0 auto; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.info-item.full-width { |
||||
|
flex: 1 1 100%; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
white-space: nowrap; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
word-break: break-all; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.info-value.highlight { |
||||
|
color: #17B3A3; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.inbound-card { |
||||
|
padding: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue