<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="specification">
|
<el-input
|
v-model="printForm.specification"
|
placeholder="请输入物料规格"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="批号" prop="batchNumber">
|
<el-input
|
v-model="printForm.batchNumber"
|
placeholder="请输入批号（生成二维码用）"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="厂区" prop="factory">
|
<el-input
|
v-model="printForm.factory"
|
placeholder="请输入厂区名称"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
|
<!-- 第二列 -->
|
<el-col :span="12">
|
<el-form-item label="供应商编码" prop="supplierCode">
|
<el-input
|
v-model="printForm.supplierCode"
|
placeholder="请输入供应商编码"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="采购单号" prop="purchaseOrderNo">
|
<el-input
|
v-model="printForm.purchaseOrderNo"
|
placeholder="请输入采购单号"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="数量/总数" prop="quantityTotal">
|
<el-input
|
v-model="printForm.quantityTotal"
|
placeholder="例：100/5000"
|
clearable
|
/>
|
</el-form-item>
|
|
<el-form-item label="批次" prop="batch">
|
<el-input
|
v-model="printForm.batch"
|
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";
|
|
export default {
|
name: "PrintInputPage",
|
components: { printView },
|
data() {
|
return {
|
// 表单数据（对应printView所需的参数）
|
printForm: {
|
materialCode: "", // 料号
|
supplierCode: "", // 供应商编码
|
materialName: "", // 品名
|
purchaseOrderNo: "", // 采购单号
|
specification: "", // 规格
|
quantityTotal: "", // 数量/总数
|
batchNumber: "", // 批号（二维码内容）
|
batch: "", // 批次
|
factory: "", // 厂区
|
date: "", // 日期（默认当前日期）
|
},
|
// 打印份数（支持批量生成多条相同数据）
|
printCopyCount: 1,
|
// 表单验证规则
|
formRules: {
|
materialCode: [{ required: true, message: "请输入料号", trigger: "blur" }],
|
materialName: [{ required: true, message: "请输入品名", trigger: "blur" }],
|
batchNumber: [{ required: true, message: "请输入批号", trigger: "blur" }],
|
date: [{ required: true, message: "请选择日期", trigger: "change" }],
|
},
|
};
|
},
|
mounted() {
|
// 初始化默认日期为当天
|
const today = new Date();
|
this.printForm.date = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`;
|
},
|
methods: {
|
// 提交表单，打开打印弹窗
|
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 });
|
}
|
|
// 调用printView的open方法，传递参数并打开弹窗
|
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>
|
