<template>
|
<div class="picking-operation">
|
<div class="operation-toolbar">
|
<el-button type="primary" @click="showPickingConfirm">
|
分拣确认
|
</el-button>
|
<el-button
|
type="warning"
|
@click="showSplitDialog"
|
:disabled="selectedRows.length !== 1"
|
>
|
拆包
|
</el-button>
|
<el-button type="success" @click="batchDirectOutbound">
|
直接出库
|
</el-button>
|
<el-button type="info" @click="batchReturnToWarehouse">
|
回库
|
</el-button>
|
</div>
|
|
<!-- 出库详情列表 -->
|
<div class="lock-info-table">
|
<base-table
|
ref="lockInfoTable"
|
:table-config="tableConfig"
|
:height="300"
|
selection
|
@selection-change="handleSelectionChange"
|
/>
|
</div>
|
|
<!-- 分拣确认弹窗 -->
|
<el-dialog
|
v-model="pickingConfirmVisible"
|
title="分拣确认"
|
width="90%"
|
top="5vh"
|
destroy-on-close
|
>
|
<picking-confirm
|
v-if="pickingConfirmVisible"
|
:order-no="orderDetail.OrderNo"
|
@confirm="handlePickingConfirm"
|
@close="pickingConfirmVisible = false"
|
/>
|
</el-dialog>
|
|
<!-- 拆包弹窗 -->
|
<el-dialog
|
v-model="splitVisible"
|
title="拆包操作"
|
width="600px"
|
destroy-on-close
|
>
|
<split-package
|
v-if="splitVisible && selectedLockInfo"
|
:lock-info="selectedLockInfo"
|
@confirm="handleSplitConfirm"
|
@close="splitVisible = false"
|
/>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import BaseTable from '@/components/base/BaseTable.vue'
|
import PickingConfirm from './PickingConfirm.vue'
|
import SplitPackage from './SplitPackage.vue'
|
|
const props = defineProps({
|
orderDetail: {
|
type: Object,
|
required: true
|
}
|
})
|
|
const emit = defineEmits(['close'])
|
|
const lockInfoTable = ref()
|
const pickingConfirmVisible = ref(false)
|
const splitVisible = ref(false)
|
const selectedRows = ref([])
|
const selectedLockInfo = ref(null)
|
|
const tableConfig = reactive({
|
url: '/api/outbound/getOutStockLockInfo',
|
query: { orderDetailId: props.orderDetail.Id },
|
columns: [
|
{ type: 'selection', width: 55 },
|
{ prop: 'BatchNo', label: '批次号', width: 120 },
|
{ prop: 'MaterielCode', label: '物料条码', width: 150 },
|
{ prop: 'AssignQuantity', label: '分配数量', width: 100 },
|
{ prop: 'PickedQty', label: '已拣数量', width: 100 },
|
{ prop: 'LocationCode', label: '库位编号', width: 120 },
|
{ prop: 'PalletCode', label: '托盘编号', width: 120 },
|
{ prop: 'Status', label: '状态', width: 100 }
|
]
|
})
|
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection
|
}
|
|
const showPickingConfirm = () => {
|
pickingConfirmVisible.value = true
|
}
|
|
const showSplitDialog = async () => {
|
if (selectedRows.value.length !== 1) {
|
ElMessage.warning('请选择一条要拆包的记录')
|
return
|
}
|
|
try {
|
// 获取选中记录的详细信息
|
const result = await $http.get('/api/outbound/getLockInfoDetail', {
|
params: { lockInfoId: selectedRows.value[0].Id }
|
})
|
|
if (result.success) {
|
selectedLockInfo.value = result.data
|
splitVisible.value = true
|
} else {
|
ElMessage.error('获取拆包记录详情失败')
|
}
|
} catch (error) {
|
ElMessage.error('获取拆包记录详情失败')
|
}
|
}
|
|
const batchDirectOutbound = async () => {
|
try {
|
await ElMessageBox.confirm('确定要对整个订单执行直接出库吗？', '提示', {
|
type: 'warning'
|
})
|
|
const result = await $http.post('/api/outbound/batchDirectOutbound', {
|
orderNo: props.orderDetail.OrderNo
|
})
|
|
if (result.success) {
|
ElMessage.success('批量直接出库成功')
|
lockInfoTable.value.refresh()
|
} else {
|
ElMessage.error(result.message)
|
}
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('批量直接出库失败')
|
}
|
}
|
}
|
|
const batchReturnToWarehouse = async () => {
|
try {
|
await ElMessageBox.confirm('确定要对未拣选货物执行回库吗？', '提示', {
|
type: 'warning'
|
})
|
|
const result = await $http.post('/api/outbound/batchReturnToWarehouse', {
|
orderNo: props.orderDetail.OrderNo
|
})
|
|
if (result.success) {
|
ElMessage.success('批量回库成功')
|
lockInfoTable.value.refresh()
|
} else {
|
ElMessage.error(result.message)
|
}
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('批量回库失败')
|
}
|
}
|
}
|
|
const handlePickingConfirm = () => {
|
pickingConfirmVisible.value = false
|
lockInfoTable.value.refresh()
|
}
|
|
const handleSplitConfirm = () => {
|
splitVisible.value = false
|
selectedLockInfo.value = null
|
lockInfoTable.value.refresh()
|
}
|
</script>
|
