赵正易 dda9b03e44 refactor(物料管理): 优化API调用链式处理并统一错误处理
重构物料管理相关页面的API调用,使用链式Promise处理替代原有嵌套方式
统一添加finally处理隐藏加载状态,确保加载状态正确关闭
移除调试用的console.log语句,保持代码整洁
2025-08-06 17:23:14 +08:00

325 lines
8.6 KiB
Vue

<template>
<view class="container">
<!-- 筛选查询区域 -->
<view class="filter-section">
<uni-forms ref="filterForm" :modelValue="filterData" validateTrigger="bind">
<view class="form-row">
<uni-forms-item label="线别选择" label-width="80" name="lineCode" required class="form-item">
<uni-data-select :localdata="lineOptions" v-model="filterData.lineCode" placeholder="请选择线体" @change="getReceiveList"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="选择日期" label-width="80" name="workOrderDate" required class="form-item">
<uni-datetime-picker type="date" v-model="filterData.workOrderDate" format="yyyy-MM-dd" placeholder="请选择日期"></uni-datetime-picker>
</uni-forms-item>
</view>
<view class="btn-search">
<button type="primary" @click="getReceiveList">查询</button>
</view>
</uni-forms>
</view>
<!-- 清单展示区域 -->
<view class="list-section">
<view class="list-header">
<text>收料清单</text>
</view>
<scroll-view scroll-y class="list-container">
<view v-if="receiveList.length === 0" class="empty-tip">
暂无收料数据
</view>
<view v-for="(item, index) in receiveList" :key="index" class="list-item">
<view class="item-info">
<view class="info-row">
<text class="label">物料名称:</text>
<text class="value">{{ item.materialName }}</text>
</view>
<view class="info-row">
<text class="label">物料号:</text>
<text class="value">{{ item.materialCode }}</text>
</view>
<view class="info-row">
<text class="label">待收数量:</text>
<text class="value">{{ item.quantity }}</text>
</view>
</view>
<view class="item-actions">
<button type="primary" size="mini" @click="receiveMaterial(item)">收料</button>
<button type="default" size="mini" @click="returnMaterial(item)">退料</button>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import { doLineReceiveMaterial,doLineReturnBackMaterial,getLineOptions,queryCallReceiveList } from '@/api/mmcall';
export default {
data() {
return {
filterData: {
lineCode: '',
workOrderDate: new Date()
},
lineOptions: [],
receiveList: []
};
},
onLoad() {
// 默认选择当前日期
this.filterData.workOrderDate = new Date();
// 获取线体数据
this.getLineOptions();
},
methods: {
// 获取线体数据
getLineOptions() {
getLineOptions()
.then(res => {
if (res.code === 200 && res.data) {
// 格式化线体数据为uni-data-select需要的格式
this.lineOptions = res.data.map(item => ({
text: item.groupName, // 显示名称
value: item.groupCode // 实际值
}));
} else {
this.$modal.showToast('获取线体数据失败');
}
})
.catch(err => {
console.error('获取线体数据失败', err);
this.$modal.showToast('获取线体数据失败');
});
},
// 获取收料清单
getReceiveList() {
if (!this.filterData.lineCode) {
this.$modal.showToast('请先选择线体');
return;
}
// 准备请求参数
const params = {
pageNum: 1,
pageSize: 100,
lineCode: this.filterData.lineCode,
workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD')
};
// 显示加载中提示
uni.showLoading({
title: '加载中...'
});
// 调用API获取收料清单
queryCallReceiveList(params)
.then(res => {
if (res.code === 200 && res.data) {
this.receiveList = res.data.result;
//console.log('收料数据:', res.data.result);
} else {
this.receiveList = [];
this.$modal.showToast(res.message || '获取收料数据失败');
}
})
.catch(err => {
console.error('获取收料数据失败', err);
this.receiveList = [];
this.$modal.showToast('获取收料数据失败');
})
.finally(() => {
uni.hideLoading();
});
},
// 收料操作
receiveMaterial(item) {
if (!item || !item.id) {
this.$modal.showToast('无效的物料数据');
return;
}
uni.showModal({
title: '收料确认',
content: `确定要收 ${item.materialName} (${item.materialCode}) 吗?`,
success: (res) => {
if (res.confirm) {
// 准备收料参数
const params = {
id: item.id, // 物料ID
quantity: item.quantity, // 收料数量
lineCode: this.filterData.lineCode, // 线体代码
workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD') // 日期
};
// 显示加载中提示
uni.showLoading({
title: '收料中...'
});
// 调用收料API
doLineReceiveMaterial(params)
.then(res => {
if (res.code === 200) {
this.$modal.showToast(`成功收料 ${item.quantity}${item.materialName}`);
// 刷新收料清单
this.getReceiveList();
} else {
this.$modal.showToast(res.message || '收料失败');
}
})
.catch(err => {
console.error('收料失败', err);
this.$modal.showToast('收料失败');
})
.finally(() => {
uni.hideLoading();
});
}
}
});
},
// 退料操作
returnMaterial(item) {
if (!item || !item.id) {
this.$modal.showToast('无效的物料数据');
return;
}
uni.showModal({
title: '退料确认',
content: `确定要退 ${item.materialName} (${item.materialCode}) 吗?`,
success: (res) => {
if (res.confirm) {
// 准备退料参数
const params = {
id: item.id, // 物料ID
quantity: item.quantity, // 退料数量
lineCode: this.filterData.lineCode, // 线体代码
workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD') // 日期
};
// 显示加载中提示
uni.showLoading({
title: '退料中...'
});
// 调用退料API
doLineReturnBackMaterial(params)
.then(res => {
if (res.code === 200) {
this.$modal.showToast(`成功退料 ${item.quantity}${item.materialName}`);
// 刷新收料清单
this.getReceiveList();
} else {
this.$modal.showToast(res.message || '退料失败');
}
})
.catch(err => {
console.error('退料失败', err);
this.$modal.showToast('退料失败');
})
.finally(() => {
uni.hideLoading();
});
}
}
});
}
}
};
</script>
<style scoped>
.container {
padding: 20rpx;
}
.header {
text-align: center;
padding: 20rpx 0;
margin-bottom: 20rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
}
.filter-section {
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.form-row {
display: flex;
flex-direction: column;
gap: 20rpx;
padding: 10rpx 0;
}
.form-item {
width: 100%;
}
.uni-forms-item__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-search {
margin-top: 20rpx;
}
.list-section {
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.list-header {
padding: 10rpx 0;
border-bottom: 1rpx solid #eee;
margin-bottom: 10rpx;
}
.list-header text {
font-size: 32rpx;
font-weight: bold;
}
.list-container {
height: 500rpx;
}
.list-item {
display: flex;
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
}
.item-info {
flex: 1;
}
.info-row {
display: flex;
margin-bottom: 10rpx;
}
.label {
width: 120rpx;
color: #999;
}
.value {
flex: 1;
}
.item-actions {
display: flex;
flex-direction: column;
gap: 10rpx;
}
.empty-tip {
text-align: center;
padding: 40rpx 0;
color: #999;
}
</style>