<template>
|
<el-dialog
|
:title="title"
|
v-model="visible"
|
width="600px"
|
append-to-body
|
:close-on-click-modal="false"
|
>
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
<el-form-item label="产品名称" prop="productName">
|
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
</el-form-item>
|
|
<el-form-item label="产品型号" prop="productModel">
|
<el-input v-model="form.productModel" placeholder="请输入产品型号" />
|
</el-form-item>
|
|
<el-form-item label="报告编号" prop="reportNo">
|
<el-input v-model="form.reportNo" placeholder="请输入报告编号" />
|
</el-form-item>
|
|
<el-form-item label="报告类型" prop="reportType">
|
<el-select v-model="form.reportType" placeholder="请选择报告类型" style="width: 100%">
|
<el-option label="型式试验报告" value="型式试验报告" />
|
<el-option label="出厂检验报告" value="出厂检验报告" />
|
<el-option label="委托检验报告" value="委托检验报告" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="检测单位" prop="testingAgency">
|
<el-input v-model="form.testingAgency" placeholder="请输入检测单位" />
|
</el-form-item>
|
|
<el-form-item label="报告日期" prop="reportDate">
|
<el-date-picker
|
v-model="form.reportDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择报告日期"
|
style="width: 100%"
|
@change="calculateExpiration"
|
/>
|
</el-form-item>
|
|
<el-form-item label="有效期(月)" prop="validityPeriod">
|
<el-input-number
|
v-model="form.validityPeriod"
|
:min="1"
|
:max="120"
|
controls-position="right"
|
style="width: 100%"
|
placeholder="请输入有效期(月)"
|
@change="calculateExpiration"
|
/>
|
</el-form-item>
|
|
<el-form-item label="到期时间" prop="expirationTime">
|
<el-date-picker
|
v-model="form.expirationTime"
|
type="date"
|
value-format="YYYY-MM-DD"
|
disabled
|
placeholder="系统自动计算"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注内容" />
|
</el-form-item>
|
|
<el-form-item label="附件" prop="attachmentUrls">
|
<!-- 这里使用普通的el-upload占位，实际项目中可替换为封装的 FileUpload -->
|
<FileUpload v-model="form.attachmentUrls" :limit="5" :fileSize="50" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
|
import { addInspectionReport, updateInspectionReport, getInspectionReport } from "@/api/reportAnalysis/inspectionReport.js";
|
import dayjs from "dayjs";
|
|
const { proxy } = getCurrentInstance();
|
const emits = defineEmits(["close"]);
|
|
const visible = ref(false);
|
const title = ref("");
|
const formRef = ref(null);
|
|
const data = reactive({
|
form: {},
|
rules: {
|
productName: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
|
reportNo: [{ required: true, message: "报告编号不能为空", trigger: "blur" }],
|
reportDate: [{ required: true, message: "报告日期不能为空", trigger: "change" }],
|
validityPeriod: [{ required: true, message: "有效期不能为空", trigger: "blur" }],
|
expirationTime: [{ required: true, message: "到期时间不能为空", trigger: "change" }],
|
}
|
});
|
|
const { form, rules } = toRefs(data);
|
|
// 自动计算到期时间
|
const calculateExpiration = () => {
|
if (form.value.reportDate && form.value.validityPeriod) {
|
form.value.expirationTime = dayjs(form.value.reportDate)
|
.add(form.value.validityPeriod, 'month')
|
.format('YYYY-MM-DD');
|
} else {
|
form.value.expirationTime = null;
|
}
|
};
|
|
const openDialog = (type, row) => {
|
reset();
|
if (type === "add") {
|
title.value = "新增报告";
|
visible.value = true;
|
} else {
|
title.value = "修改报告";
|
getInspectionReport(row.id).then(response => {
|
form.value = response.data;
|
visible.value = true;
|
});
|
}
|
};
|
|
const reset = () => {
|
form.value = {
|
id: null,
|
productName: null,
|
productModel: null,
|
reportNo: null,
|
reportDate: null,
|
validityPeriod: 12, // 默认一年
|
expirationTime: null,
|
testingAgency: null,
|
reportType: null,
|
attachmentUrls: null,
|
remark: null
|
};
|
if (formRef.value) {
|
formRef.value.resetFields();
|
}
|
};
|
|
const submitForm = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
if (form.value.id != null) {
|
updateInspectionReport(form.value).then(() => {
|
proxy.$modal.msgSuccess("修改成功");
|
visible.value = false;
|
emits("close");
|
});
|
} else {
|
addInspectionReport(form.value).then(() => {
|
proxy.$modal.msgSuccess("新增成功");
|
visible.value = false;
|
emits("close");
|
});
|
}
|
}
|
});
|
};
|
|
const cancel = () => {
|
visible.value = false;
|
reset();
|
};
|
|
defineExpose({
|
openDialog
|
});
|
</script>
|
