新增采购计划

This commit is contained in:
砂糖
2025-07-22 13:22:50 +08:00
parent 67dda73d12
commit 1cd1b96db9
5 changed files with 389 additions and 254 deletions

View File

@@ -157,10 +157,10 @@
<OrderDetailPanel :orderId="detailOrderId" />
</el-dialog>
<!-- 智能采购单弹窗 -->
<el-dialog :title="`智能采购单订单ID${clacOrderId}`" :visible.sync="clacDialogVisible" width="90%" append-to-body>
<!-- 智能采购单弹窗, 底部弹出 -->
<el-drawer :title="`智能采购单订单ID${clacOrderId}`" direction="btt" :visible.sync="clacDialogVisible" width="100%" size="90%" append-to-body>
<clac-panel :orderId="clacOrderId" @confirm="handleRecommendConfirm" />
</el-dialog>
</el-drawer>
</div>
</template>

View File

@@ -239,6 +239,25 @@
<el-button @click="detailOpen = false"> </el-button>
</div>
</el-dialog>
<!-- 新增采购计划底部抽屉 -->
<el-drawer
title="新增采购计划"
:visible.sync="addDrawerOpen"
direction="btt"
size="90%"
:with-header="true"
:wrapperClosable="false"
custom-class="purchase-drawer"
append-to-body
mask-closable="false"
>
<CreatePurchasePanel
:order-id="''"
:recommend-data="{}"
@confirm="onAddConfirm"
/>
</el-drawer>
</div>
</template>
@@ -247,13 +266,15 @@ import { listPurchasePlan, getPurchasePlan, delPurchasePlan, addPurchasePlan, up
import { listOrder } from "@/api/wms/order";
import PurchasePlanClac from "./panels/clac.vue";
import PurchasePlanDetail from "./panels/detail.vue";
import CreatePurchasePanel from "./panels/CreatePurchasePanel.vue";
import { EOrderStatus } from "../../../utils/enums";
export default {
name: "PurchasePlan",
components: {
PurchasePlanClac,
PurchasePlanDetail
PurchasePlanDetail,
CreatePurchasePanel
},
dicts: ['order_status'],
data() {
@@ -327,7 +348,8 @@ export default {
status: [
{ required: true, message: "状态不能为空", trigger: "change" }
],
}
},
addDrawerOpen: false,
};
},
mounted() {
@@ -383,9 +405,7 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加采购计划主";
this.addDrawerOpen = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
@@ -498,7 +518,19 @@ export default {
handleDetail(row) {
this.selectedPlanId = row.planId;
this.detailOpen = true;
},
onAddConfirm() {
this.addDrawerOpen = false;
this.getList();
}
}
};
</script>
<style>
.purchase-drawer .el-drawer__body {
padding: 24px;
background: #f9f9f9;
overflow-y: auto;
}
</style>

View File

