<template>
|
<el-dialog
|
v-model="visible"
|
title="领料"
|
width="1000px"
|
top="3vh"
|
:close-on-click-modal="false"
|
destroy-on-close
|
class="material-requisition-dialog"
|
>
|
<div class="material-requisition-form">
|
<!-- 原材料列表 -->
|
<el-table :data="materialList" border style="width: 100%" height="65vh">
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="productName" label="产品名称" min-width="150" />
|
<el-table-column prop="model" label="型号" min-width="150" />
|
<!-- <el-table-column prop="batchNo" label="批号" min-width="150">
|
<template #default="{ row }">
|
<el-select
|
v-model="row.batchNo"
|
placeholder="请选择批号"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in row.batchOptions || []"
|
:key="item.batchNo"
|
:label="item.batchNo"
|
:value="item.batchNo"
|
/>
|
</el-select>
|
</template>
|
</el-table-column> -->
|
<el-table-column prop="unit" label="单位" width="80" align="center" />
|
<el-table-column prop="qualitity" label="数量" width="100" align="center">
|
<template #default="{ row }">
|
{{ row.qualitity || 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="requisitionQty" label="领用数量" width="120" align="center">
|
<template #default="{ row }">
|
<el-input-number
|
v-model="row.requisitionQty"
|
:min="0"
|
:precision="2"
|
:controls="false"
|
:disabled="!row.qualitity || hasDrawMaterials"
|
style="width: 100%"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" min-width="150">
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" :loading="saving" @click="handleConfirm">确 认</el-button>
|
<el-button @click="handleCancel">取 消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, watch } from 'vue';
|
import { ElMessage } from 'element-plus';
|
import { getByBomId, drawMaterials } from '@/api/productionManagement/productionOrder.js';
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
orderData: {
|
type: Object,
|
default: () => ({})
|
}
|
});
|
|
const emit = defineEmits(['update:modelValue', 'confirm']);
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (val) => emit('update:modelValue', val)
|
});
|
|
const loading = ref(false);
|
const saving = ref(false);
|
const materialList = ref([]);
|
const hasDrawMaterials = ref(false);
|
|
// 监听弹框打开，加载数据
|
watch(() => props.modelValue, (val) => {
|
if (val && props.orderData) {
|
loadMaterialList();
|
}
|
});
|
|
const loadMaterialList = async () => {
|
const order = props.orderData;
|
const drawMaterialsData = order.drawMaterials;
|
|
// 如果已有领料数据，直接使用
|
if (drawMaterialsData) {
|
hasDrawMaterials.value = true;
|
try {
|
const list = typeof drawMaterialsData === 'string'
|
? JSON.parse(drawMaterialsData)
|
: drawMaterialsData;
|
materialList.value = list.map(item => ({
|
...item,
|
requisitionQty: item.requisitionQty || 0
|
}));
|
return;
|
} catch (e) {
|
console.error('解析领料数据失败:', e);
|
}
|
}
|
|
// 没有领料数据，调用接口查询
|
hasDrawMaterials.value = false;
|
const bomId = order?.bomId;
|
if (!bomId) {
|
ElMessage.warning('当前订单缺少BOM信息');
|
return;
|
}
|
|
loading.value = true;
|
try {
|
const res = await getByBomId({ bomId });
|
const data = res.data || [];
|
// 处理数据，添加领用数量字段和批号选项
|
materialList.value = data.map(item => ({
|
...item,
|
requisitionQty: item.qualitity ? 0 : 0,
|
batchNo: item.batchNo || '',
|
remark: item.remark || '',
|
// 批号选项，从库存原材料信息中获取
|
batchOptions: item.inventoryList || []
|
}));
|
} catch (error) {
|
console.error('查询原材料列表失败:', error);
|
ElMessage.error('查询原材料列表失败');
|
materialList.value = [];
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
const handleCancel = () => {
|
visible.value = false;
|
materialList.value = [];
|
hasDrawMaterials.value = false;
|
};
|
|
const handleConfirm = async () => {
|
const orderId = props.orderData?.id;
|
if (!orderId) {
|
ElMessage.error('订单ID不存在');
|
return;
|
}
|
|
const drawMaterialsList = materialList.value.map(item => ({
|
...item,
|
requisitionQty: item.requisitionQty || 0
|
}));
|
|
const postData = {
|
id: orderId,
|
drawMaterials: JSON.stringify(drawMaterialsList)
|
};
|
|
saving.value = true;
|
try {
|
await drawMaterials(postData);
|
ElMessage.success('领料保存成功');
|
visible.value = false;
|
materialList.value = [];
|
hasDrawMaterials.value = false;
|
} catch (error) {
|
console.error('保存领料失败:', error);
|
ElMessage.error('保存领料失败');
|
} finally {
|
saving.value = false;
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.material-requisition-form {
|
.el-table {
|
margin-top: 10px;
|
}
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
|
:deep(.el-dialog) {
|
height: 85vh;
|
margin-top: 3vh !important;
|
display: flex;
|
flex-direction: column;
|
}
|
|
:deep(.el-dialog__body) {
|
flex: 1;
|
overflow-y: auto;
|
padding: 15px 20px;
|
}
|
|
:deep(.el-dialog__header) {
|
padding: 15px 20px;
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
:deep(.el-dialog__footer) {
|
padding: 15px 20px;
|
border-top: 1px solid #e4e7ed;
|
}
|
</style>
|
