From b88332e0a2686e68023e26438af97f79247b1ddd Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期六, 16 五月 2026 14:14:53 +0800
Subject: [PATCH] feat: 设备保养修改，新增保养人、详情
---
src/views/equipmentManagement/repair/Modal/MaintainModal.vue | 222 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 189 insertions(+), 33 deletions(-)
diff --git a/src/views/equipmentManagement/repair/Modal/MaintainModal.vue b/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
index 695773e..ed09da9 100644
--- a/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
+++ b/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
@@ -1,53 +1,193 @@
<template>
- <el-drawer v-model="visible" :title="modalOptions.title" direction="ltr">
- <MaintainForm ref="maintainFormRef" />
- <template #footer>
- <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
- <el-button type="primary" @click="sendForm" :loading="loading">
- {{ modalOptions.confirmText }}
- </el-button>
- </template>
- </el-drawer>
+ <FormDialog
+ v-model="visible"
+ title="璁惧缁翠慨"
+ width="640px"
+ :loading="loading"
+ @confirm="sendForm"
+ @cancel="handleCancel"
+ @close="handleClose"
+ >
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
+ <el-form-item label="缁翠慨浜�" prop="maintenanceName">
+ <el-input v-model="form.maintenanceName" disabled placeholder="鎶ヤ慨鏃舵寚瀹氱殑缁翠慨浜�" />
+ </el-form-item>
+ <el-form-item label="缁翠慨缁撴灉" prop="maintenanceResult">
+ <el-input v-model="form.maintenanceResult" placeholder="璇疯緭鍏ョ淮淇粨鏋�" />
+ </el-form-item>
+ <el-form-item label="缁翠慨鐘舵��" prop="status">
+ <el-select v-model="form.status" style="width: 100%">
+ <el-option label="寰呴獙鏀�" :value="3" />
+ <el-option label="缁翠慨澶辫触" :value="2" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="缁翠慨鏃ユ湡" prop="maintenanceTime">
+ <el-date-picker
+ v-model="form.maintenanceTime"
+ placeholder="璇烽�夋嫨缁翠慨鏃ユ湡"
+ format="YYYY-MM-DD HH:mm:ss"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="datetime"
+ clearable
+ style="width: 100%"
+ />
+ </el-form-item>
+ <el-form-item label="闄勪欢">
+ <el-upload
+ class="repair-attachment-upload"
+ v-model:file-list="attachmentFileList"
+ drag
+ multiple
+ :auto-upload="false"
+ :limit="9"
+ accept="image/png,image/jpeg,image/jpg"
+ :before-upload="beforeAttachmentUpload"
+ >
+ <el-icon class="repair-upload-icon"><UploadFilled /></el-icon>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴� <em>鐐瑰嚮閫夋嫨鏂囦欢</em></div>
+ <template #tip>
+ <div class="el-upload__tip">
+ 鏀寔 png / jpg / jpeg锛屽崟涓笉瓒呰繃 50MB锛屼繚瀛樺悗涓庡垪琛ㄣ�岄檮浠躲�嶅悓姝�
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </el-form>
+ </FormDialog>
</template>
<script setup>
-import { useModal } from "@/hooks/useModal";
-import MaintainForm from "../Form/MaintainForm.vue";
-import { addMaintain } from "@/api/equipmentManagement/repair";
+import FormDialog from "@/components/Dialog/FormDialog.vue";
+import { addMaintain, uploadRepairFile } from "@/api/equipmentManagement/repair";
+import { REPAIR_FILE_TYPE_MAINTAIN } from "@/api/equipmentManagement/repairFileType.js";
+import useFormData from "@/hooks/useFormData";
+import useUserStore from "@/store/modules/user";
+import dayjs from "dayjs";
+import { ElMessage } from "element-plus";
+import { UploadFilled } from "@element-plus/icons-vue";
defineOptions({
name: "缁翠慨妯℃�佹",
});
-const maintainFormRef = ref();
const emits = defineEmits(["ok"]);
-const {
- id,
- visible,
- loading,
- openModal,
- modalOptions,
- handleConfirm,
- closeModal,
-} = useModal({ title: "璁惧缁翠慨" });
+const repairId = ref();
+const visible = ref(false);
+const loading = ref(false);
+const formRef = ref();
+const attachmentFileList = ref([]);
+const ATTACH_MAX_MB = 50;
+
+const userStore = useUserStore();
+
+const rules = {
+ maintenanceName: [{ required: true, message: "璇烽�夋嫨缁翠慨浜�", trigger: "change" }],
+ maintenanceResult: [{ required: true, message: "璇疯緭鍏ョ淮淇粨鏋�", trigger: "blur" }],
+ maintenanceTime: [{ required: true, message: "璇烽�夋嫨缁翠慨鏃ユ湡", trigger: "change" }],
+};
+
+const { form, resetForm } = useFormData({
+ maintenanceName: undefined,
+ maintenanceResult: undefined,
+ maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+ status: 3,
+});
+
+const syncMaintenanceNameFromRow = (row) => {
+ form.maintenanceName = row?.maintenanceName || "";
+};
+
+const beforeAttachmentUpload = (rawFile) => {
+ const okType = ["image/jpeg", "image/jpg", "image/png"].includes(rawFile.type);
+ if (!okType) {
+ ElMessage.error("鍙兘涓婁紶 png / jpg / jpeg 鍥剧墖");
+ return false;
+ }
+ if (rawFile.size > ATTACH_MAX_MB * 1024 * 1024) {
+ ElMessage.error(`鍗曚釜鏂囦欢涓嶈兘瓒呰繃 ${ATTACH_MAX_MB}MB`);
+ return false;
+ }
+ return true;
+};
+
+const clearAttachmentQueue = () => {
+ attachmentFileList.value = [];
+};
+
+const uploadQueuedImages = async (id) => {
+ const files = (attachmentFileList.value || []).map((f) => f.raw).filter(Boolean);
+ for (const file of files) {
+ const fd = new FormData();
+ fd.append("file", file);
+ fd.append("deviceRepairId", String(id));
+ fd.append("fileType", String(REPAIR_FILE_TYPE_MAINTAIN));
+ const res = await uploadRepairFile(fd);
+ if (res.code !== 200) {
+ throw new Error(res.msg || "闄勪欢涓婁紶澶辫触");
+ }
+ }
+};
+
+const setForm = (data) => {
+ syncMaintenanceNameFromRow(data);
+ form.maintenanceResult = data.maintenanceResult;
+ form.maintenanceTime = data.maintenanceTime
+ ? dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss")
+ : dayjs().format("YYYY-MM-DD HH:mm:ss");
+ form.status = 3;
+};
const sendForm = async () => {
- loading.value = true;
- const form = await maintainFormRef.value.getForm();
- const { code } = await addMaintain({ id: id.value, ...form });
- if (code == 200) {
- emits("ok");
- maintainFormRef.value.resetForm();
- closeModal();
+ const valid = await formRef.value?.validate().catch(() => false);
+ if (!valid) return;
+ if (form.maintenanceName !== userStore.nickName) {
+ ElMessage.warning("浠呮寚瀹氱殑缁翠慨浜哄彲杩涜缁翠慨");
+ return;
}
- loading.value = false;
+ loading.value = true;
+ try {
+ const { code, msg } = await addMaintain({ id: repairId.value, ...form });
+ if (code !== 200) {
+ if (msg) ElMessage.error(msg);
+ return;
+ }
+ if (attachmentFileList.value.length) {
+ await uploadQueuedImages(repairId.value);
+ }
+ ElMessage.success("缁翠慨鎴愬姛");
+ clearAttachmentQueue();
+ visible.value = false;
+ emits("ok");
+ } catch (e) {
+ ElMessage.error(e?.message || "淇濆瓨鎴栦笂浼犻檮浠跺け璐�");
+ } finally {
+ loading.value = false;
+ }
+};
+
+const handleCancel = () => {
+ resetForm();
+ clearAttachmentQueue();
+ visible.value = false;
+};
+
+const handleClose = () => {
+ resetForm();
+ clearAttachmentQueue();
+ visible.value = false;
};
const open = async (id, row) => {
- openModal(id);
+ repairId.value = id;
+ clearAttachmentQueue();
+ visible.value = true;
await nextTick();
- maintainFormRef.value.setForm(row);
+ setForm(row);
+ if (row?.maintenanceName && row.maintenanceName !== userStore.nickName) {
+ ElMessage.warning("浠呮寚瀹氱殑缁翠慨浜哄彲杩涜缁翠慨");
+ visible.value = false;
+ }
};
defineExpose({
@@ -55,4 +195,20 @@
});
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.repair-attachment-upload {
+ width: 100%;
+ :deep(.el-upload) {
+ width: 100%;
+ }
+ :deep(.el-upload-dragger) {
+ width: 100%;
+ padding: 20px 16px;
+ }
+}
+.repair-upload-icon {
+ font-size: 42px;
+ color: var(--el-color-primary);
+ margin-bottom: 8px;
+}
+</style>
--
Gitblit v1.9.3