<template>
|
<el-dialog v-model="visible" :title="modalOptions.title" @close="close" draggable>
|
<RepairForm ref="repairFormRef" :id="id" />
|
<template #footer>
|
<el-button type="primary" @click="sendForm" :loading="loading">
|
{{ modalOptions.confirmText }}
|
</el-button>
|
<el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { useModal } from "@/hooks/useModal";
|
import RepairForm from "../Form/RepairForm.vue";
|
import {
|
addRepair,
|
editRepair,
|
getRepairById,
|
} from "@/api/equipmentManagement/repair";
|
import { ElMessage } from "element-plus";
|
|
defineOptions({
|
name: "设备报修弹窗",
|
});
|
|
const emits = defineEmits(["ok"]);
|
|
const repairFormRef = ref();
|
const {
|
id,
|
visible,
|
loading,
|
openModal,
|
modalOptions,
|
handleConfirm,
|
closeModal,
|
} = useModal({ title: "设备报修" });
|
|
const sendForm = async () => {
|
try {
|
// 开始加载
|
loading.value = true;
|
// 提交表单并获取校验结果
|
const submitStatus = await repairFormRef.value.submitForm();
|
if (!submitStatus) {
|
// 如果表单验证失败，取消加载状态
|
loading.value = false;
|
return;
|
}
|
// 获取表单数据
|
const form = await repairFormRef.value.getForm();
|
// 根据是否有ID决定是编辑还是新增
|
const { code } = id.value
|
? await editRepair({ id: unref(id), ...form })
|
: await addRepair(form);
|
if (code === 200) {
|
ElMessage.success(`${id ? "编辑" : "新增"}报修成功`);
|
emits("ok");
|
}
|
} catch (error) {
|
} finally {
|
// 无论成功还是失败，都取消加载状态
|
loading.value = false;
|
closeModal();
|
}
|
};
|
|
const openAdd = async () => {
|
openModal();
|
await nextTick();
|
await repairFormRef.value.loadDeviceName();
|
};
|
|
const openEdit = async (id) => {
|
const { data } = await getRepairById(id);
|
openModal(id);
|
await nextTick();
|
await repairFormRef.value.loadDeviceName();
|
await repairFormRef.value.setForm(data);
|
};
|
|
const close = () => {
|
repairFormRef.value.resetForm();
|
closeModal();
|
};
|
|
defineExpose({
|
openAdd,
|
openEdit,
|
});
|
</script>
|
