项目初始化
This commit is contained in:
liuhanqing
293
RuoYi-App-master/pages/out/pkout.vue
Normal file
293
RuoYi-App-master/pages/out/pkout.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-box">
|
||||
<uni-easyinput
|
||||
v-model="stockoutId"
|
||||
:placeholder="$t('outbound.pkout.searchPlaceholder')"
|
||||
:clearable="true"
|
||||
@clear="handleClear"
|
||||
@confirm="handleSearch"
|
||||
@input="handleSearch"
|
||||
ref="detailIdInput">
|
||||
<template #right>
|
||||
<text class="scan-icon" @click="handleScan">📷</text>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
<view class="card-list">
|
||||
<view v-if="orderList && orderList.length > 0">
|
||||
<view v-for="(order, index) in orderList" :key="index" class="order-card" @click="handleOrderClick(order)">
|
||||
<uni-card>
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="label">{{ $t('outbound.pkout.orderNumber') }}</text>
|
||||
<text class="value">{{ order.stockoutId }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">{{ $t('outbound.pkout.createTime') }}</text>
|
||||
<text class="value">{{ order.createDate }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">{{ $t('outbound.pkout.customer') }}</text>
|
||||
<text class="value">{{ order.customerName }}</text>
|
||||
</view>
|
||||
<!-- 展开时显示物料信息 -->
|
||||
<view v-if="order.expanded && order.goodsList" class="goods-list">
|
||||
<view class="goods-title">{{ $t('outbound.pkout.goodsInfo') }}</view>
|
||||
<view class="goods-table">
|
||||
<view class="table-header">
|
||||
<text class="header-cell" style="display: none;">{{ $t('outbound.pkout.productCode') }}</text>
|
||||
<text class="header-cell">{{ $t('outbound.pkout.productName') }}</text>
|
||||
<text class="header-cell">{{ $t('outbound.pkout.planQuantity') }}</text>
|
||||
<text class="header-cell">{{ $t('outbound.pkout.outboundQuantity') }}</text>
|
||||
<text class="header-cell">{{ $t('outbound.pkout.operation') }}</text>
|
||||
</view>
|
||||
<view v-for="(goods, goodsIndex) in order.goodsList" :key="goodsIndex" class="table-row">
|
||||
<text class="table-cell" style="display: none;">{{ goods.productId }}</text>
|
||||
<text class="table-cell">{{ goods.extraField.materialDesc }}</text>
|
||||
<text class="table-cell">{{ goods.quantity }}</text>
|
||||
<text class="table-cell">{{ goods.quantity - goods.assignNum }}</text>
|
||||
<view class="table-cell">
|
||||
<button class="operate-btn" @click.stop="handleOutStock(goods)" :disabled="(goods.quantity - goods.assignNum) <= 0" :class="{'operate-btn-disabled': (goods.quantity - goods.assignNum) <= 0}">
|
||||
{{ $t('outbound.pkout.outbound') }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">{{ $t('outbound.pkout.noOrderInfo') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOutOrderList, getOutOrderDetail, pkOut } from '@/api/out/productOut'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stockoutId: "",
|
||||
orderList: [],
|
||||
needRefresh: false
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.detailIdInput.onFocus()
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
onLoad() {
|
||||
this.getOrderList()
|
||||
},
|
||||
onShow() {
|
||||
if (this.needRefresh) {
|
||||
this.getOrderList()
|
||||
this.needRefresh = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取出库单列表
|
||||
async getOrderList() {
|
||||
try {
|
||||
const response = await getOutOrderList({"stockoutId":this.stockoutId})
|
||||
this.orderList = response.map(order => ({
|
||||
...order,
|
||||
expanded: false,
|
||||
goodsList: null
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error(this.$t('outbound.pkout.getOrderListFailed'), error)
|
||||
uni.showToast({
|
||||
title: this.$t('outbound.pkout.getOrderListFailed'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取物品列表
|
||||
async getGoodsList(order) {
|
||||
try {
|
||||
const goodsResponse = await getOutOrderDetail({
|
||||
stockoutId: order.stockoutId,
|
||||
pageSize:100,
|
||||
pageNum:1,
|
||||
status:1
|
||||
})
|
||||
order.goodsList = goodsResponse.rows.map(item => ({
|
||||
...item
|
||||
// outQuantity: item.quantity-item.assignNum
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error(this.$t('outbound.pkout.getItemInfoFailed'), error)
|
||||
uni.showToast({
|
||||
title: this.$t('outbound.pkout.getItemInfoFailed'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 处理出库单点击
|
||||
async handleOrderClick(order) {
|
||||
// 切换展开状态
|
||||
order.expanded = !order.expanded
|
||||
// 如果展开且还没有加载物品列表，则加载物品列表
|
||||
if (order.expanded && !order.goodsList) {
|
||||
await this.getGoodsList(order)
|
||||
}
|
||||
},
|
||||
// 处理搜索
|
||||
handleSearch(value) {
|
||||
this.stockoutId = value
|
||||
this.getOrderList()
|
||||
},
|
||||
// 处理清除
|
||||
handleClear() {
|
||||
this.stockoutId = ""
|
||||
this.getOrderList()
|
||||
},
|
||||
// 处理扫码
|
||||
handleScan() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
this.stockoutId = res.result
|
||||
this.getOrderList()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 处理出库数量变化
|
||||
handleOutQuantityChange(goods) {
|
||||
if (goods.outQuantity > goods.quantity - goods.assignNum) {
|
||||
goods.outQuantity = goods.quantity - goods.assignNum
|
||||
}
|
||||
},
|
||||
// 验证数量是否有效
|
||||
isValidQuantity(goods) {
|
||||
return goods.outQuantity > 0 && goods.outQuantity <= goods.quantity - goods.assignNum
|
||||
},
|
||||
// 处理出库
|
||||
async handleOutStock(goods) {
|
||||
// if (!this.isValidQuantity(goods)) return
|
||||
|
||||
try {
|
||||
await pkOut({
|
||||
stockinDetailId: goods.stockoutDetailId
|
||||
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: this.$t('outbound.pkout.outboundSuccess'),
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 刷新数据
|
||||
this.getOrderList()
|
||||
} catch (error) {
|
||||
console.error('出库失败：', error)
|
||||
uni.showToast({
|
||||
title: this.$t('outbound.pkout.outboundFailed'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.scan-icon {
|
||||
font-size: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.order-card {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-table {
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.header-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.table-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate-btn {
|
||||
background-color: #007AFF;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.operate-btn-disabled {
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user