@@ -0,0 +1,280 @@
<template>
<div class="purchase-plan-transfer">
<!-- 采购单信息区 -->
<el-card class="section-card" shadow="never">
<div slot="header" class="section-title">采购单信息</div>
<el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
</el-form-item>
</el-form>
</el-card>
<div class="transfer-content">
<!-- 原料区待筛选 -->
<el-card class="section-card left-table" shadow="never">
<div slot="header" class="section-title">原料区待筛选</div>
<div class="filter-bar">
<el-input
v-model="rawMaterialNameFilter"
placeholder="请输入原材料名称"
size="small"
style="width: 200px; margin-bottom: 10px;"
@keyup.enter.native="handleRawMaterialFilter"
clearable
/>
<el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
</div>
<el-table
:data="rawMaterialList"
@selection-change="handleSelectionChange"
style="width: 100%"
ref="leftTable"
border
:loading="rawMaterialLoading"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="rawMaterialName" label="原材料名称" />
<el-table-column prop="rawMaterialCode" label="原材料编码" />
<el-table-column prop="unit" label="单位" />
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
layout="total, prev, pager, next"
/>
</el-card>
<!-- 中间操作按钮 -->
<div class="transfer-actions">
<el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
<el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
</div>
<!-- 采购单明细区 -->
<el-card class="section-card right-table" shadow="never">
<div slot="header" class="section-title">采购单明细</div>
<el-table
:data="purchaseList"
@selection-change="handleRightSelectionChange"
style="width: 100%"
ref="rightTable"
border
>
<el-table-column type="selection" width="55" />
<el-table-column prop="rawMaterialName" label="原材料名称" />
<el-table-column prop="rawMaterialCode" label="原材料编码" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="计划采购数">
<template #default="scope">
<el-input-number v-model="scope.row.quantity" :min="0" size="small" />
</template>
</el-table-column>
<el-table-column prop="owner" label="负责人">
<template #default="scope">
<el-input v-model="scope.row.owner" size="small" />
</template>
</el-table-column>
<el-table-column prop="remark" label="备注">
<template #default="scope">
<el-input v-model="scope.row.remark" size="small" />
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
<el-button type="primary" @click="confirm" :loading="submitLoading">{{ submitLoading ? '提交中...' : '确认' }}</el-button>
</div>
</div>
</template>
<script>
import { createPurchasePlan } from '@/api/wms/purchasePlan'
import { listRawMaterial } from '@/api/wms/rawMaterial'
export default {
name: 'CreatePurchasePanel',
props: {
orderId: {
type: [String, Number],
required: true
},
recommendData: {
type: Object,
default: () => ({})
}
},
data() {
return {
// 原材料表格相关
rawMaterialList: [],
total: 0,
pageNum: 1,
pageSize: 10,
rawMaterialLoading: false,
leftSelected: [],
rightSelected: [],
rawMaterialNameFilter: '',
// 采购列表
purchaseList: [],
// 细化的loading状态
formLoading: false,
submitLoading: false,
mainForm: {
planCode: '',
owner: '',
remark: ''
},
mainFormRules: {
planCode: [
{ required: true, message: '请输入计划编号', trigger: 'blur' }
],
owner: [
{ required: true, message: '请输入负责人', trigger: 'blur' }
]
}
}
},
watch: {
recommendData: {
immediate: true,
handler(newVal) {
if (newVal && newVal.detailList) {
this.purchaseList = newVal.detailList
this.mainForm = {
planCode: newVal.planCode || '',
owner: newVal.owner || '',
remark: newVal.remark || ''
}
}
}
}
},
mounted() {
this.fetchRawMaterials();
},
methods: {
// 原材料分页查询
fetchRawMaterials() {
this.rawMaterialLoading = true;
listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
// 过滤掉已在采购列表中的原材料
const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
this.total = res.total || 0;
this.rawMaterialLoading = false;
}).catch(() => {
this.rawMaterialLoading = false;
});
},
handlePageChange(page) {
this.pageNum = page;
this.fetchRawMaterials();
},
handleSelectionChange(selection) {
this.leftSelected = selection;
},
handleRightSelectionChange(selection) {
this.rightSelected = selection;
},
handleRawMaterialFilter() {
this.pageNum = 1;
this.fetchRawMaterials();
},
addToPurchase() {
// 去重添加
const ids = this.purchaseList.map(item => item.rawMaterialId);
const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
...item,
quantity: 0,
owner: '',
remark: ''
}));
this.purchaseList = this.purchaseList.concat(newItems);
this.$refs.leftTable.clearSelection();
this.fetchRawMaterials();
},
removeFromPurchase() {
const removeIds = this.rightSelected.map(item => item.rawMaterialId);
this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
this.$refs.rightTable.clearSelection();
this.fetchRawMaterials();
},
confirm() {
this.submitLoading = true;
this.$refs.mainFormRef.validate(async(valid) => {
if (!valid) {
this.$message.error('请完整填写主数据信息');
this.submitLoading = false;
return;
}
// 校验采购列表数据除remark外都不能为空
const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
const invalid = filtered.some(row => {
return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
});
if (invalid) {
this.$message.error('请完整填写所有必填项');
this.submitLoading = false;
return;
}
// 合并主数据和明细数据
const submitData = {
...this.mainForm,
orderId: this.orderId,
detailList: filtered
};
await createPurchasePlan(submitData);
this.$emit('confirm', submitData);
this.submitLoading = false;
});
}
}
}
</script>
<style scoped>
.purchase-plan-transfer {
display: flex;
flex-direction: column;
}
.section-card {
margin-bottom: 20px;
}
.section-title {
font-weight: bold;
font-size: 16px;
color: #333;
}
.transfer-content {
display: flex;
align-items: flex-start;
}
.left-table {
width: 30%;
}
.right-table {
width: 60%;
}
.transfer-actions {
width: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.transfer-actions .el-button {
margin: 10px 0;
}
.filter-bar {
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style>

View File

@@ -0,0 +1,50 @@
<template>
<div>
<el-button v-if="showButton" type="primary" @click="handleRecommend" :loading="loading">推荐采购计划</el-button>
</div>
</template>
<script>
import { recommendPurchasePlan } from '@/api/wms/purchasePlan'
export default {
name: 'RecommendPurchasePanel',
props: {
orderId: {
type: [String, Number],
required: true
},
showButton: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false
}
},
mounted() {
if (!this.showButton) {
this.handleRecommend();
}
},
methods: {
async handleRecommend() {
if (!this.orderId) {
this.$message.error('缺少订单ID');
return;
}
this.loading = true;
try {
const res = await recommendPurchasePlan(this.orderId);
this.$emit('recommend', res.data);
} catch (e) {
this.$message.error('推荐失败');
} finally {
this.loading = false;
}
}
}
}
</script>

View File

@@ -1,122 +1,27 @@
<template>
<div class="purchase-plan-transfer">
<!-- 全局loading遮罩 -->
<div v-if="globalLoading" class="global-loading-overlay">
<el-loading-spinner></el-loading-spinner>
<p>正在加载推荐数据...</p>
</div>
<!-- 推荐采购计划自动推荐无按钮 -->
<recommend-purchase-panel :order-id="orderId" :show-button="false" @recommend="onRecommend" />
<!-- 采购单信息区 -->
<el-card class="section-card" shadow="never">
<div slot="header" class="section-title">采购单信息</div>
<el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
</el-form-item>
</el-form>
</el-card>
<div class="transfer-content">
<!-- 原料区待筛选 -->
<el-card class="section-card left-table" shadow="never">
<div slot="header" class="section-title">原料区待筛选</div>
<div class="filter-bar">
<el-input
v-model="rawMaterialNameFilter"
placeholder="请输入原材料名称"
size="small"
style="width: 200px; margin-bottom: 10px;"
@keyup.enter.native="handleRawMaterialFilter"
clearable
/>
<el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
</div>
<el-table
:data="rawMaterialList"
@selection-change="handleSelectionChange"
style="width: 100%"
ref="leftTable"
border
:loading="rawMaterialLoading"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="rawMaterialName" label="原材料名称" />
<el-table-column prop="rawMaterialCode" label="原材料编码" />
<el-table-column prop="unit" label="单位" />
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
layout="total, prev, pager, next"
/>
</el-card>
<!-- 中间操作按钮 -->
<div class="transfer-actions">
<el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
<el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
</div>
<!-- 采购单明细区 -->
<el-card class="section-card right-table" shadow="never">
<div slot="header" class="section-title">采购单明细</div>
<el-table
:data="purchaseList"
@selection-change="handleRightSelectionChange"
style="width: 100%"
ref="rightTable"
border
>
<el-table-column type="selection" width="55" />
<el-table-column prop="rawMaterialName" label="原材料名称" />
<el-table-column prop="rawMaterialCode" label="原材料编码" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="计划采购数">
<template #default="scope">
<el-input-number v-model="scope.row.quantity" :min="0" size="small" />
</template>
</el-table-column>
<el-table-column prop="owner" label="负责人">
<template #default="scope">
<el-input v-model="scope.row.owner" size="small" />
</template>
</el-table-column>
<el-table-column prop="remark" label="备注">
<template #default="scope">
<el-input v-model="scope.row.remark" size="small" />
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
<el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || rawMaterialLoading || formLoading">
{{ submitLoading ? '提交中...' : '确认' }}
</el-button>
</div>
<!-- 创建采购计划表单及明细 -->
<create-purchase-panel
:order-id="orderId"
:recommend-data="recommendData"
@confirm="onConfirm"
/>
</div>
</template>
<script>
import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
import { listRawMaterial } from '@/api/wms/rawMaterial'
import { updateOrder } from '@/api/wms/order'
const EOrderStatus = {
NEW: 0,
PRODUCTIONING: 1,
FINISH: 2,
CANCEL: 3
}
import RecommendPurchasePanel from './RecommendPurchasePanel.vue'
import CreatePurchasePanel from './CreatePurchasePanel.vue'
export default {
name: 'PurchasePlanClac',
components: {
RecommendPurchasePanel,
CreatePurchasePanel
},
props: {
orderId: {
type: [String, Number],
@@ -125,147 +30,15 @@ export default {
},
data() {
return {
// 原材料表格相关
rawMaterialList: [],
total: 0,
pageNum: 1,
pageSize: 10,
rawMaterialLoading: false,
leftSelected: [],
rightSelected: [],
rawMaterialNameFilter: '',
// 采购列表
purchaseList: [],
// 细化的loading状态
globalLoading: false, // 全局loading
formLoading: false, // 表单loading
submitLoading: false, // 提交loading
mainForm: {
planCode: '',
owner: '',
remark: ''
},
mainFormRules: {
planCode: [
{ required: true, message: '请输入计划编号', trigger: 'blur' }
],
owner: [
{ required: true, message: '请输入负责人', trigger: 'blur' }
]
}
recommendData: {}
}
},
watch: {
orderId: {
immediate: true,
handler(newVal) {
this.loadData(newVal)
}
}
},
mounted() {
this.fetchRawMaterials();
},
methods: {
// 推荐采购计划主数据
loadData(orderId) {
this.globalLoading = true;
this.formLoading = true;
if (!orderId) {
this.purchaseList = [];
this.clearAllLoading();
return;
}
recommendPurchasePlan(orderId).then(res => {
this.purchaseList = res.data.detailList || [];
this.mainForm = res.data;
}).finally(() => {
this.clearAllLoading();
})
onRecommend(data) {
this.recommendData = data
},
clearAllLoading() {
this.globalLoading = false;
this.formLoading = false;
},
// 原材料分页查询
fetchRawMaterials() {
this.rawMaterialLoading = true;
listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
// 过滤掉已在采购列表中的原材料
const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
this.total = res.total || 0;
this.rawMaterialLoading = false;
}).catch(() => {
this.rawMaterialLoading = false;
});
},
handlePageChange(page) {
this.pageNum = page;
this.fetchRawMaterials();
},
handleSelectionChange(selection) {
this.leftSelected = selection;
},
handleRightSelectionChange(selection) {
this.rightSelected = selection;
},
handleRawMaterialFilter() {
this.pageNum = 1;
this.fetchRawMaterials();
},
addToPurchase() {
// 去重添加
const ids = this.purchaseList.map(item => item.rawMaterialId);
const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
...item,
quantity: 0,
owner: '',
remark: ''
}));
this.purchaseList = this.purchaseList.concat(newItems);
this.$refs.leftTable.clearSelection();
this.fetchRawMaterials();
},
removeFromPurchase() {
const removeIds = this.rightSelected.map(item => item.rawMaterialId);
this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
this.$refs.rightTable.clearSelection();
this.fetchRawMaterials();
},
confirm() {
this.submitLoading = true;
// 校验主数据表单
this.$refs.mainFormRef.validate(async(valid) => {
if (!valid) {
this.$message.error('请完整填写主数据信息');
this.submitLoading = false;
return;
}
// 校验采购列表数据除remark外都不能为空
const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
const invalid = filtered.some(row => {
return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
});
if (invalid) {
this.$message.error('请完整填写所有必填项');
this.submitLoading = false;
return;
}
// 合并主数据和明细数据
const submitData = {
...this.mainForm,
orderId: this.orderId,
detailList: filtered
};
await createPurchasePlan(submitData);
await updateOrder({
orderId: this.orderId,
orderStatus: EOrderStatus.PRODUCTIONING
})
this.$emit('confirm', submitData);
this.submitLoading = false;
});
onConfirm(submitData) {
this.$emit('confirm', submitData)
}
}
}