<script setup lang="ts">
|
import type { FormInstance } from "element-plus";
|
import downloadFile from "@/utils/downloadFile";
|
const props = defineProps(["data"]);
|
const emit = defineEmits(["update:close", "success"]);
|
const formRef = ref();
|
const paramsRef = ref({
|
snCode: "",
|
serialNumber: "",
|
materialCode: "",
|
});
|
const rulesRef = ref({
|
snCode: [
|
{ required: true, message: "请输入SN码", trigger: "blur" },
|
{
|
validator: (rule: any, value: any, callback: Function) => {
|
if (value !== props.data.snCode) {
|
callback(new Error("SN码与当前包SN码不匹配！！！"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
serialNumber: [
|
{ required: true, message: "请输入序列号", trigger: "blur" },
|
{
|
validator: (rule: any, value: any, callback: Function) => {
|
if (value !== props.data.serialNumber) {
|
callback(new Error("序列号与当前包序列号不匹配！！！"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
materialCode: [
|
{ required: true, message: "请输入物料编码", trigger: "blur" },
|
{
|
validator: (rule: any, value: any, callback: Function) => {
|
if (value !== props.data.materialCode) {
|
callback(new Error("物料编码与当前包物料编码不匹配！！！"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
});
|
const layout = reactive({
|
gutter: 16,
|
span: 24,
|
});
|
|
// 提交表单
|
function submitForm(formEl: FormInstance) {
|
if (!formEl) return;
|
formEl.validate((valid, fields) => {
|
if (valid) {
|
downloadFile(props.data.fileUrl, props.data.fileName)
|
.then(() => {
|
ElMessage({
|
message: "下载成功！！！",
|
type: "success",
|
});
|
close();
|
})
|
.catch(() => {
|
ElMessage({
|
message: "下载失败, 请检查网络！！！",
|
type: "error",
|
});
|
});
|
} else {
|
ElMessage({
|
message: "存在不合法数据，请修改！！！",
|
type: "warning",
|
});
|
console.log("error submit!", fields);
|
}
|
});
|
}
|
|
function close() {
|
emit("update:close", false);
|
}
|
</script>
|
|
<template>
|
<div class="dialog-wrapper">
|
<el-form
|
ref="formRef"
|
label-position="top"
|
:model="paramsRef"
|
:rules="rulesRef"
|
label-width="auto"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="SN码" prop="snCode">
|
<el-input v-model="paramsRef.snCode"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="物料编码" prop="materialCode">
|
<el-input v-model="paramsRef.materialCode"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="序列号" prop="serialNumber">
|
<el-input v-model="paramsRef.serialNumber"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="from-footer">
|
<el-button type="primary" @click="submitForm(formRef)">确定</el-button>
|
<el-button type="danger" @click="close">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.dialog-wrapper {
|
width: 580px;
|
.from-footer {
|
text-align: right;
|
}
|
}
|
</style>
|
