Files
FT546MWS/ruoyi-ui/src/views/in/stockIn/add/index_new.vue
2026-01-27 17:31:05 +08:00

795 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<div>
<div class="page-header">
<span>新建入库</span>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item label="单据类型" prop="inType"><!--单据类型-->
<el-select v-model="form.inType" placeholder="请选择单据类型" >
<el-option
v-for="dict in dict.type.in_bill_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="供应商" prop="classNo">
<el-input
v-model="form.classNo"
placeholder="请选择供应商"
@click.native="openSupplierSelector"
readonly
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="项目号" prop="departmentNo">
<el-input v-model="form.departmentNo" placeholder="请输入项目号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="合同号" prop="spare1">
<el-input v-model="form.spare1" placeholder="请输入合同号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="销售订单号" prop="spare2">
<el-input v-model="form.spare2" placeholder="请输入销售订单号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="备注" prop="spare5">
<el-input v-model="form.spare5" placeholder="请输入备注"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="mt-3">
<div class="page-header">
<span>入库物料</span>
<el-row>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleAddProduct" v-hasPermi="['receive:stockin:add']">
添加物料</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="success" plain icon="el-icon-download" size="mini" @click="handleImport" v-hasPermi="['receive:stockin:import']">
导入物料</el-button>
</el-col>-->
</el-row>
</div>
<el-table :data="productList" border style="width: 100%">
<!-- <el-table-column type="index" label="序号" width="50" align="center"/>-->
<!-- <el-table-column label="主键" align="center" prop="productGuid" />-->
<el-table-column fixed label="存货编码" align="left" prop="productId" />
<el-table-column fixed label="存货名称" align="left" prop="productName" />
<el-table-column fixed label="规格型号" align="left" prop="spec" />
<el-table-column fixed label="单位" align="left" >
<template slot-scope="scope">
<el-input
v-model="scope.row.unit"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column fixed label="规格型号" align="left" prop="spec" />
<el-table-column fixed label="层级关系" align="left" >
<template slot-scope="scope">
<el-input
v-model="scope.row.spare1"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column fixed label="上层物料" align="left" >
<template slot-scope="scope">
<el-input
v-model="scope.row.spare2"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column label="顶层物料" align="left" >
<template slot-scope="scope">
<el-input
v-model="scope.row.spare3"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column label="数量" width="120" align="left">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.quantity"
:min="1"
controls-position="right"
required="required"/>
</template>
</el-table-column>
<el-table-column label="批号" width="120" align="left">
<template slot-scope="scope">
<el-input
v-model="scope.row.lotNo"
controls-position="right"
/>
</template>
</el-table-column>
<!-- <el-table-column label="单位" width="120" align="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.unit"-->
<!-- controls-position="right"-->
<!-- required="required"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="规格型号" width="120" align="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.spec"-->
<!-- controls-position="right"-->
<!-- required="required"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="层级关系" width="120" align="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.spare1"-->
<!-- controls-position="right"-->
<!-- required="required"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="上层物料" width="120" align="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.spare2"-->
<!-- controls-position="right"-->
<!-- required="required"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="顶层物料" width="120" align="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-->
<!-- v-model="scope.row.spare3"-->
<!-- controls-position="right"-->
<!-- required="required"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="备注" align="left" prop="remark">
<template slot-scope="scope">
<el-input
v-model="scope.row.remark"
controls-position="right"/>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDeleteProduct(scope.$index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="submit-block" style="margin-top: 20px; text-align: right">
<el-button type="primary" @click="submitForm" v-hasPermi="['receive:stockin:add']">提交</el-button>
<el-button @click="cancelPri">取消</el-button>
</div>
<!-- 选择物料对话框 -->
<el-dialog title="选择物料" :visible.sync="productDialog" width="1300px" append-to-body>
<el-form :model="queryParamsPro" ref="queryParamsPro" size="small" :inline="true" label-width="68px">
<el-form-item label="品号" prop="productId"><!--品号-->
<el-input
v-model="queryParamsPro.productId"
:placeholder="'请输入品号'"
clearable
@keyup.enter.native="handleQueryPro"
/>
</el-form-item>
<el-form-item label="品名" prop="productName"><!--品名-->
<el-input
v-model="queryParamsPro.productName"
:placeholder="'请输入品名'"
clearable
@keyup.enter.native="handleQueryPro"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryPro">{{'搜索'}}<!--搜索--></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryPro">重置<!--重置--></el-button>
</el-form-item>
</el-form>
<el-table ref="productTable" v-loading="productLoading" :data="productOptions" border @selection-change="handleProductSelectionChange">
<el-table-column type="selection" width="55"/>
<!-- <el-table-column label="主键" align="center" prop="productGuid" />-->
<el-table-column label="品号" align="center" prop="productId" />
<el-table-column label="NC号" align="center" prop="spare9" />
<el-table-column label="品名" align="center" prop="productName" />
<el-table-column label="规格" align="center" prop="spec" />
<el-table-column label="品号描述" align="center" prop="price" />
<el-table-column label="英文描述" align="center" prop="cargoNo" />
<el-table-column label="图号" align="center" prop="unit" />
<el-table-column label="电压" align="center" prop="spare5" />
<el-table-column label="电源线" align="center" prop="spare10" />
<el-table-column label="插头" align="center" prop="spare11" />
<el-table-column label="接嘴" align="center" prop="spare12" />
<el-table-column label="快捷码" align="center" prop="spare13" />
<el-table-column label="库存单位编号" align="center" prop="spare14" />
<el-table-column label="库存单位名称" align="center" prop="spare15" />
<el-table-column label="品号群组" align="center" prop="spare16" />
<el-table-column label="归类品" align="center" prop="spare17" />
<el-table-column label="计量体系" align="center" prop="spare18" />
<el-table-column label="群组名称" align="center" prop="spare19" />
<el-table-column label="批号管理" align="center" prop="spare20" />
<el-table-column label="状态" align="center" prop="spare21" />
<el-table-column label="产品大类" align="center" prop="spare22" />
<el-table-column label="产品二类" align="center" prop="spare23" />
<el-table-column label="产品线/产品系列" align="center" prop="spare24" />
<el-table-column label="BOM状态" align="center" prop="spare25" />
<el-table-column label="产品定位" align="center" prop="spare26" />
<el-table-column label="电脑板型号" align="center" prop="spare27" />
<el-table-column label="非标要求" align="center" prop="spare28" />
<el-table-column label="品牌" align="center" prop="spare29" />
<el-table-column label="非标颜色" align="center" prop="spare30" />
<el-table-column label="主颜色" align="center" prop="spare31" />
<el-table-column label="辅助颜色" align="center" prop="spare32" />
<el-table-column label="是否标准款" align="center" prop="spare33" />
<el-table-column label="包装方式" align="center" prop="spare34" />
<el-table-column label="主要包装方式" align="center" prop="spare35" />
<el-table-column label="描述" align="center" prop="remark" />
<el-table-column label="长" align="center" prop="spare36" />
<el-table-column label="宽" align="center" prop="spare37" />
<el-table-column label="高" align="center" prop="spare38" />
<el-table-column label="包装材积" align="center" prop="spare39" />
</el-table>
<pagination
v-show="productTotal>0"
:total="productTotal"
:page.sync="queryParamsPro.pageNum"
:limit.sync="queryParamsPro.pageSize"
@pagination="getProductList"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmSelectProduct">确定</el-button>
<el-button @click="cancelSelectproduct">取消</el-button>
</div>
</el-dialog>
<!-- 物料导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确定</el-button>
<el-button @click="upload.open = false">取消</el-button>
</div>
</el-dialog>
<!-- 供应商选择对话框 -->
<el-dialog title="选择供应商" :visible.sync="supplierDialog" width="800px" append-to-body>
<el-form :model="supplierQueryParams" ref="supplierQueryForm" :inline="true">
<el-form-item label="供应商编号" prop="supplierNo">
<el-input
v-model="supplierQueryParams.supplierNo"
placeholder="请输入供应商编号"
clearable
size="small"
@keyup.enter.native="handleSupplierQuery"
/>
</el-form-item>
<el-form-item label="供应商名称" prop="supplierName">
<el-input
v-model="supplierQueryParams.supplierName"
placeholder="请输入供应商名称"
clearable
size="small"
@keyup.enter.native="handleSupplierQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleSupplierQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetSupplierQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table
ref="supplierTable"
v-loading="supplierLoading"
:data="supplierList"
border
@row-click="handleSupplierRowClick"
highlight-current-row
style="width: 100%"
>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column label="供应商编号" align="center" prop="supplierNo" />
<el-table-column label="供应商名称" align="center" prop="supplierName" />
<el-table-column label="简称" align="center" prop="simpleName" />
<el-table-column label="是否可用" align="center" prop="useable">
<template slot-scope="scope">
<dict-tag :options="dict.type.is_available" :value="scope.row.useable"/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="supplierTotal > 0"
:total="supplierTotal"
:page.sync="supplierQueryParams.pageNum"
:limit.sync="supplierQueryParams.pageSize"
@pagination="getSupplierList"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmSelectSupplier">确定</el-button>
<el-button @click="cancelSelectSupplier">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addStockinNew} from "@/api/receive/stockin";
import {listBasProduct} from "@/api/bas/BasProduct";
import {listBasSupplier} from "@/api/bas/BasSupplier";
import { getToken } from "@/utils/auth"
import {listWarehouse} from "@/api/bas/warehouse"
export default {
name: "InAdd",
dicts: ['sys_normal_disable', 'is_active', 'storage_cond', 'is_available','in_bill_type'],
data() {
return {
// 表单参数
form: {
warehouseId: null,
supplierId: null,
classNo: null,
remark: null,
erpBill:null,
departmentNo:null,
inType:null,
spare1:null,
spare2:null,
spare5:null
},
// 表单校验
rules: {
// departmentNo: [
// {required: true, message: "请输入项目号", trigger: "change"}
// ],
// supplierId: [
// {required: true, message: "请选择供应商", trigger: "change"}
// ],
inType:[
{required: true, message: "请选择单据类型", trigger: "change"}
]
},
// 仓库选项
warehouseOptions: [],
// 供应商选项
supplierOptions: [],
// 供应商选择对话框
supplierDialog: false,
// 供应商列表
supplierList: [],
// 选中的供应商
selectedSupplier: null,
// 供应商总数
supplierTotal: 0,
// 供应商加载状态
supplierLoading: false,
// 供应商查询参数
supplierQueryParams: {
pageNum: 1,
pageSize: 10,
supplierNo: null,
supplierName: null
},
// 物料选项
productOptions: [],
// 物料选择对话框
productDialog: false,
// 物料列表
productList: [],
// 已选物料
selectedProducts: [],
// 供应商总数
productTotal: 0,
// 供应商加载状态
productLoading: false,
//物料查询参数
queryParamsPro: {
pageNum: 1,
pageSize: 10,
productId: null,
productName: null
},
//仓库查询参数
queryWarehouseParams: {
pageNum: 1,
pageSize: 99
},
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/receive/stockin/analyseExportFile",
}
};
},
created() {
// this.getWarehouseList();
this.getSupplierList();
this.getProductList();
},
methods: {
/** 获取仓库列表 */
getWarehouseList() {
listWarehouse(this.queryWarehouseParams).then(response => {
this.warehouseOptions = response.rows;
});
},
/** 获取供应商列表(下拉框选项) */
getSupplierList() {
listBasSupplier().then(response => {
this.supplierOptions = response.rows;
});
},
/** 打开供应商选择对话框 */
openSupplierSelector() {
this.getSupplierListForDialog();
this.supplierDialog = true;
},
/** 获取供应商列表(对话框数据) */
getSupplierListForDialog() {
this.supplierLoading = true;
listBasSupplier(this.supplierQueryParams).then(response => {
this.supplierList = response.rows;
this.supplierTotal = response.total;
this.supplierLoading = false;
});
},
/** 供应商查询 */
handleSupplierQuery() {
this.supplierQueryParams.pageNum = 1;
this.getSupplierListForDialog();
},
/** 重置供应商查询 */
resetSupplierQuery() {
this.resetForm("supplierQueryForm");
// this.supplierQueryParams.useable = "0";
this.handleSupplierQuery();
},
/** 供应商行点击事件 */
handleSupplierRowClick(row) {
this.selectedSupplier = row;
this.$refs.supplierTable.setCurrentRow(row);
},
/** 确认选择供应商 */
confirmSelectSupplier() {
if (!this.selectedSupplier) {
this.$modal.msgError("请选择一个供应商");
return;
}
this.form.supplierId = this.selectedSupplier.supplierNo;
this.form.classNo = this.selectedSupplier.supplierName;
this.supplierDialog = false;
},
/** 取消选择供应商 */
cancelSelectSupplier() {
this.selectedSupplier = null;
this.supplierDialog = false;
},
/** 获取物料列表 */
getProductList() {
listBasProduct().then(response => {
this.productOptions = response.rows;
});
},
/** 添加物料按钮操作 */
handleAddProduct() {
this.getProductListForDialog();
this.productDialog = true;
},
handleExportProduct() {
},
/** 获取供应商列表(对话框数据) */
getProductListForDialog() {
this.productLoading = true;
listBasProduct(this.queryParamsPro).then(response => {
this.productOptions = response.rows;
this.productTotal = response.total;
this.productLoading = false;
});
},
/** 物料查询 */
handleQueryPro() {
this.queryParamsPro.pageNum = 1;
this.getProductListForDialog();
},
/** 重置按钮操作 */
resetQueryPro() {
this.resetForm("queryParamsPro");
this.handleQueryPro();
},
/** 物料选择变更 */
handleProductSelectionChange(selection) {
this.selectedProducts = selection;
},
/** 确认选择物料 */
confirmSelectProduct() {
// 检查选中的物料是否已存在于表单中
const duplicateProducts = this.selectedProducts.filter(selected =>
this.productList.some(existing => existing.productId === selected.productId)
);
if (duplicateProducts.length > 0) {
this.$modal.msgError('选择的物料已存在');
return;
}
const newProducts = this.selectedProducts.map(item => ({
productGuid: item.productGuid,
productId: item.productId,
// parentId: item.parentId,
// price: item.price,
// cargoNo: item.cargoNo,
// unit: "",
spec: item.spec,
// remark: item.remark,
productName: item.productName,
// quantity: 1,
// spare1: item.spare1,
// spare2: item.spare2,
// spare3: item.spare3,
// spare4: item.spare4,
// spare5: item.spare5,
// spare6: item.spare6,
// spare7: item.spare7,
// spare8: item.spare8,
// spare9:"",
// lotNo:"",
}));
this.productList.push(...newProducts);
this.productDialog = false;
},
/** 删除物料 */
handleDeleteProduct(index) {
this.productList.splice(index, 1);
},
cancelSelectproduct() {
this.selectedProduct = null;
this.productDialog = false;
},
cancelPri(){
// 重置表单数据
this.form = {
warehouseId: undefined,
supplierId: undefined,
supplierName: undefined,
remark: undefined,
totalQuantity: 0,
// totalAmount: 0,
};
// 清空物料列表
this.productList = [];
// 重置计数器
this.totalQuantity = 0;
// this.totalAmount = 0;
// 清空选中的供应商
this.selectedSupplier = null;
// 重置表单校验结果
this.$refs["form"].resetFields();
},
/** 表单提交 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.productList.length === 0) {
this.$modal.msgError('请添加物料');
return;
}
//校验lotNo productGuid quantity 不能为空
for (let i = 0; i < this.productList.length; i++) {
const item = this.productList[i];
if (!item.spare1) {
this.$modal.msgError(`品号 ${item.productId} 的层级关系未填写`);
return;
}
if (!item.spare2) {
this.$modal.msgError(`品号 ${item.productId} 的上层物料未填写`);
return;
}
// if (!item.spare3) {
// this.$modal.msgError(`品号 ${item.productId} 的颜色未填写`);
// return;
// }
// if (!item.spare4) {
// this.$modal.msgError(`品号 ${item.productId} 的序列号未填写`);
// return;
// }
// if (!item.spare5) {
// this.$modal.msgError(`品号 ${item.productId} 的电压未填写`);
// return;
// }
// if (!item.spare6) {
// this.$modal.msgError(`品号 ${item.productId} 的功率未填写`);
// return;
// }
// if (!item.spare7) {
// this.$modal.msgError(`品号 ${item.productId} 的相位未填写`);
// return;
// }
// if (!item.spare8) {
// this.$modal.msgError(`品号 ${item.productId} 的毛重未填写`);
// return;
// }
// if (!item.quantity) {
// this.$modal.msgError(`品号 ${item.productId} 的数量未填写`);
// return;
// }
// if (!item.lotNo) {
// this.$modal.msgError(`品号 ${item.productId} 的批次号未填写`);
// return;
// }
// if (!item.unit) {
// this.$modal.msgError(`品号 ${item.productId} 的机型未填写`);
// return;
// }
// if (!item.spare9) {
// this.$modal.msgError(`品号 ${item.productId} 的分销未填写`);
// return;
// }
}
// 构建请求数据
const data = {
warehouseId: "01",
supplierId: this.form.supplierId,
classNo:this.classNo,
remark: this.form.remark,
inType:this.form.inType,
erpBill:this.form.erpBill,
departmentNo:this.form.departmentNo,
spare1:this.form.spare1,
spare2:this.form.spare2,
spare5:this.form.spare5,
productVoList: this.productList.map(item => ({
productId: item.productId,
quantity: item.quantity,
lotNo: item.lotNo,
productGuid: item.productGuid,
spare1: item.spare1,
spare2: item.spare2,
spare3: item.spare3,
// spare4: item.spare4,
// spare5: item.spare5,
// spare6: item.spare6,
// spare7: item.spare7,
// spare8: item.spare8,
// spare9: item.spare9,
unit:item.unit,
productName: item.productName
}))
};
addStockinNew(data).then(() => {
this.$modal.msgSuccess('添加成功');
// 重置表单数据
this.cancelPri();
});
}
});
},
cancel() {
this.productSelectVisible = false;
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '导入物料'
this.upload.open = true
},
/** 下载模板操作 */
importTemplate() {
this.download('/receive/stockin/importTemplate', {
}, `product_template_${new Date().getTime()}.xlsx`)
},// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
//this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
if (response.code === 200) {
this.$modal.msgSuccess("导入成功");
this.productList.push(...response.data)
this.upload.open = false;
} else {
this.$modal.msgError(response.msg);
}
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
}
};
</script>
<style scoped>
.page-header {
padding-bottom: 15px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mt-3 {
margin-top: 1rem;
}
.total-info span {
font-size: 16px;
font-weight: bold;
}
</style>