<template>
|
<div class="print-input-container">
|
<!-- 页面标题 -->
|
<div class="page-title">物料标识卡打印参数输入</div>
|
|
<!-- 表单区域 -->
|
<el-card class="input-card">
|
<el-form
|
ref="printFormRef"
|
:model="printForm"
|
:rules="formRules"
|
label-width="100px"
|
size="default"
|
>
|
<!-- 双列布局 -->
|
<el-row :gutter="20">
|
<!-- 第一列 -->
|
<el-col :span="12">
|
<el-form-item label="料号" prop="materialCode">
|
<el-input
|
v-model="printForm.materialCode"
|
placeholder="请输入物料编码"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="品名" prop="materialName">
|
<el-input
|
v-model="printForm.materialName"
|
placeholder="请输入物料名称"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="规格" prop="materialSpec">
|
<el-input
|
v-model="printForm.materialSpec"
|
placeholder="请输入物料规格"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="批号" prop="barcode">
|
<el-input
|
v-model="printForm.barcode"
|
placeholder="请输入批号（生成二维码用）"
|
clearable
|
@keyup.enter="fetchBarcodeData"
|
:loading="fetchingData"
|
/>
|
</el-form-item>
|
|
<el-form-item label="厂区" prop="factoryArea">
|
<el-input
|
v-model="printForm.factoryArea"
|
placeholder="请输入厂区名称"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
|
|
<el-col :span="12">
|
<el-form-item label="供应商编码" prop="suplierCode">
|
<el-input
|
v-model="printForm.suplierCode"
|
placeholder="请输入供应商编码"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="采购单号" prop="pruchaseOrderNo">
|
<el-input
|
v-model="printForm.pruchaseOrderNo"
|
placeholder="请输入采购单号"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="数量/总数" prop="quantity">
|
<el-input
|
v-model="printForm.quantity"
|
placeholder="例：100/5000"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="批次" prop="batchNo">
|
<el-input
|
v-model="printForm.batchNo"
|
placeholder="请输入批次号"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="日期" prop="date">
|
<el-date-picker
|
v-model="printForm.date"
|
type="date"
|
placeholder="选择日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
|
<el-form-item label="打印份数">
|
<el-input-number
|
v-model="printCopyCount"
|
:min="1"
|
:max="50"
|
label="份数"
|
placeholder="请输入打印份数"
|
/>
|
</el-form-item>
|
|
|
<el-form-item class="form-actions">
|
<el-button type="primary" @click="submitForm">确认并打开打印弹窗</el-button>
|
<el-button @click="resetForm">重置表单</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
|
<print-view ref="printViewRef" />
|
</div>
|
</template>
|
|
<script>
|
|
import printView from "@/extension/outbound/extend/printView.vue";
|
import { ElMessage } from "element-plus";
|
import http from '@/api/http.js'
|
|
export default {
|
name: "PrintInputPage",
|
components: { printView },
|
data() {
|
return {
|
printForm: {
|
materialCode: "",
|
suplierCode: "",
|
materialName: "",
|
pruchaseOrderNo: "",
|
materialSpec: "",
|
quantity: "",
|
barcode: "",
|
batchNo: "",
|
factoryArea: "",
|
date: "",
|
},
|
|
printCopyCount: 1,
|
|
formRules: {
|
materialCode: [{ required: true, message: "请输入料号", trigger: "blur" }],
|
materialName: [{ required: true, message: "请输入品名", trigger: "blur" }],
|
barcode: [{ required: true, message: "请输入批号", trigger: "blur" }],
|
date: [{ required: true, message: "请选择日期", trigger: "change" }],
|
},
|
|
fetchingData: false
|
};
|
},
|
mounted() {
|
const today = new Date();
|
this.printForm.date = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`;
|
},
|
methods: {
|
async fetchBarcodeData() {
|
if (!this.printForm.barcode.trim()) {
|
return;
|
}
|
|
try {
|
|
this.fetchingData = true;
|
|
const response = await http.post(
|
`/api/Outbound/PrintFromData?barcode=` + this.printForm.barcode.trim()
|
);
|
const data = response.data;
|
if (data) {
|
this.printForm.materialCode = data.materialCode || "";
|
this.printForm.suplierCode = data.suplierCode || "";
|
this.printForm.materialName = data.materialName || "";
|
this.printForm.pruchaseOrderNo = data.pruchaseOrderNo || "";
|
this.printForm.materialSpec = data.materialSpec || "";
|
this.printForm.quantity = data.quantity || "";
|
this.printForm.batchNo = data.batchNo || "";
|
this.printForm.factoryArea = data.factoryArea || "";
|
|
|
ElMessage.success("已根据批号自动填充数据");
|
} else {
|
ElMessage.info("未查询到该批号对应的物料数据");
|
}
|
} catch (error) {
|
console.error("获取批号数据失败：", error);
|
ElMessage.error("获取数据失败，请检查网络或批号是否正确");
|
} finally {
|
this.fetchingData = false;
|
}
|
},
|
submitForm() {
|
this.$refs.printFormRef.validate((valid) => {
|
if (!valid) {
|
ElMessage.warning("请完善必填项后提交");
|
return;
|
}
|
|
try {
|
const printData = [];
|
for (let i = 0; i < this.printCopyCount; i++) {
|
printData.push({ ...this.printForm });
|
}
|
this.$refs.printViewRef.open(printData);
|
ElMessage.success(`已生成 ${this.printCopyCount} 份打印数据，即将打开打印弹窗`);
|
} catch (error) {
|
console.error("打开打印弹窗失败：", error);
|
ElMessage.error("打开打印弹窗失败，请重试");
|
}
|
});
|
},
|
|
|
resetForm() {
|
this.$refs.printFormRef.resetFields();
|
const today = new Date();
|
this.printForm.date = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`;
|
this.printCopyCount = 1;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.print-input-container {
|
padding: 20px;
|
max-width: 1000px;
|
margin: 0 auto;
|
}
|
|
.page-title {
|
font-size: 20px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 20px;
|
text-align: center;
|
}
|
|
.input-card {
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.form-actions {
|
text-align: center;
|
margin-top: 20px;
|
}
|
|
.form-actions .el-button {
|
margin: 0 10px;
|
padding: 10px 20px;
|
}
|
|
/* 适配小屏幕 */
|
@media (max-width: 768px) {
|
.print-input-container {
|
padding: 10px;
|
}
|
|
.el-form-item {
|
margin-bottom: 15px;
|
}
|
}
|
</style>
|
