自动填入单位

This commit is contained in:
砂糖
2025-07-22 11:49:48 +08:00
parent 3b408fade9
commit 633f81727d
4 changed files with 226 additions and 141 deletions

View File

@@ -4,8 +4,6 @@
:placeholder="placeholder"
filterable
clearable
remote
:remote-method="debouncedRemoteMethod"
:loading="loading"
@change="onChange"
style="width: 100%"
@@ -67,25 +65,19 @@ export default {
this.fetchOptions("");
},
methods: {
fetchOptions(keyword) {
fetchOptions() {
this.loading = true;
listRawMaterial({ pageNum: 1, pageSize: 10, rawMaterialName: keyword }).then(res => {
listRawMaterial({ pageNum: 1, pageSize: 9999 }).then(res => {
this.options = res.rows || [];
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
remoteMethod(keyword) {
this.fetchOptions(keyword);
async onChange(val) {
const rawMaterial = this.options.find(p => p.rawMaterialId === val);
this.$emit('change', rawMaterial);
},
debouncedRemoteMethod: debounce(function(keyword) {
this.remoteMethod(keyword);
}, 400),
onChange(val) {
this.$emit("input", val);
this.$emit("change", val);
}
}
};
</script>

View File

@@ -1,68 +1,102 @@
<template>
<div>
<div class="purchase-plan-transfer">
<!-- 全局loading遮罩 -->
<div v-if="globalLoading" class="global-loading-overlay">
<el-loading-spinner></el-loading-spinner>
<p>正在加载推荐数据...</p>
</div>
<!-- 采购计划主数据表 -->
<el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 20px;" 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 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>
<el-form :inline="true" @submit.native.prevent>
</el-form>
<el-table
:data="tableData"
style="width: 100%; margin-top: 20px"
border
:loading="tableLoading"
element-loading-text="正在加载明细数据..."
element-loading-spinner="el-icon-loading"
:empty-text="tableLoading ? '正在加载数据...' : '暂无数据'"
>
<el-table-column prop="rawMaterialId" label="原材料ID" width="120">
<template #default="scope">
<RawMaterialSelect v-model="scope.row.rawMaterialId" size="small" :loading="selectLoading" />
</template>
</el-table-column>
<el-table-column prop="owner" label="负责人" width="120">
<template #default="scope">
<el-input v-model="scope.row.owner" size="small" />
</template>
</el-table-column>
<el-table-column prop="quantity" label="计划采购数" width="120">
<template #default="scope">
<el-input-number v-model="scope.row.quantity" :min="0" size="small" />
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" width="100">
<template #default="scope">
<el-input v-model="scope.row.unit" size="small" />
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="180">
<template #default="scope">
<el-input v-model="scope.row.remark" size="small" />
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button type="danger" size="small" @click="removeRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<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 || tableLoading || formLoading">
<el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || rawMaterialLoading || formLoading">
{{ submitLoading ? '提交中...' : '确认' }}
</el-button>
</div>
@@ -71,7 +105,7 @@
<script>
import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
import { listRawMaterial } from '@/api/wms/rawMaterial'
import { updateOrder } from '@/api/wms/order'
const EOrderStatus = {
@@ -83,7 +117,6 @@ const EOrderStatus = {
export default {
name: 'PurchasePlanClac',
components: { RawMaterialSelect },
props: {
orderId: {
type: [String, Number],
@@ -92,12 +125,20 @@ export default {
},
data() {
return {
tableData: [],
// 原材料表格相关
rawMaterialList: [],
total: 0,
pageNum: 1,
pageSize: 10,
rawMaterialLoading: false,
leftSelected: [],
rightSelected: [],
rawMaterialNameFilter: '',
// 采购列表
purchaseList: [],
// 细化的loading状态
globalLoading: false, // 全局loading
formLoading: false, // 表单loading
tableLoading: false, // 表格loading
selectLoading: false, // 选择器loading
submitLoading: false, // 提交loading
mainForm: {
planCode: '',
@@ -120,34 +161,24 @@ export default {
handler(newVal) {
this.loadData(newVal)
}
},
tableData: {
handler() {
this.ensureEmptyRow();
},
deep: true
}
},
mounted() {
this.fetchRawMaterials();
},
methods: {
// 推荐采购计划主数据
loadData(orderId) {
// 设置全局loading
this.globalLoading = true;
this.formLoading = true;
this.tableLoading = true;
this.selectLoading = true;
if (!orderId) {
this.tableData = []
this.purchaseList = [];
this.clearAllLoading();
this.ensureEmptyRow();
return
return;
}
recommendPurchasePlan(orderId).then(res => {
console.log(res, '推荐数据')
this.tableData = res.data.detailList;
this.purchaseList = res.data.detailList || [];
this.mainForm = res.data;
this.ensureEmptyRow();
}).finally(() => {
this.clearAllLoading();
})
@@ -155,16 +186,55 @@ export default {
clearAllLoading() {
this.globalLoading = false;
this.formLoading = false;
this.tableLoading = false;
this.selectLoading = false;
},
removeRow(index) {
this.tableData.splice(index, 1)
this.ensureEmptyRow();
// 原材料分页查询
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) {
@@ -172,9 +242,8 @@ export default {
this.submitLoading = false;
return;
}
// 校验表格数据除remark外都不能为空
const filtered = this.tableData.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
// 校验采购列表数据除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;
});
@@ -183,7 +252,6 @@ export default {
this.submitLoading = false;
return;
}
// 合并主数据和明细数据
const submitData = {
...this.mainForm,
@@ -195,36 +263,47 @@ export default {
orderId: this.orderId,
orderStatus: EOrderStatus.PRODUCTIONING
})
// this.$message.success('操作已确认');
console.log(submitData);
this.$emit('confirm', submitData);
this.submitLoading = false;
});
},
ensureEmptyRow() {
// 如果tableData为空或最后一行已填写原材料则补充一个空行
if (
this.tableData.length === 0 ||
(this.tableData[this.tableData.length - 1] && this.tableData[this.tableData.length - 1].rawMaterialId)
) {
this.tableData.push({
rawMaterialId: '',
owner: '',
quantity: 0,
unit: '',
remark: ''
});
}
}
}
}
</script>
<style scoped>
.el-form {
.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;
}
.global-loading-overlay {
position: absolute;
top: 0;
@@ -239,21 +318,14 @@ export default {
z-index: 2000;
border-radius: 4px;
}
.global-loading-overlay p {
margin-top: 10px;
color: #409EFF;
font-size: 14px;
}
/* 表格loading样式优化 */
.el-table .el-loading-mask {
background-color: rgba(255, 255, 255, 0.8);
}
.el-table .el-loading-spinner .el-loading-text {
color: #409EFF;
font-size: 14px;
margin-top: 10px;
.filter-bar {
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style>

View File

@@ -129,7 +129,7 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="原材料" prop="rawMaterialId">
<el-input v-model="form.rawMaterialId" placeholder="请输入原材料ID" />
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="form.owner" placeholder="请输入负责人" />
@@ -138,7 +138,7 @@
<el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
</el-form-item>
<el-form-item label="单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入单位" />
<el-input v-model="form.unit" placeholder="请输入单位" :disabled="true" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
@@ -163,11 +163,13 @@
import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, addPurchasePlanDetail, updatePurchasePlanDetail } from "@/api/wms/purchasePlanDetail";
import { EPurchaseDetailStatus } from "@/utils/enums";
import StockInDialog from "./stockin.vue";
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
export default {
name: "PurchasePlanDetail",
components: {
StockInDialog
StockInDialog,
RawMaterialSelect
},
props: {
planId: {
@@ -411,6 +413,11 @@ export default {
this.getList();
this.stockInVisible = false;
this.selectedArrivalItems = []; // 清空选中的明细
},
onRawMaterialChange(rawMaterial) {
if (rawMaterial && rawMaterial.unit) {
this.form.unit = rawMaterial.unit;
}
}
}
};

View File

@@ -70,7 +70,6 @@
</el-row>
<el-table v-loading="loading" :data="stockIoDetailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="明细ID" align="center" prop="detailId"/>
<el-table-column label="库区/库位" align="center" prop="warehouseName" />
<el-table-column
v-if="stockIo.ioType === 'transfer'"
@@ -78,7 +77,11 @@
align="center"
prop="fromWarehouseName"
/>
<el-table-column label="物品类型" align="center" prop="itemType" />
<el-table-column label="物品类型" align="center" prop="itemType">
<template slot-scope="scope">
<dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
</template>
</el-table-column>
<el-table-column label="物品ID" align="center" prop="itemId" />
<el-table-column label="数量" align="center" prop="quantity" />
<el-table-column label="单位" align="center" prop="unit" />
@@ -155,9 +158,9 @@
<warehouse-select v-model="form.fromWarehouseId" placeholder="请选择源库区/库位" />
</el-form-item>
<el-form-item label="物品类型" prop="itemType">
<el-select v-model="form.itemType" placeholder="请选择物品类型" style="width: 100%">
<el-option label="原材料" :value="ITEM_TYPE.RAW_MATERIAL"></el-option>
<el-option label="产品" :value="ITEM_TYPE.PRODUCT"></el-option>
<el-select v-model="form.itemType" placeholder="请选择物品类型">
<el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="物品ID" prop="itemId">
@@ -165,11 +168,13 @@
v-if="form.itemType === ITEM_TYPE.RAW_MATERIAL"
v-model="form.itemId"
placeholder="请选择原材料"
@change="onItemChange"
/>
<ProductSelect
v-else-if="form.itemType === ITEM_TYPE.PRODUCT"
v-model="form.itemId"
placeholder="请选择产品"
@change="onItemChange"
/>
<el-input
v-else
@@ -181,7 +186,7 @@
<el-input v-model="form.quantity" placeholder="请输入数量" />
</el-form-item>
<el-form-item label="单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入单位" />
<el-input v-model="form.unit" placeholder="请输入单位" :disabled="unitDisabled" />
</el-form-item>
<el-form-item label="批次号" prop="batchNo">
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
@@ -217,6 +222,7 @@ export default {
RawMaterialSelect,
ProductSelect
},
dicts: ['stock_item_type'],
props: {
stockIo: {
type: Object,
@@ -260,7 +266,8 @@ export default {
single: true,
multiple: true,
statusLoading: false, // 新增状态修改按钮加载状态
cancelLoading: false // 撤回按钮加载状态
cancelLoading: false, // 撤回按钮加载状态
unitDisabled: false // 新增:单位输入框是否禁用
};
},
watch: {
@@ -405,6 +412,7 @@ export default {
batchNo: undefined,
remark: undefined
};
this.unitDisabled = false; // 新增:重置单位输入框为可编辑
this.resetForm("form");
},
cancel() {
@@ -526,6 +534,12 @@ export default {
if (type === 'return') return 'warning';
if (type === 'relocation') return 'info';
return 'default';
},
onItemChange(e) {
if (e && e.unit) {
this.form.unit = e.unit;
this.unitDisabled = true;
}
}
}
}